:root { --ink: oklch(21% .02 155); --body: oklch(46% .015 160); --mut: oklch(60% .012 160); --line: oklch(92.5% .006 160); --paper: oklch(100% 0 0); --soft: oklch(97.6% .006 160); --leaf: oklch(52% .14 150); --leaf2: oklch(60% .16 148); --tint: color-mix(in oklch,var(--leaf2) 9%,white); --sun: oklch(84% .16 90); --ring: color-mix(in oklch,var(--leaf2) 28%,transparent); --r: 16px; --sh-1: 0 1px 2px oklch(21% .02 155/.05),0 10px 26px oklch(21% .02 155/.06); --sh-2: 0 2px 4px oklch(21% .02 155/.06),0 26px 62px oklch(21% .02 155/.13); --sh-3: 0 30px 70px oklch(21% .02 155/.22); --max: 1180px; --pad: clamp(18px,4vw,28px); --sp: clamp(60px,8vw,112px); }
* { box-sizing: border-box; margin: 0px; padding: 0px; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; text-size-adjust: 100%; }
body { background: var(--paper); color: var(--body); font: 400 16.5px / 1.6 Inter, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
::selection { background: var(--tint); color: var(--ink); }
:focus-visible { outline: 2px solid var(--leaf2); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
section { padding-block: var(--sp); position: relative; }
h1, h2, h3, h4 { color: var(--ink); font-family: Inter, sans-serif; font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(30px, 4.6vw, 50px); line-height: 1.1; }
h2 { font-size: clamp(24px, 3.1vw, 35px); letter-spacing: -0.022em; line-height: 1.12; }
h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
h4 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
p { text-wrap: pretty; }
.lead { font-size: clamp(16.5px, 1.35vw, 19px); color: var(--body); max-width: 58ch; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--leaf); font-family: Inter, sans-serif; }
.eyebrow::before { content: ""; width: 18px; height: 1.5px; background: currentcolor; border-radius: 2px; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.center .eyebrow::before { display: none; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "ss01"; }
.btn { --bg: var(--leaf2); --fg: white; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--bg); color: var(--fg); border: 0px; cursor: pointer; text-decoration: none; font: 600 14.5px / 1 Inter, sans-serif; letter-spacing: -0.01em; padding: 13px 20px; border-radius: 11px; position: relative; isolation: isolate; transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.16s, background 0.16s; }
.btn::after { content: ""; position: absolute; inset: 0px; border-radius: inherit; z-index: -1; background: linear-gradient(oklch(1 0 0 / 0.22), transparent 60%); }
.btn:hover { transform: translateY(-1.5px); box-shadow: 0 10px 24px var(--ring); }
.btn:active { transform: translateY(0px); }
.btn.lg { padding: 16px 28px; font-size: 16px; border-radius: 13px; }
.btn.ghost { --bg: transparent; --fg: var(--ink); border: 1.5px solid var(--line); backdrop-filter: blur(6px); }
.btn.ghost:hover { border-color: color-mix(in oklch,var(--ink) 22%,transparent); box-shadow: var(--sh-1); }
.btn.ghost::after { display: none; }
.btn.sun { --bg: var(--sun); --fg: oklch(28% .05 90); }
.nav { position: fixed; inset-block-start: 14px; inset-inline: 0px; z-index: 60; pointer-events: none; }
.nav .bar { pointer-events: auto; max-width: var(--max); margin-inline: auto; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-radius: 99px; border: 1px solid color-mix(in oklch,var(--line) 70%,transparent); background: color-mix(in oklch,var(--paper) 72%,transparent); backdrop-filter: blur(18px) saturate(1.5); box-shadow: oklch(0.21 0.02 155 / 0.04) 0px 1px 1px; transition: box-shadow 0.25s, background 0.25s; }
.nav.stuck .bar { box-shadow: var(--sh-1); background: color-mix(in oklch,var(--paper) 88%,transparent); }
.brand { font: 700 19px / 1 Inter, sans-serif; letter-spacing: -0.045em; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 2px; }
.brand i { width: 6px; height: 6px; border-radius: 50%; background: var(--leaf2); font-style: normal; translate: 0px 4px; }
.menu { position: relative; display: flex; gap: 2px; margin-inline: 14px auto; }
.menu a { position: relative; z-index: 1; padding: 9px 14px; border-radius: 99px; text-decoration: none; color: var(--body); font: 500 14.5px / 1 Inter, sans-serif; letter-spacing: -0.01em; transition: color 0.2s; }
.menu a:hover { color: var(--ink); }
.menu a[aria-current] { color: var(--ink); font-weight: 600; }
.marker { position: absolute; z-index: 0; inset-block: 4px; border-radius: 99px; background: var(--soft); border: 1px solid var(--line); opacity: 0; transition: transform 0.34s cubic-bezier(0.2, 0.9, 0.3, 1), width 0.34s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.2s; }
.navcta { display: flex; align-items: center; gap: 8px; }
.sheet { display: none; }
.burger { display: none; width: 40px; height: 40px; border-radius: 99px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; align-items: center; justify-content: center; }
.burger span { display: block; width: 16px; height: 1.6px; background: var(--ink); border-radius: 2px; position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; inset-inline: 0px; height: 1.6px; background: var(--ink); border-radius: 2px; }
.burger span::before { top: -5px; }
.burger span::after { top: 5px; }
@media (max-width: 880px) {
  .menu { display: none; }
  .burger { display: flex; }
  .nav .bar { padding-right: 8px; }
  .nav.open .sheet { display: grid; }
  .sheet { display: none; pointer-events: auto; max-width: var(--max); margin: 8px auto 0px; padding: 10px; border-radius: 22px; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--sh-2); gap: 2px; }
  .sheet a { padding: 13px 16px; border-radius: 14px; text-decoration: none; color: var(--ink); font: 600 16px / 1 Inter, sans-serif; }
  .sheet a:hover { background: var(--soft); }
}
.hero { padding-block: clamp(84px, 8vw, 106px) 0px; position: relative; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0px 0px auto; height: 120%; z-index: -1; background: radial-gradient(70% 55% at 76% 18%,color-mix(in oklch,var(--leaf2) 13%,transparent),transparent 70%),
    radial-gradient(60% 50% at 10% 0%,color-mix(in oklch,var(--sun) 13%,transparent),transparent 65%),
    linear-gradient(180deg,var(--soft),var(--paper) 72%); }
.hero .wrap { display: grid; grid-template-columns: 1fr 1.18fr; gap: clamp(24px, 3.4vw, 56px); align-items: center; padding-bottom: clamp(36px, 4vw, 64px); }
.hero h1 { margin-top: 16px; max-width: 13ch; }
.hero h1 em { font-style: normal; color: var(--leaf); position: relative; white-space: nowrap; }
.hero h1 em::after { content: ""; position: absolute; inset-inline: 0px; bottom: 0.04em; height: 0.16em; z-index: -1; background: var(--sun); opacity: 0.42; border-radius: 3px; transform: scaleX(0); transform-origin: left center; animation: 0.75s cubic-bezier(0.2, 0.9, 0.3, 1) 0.4s 1 normal forwards running ul; }
@keyframes ul { 
  100% { transform: scaleX(1); }
}
.hero .lead { margin-top: 14px; }
.acts { display: flex; gap: 11px; margin-top: 24px; flex-wrap: wrap; }
.under { margin-top: 15px; font-size: 13.5px; color: var(--mut); }
.pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 11px; border-radius: 99px; border: 1px solid var(--line); background: color-mix(in oklch,var(--paper) 70%,transparent); backdrop-filter: blur(10px); font-size: 13px; font-weight: 500; color: var(--body); box-shadow: var(--sh-1); }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--leaf2); font-style: normal; box-shadow: 0 0 0 3px var(--ring); animation: 2.6s ease-in-out 0s infinite normal none running beat; }
@keyframes beat { 
  0%, 100% { box-shadow: 0 0 0 3px var(--ring); }
  50% { box-shadow: transparent 0px 0px 0px 6px; }
}
.stage { position: relative; padding-block: 22px 30px; }
.mon { width: 80%; margin-left: auto; position: relative; z-index: 2; }
.mon .cab { background: linear-gradient(168deg, oklch(0.94 0.004 230), oklch(0.82 0.008 230)); border-radius: 13px; padding: 3px; box-shadow: var(--sh-3); }
.mon .in { background: oklch(0.16 0.01 240); border-radius: 11px; padding: 9px 9px 15px; position: relative; }
.mon .in::after { content: ""; position: absolute; left: 50%; bottom: 4px; translate: -50%; width: 44px; height: 4px; border-radius: 2px; background: oklch(0.24 0.01 240); }
.mon img { width: 100%; height: auto; border-radius: 3px; }
.mon .neck { width: 9%; height: 30px; margin-inline: auto; background: linear-gradient(90deg, oklch(0.76 0.008 230), oklch(0.92 0.005 230) 40%, oklch(0.92 0.005 230) 60%, oklch(0.76 0.008 230)); }
.mon .foot { width: 32%; height: 9px; margin-inline: auto; border-radius: 0px 0px 40px 40px; background: linear-gradient(oklch(0.88 0.006 230), oklch(0.73 0.009 230)); }
.cell { position: absolute; left: 0px; bottom: 14px; width: 24%; max-width: 160px; z-index: 3; background: oklch(0.18 0.02 155); border-radius: 23px; padding: 6px; box-shadow: var(--sh-3); }
.cell .glass { border-radius: 18px; overflow: hidden; background: rgb(0, 0, 0); aspect-ratio: 415 / 900; }
.cell img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.float { position: absolute; z-index: 4; display: flex; align-items: center; gap: 9px; width: max-content; max-width: min(216px, 46%); padding: 9px 13px; border-radius: 13px; border: 1px solid color-mix(in oklch,var(--line) 80%,transparent); background: color-mix(in oklch,var(--paper) 90%,transparent); backdrop-filter: blur(14px); box-shadow: var(--sh-2); }
.float svg { width: 18px; height: 18px; flex: 0 0 auto; stroke: var(--leaf); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.float b { display: block; color: var(--ink); font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.float em { display: block; font-style: normal; color: var(--mut); font-size: 11px; line-height: 1.3; }
.float.f1 { top: -2%; left: 36%; animation: 6s ease-in-out 0s infinite normal none running bob; }
.float.f2 { top: 30%; right: -3%; animation: 7s ease-in-out 0.7s infinite normal none running bob; }
.float.f3 { bottom: 4%; right: 4%; animation: 6.5s ease-in-out 1.3s infinite normal none running bob; }
.float.f3 svg { stroke: oklch(0.7 0.15 85); }
@keyframes bob { 
  0%, 100% { translate: 0px; }
  50% { translate: 0px -7px; }
}
.soft { background: var(--soft); }
.soft::before, .mesh::before { content: ""; position: absolute; inset: 0px; pointer-events: none; background: radial-gradient(60% 50% at 82% 0%,color-mix(in oklch,var(--leaf2) 7%,transparent),transparent 70%); }
.dark { background: oklch(0.19 0.022 155); color: oklch(0.86 0.01 160); }
.dark h2, .dark h3, .dark h4, .dark .num { color: white; }
.dark .lead { color: oklch(0.78 0.012 160); }
.dark .eyebrow { color: oklch(0.78 0.13 148); }
.rule { height: 1px; background: linear-gradient(90deg,transparent,var(--line),transparent); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 34px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.tile4 { padding: 24px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tile4 svg { width: 24px; height: 24px; stroke: var(--leaf); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 12px; }
.tile4 b { display: block; color: var(--ink); font-size: 15.5px; font-weight: 600; letter-spacing: -0.015em; }
.tile4 span { display: block; color: var(--mut); font-size: 13.5px; margin-top: 3px; }
.stats { background: oklch(0.19 0.022 155); color: white; padding-block: 34px; }
.stats .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 22px; text-align: center; }
.stats b { display: block; font-family: Inter, sans-serif; font-weight: 800; font-size: clamp(26px, 2.9vw, 34px); letter-spacing: -0.025em; color: white; font-variant-numeric: tabular-nums; }
.stats small { display: block; font-size: 12.5px; color: oklch(0.72 0.012 160); margin-top: 4px; }
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 42px; }
.b { position: relative; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; grid-column: span 2; isolation: isolate; transition: border-color 0.22s, transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.22s; }
.b::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity 0.25s; background: radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
             color-mix(in oklch,var(--leaf2) 16%,transparent),transparent 62%); }
.b:hover { border-color: color-mix(in oklch,var(--leaf2) 40%,var(--line)); transform: translateY(-2px); box-shadow: var(--sh-1); }
.b:hover::before { opacity: 1; }
.b svg { width: 22px; height: 22px; stroke: var(--leaf); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 12px; }
.b b { display: block; color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.b span { display: block; color: var(--mut); font-size: 13.5px; margin-top: 4px; }
.b.wide { grid-column: span 3; }
.b.tall { grid-row: span 2; }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .b.wide { grid-column: span 2; }
}
.story { display: grid; grid-template-columns: repeat(auto-fit, minmax(286px, 1fr)); gap: 16px; margin-top: 40px; }
.sc { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; box-shadow: var(--sh-1); overflow: hidden; }
.sc .n { position: absolute; top: 16px; right: 20px; font-family: Inter, sans-serif; font-weight: 800; font-size: 36px; letter-spacing: -0.03em; color: color-mix(in oklch,var(--leaf2) 11%,var(--paper)); }
.sc svg { width: 24px; height: 24px; stroke: var(--leaf); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sc .when { display: block; margin-top: 14px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.11em; color: var(--leaf); }
.sc h4 { margin: 8px 0px 7px; font-size: 18.5px; }
.sc p { font-size: 14.5px; }
.sc .fix { display: block; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.laptop { width: 100%; filter: drop-shadow(oklch(0.21 0.02 155 / 0.2) 0px 24px 44px); }
.lid { background: linear-gradient(170deg, oklch(0.94 0.004 230), oklch(0.8 0.008 230)); border-radius: 13px; padding: 3px; }
.bezel { background: oklch(0.13 0.008 240); border-radius: 11px; padding: 9px 9px 17px; position: relative; }
.bezel::before { content: ""; position: absolute; top: 3.5px; left: 50%; translate: -50%; width: 5px; height: 5px; border-radius: 50%; background: oklch(0.26 0.01 240); }
.bezel::after { content: ""; position: absolute; left: 50%; bottom: 5px; translate: -50%; width: 52px; height: 5px; border-radius: 2px; background: oklch(0.2 0.01 240); }
.lid img { width: 100%; height: auto; border-radius: 2px; }
.deck { width: 119%; margin-left: -9.5%; height: 12px; position: relative; border-radius: 0px 0px 10px 10px; background: linear-gradient(oklch(0.88 0.005 230), oklch(0.76 0.008 230) 38%, oklch(0.68 0.01 230)); clip-path: polygon(1.1% 0px, 98.9% 0px, 100% 100%, 0px 100%); }
.deck::before { content: ""; position: absolute; inset: 0px 0px auto; height: 1.5px; background: linear-gradient(90deg, oklch(0.6 0.01 230), oklch(0.84 0.006 230) 12%, oklch(0.84 0.006 230) 88%, oklch(0.6 0.01 230)); }
.deck::after { content: ""; position: absolute; top: 0px; left: 50%; translate: -50%; width: 11%; height: 7px; background: oklch(0.72 0.009 230); border-radius: 0px 0px 40px 40px; }
.kit { display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px, 2.6vw, 34px); margin-top: 44px; flex-wrap: wrap; }
.kit .big { flex: 1 1 520px; max-width: 650px; }
.hand { width: 200px; flex: 0 0 auto; background: oklch(0.18 0.02 155); border-radius: 28px; padding: 8px; box-shadow: var(--sh-3); }
.hand .notch { width: 60px; height: 4px; border-radius: 99px; background: oklch(0.28 0.02 155); margin: 0px auto 8px; }
.hand .glass { border-radius: 21px; overflow: hidden; background: rgb(0, 0, 0); aspect-ratio: 415 / 900; }
.hand img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.kitlab { display: flex; justify-content: center; gap: clamp(14px, 2.6vw, 34px); margin-top: 18px; flex-wrap: wrap; text-align: center; }
.kitlab div { flex: 0 1 200px; }
.kitlab b { display: block; color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.kitlab span { display: block; color: var(--mut); font-size: 13px; margin-top: 3px; }
.kitlab div:first-child { flex: 1 1 520px; max-width: 650px; }
.phones { display: flex; justify-content: center; gap: clamp(12px, 2.4vw, 26px); margin-top: 44px; flex-wrap: wrap; }
.ph1 { width: clamp(134px, 15.5vw, 190px); }
.ph1 .body { background: oklch(0.18 0.02 155); border-radius: 26px; padding: 7px; box-shadow: var(--sh-2); }
.ph1 .glass { border-radius: 19px; overflow: hidden; background: rgb(0, 0, 0); aspect-ratio: 415 / 900; }
.ph1 img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ph1 b { display: block; color: var(--ink); font-size: 14.5px; font-weight: 600; margin-top: 15px; letter-spacing: -0.015em; }
.ph1 span { display: block; color: var(--mut); font-size: 12.5px; margin-top: 2px; }
.ph1:nth-child(2n+1) { translate: 0px -12px; }
@media (max-width: 620px) {
  .ph1:nth-child(2n+1) { translate: 0px; }
}
.split { display: grid; grid-template-columns: 1fr 1.06fr; gap: clamp(28px, 4.6vw, 66px); align-items: center; }
.split.rev > :first-child { order: 2; }
ul.ticks { list-style: none; margin-top: 22px; }
ul.ticks li { position: relative; padding: 13px 0px 13px 31px; border-bottom: 1px solid var(--line); font-size: 15.5px; }
ul.ticks li:last-child { border-bottom: 0px; }
ul.ticks li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 12px; height: 7px; border-left: 2px solid var(--leaf2); border-bottom: 2px solid var(--leaf2); rotate: -45deg; }
ul.ticks b { color: var(--ink); font-weight: 600; }
.reel .bars { display: flex; gap: 5px; margin-top: 20px; }
.reel .bars button { flex: 1 1 0%; height: 4px; border: 0px; padding: 0px; border-radius: 99px; background: var(--line); cursor: pointer; position: relative; overflow: hidden; }
.reel .bars button.done { background: color-mix(in oklch,var(--leaf2) 35%,var(--line)); }
.reel .bars button.now::after { content: ""; position: absolute; inset: 0px; background: var(--leaf2); transform-origin: left center; animation: 2.6s linear 0s 1 normal forwards running fill; }
@keyframes fill { 
  0% { scale: 0 1; }
  100% { scale: 1; }
}
.screen { position: relative; aspect-ratio: 1467 / 812; background: oklch(0.96 0.004 160); border-radius: 2px; overflow: hidden; }
.screen img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.55s; }
.screen img.on { opacity: 1; }
.screen .cap { position: absolute; inset: auto 0px 0px; padding: 34px 18px 14px; display: flex; align-items: flex-end; gap: 12px; background: linear-gradient(transparent, oklch(0.14 0.02 155 / 0.88)); color: white; }
.screen .cap b { font-size: 15px; font-weight: 600; }
.screen .cap span { font-size: 13px; color: oklch(0.84 0.01 160); }
.screen .cap .of { margin-left: auto; font-size: 12px; color: oklch(0.76 0.01 160); font-variant-numeric: tabular-nums; white-space: nowrap; }
.me { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; margin-top: 38px; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 32px; box-shadow: var(--sh-1); text-align: left; }
.me .face { width: 94px; height: 94px; border-radius: 50%; flex: 0 0 auto; border: 1px solid var(--line); background: linear-gradient(135deg,var(--tint),var(--soft)); display: grid; place-items: center; color: var(--leaf); font-size: 12px; font-weight: 700; text-align: center; line-height: 1.25; }
.me q { display: block; quotes: none; color: var(--ink); font-size: clamp(17px, 1.9vw, 22px); font-weight: 500; line-height: 1.45; letter-spacing: -0.02em; }
.me cite { display: block; margin-top: 14px; font-style: normal; font-size: 13.5px; color: var(--mut); }
.me cite b { color: var(--ink); font-weight: 600; }
@media (max-width: 620px) {
  .me { grid-template-columns: 1fr; text-align: center; }
  .me .face { margin-inline: auto; }
}
.road { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 46px; border-top: 2px solid var(--line); }
.rd { padding: 24px 16px 0px; position: relative; }
.rd::before { content: ""; position: absolute; top: -7px; left: 16px; width: 12px; height: 12px; border-radius: 50%; background: var(--leaf2); box-shadow: 0 0 0 4px var(--paper),0 0 0 6px var(--ring); }
.rd b { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.11em; color: var(--leaf); }
.rd h4 { margin: 7px 0px 5px; }
.rd p { font-size: 13.5px; }
.who-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(218px, 1fr)); gap: 14px; margin-top: 36px; }
.wr { border: 1px solid var(--line); border-radius: var(--r); padding: 22px; background: var(--paper); }
.wr b { display: block; color: var(--ink); font-size: 15.5px; font-weight: 600; margin-bottom: 5px; letter-spacing: -0.02em; }
.wr span { color: var(--mut); font-size: 13.5px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 18px; margin-top: 44px; align-items: start; }
.plan { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 30px; box-shadow: var(--sh-1); position: relative; }
.plan.best { border: 1.5px solid var(--leaf2); box-shadow: var(--sh-2); }
.flag { position: absolute; top: -12px; left: 26px; background: var(--leaf2); color: white; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 5px 12px; border-radius: 99px; }
.pn { font-size: 11.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--mut); }
.pp { font-family: Inter, sans-serif; font-weight: 800; font-size: 42px; letter-spacing: -0.03em; color: var(--ink); margin: 10px 0px 2px; font-variant-numeric: tabular-nums; }
.pp small { font-size: 14px; font-weight: 600; color: var(--mut); letter-spacing: 0px; font-family: Inter, sans-serif; }
.pw { font-size: 13px; color: var(--mut); margin-bottom: 20px; }
.plan ul { list-style: none; flex: 1 1 0%; margin-bottom: 24px; }
.plan li { position: relative; padding: 8px 0px 8px 26px; font-size: 14.5px; }
.plan li::before { content: ""; position: absolute; left: 3px; top: 15px; width: 11px; height: 6px; border-left: 2px solid var(--leaf2); border-bottom: 2px solid var(--leaf2); rotate: -45deg; }
.plan .btn { width: 100%; }
.note { margin-top: 22px; font-size: 13.5px; color: var(--mut); }
.faq { max-width: 800px; margin: 40px auto 0px; }
.faq details { border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; background: var(--paper); overflow: hidden; transition: border-color 0.2s; }
.faq details[open] { border-color: color-mix(in oklch,var(--leaf2) 32%,var(--line)); }
.faq summary { display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; list-style: none; color: var(--ink); font: 600 16px / 1.35 Inter, sans-serif; letter-spacing: -0.015em; text-align: left; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; margin-left: auto; width: 11px; height: 11px; flex: 0 0 auto; border-right: 2px solid var(--leaf); border-bottom: 2px solid var(--leaf); rotate: 45deg; translate: 0px -3px; transition: rotate 0.25s; }
.faq details[open] summary::after { rotate: -135deg; translate: 0px 2px; }
.faq p { padding: 0px 20px 20px; font-size: 15px; text-align: left; }
.lead-sec { background: radial-gradient(70% 60% at 85% 10%, oklch(0.44 0.11 152), transparent 70%), linear-gradient(160deg, oklch(0.36 0.09 152), oklch(0.24 0.06 152)); color: white; }
.lead-sec h2 { color: white; }
.lead-sec .lead { color: oklch(0.86 0.02 160); }
.lead-sec .eyebrow { color: var(--sun); }
.lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.lead-grid ul.ticks li { border-bottom-color: oklch(1 0 0 / 0.14); color: oklch(0.86 0.02 160); }
.lead-grid ul.ticks b { color: white; }
.lead-grid ul.ticks li::before { border-color: var(--sun); }
.form { background: oklch(1 0 0 / 0.06); border: 1px solid oklch(1 0 0 / 0.14); border-radius: 20px; padding: 30px; backdrop-filter: blur(10px); }
.form label { display: block; font-size: 12.5px; font-weight: 600; color: oklch(0.82 0.02 160); margin-bottom: 6px; }
.form input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid oklch(1 0 0 / 0.18); background: oklch(1 0 0 / 0.07); color: white; font: 400 15.5px Inter, sans-serif; margin-bottom: 13px; }
.form input::placeholder { color: oklch(1 0 0 / 0.38); }
.form input:focus { outline: 0px; border-color: var(--sun); background: oklch(1 0 0 / 0.11); }
.form .btn { width: 100%; }
.form small { display: block; margin-top: 13px; font-size: 12.5px; color: oklch(1 0 0 / 0.5); text-align: center; }
@media (max-width: 860px) {
  .split, .lead-grid, .hero .wrap { grid-template-columns: 1fr; }
  .split.rev > :first-child { order: 0; }
  .hero .wrap { text-align: center; }
  .hero h1, .hero .lead { margin-inline: auto; }
  .hero .acts { justify-content: center; }
  .hero .under { text-align: center; }
  .mon { width: 88%; margin-inline: auto; }
  .cell { width: 24%; }
  .float { display: none; }
}
footer { background: oklch(0.19 0.022 155); color: oklch(0.72 0.012 160); padding-block: 38px; font-size: 13.5px; }
footer .wrap { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
footer a { color: oklch(0.88 0.01 160); text-decoration: none; }
footer .r { margin-left: auto; }
.till { display: grid; grid-template-columns: 1fr 1.15fr; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--sh-2); background: var(--paper); text-align: left; margin: 44px auto 0px; max-width: 1000px; }
.bside { background: var(--soft); border-right: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; min-height: 440px; }
.bside h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); }
#bill { flex: 1 1 0%; overflow: auto; margin-top: 13px; }
.bl { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 11px 0px; border-bottom: 1px solid var(--line); animation: 0.26s cubic-bezier(0.2, 0.9, 0.3, 1) 0s 1 normal none running drop; }
@keyframes drop { 
  0% { opacity: 0; translate: 0px -6px; }
}
.bl b { display: block; color: var(--ink); font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.bl i { font-style: normal; color: var(--mut); font-size: 12px; }
.bl em { font-style: normal; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.bl .x { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); color: var(--mut); cursor: pointer; font-family: inherit; line-height: 1; }
.none { color: var(--mut); font-size: 14px; text-align: center; padding: 32px 10px; }
.sum { border-top: 2px solid var(--ink); margin-top: 10px; padding-top: 13px; display: flex; justify-content: space-between; align-items: baseline; }
.sum b { font-size: 11.5px; font-weight: 700; letter-spacing: 0.11em; color: var(--mut); }
.sum em { font-style: normal; font-family: Inter, sans-serif; font-weight: 800; font-size: 30px; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pay { margin-top: 13px; width: 100%; }
.sside { padding: 20px; }
.find { width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 13px; font: 400 15px Inter, sans-serif; color: var(--ink); background: var(--paper); }
.find:focus { outline: 0px; border-color: var(--leaf2); box-shadow: 0 0 0 3px var(--ring); }
.goods { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; max-height: 360px; overflow: auto; }
.good { border: 1px solid var(--line); border-radius: 13px; padding: 10px; background: var(--paper); cursor: pointer; text-align: left; font-family: inherit; transition: border-color 0.14s, translate 0.14s; }
.good:hover { border-color: var(--leaf2); translate: 0px -2px; }
.good .sw { height: 44px; border-radius: 9px; margin-bottom: 8px; background: linear-gradient(135deg,var(--tint),var(--soft)); }
.good b { display: block; color: var(--ink); font-size: 12.5px; font-weight: 600; line-height: 1.25; height: 31px; overflow: hidden; }
.good u { display: block; text-decoration: none; color: var(--leaf); font-weight: 700; font-size: 13px; margin-top: 5px; }
.good s { float: right; color: var(--mut); font-size: 10.5px; font-weight: 600; text-decoration: none; padding-top: 3px; }
.tip { margin-top: 16px; font-size: 13.5px; color: var(--mut); text-align: center; }
.tip b { color: var(--ink); }
@media (max-width: 860px) {
  .till { grid-template-columns: 1fr; }
  .bside { border-right: 0px; border-bottom: 1px solid var(--line); min-height: 0px; }
}
.rv { opacity: 0; translate: 0px 22px; transition: opacity 0.6s cubic-bezier(0.2, 0.9, 0.3, 1), translate 0.6s cubic-bezier(0.2, 0.9, 0.3, 1); }
.rv.in { opacity: 1; translate: 0px; }
@supports (animation-timeline:view()) {
  .rv { opacity: 1; translate: 0px; transition: none; animation-duration: auto; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; animation-play-state: running; animation-name: rise; animation-timeline: view(); animation-range: entry 8% cover 26%; }
  .rv.in { animation-play-state: running; }
}
@keyframes rise { 
  0% { opacity: 0; translate: 0px 26px; }
  100% { opacity: 1; translate: 0px; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
  .rv { opacity: 1; translate: 0px; }
  html { scroll-behavior: auto; }
}
.brand { gap: 10px; }
.brand img { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; }
.brand .nm { display: flex; flex-direction: column; line-height: 1; }
.brand .nm b { font: 800 18px / 1 Inter, sans-serif; letter-spacing: -0.03em; color: var(--ink); }
.brand .nm span { font: 600 9.5px / 1 Inter, sans-serif; letter-spacing: 0.17em; text-transform: uppercase; color: var(--leaf); margin-top: 3px; }
.prob { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 16px; margin-top: 42px; }
.pr { position: relative; padding: 26px; border-radius: var(--r); border: 1px solid oklch(1 0 0 / 0.11); background: oklch(1 0 0 / 0.04); }
.pr svg { width: 24px; height: 24px; stroke: oklch(0.72 0.14 40); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pr h4 { margin: 14px 0px 7px; color: white; font-size: 18px; }
.pr p { font-size: 14.5px; color: oklch(0.78 0.012 160); }
.turn { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; margin-top: 34px; padding: 26px 28px; border-radius: var(--r); border: 1px solid oklch(1 0 0 / 0.16); background: oklch(1 0 0 / 0.06); }
.turn .k { font: 700 11.5px / 1 Inter, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(0.28 0.05 90); background: var(--sun); padding: 7px 13px; border-radius: 99px; white-space: nowrap; }
.turn p { color: white; font-size: clamp(16px, 1.6vw, 19px); font-weight: 500; letter-spacing: -0.015em; }
@media (max-width: 620px) {
  .turn { grid-template-columns: 1fr; text-align: left; }
}
.fx { display: grid; gap: 18px; margin-top: 44px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.fcard { display: flex; flex-direction: column; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.22s, border-color 0.22s; }
.fcard:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: color-mix(in oklch,var(--leaf2) 34%,var(--line)); }
.fcard .pic { background: var(--soft); border-bottom: 1px solid var(--line); padding: 16px 16px 0px; overflow: hidden; }
.fcard .pic img { width: 100%; height: auto; border-radius: 8px 8px 0px 0px; border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-bottom: 0px; box-shadow: 0 -1px 0 var(--line),0 18px 34px oklch(21% .02 155/.14); }
.fcard .txt { padding: 20px 22px 24px; }
.fcard .k { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--leaf); }
.fcard .k svg { width: 15px; height: 15px; stroke: currentcolor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fcard h4 { margin: 9px 0px 7px; font-size: 18.5px; }
.fcard p { font-size: 14.5px; }
.fcard.tall .pic { display: flex; justify-content: center; padding-top: 20px; }
.fcard.tall .pic .body { width: 168px; background: oklch(0.18 0.02 155); border-radius: 22px 22px 0px 0px; padding: 7px 7px 0px; }
.fcard.tall .pic .glass { border-radius: 16px 16px 0px 0px; overflow: hidden; background: rgb(0, 0, 0); aspect-ratio: 415 / 760; }
.fcard.tall .pic img { width: 100%; height: 100%; object-fit: cover; object-position: center top; border: 0px; border-radius: 0px; box-shadow: none; }
.prodhead { display: flex; align-items: center; gap: 14px; justify-content: center; flex-wrap: wrap; }
.prodhead .badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--paper); font-size: 12.5px; font-weight: 600; color: var(--ink); box-shadow: var(--sh-1); }
.prodhead .badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--leaf2); font-style: normal; }
.getapp { display: flex; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.store { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 13px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); text-decoration: none; box-shadow: var(--sh-1); transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.16s, border-color 0.16s; }
.store:hover { transform: translateY(-1.5px); box-shadow: var(--sh-2); border-color: color-mix(in oklch,var(--leaf2) 34%,var(--line)); }
.store svg { width: 22px; height: 22px; flex: 0 0 auto; }
.store span { display: flex; flex-direction: column; line-height: 1; }
.store span em { font-style: normal; font-size: 10px; color: var(--mut); letter-spacing: 0.05em; text-transform: uppercase; }
.store span b { font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 3px; letter-spacing: -0.01em; }
.getapp .for { font-size: 12.5px; color: var(--mut); }
.cell .swap { position: relative; }
.cell .swap img { position: absolute; inset: 0px; opacity: 0; transition: opacity 0.6s; }
.cell .swap img.on { opacity: 1; }
.flow { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.fs { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 99px; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--sh-1); }
.fs b { width: 23px; height: 23px; border-radius: 50%; background: var(--tint); color: var(--leaf); display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: 0 0 auto; }
.fs span { font-size: 14px; color: var(--ink); font-weight: 500; }
.fs.on { border-color: var(--leaf2); box-shadow: 0 0 0 3px var(--ring); }
.fs.on b { background: var(--leaf2); color: white; }
.arrow { align-self: center; color: var(--mut); font-size: 16px; }
@media (max-width: 700px) {
  .arrow { display: none; }
}
#slip { position: fixed; inset: 0px; z-index: 80; display: none; place-items: center; padding: 20px; background: oklch(0.14 0.02 155 / 0.62); backdrop-filter: blur(5px); }
#slip.on { display: grid; }
.printer { width: min(330px, 92vw); text-align: center; animation: 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) 0s 1 normal none running pop; }
@keyframes pop { 
  0% { opacity: 0; scale: 0.92; }
}
.ptop { height: 74px; border-radius: 16px 16px 7px 7px; position: relative; background: linear-gradient(oklch(0.32 0.012 250), oklch(0.22 0.012 250)); box-shadow: oklch(0.14 0.02 155 / 0.5) 0px 18px 40px; }
.ptop::before { content: ""; position: absolute; top: 15px; left: 50%; translate: -50%; width: 9px; height: 9px; border-radius: 50%; background: oklch(0.72 0.17 145); box-shadow: oklch(0.72 0.17 145) 0px 0px 10px; }
.pslot { position: absolute; inset: auto 16px 10px; height: 9px; border-radius: 4px; background: oklch(0.1 0.008 250); box-shadow: oklch(0 0 0 / 0.8) 0px 2px 5px inset; }
.paper { width: 86%; margin: -4px auto 0px; background: white; color: oklch(0.24 0.01 250); text-align: left; padding: 16px 16px 22px; font: 12.5px / 1.55 ui-monospace, "SF Mono", Menlo, monospace; clip-path: polygon(0px 0px, 100% 0px, 100% calc(100% - 7px), 94% 100%, 88% calc(100% - 7px), 82% 100%, 76% calc(100% - 7px), 70% 100%, 64% calc(100% - 7px), 58% 100%, 52% calc(100% - 7px), 46% 100%, 40% calc(100% - 7px), 34% 100%, 28% calc(100% - 7px), 22% 100%, 16% calc(100% - 7px), 10% 100%, 4% calc(100% - 7px), 0px 100%); box-shadow: oklch(0.14 0.02 155 / 0.32) 0px 20px 34px; transform-origin: center top; animation: 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.25s 1 normal both running feed; }
@keyframes feed { 
  0% { scale: 1 0; opacity: 0.2; }
  100% { scale: 1; opacity: 1; }
}
.paper h5 { font: 700 15px / 1.2 Inter, sans-serif; color: oklch(0.18 0.01 250); text-align: center; letter-spacing: -0.02em; }
.paper .sub { text-align: center; font-size: 11px; color: oklch(0.48 0.01 250); margin-bottom: 10px; }
.paper .dash { border-top: 1px dashed oklch(0.78 0.005 250); margin: 9px 0px; }
.paper .r { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0px; }
.paper .r span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paper .big { font-weight: 700; font-size: 15px; color: oklch(0.18 0.01 250); }
.paper .ty { text-align: center; margin-top: 10px; font-size: 11px; color: oklch(0.48 0.01 250); }
.after { margin-top: 20px; display: grid; gap: 7px; animation: 0.5s ease 1.5s 1 normal both running lift; }
@keyframes lift { 
  0% { opacity: 0; translate: 0px 10px; }
}
.after div { display: flex; align-items: center; gap: 9px; justify-content: center; color: white; font-size: 13.5px; }
.after svg { width: 16px; height: 16px; stroke: oklch(0.78 0.16 148); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.after .btn { margin: 12px auto 0px; display: inline-flex; }
.fly { position: fixed; z-index: 70; pointer-events: none; border-radius: 11px; background: var(--paper); border: 1px solid var(--leaf2); box-shadow: var(--sh-2); padding: 9px; width: 112px; color: var(--ink); font: 600 12.5px / 1.25 Inter, sans-serif; overflow: hidden; }
.good:active { scale: 0.96; }
.good.zap { border-color: var(--leaf2); box-shadow: 0 0 0 3px var(--ring); }
.sum em.up { animation: 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) 0s 1 normal none running bump; }
@keyframes bump { 
  40% { scale: 1.12; color: var(--leaf); }
}
.beam { position: absolute; inset-inline: 0px; height: 2px; background: var(--leaf2); opacity: 0; box-shadow: 0 0 12px var(--leaf2); }
.good.zap .beam { animation: 0.42s ease-out 0s 1 normal none running scanline; }
@keyframes scanline { 
  0% { top: 4px; opacity: 1; }
  100% { top: 92%; opacity: 0; }
}
.score { margin: 14px 0px 0px; text-align: center; font-size: 13px; color: oklch(0.78 0.012 160); }
.score b { color: var(--sun); }
.mute { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); cursor: pointer; display: grid; place-items: center; }
.mute svg { width: 17px; height: 17px; stroke: var(--mut); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sside { position: relative; }
.who2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.w2 { padding: 26px; border-radius: var(--r); border: 1px solid oklch(1 0 0 / 0.12); background: oklch(1 0 0 / 0.04); }
.w2 .k { font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: oklch(0.78 0.13 148); }
.w2 h4 { margin: 10px 0px 7px; color: white; font-size: 19px; }
.w2 p { font-size: 14.5px; color: oklch(0.78 0.012 160); }
.jobs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; margin-top: 34px; }
.job { padding: 24px; border-radius: var(--r); border: 1px solid oklch(1 0 0 / 0.14); background: oklch(1 0 0 / 0.05); text-align: center; }
.job b { display: block; color: white; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.job span { display: block; color: oklch(0.76 0.012 160); font-size: 14px; margin-top: 5px; }
.job.hard { border-color: oklch(0.62 0.16 40 / 0.5); background: oklch(0.62 0.16 40 / 0.09); }
.job.hard .tagx { display: inline-block; margin-top: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: oklch(0.78 0.15 40); background: oklch(0.62 0.16 40 / 0.15); padding: 4px 10px; border-radius: 99px; }
.jplus { color: oklch(0.7 0.012 160); font-size: 22px; font-weight: 300; }
@media (max-width: 760px) {
  .who2, .jobs { grid-template-columns: 1fr; }
  .jplus { display: none; }
}
.run { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(14px, 2.4vw, 30px); align-items: center; margin-top: 44px; }
.pane { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--sh-1); min-height: 240px; }
.pane .h { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); margin-bottom: 14px; }
.docu { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: var(--soft); font: 12px / 1.5 ui-monospace, Menlo, monospace; color: var(--body); }
.docu .t { font-weight: 700; color: var(--ink); font-family: Inter, sans-serif; font-size: 13px; margin-bottom: 8px; }
.docu .l { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0px; opacity: 0; }
.go .docu .l { animation: 0.4s ease 0s 1 normal both running lineIn; }
.go .docu .l:nth-child(2) { animation-delay: 0.15s; }
.go .docu .l:nth-child(3) { animation-delay: 0.3s; }
.go .docu .l:nth-child(4) { animation-delay: 0.45s; }
.go .docu .l:nth-child(5) { animation-delay: 0.6s; }
@keyframes lineIn { 
  0% { opacity: 0; translate: -8px; }
  100% { opacity: 1; translate: 0px; }
}
.mid { display: grid; place-items: center; gap: 8px; }
.mid .ar { width: 44px; height: 44px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; color: var(--leaf); font-size: 20px; }
.go .mid .ar { animation: 1.6s ease-in-out 0.7s infinite normal none running push; }
@keyframes push { 
  0%, 100% { translate: 0px; }
  50% { translate: 7px; }
}
.mid small { font-size: 11.5px; color: var(--mut); text-align: center; max-width: 14ch; }
.srow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0px; border-bottom: 1px solid var(--line); opacity: 0; }
.srow:last-child { border-bottom: 0px; }
.go .srow { animation: 0.45s ease 0s 1 normal both running lineIn; }
.go .srow:nth-child(2) { animation-delay: 0.95s; }
.go .srow:nth-child(3) { animation-delay: 1.15s; }
.go .srow:nth-child(4) { animation-delay: 1.35s; }
.go .srow:nth-child(5) { animation-delay: 1.55s; }
.srow b { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.srow i { display: block; font-style: normal; font-size: 11.5px; color: var(--mut); }
.srow .up { font-size: 13px; font-weight: 800; color: var(--leaf); background: var(--tint); padding: 4px 9px; border-radius: 99px; white-space: nowrap; }
@media (max-width: 860px) {
  .run { grid-template-columns: 1fr; }
  .mid .ar { rotate: 90deg; }
}
.ads { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: 40px; }
.adbox { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); padding: 22px; box-shadow: var(--sh-1); }
.adscr { border-radius: 12px; overflow: hidden; background: oklch(0.16 0.01 240); aspect-ratio: 16 / 9; position: relative; border: 7px solid oklch(0.22 0.008 240); }
.adscr div { position: absolute; inset: 0px; display: grid; place-items: center; text-align: center; padding: 16px; opacity: 0; transition: opacity 0.6s; color: white; font-weight: 700; letter-spacing: -0.02em; }
.adscr div.on { opacity: 1; }
.adscr b { display: block; font-size: clamp(16px, 2.4vw, 24px); }
.adscr span { display: block; font-size: 12.5px; font-weight: 500; margin-top: 6px; color: oklch(0.82 0.02 160); }
.adscr .a1 { background: linear-gradient(135deg, oklch(0.42 0.14 32), oklch(0.28 0.1 32)); }
.adscr .a2 { background: linear-gradient(135deg, oklch(0.42 0.12 320), oklch(0.28 0.09 320)); }
.adscr .a3 { background: linear-gradient(135deg, oklch(0.4 0.12 230), oklch(0.26 0.09 230)); }
.adscr .a4 { background: linear-gradient(135deg, oklch(0.42 0.13 150), oklch(0.28 0.1 150)); }
.adfoot { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 12.5px; color: var(--mut); }
.adfoot i { width: 8px; height: 8px; border-radius: 50%; background: var(--leaf2); font-style: normal; animation: 2.4s ease-in-out 0s infinite normal none running beat; }
@media (max-width: 860px) {
  .ads { grid-template-columns: 1fr; }
}
html { overflow-x: clip; }
.nav .bar > * { min-width: 0px; }
.brand .nm b, .brand .nm span { white-space: nowrap; }
@media (max-width: 420px) {
  .nav .bar { padding: 7px 7px 7px 12px; gap: 8px; }
  .brand img { width: 26px; height: 26px; }
  .brand .nm b { font-size: 16px; }
  .brand .nm span { font-size: 8.5px; letter-spacing: 0.14em; }
  .navcta .btn { padding: 11px 14px; font-size: 13.5px; }
  .deck { width: 104%; margin-left: -2%; }
  .mon .cab { padding: 2px; }
}
@media (max-width: 700px) {
  .deck { width: 108%; margin-left: -4%; }
  .till .bside, .till .sside { padding: 16px; }
  .goods { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); max-height: 300px; }
  .flow { gap: 8px; }
  .fs { padding: 9px 13px; }
  .fs span { font-size: 13px; }
  .jobs { gap: 12px; }
  .stats .wrap { gap: 16px; }
  .printer { width: min(300px, 90vw); }
  .paper { font-size: 11.5px; padding: 14px 13px 20px; }
}
.kit, .split, .machine, .run { overflow-x: clip; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(16px, 3vw, 34px); align-items: center; margin-top: 46px; }
.vsx { font-size: 26px; color: oklch(0.6 0.012 160); font-weight: 300; }
.card2 { border-radius: 20px; overflow: hidden; border: 1px solid oklch(1 0 0 / 0.12); background: oklch(1 0 0 / 0.04); min-height: 360px; display: flex; flex-direction: column; }
.card2 .cap { padding: 14px 18px; border-bottom: 1px solid oklch(1 0 0 / 0.1); display: flex; align-items: center; gap: 9px; }
.card2 .cap b { color: white; font-size: 14.5px; font-weight: 600; }
.card2 .cap .dotx { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.bad .dotx { background: oklch(0.66 0.18 32); }
.good2 .dotx { background: oklch(0.72 0.17 148); }
.card2 .body2 { flex: 1 1 0%; padding: 16px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; }
.msg { max-width: 84%; padding: 9px 13px; border-radius: 4px 14px 14px; font-size: 13.5px; line-height: 1.4; opacity: 0; background: oklch(1 0 0 / 0.08); color: oklch(0.88 0.01 160); }
.go2 .msg { animation: 0.4s ease 0s 1 normal both running msgIn; }
.go2 .msg:nth-child(1) { animation-delay: 0.1s; }
.go2 .msg:nth-child(2) { animation-delay: 0.55s; }
.go2 .msg:nth-child(3) { animation-delay: 1s; }
.go2 .msg:nth-child(4) { animation-delay: 1.45s; }
.go2 .msg:nth-child(5) { animation-delay: 1.9s; }
.go2 .msg:nth-child(6) { animation-delay: 2.35s; }
@keyframes msgIn { 
  0% { opacity: 0; translate: -10px 6px; scale: 0.96; }
  100% { opacity: 1; translate: 0px; scale: 1; }
}
.msg.me { align-self: flex-end; background: oklch(0.44 0.1 150); color: white; border-top-left-radius: 14px; border-top-right-radius: 4px; }
.msg small { display: block; font-size: 10.5px; opacity: 0.6; margin-top: 3px; }
.hm { margin-top: auto; padding: 11px 13px; border-radius: 12px; background: oklch(0.66 0.18 32 / 0.14); border: 1px solid oklch(0.66 0.18 32 / 0.34); color: oklch(0.84 0.12 32); font-size: 13px; font-weight: 600; opacity: 0; text-align: center; }
.go2 .hm { animation: 0.5s ease 2.8s 1 normal both running msgIn; }
.ord { border-radius: 14px; background: oklch(1 0 0 / 0.06); border: 1px solid oklch(1 0 0 / 0.12); padding: 14px; opacity: 0; }
.go2 .ord { animation: 0.5s ease 1.2s 1 normal both running msgIn; }
.ord .t { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ord .t b { color: white; font-size: 14.5px; }
.ord .t span { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; color: oklch(0.28 0.05 150); background: oklch(0.78 0.16 148); padding: 4px 9px; border-radius: 99px; }
.ol { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0px; font-size: 13px; color: oklch(0.84 0.012 160); border-bottom: 1px solid oklch(1 0 0 / 0.08); }
.ol:last-of-type { border-bottom: 0px; }
.ol i { font-style: normal; color: oklch(0.68 0.012 160); font-size: 11.5px; display: block; }
.okl { margin-top: 12px; display: grid; gap: 7px; }
.okl div { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: oklch(0.8 0.012 160); opacity: 0; }
.go2 .okl div { animation: 0.4s ease 0s 1 normal both running msgIn; }
.go2 .okl div:nth-child(1) { animation-delay: 1.9s; }
.go2 .okl div:nth-child(2) { animation-delay: 2.15s; }
.go2 .okl div:nth-child(3) { animation-delay: 2.4s; }
.okl svg { width: 15px; height: 15px; stroke: oklch(0.78 0.16 148); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.vsline { margin-top: 30px; text-align: center; color: oklch(0.78 0.012 160); font-size: 15px; }
.vsline b { color: white; font-weight: 600; }
@media (max-width: 860px) {
  .vs { grid-template-columns: 1fr; }
  .vsx { display: none; }
}
.bignum { display: grid; place-items: center; gap: 4px; margin-top: 38px; }
.bignum b { font-size: clamp(64px, 11vw, 132px); font-weight: 800; letter-spacing: -0.05em; color: white; line-height: 0.9; font-variant-numeric: tabular-nums; }
.bignum span { color: oklch(0.78 0.012 160); font-size: 15px; }
.bignum .x { display: flex; gap: 26px; margin-top: 22px; flex-wrap: wrap; justify-content: center; }
.bignum .x div { text-align: center; }
.bignum .x b { font-size: clamp(24px, 3vw, 34px); }
.bignum .x span { font-size: 12.5px; }
.tankwrap { display: grid; grid-template-columns: minmax(0px, 340px) minmax(0px, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 52px; }
.tank { position: relative; aspect-ratio: 1 / 1.15; border-radius: 14px 14px 20px 20px; border-width: 6px 3px 3px; border-style: solid; border-color: oklch(0.42 0.02 160); border-image: none; overflow: hidden; background: oklch(0.24 0.02 160); box-shadow: oklch(0.1 0.02 160 / 0.7) 0px 0px 40px inset; }
.water { position: absolute; inset: auto 0px 0px; height: 88%; background: linear-gradient(oklch(0.62 0.13 200), oklch(0.44 0.14 220)); transition: height 1.4s cubic-bezier(0.4, 0, 0.2, 1); }
.water::before { content: ""; position: absolute; inset: -9px 0px auto; height: 18px; border-radius: 50%; background: oklch(0.68 0.12 200); opacity: 0.75; animation: 4.5s ease-in-out 0s infinite normal none running slosh; }
@keyframes slosh { 
  0%, 100% { transform: translateX(-4%) scaleY(1); }
  50% { transform: translateX(4%) scaleY(0.7); }
}
.tank .lbl { position: absolute; inset: auto 0px 12px; text-align: center; color: white; font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; text-shadow: oklch(0.2 0.02 160 / 0.9) 0px 1px 6px; }
.hole { position: absolute; left: 0px; width: 17px; height: 17px; border-radius: 50%; background: oklch(0.18 0.02 160); border: 2px solid oklch(0.66 0.18 32); translate: -50%; box-shadow: oklch(0.66 0.18 32 / 0.6) 0px 0px 0px 0px; cursor: pointer; }
.hole[data-on] { animation: 1.8s ease-out 0s infinite normal none running ping; }
@keyframes ping { 
  0% { box-shadow: oklch(0.66 0.18 32 / 0.55) 0px 0px 0px 0px; }
  100% { box-shadow: oklch(0.66 0.18 32 / 0) 0px 0px 0px 16px; }
}
.hole.h1 { top: 22%; left: 0px; }
.hole.h2 { top: 40%; left: 0px; }
.hole.h3 { top: 58%; left: 0px; }
.hole.h4 { top: 76%; left: 0px; }
.hole.r { left: 100%; }
.drip { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: oklch(0.62 0.13 200); opacity: 0; pointer-events: none; }
.on .drip { animation: 1.5s linear 0s infinite normal none running fall; }
.drip.d2 { animation-delay: 0.4s; }
.drip.d3 { animation-delay: 0.8s; }
.drip.d4 { animation-delay: 1.1s; }
@keyframes fall { 
  0% { opacity: 0; transform: translate(0px, 0px) scale(0.7); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(-26px, 120px) scale(1.25); }
}
.drip.rr { background: oklch(0.62 0.13 200); }
.on .drip.rr { animation: 1.5s linear 0s infinite normal none running fallR; }
@keyframes fallR { 
  0% { opacity: 0; transform: translate(0px, 0px) scale(0.7); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(26px, 120px) scale(1.25); }
}
.leaks { display: grid; gap: 12px; }
.leak { display: grid; grid-template-columns: 38px 1fr; gap: 16px; align-items: start; padding: 18px 20px; border-radius: var(--r); border: 1px solid oklch(1 0 0 / 0.1); background: oklch(1 0 0 / 0.03); cursor: pointer; transition: border-color 0.3s, background 0.3s, translate 0.3s; }
.leak:hover { border-color: oklch(1 0 0 / 0.22); }
.leak.now { border-color: oklch(0.66 0.18 32 / 0.6); background: oklch(0.66 0.18 32 / 0.09); translate: 6px; }
.leak .n { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: oklch(1 0 0 / 0.08); color: oklch(0.8 0.012 160); font-weight: 800; font-size: 14px; }
.leak.now .n { background: oklch(0.66 0.18 32); color: white; }
.leak h4 { color: white; font-size: 17.5px; margin-bottom: 5px; }
.leak p { color: oklch(0.78 0.012 160); font-size: 14px; }
.leak .ex { display: none; margin-top: 11px; padding-top: 11px; border-top: 1px solid oklch(1 0 0 / 0.1); font-size: 13.5px; color: oklch(0.84 0.012 160); }
.leak.now .ex { display: block; animation: 0.4s ease 0s 1 normal both running lift; }
.leak .ex b { color: oklch(0.84 0.14 40); }
.leak .ex .fix { display: block; margin-top: 9px; color: oklch(0.82 0.15 148); }
.leak .ex .fix b { color: oklch(0.84 0.16 148); }
.queue { margin-top: 52px; padding: 28px; border-radius: var(--r); border: 1px solid oklch(1 0 0 / 0.12); background: oklch(1 0 0 / 0.04); }
.qline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; font-size: clamp(17px, 2.2vw, 26px); color: white; font-weight: 700; letter-spacing: -0.02em; }
.qline em { font-style: normal; color: oklch(0.78 0.16 60); }
.qbar { margin-top: 20px; height: 12px; border-radius: 99px; background: oklch(1 0 0 / 0.08); overflow: hidden; }
.qbar i { display: block; height: 100%; width: 0px; border-radius: 99px; background: linear-gradient(90deg, oklch(0.72 0.16 60), oklch(0.62 0.19 32)); }
.go3 .qbar i { animation: 2.4s cubic-bezier(0.3, 0, 0.3, 1) 0.3s 1 normal forwards running grow; }
@keyframes grow { 
  100% { width: 100%; }
}
.qmen { display: flex; gap: 5px; margin-top: 16px; justify-content: center; flex-wrap: wrap; }
.qmen span { width: 11px; height: 24px; border-radius: 5px 5px 2px 2px; background: oklch(1 0 0 / 0.16); opacity: 0; }
.go3 .qmen span { animation: 0.3s ease 0s 1 normal both running popin; }
@keyframes popin { 
  0% { opacity: 0; translate: 0px 8px; }
  100% { opacity: 1; translate: 0px; }
}
.qnote { margin-top: 16px; text-align: center; color: oklch(0.78 0.012 160); font-size: 14.5px; }
.qnote b { color: white; }
@media (max-width: 860px) {
  .tankwrap { grid-template-columns: 1fr; }
  .tank { max-width: 300px; margin-inline: auto; }
}
.center .leak, .center .card, .center .sc, .center .rd, .center .wr, .center .plan, .center .f1, .center .tile4, .center .fcard .txt, .center .ph1, .center .pane, .center .kitlab div, .center .step, .center .gal figcaption, .center .w2 { text-align: left; }
.leak p { margin: 0px; }
.center .leak, .center .card, .center .sc, .center .rd, .center .wr, .center .plan, .center .f1, .center .tile4, .center .fcard .txt, .center .ph1, .center .pane, .center .kitlab div, .center .step, .center .gal figcaption, .center .w2 { text-align: left; }
.leak p { margin: 0px; }
.scenes { display: grid; gap: 18px; margin-top: 46px; }
.scene { display: grid; grid-template-columns: 1fr 54px 1fr; gap: 0px; align-items: stretch; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--paper); box-shadow: var(--sh-1); }
.half { padding: 26px 24px; display: flex; flex-direction: column; gap: 16px; min-height: 208px; }
.half.bad { background: oklch(0.97 0.012 30); }
.half.good { background: oklch(0.97 0.016 150); }
.stag { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 11px; border-radius: 99px; }
.stag.p { background: oklch(0.62 0.19 32 / 0.14); color: oklch(0.46 0.18 32); }
.stag.s { background: oklch(0.58 0.16 150 / 0.16); color: oklch(0.42 0.15 150); }
.sline { font-size: clamp(18px, 2.1vw, 24px); font-weight: 700; letter-spacing: -0.025em; color: var(--ink); line-height: 1.15; }
.sgap { display: grid; place-items: center; background: var(--soft); border-inline: 1px solid var(--line); color: var(--mut); font-size: 19px; }
.viz { margin-top: auto; min-height: 72px; display: flex; align-items: flex-end; gap: 7px; }
.q1 { display: flex; gap: 4px; align-items: flex-end; }
.q1 span { width: 9px; border-radius: 4px 4px 2px 2px; background: oklch(0.62 0.19 32 / 0.5); height: 28px; opacity: 0; }
.on4 .q1 span { animation: 0.22s ease 0s 1 normal both running popin; }
.q2 span { background: oklch(0.58 0.16 150 / 0.6); }
.clock { font-variant-numeric: tabular-nums; font-weight: 800; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.04em; color: oklch(0.46 0.18 32); }
.good .clock { color: oklch(0.42 0.15 150); }
.tagp { position: relative; display: inline-grid; place-items: center; padding: 14px 22px; border-radius: 12px; background: white; border: 1px solid var(--line); box-shadow: var(--sh-1); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 124px; }
.tagp em { position: absolute; inset: 0px; display: grid; place-items: center; font-style: normal; opacity: 0; border-radius: inherit; background: white; }
.on4 .tagp em.f1 { animation: 4.4s steps(1) 0.3s infinite normal none running flip; }
.on4 .tagp em.f2 { animation: 4.4s steps(1) 0.3s infinite normal none running flip2; }
@keyframes flip { 
  0%, 36% { opacity: 1; }
  37%, 100% { opacity: 0; }
}
@keyframes flip2 { 
  0%, 70% { opacity: 0; }
  71%, 100% { opacity: 1; }
}
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chipb { padding: 9px 13px; border-radius: 11px; background: white; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink); box-shadow: var(--sh-1); opacity: 0; }
.on4 .chipb { animation: 0.35s ease 0s 1 normal both running popin; }
.on4 .chipb:nth-child(2) { animation-delay: 0.25s; }
.chipb i { display: block; font-style: normal; font-size: 11px; color: var(--mut); font-weight: 500; }
.sack { width: 74px; height: 62px; border-radius: 8px 8px 14px 14px; background: oklch(0.78 0.05 85); position: relative; border: 1px solid oklch(0.66 0.06 85); }
.sack::before { content: ""; position: absolute; top: -7px; left: 50%; translate: -50%; width: 34px; height: 12px; border-radius: 8px; background: oklch(0.7 0.05 85); }
.beam { position: absolute; left: -14px; right: -14px; height: 3px; border-radius: 2px; background: oklch(0.62 0.19 32); box-shadow: oklch(0.62 0.19 32) 0px 0px 12px; top: 20%; }
.on4 .beam { animation: 1.6s ease-in-out 0s infinite normal none running sweepb; }
@keyframes sweepb { 
  0%, 100% { top: 16%; opacity: 0.4; }
  50% { top: 76%; opacity: 1; }
}
.nope { font-size: 30px; color: oklch(0.52 0.2 32); font-weight: 800; }
.keyp { display: flex; gap: 7px; align-items: center; }
.keyc { width: 48px; height: 48px; border-radius: 12px; background: white; border: 1px solid var(--line); display: grid; place-items: center; font-weight: 800; font-size: 20px; color: var(--ink); box-shadow: var(--sh-1); }
.on4 .keyc { animation: 2.6s ease-in-out 0.4s infinite normal none running press; }
@keyframes press { 
  0%, 86%, 100% { scale: 1; box-shadow: var(--sh-1); }
  90% { scale: 0.92; box-shadow: 0 0 0 4px var(--ring); }
}
.added { font-size: 14px; font-weight: 600; color: oklch(0.42 0.15 150); opacity: 0; }
.on4 .added { animation: 0.3s ease 1.1s 1 normal both running popin; }
.fieldrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fld { padding: 11px 14px; border-radius: 11px; background: white; border: 1px solid var(--line); box-shadow: var(--sh-1); min-width: 112px; }
.fld b { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut); }
.fld span { display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 3px; }
.fld.out span { color: oklch(0.42 0.15 150); }
.on4 .fld.out span { animation: 0.35s ease 1s 1 normal both running popin; }
.calcx { display: grid; place-items: center; width: 62px; height: 76px; border-radius: 10px; background: white; border: 1px solid var(--line); box-shadow: var(--sh-1); font-size: 11px; color: var(--mut); text-align: center; line-height: 1.25; padding: 6px; }
.calcx b { display: block; font-size: 19px; color: oklch(0.52 0.2 32); font-weight: 800; }
.tally { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 40px; flex-wrap: wrap; }
.tally b { font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.tally span { color: var(--mut); font-size: 15px; }
@media (max-width: 820px) {
  .scene { grid-template-columns: 1fr; }
  .sgap { min-height: 44px; border-inline: 0px; border-block: 1px solid var(--line); rotate: 90deg; }
}
.bignum .x b, .bignum .x span { display: block; }
.bignum .x div { min-width: 116px; }
.center .half { text-align: left; }
.leaks.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; }
.leaks.grid2 .leak { cursor: default; translate: 0px; }
.leaks.grid2 .leak.now { translate: 0px; }
.leaks.grid2 .leak .ex { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid oklch(1 0 0 / 0.1); }
@media (max-width: 760px) {
  .leaks.grid2 { grid-template-columns: 1fr; }
}
.people { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.people i { display: block; width: 14px; height: 26px; position: relative; opacity: 0; font-style: normal; }
.people i::before { content: ""; position: absolute; top: 0px; left: 50%; translate: -50%; width: 9px; height: 9px; border-radius: 50%; background: currentcolor; }
.people i::after { content: ""; position: absolute; top: 11px; left: 50%; translate: -50%; width: 14px; height: 15px; border-radius: 6px 6px 3px 3px; background: currentcolor; }
.go3 .people i { animation: 0.3s ease 0s 1 normal both running popin; }
.people .bad2 { color: oklch(0.62 0.19 32 / 0.85); }
.people .ok2 { color: oklch(0.62 0.16 150 / 0.85); }
.leaks.grid2 .leak { border-color: oklch(1 0 0 / 0.12); background: oklch(1 0 0 / 0.035); }
.leaks.grid2 .leak .n { background: oklch(0.62 0.19 32 / 0.18); color: oklch(0.78 0.16 32); }
.leaks.grid2 .leak h4 { font-size: 17px; line-height: 1.25; }
.leaks.grid2 .leak p { font-size: 14px; color: oklch(0.74 0.012 160); }
.leaks.grid2 .leak .fix { color: oklch(0.8 0.15 148); font-size: 13.5px; margin-top: 0px; }
.leaks.grid2 .leak .fix b { color: oklch(0.84 0.16 148); }
.scenes { display: grid; gap: 20px; margin-top: 46px; }
.scene { display: grid; grid-template-columns: 1fr 64px 1fr; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--paper); box-shadow: var(--sh-1); }
.half { padding: 28px 26px; display: flex; flex-direction: column; gap: 18px; min-height: 230px; text-align: left; }
.half.bad { background: oklch(0.976 0.012 28); }
.half.good { background: oklch(0.974 0.016 152); }
.stag { align-self: flex-start; font: 800 10.5px / 1 Inter, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 11px; border-radius: 99px; }
.stag.p { background: oklch(0.62 0.19 30 / 0.14); color: oklch(0.46 0.18 30); }
.stag.s { background: oklch(0.56 0.16 152 / 0.17); color: oklch(0.4 0.15 152); }
.sline { font-size: clamp(17px, 1.9vw, 22px); font-weight: 700; letter-spacing: -0.025em; color: var(--ink); line-height: 1.2; }
.sgap { display: grid; place-items: center; background: var(--soft); border-inline: 1px solid var(--line); color: var(--mut); font-size: 20px; }
.viz { margin-top: auto; min-height: 92px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.clk { font-variant-numeric: tabular-nums; font-weight: 800; font-size: clamp(30px, 3.8vw, 44px); letter-spacing: -0.045em; color: oklch(0.48 0.19 30); line-height: 1; }
.good .clk { color: oklch(0.42 0.15 152); }
.qp { display: flex; gap: 5px; align-items: flex-end; flex-wrap: wrap; max-width: 260px; }
.qp i { width: 13px; height: 24px; position: relative; font-style: normal; opacity: 0; color: oklch(0.6 0.19 30 / 0.8); }
.good .qp i { color: oklch(0.55 0.16 152 / 0.85); }
.qp i::before { content: ""; position: absolute; top: 0px; left: 50%; translate: -50%; width: 8px; height: 8px; border-radius: 50%; background: currentcolor; }
.qp i::after { content: ""; position: absolute; top: 10px; left: 50%; translate: -50%; width: 13px; height: 14px; border-radius: 5px 5px 2px 2px; background: currentcolor; }
.on4 .qp i { animation: 5.6s linear 0s infinite normal none running qin; }
@keyframes qin { 
  0%, 4% { opacity: 0; translate: 0px 6px; }
  10%, 86% { opacity: 1; translate: 0px; }
  94%, 100% { opacity: 0; }
}
.tagp { position: relative; display: grid; place-items: center; min-width: 132px; padding: 16px 22px; border-radius: 14px; background: white; border: 1px solid var(--line); box-shadow: var(--sh-1); font-weight: 800; font-size: 28px; letter-spacing: -0.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.tagp em { position: absolute; inset: 0px; display: grid; place-items: center; font-style: normal; background: white; border-radius: inherit; opacity: 0; }
.on4 .tagp em.v2 { animation: 5.4s steps(1) 0s infinite normal none running sw1; }
.on4 .tagp em.v3 { animation: 5.4s steps(1) 0s infinite normal none running sw2; }
@keyframes sw1 { 
  0%, 32% { opacity: 0; }
  33%, 65% { opacity: 1; }
  66%, 100% { opacity: 0; }
}
@keyframes sw2 { 
  0%, 65% { opacity: 0; }
  66%, 100% { opacity: 1; }
}
.quiet { font-size: 30px; color: oklch(0.52 0.2 30); font-weight: 800; opacity: 0; }
.on4 .quiet { animation: 5.4s ease-in-out 0s infinite normal none running blinkq; }
@keyframes blinkq { 
  0%, 30% { opacity: 0; }
  40%, 60% { opacity: 1; }
  70%, 100% { opacity: 0; }
}
.lots { display: flex; gap: 10px; flex-wrap: wrap; }
.lot { padding: 11px 15px; border-radius: 12px; background: white; border: 1px solid var(--line); box-shadow: var(--sh-1); opacity: 0; }
.lot b { display: block; font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.lot i { display: block; font-style: normal; font-size: 11px; color: var(--mut); margin-top: 2px; }
.on4 .lot { animation: 5.4s ease-in-out 0s infinite normal none running lotin; }
.on4 .lot:nth-child(2) { animation-delay: 0.5s; }
@keyframes lotin { 
  0%, 6% { opacity: 0; translate: 0px 10px; }
  14%, 88% { opacity: 1; translate: 0px; }
  96%, 100% { opacity: 0; }
}
.sack { position: relative; width: 78px; height: 66px; border-radius: 9px 9px 16px 16px; background: oklch(0.8 0.055 85); border: 1px solid oklch(0.66 0.07 85); }
.sack::before { content: ""; position: absolute; top: -8px; left: 50%; translate: -50%; width: 36px; height: 13px; border-radius: 9px; background: oklch(0.72 0.055 85); }
.beam { position: absolute; left: -18px; right: -18px; height: 3px; border-radius: 2px; background: oklch(0.58 0.2 30); box-shadow: oklch(0.58 0.2 30) 0px 0px 14px; }
.on4 .beam { animation: 2.3s ease-in-out 0s infinite normal none running scan; }
@keyframes scan { 
  0%, 100% { top: 8%; opacity: 0.35; }
  50% { top: 82%; opacity: 1; }
}
.nope { font-size: 34px; font-weight: 800; color: oklch(0.52 0.2 30); opacity: 0; }
.on4 .nope { animation: 2.3s ease-in-out 0s infinite normal none running blinkq; }
.keyc { width: 56px; height: 56px; border-radius: 14px; background: white; border: 1px solid var(--line); display: grid; place-items: center; font-weight: 800; font-size: 23px; color: var(--ink); box-shadow: var(--sh-1); }
.on4 .keyc { animation: 3.4s ease-in-out 0s infinite normal none running press; }
@keyframes press { 
  0%, 20%, 100% { scale: 1; box-shadow: var(--sh-1); }
  26% { scale: 0.9; box-shadow: 0 0 0 5px var(--ring); }
  34% { scale: 1; }
}
.addrow { padding: 11px 15px; border-radius: 12px; background: white; border: 1px solid var(--line); box-shadow: var(--sh-1); opacity: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.addrow i { display: block; font-style: normal; font-size: 11.5px; color: var(--mut); font-weight: 500; margin-top: 2px; }
.on4 .addrow { animation: 3.4s ease-in-out 0.4s infinite normal none running lotin; }
.calcx { display: grid; place-items: center; gap: 3px; width: 72px; height: 88px; border-radius: 12px; background: white; border: 1px solid var(--line); box-shadow: var(--sh-1); font-size: 11px; color: var(--mut); }
.calcx b { font-size: 24px; font-weight: 800; color: oklch(0.52 0.2 30); }
.on4 .calcx b { animation: 2.2s ease-in-out 0s infinite normal none running blinkq; }
.fld { padding: 12px 16px; border-radius: 12px; background: white; border: 1px solid var(--line); box-shadow: var(--sh-1); min-width: 122px; }
.fld b { display: block; font: 800 10px / 1 Inter, sans-serif; letter-spacing: 0.11em; text-transform: uppercase; color: var(--mut); }
.fld span { display: block; font-size: 22px; font-weight: 800; letter-spacing: -0.035em; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 4px; }
.fld.out { border-color: oklch(0.6 0.15 152 / 0.45); }
.fld.out span { color: oklch(0.42 0.15 152); opacity: 0; }
.on4 .fld.out span { animation: 4.2s ease-in-out 0.9s infinite normal none running lotin; }
.eq { color: var(--mut); font-size: 19px; font-weight: 700; }
.tally { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 42px; flex-wrap: wrap; }
.tally b { font-size: clamp(32px, 4vw, 48px); font-weight: 800; letter-spacing: -0.045em; color: var(--ink); font-variant-numeric: tabular-nums; }
.tally span { color: var(--mut); font-size: 15px; }
@media (max-width: 820px) {
  .scene { grid-template-columns: 1fr; }
  .sgap { min-height: 46px; border-inline: 0px; border-block: 1px solid var(--line); rotate: 90deg; }
}
:root { --r: 24px; --edge: 0 0 0 1px oklch(62% .012 160/.13); --inner: inset 0 1px 0 oklch(100% 0 0/.85); --drop: 0 1px 2px oklch(21% .02 155/.04),0 10px 24px oklch(21% .02 155/.07),
         0 28px 60px oklch(21% .02 155/.06); --dropup: 0 2px 4px oklch(21% .02 155/.05),0 18px 40px oklch(21% .02 155/.12),
           0 40px 80px oklch(21% .02 155/.09); }
.card, .fcard, .sc, .plan, .wr, .f1, .b, .scene, .till, .adbox, .me, .pane, .faq details, .tiles, .reel .laptop { box-shadow: var(--edge),var(--inner),var(--drop); border-radius: var(--r); background-image: linear-gradient(oklch(1 0 0), oklch(0.99 0.004 160)); border: 0px !important; }
.scene, .till, .tiles { border-radius: 26px; overflow: hidden; }
.card:hover, .fcard:hover, .b:hover, .plan:hover { box-shadow: 0 0 0 1px color-mix(in oklch,var(--leaf2) 30%,transparent),var(--inner),var(--dropup); transform: translateY(-3px); }
.plan.best { box-shadow: 0 0 0 1.5px var(--leaf2),var(--inner),var(--dropup); }
.lot, .addrow, .fld, .keyc, .calcx, .tagp, .chipb { border: 0px !important; box-shadow: var(--edge),var(--inner),0 6px 16px oklch(21% .02 155/.08) !important; }
.sgap { border-inline: 0px; box-shadow: oklch(0.62 0.012 160 / 0.1) 1px 0px 0px inset, oklch(0.62 0.012 160 / 0.1) -1px 0px 0px inset; }
.half.bad { background-image: linear-gradient(oklch(0.984 0.012 28), oklch(0.966 0.018 28)); }
.half.good { background-image: linear-gradient(oklch(0.982 0.016 152), oklch(0.964 0.024 152)); }
.dark .w2, .dark .leak, .dark .turn, .dark .queue, .dark .card2, .dark .pr { border-radius: var(--r); background-image: linear-gradient(oklch(1 0 0 / 0.065), oklch(1 0 0 / 0.03)); box-shadow: oklch(1 0 0 / 0.09) 0px 0px 0px 1px, oklch(1 0 0 / 0.08) 0px 1px 0px inset, oklch(0.1 0.02 155 / 0.4) 0px 18px 40px; border: 0px !important; }
.stats, footer { background-image: linear-gradient(oklch(0.21 0.024 155), oklch(0.17 0.022 155)); }
.loosewrap { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: clamp(26px, 4vw, 60px); align-items: center; margin-top: 46px; }
.rig { position: relative; padding: 34px 24px 26px; border-radius: 26px; background-image: linear-gradient(oklch(0.99 0.004 160), oklch(0.966 0.008 160)); box-shadow: var(--edge),var(--inner),var(--drop); }
.pour { position: absolute; top: 26px; left: 50%; translate: -50%; width: 3px; height: 0px; border-radius: 3px; background: linear-gradient(transparent, oklch(0.84 0.05 85)); }
.go5 .pour { animation: 6s ease-in-out 0s infinite normal none running pourit; }
@keyframes pourit { 
  0%, 8% { height: 0px; opacity: 0; }
  14% { opacity: 1; }
  44% { height: 66px; opacity: 1; }
  50%, 100% { height: 0px; opacity: 0; }
}
.heap { width: 116px; height: 0px; margin: 0px auto; border-radius: 60px 60px 6px 6px; background: linear-gradient(oklch(0.88 0.045 85), oklch(0.78 0.06 85)); }
.go5 .heap { animation: 6s ease-in-out 0s infinite normal none running heapup; }
@keyframes heapup { 
  0%, 12% { height: 0px; }
  46%, 88% { height: 34px; }
  96%, 100% { height: 0px; }
}
.pan { width: 190px; height: 12px; margin: 0px auto; border-radius: 4px; background: linear-gradient(oklch(0.86 0.008 230), oklch(0.72 0.01 230)); box-shadow: oklch(0.64 0.012 230) 0px 3px 0px; }
.stem { width: 16px; height: 16px; margin: 0px auto; background: oklch(0.72 0.01 230); }
.base { width: 150px; height: 66px; margin: 0px auto; border-radius: 10px 10px 16px 16px; background: linear-gradient(oklch(0.32 0.012 250), oklch(0.22 0.012 250)); display: grid; place-items: center; box-shadow: oklch(0.21 0.02 155 / 0.3) 0px 14px 26px; }
.lcd { min-width: 116px; padding: 9px 12px; border-radius: 7px; background: oklch(0.26 0.06 150); color: oklch(0.86 0.19 150); font: 800 21px / 1 ui-monospace, Menlo, monospace; text-align: right; letter-spacing: -0.02em; text-shadow: oklch(0.76 0.19 150 / 0.65) 0px 0px 10px; }
.bt { position: absolute; top: 50%; right: -15px; width: 34px; height: 34px; border-radius: 50%; background: oklch(0.52 0.16 255); display: grid; place-items: center; color: white; font-weight: 800; font-size: 15px; box-shadow: oklch(0.52 0.16 255 / 0.5) 0px 0px 0px 0px; }
.go5 .bt { animation: 2.2s ease-out 0s infinite normal none running btping; }
@keyframes btping { 
  0% { box-shadow: oklch(0.52 0.16 255 / 0.55) 0px 0px 0px 0px; }
  100% { box-shadow: oklch(0.52 0.16 255 / 0) 0px 0px 0px 18px; }
}
.steps3 { display: grid; gap: 12px; }
.s3 { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; padding: 18px 20px; border-radius: 18px; background-image: linear-gradient(oklch(1 0 0), oklch(0.99 0.004 160)); box-shadow: var(--edge),var(--inner),0 8px 20px oklch(21% .02 155/.06); opacity: 0.45; transition: opacity 0.4s, transform 0.4s; }
.s3.live { opacity: 1; transform: translateX(5px); box-shadow: 0 0 0 1px color-mix(in oklch,var(--leaf2) 34%,transparent),var(--inner),var(--dropup); }
.s3 b { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: var(--soft); color: var(--mut); font-weight: 800; font-size: 14px; }
.s3.live b { background: var(--leaf2); color: white; }
.s3 h4 { font-size: 17px; margin-bottom: 3px; }
.s3 p { font-size: 14px; }
.s3 .say { display: inline-block; margin-top: 9px; padding: 7px 12px; border-radius: 999px; background: var(--tint); color: var(--leaf); font-size: 13px; font-weight: 700; }
.billpop { margin-top: 16px; padding: 14px 18px; border-radius: 16px; opacity: 0; background-image: linear-gradient(oklch(1 0 0), oklch(0.99 0.004 160)); box-shadow: var(--edge),var(--inner),var(--drop); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.go5 .billpop { animation: 6s ease-in-out 2.4s infinite normal none running lotin; }
.billpop b { font-size: 15px; color: var(--ink); }
.billpop i { display: block; font-style: normal; font-size: 12px; color: var(--mut); margin-top: 2px; }
.billpop em { font-style: normal; font-size: 21px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.costrow { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(14px, 2.4vw, 30px); align-items: center; margin-top: 46px; }
.costcard { padding: 26px; border-radius: 22px; text-align: center; background-image: linear-gradient(oklch(1 0 0), oklch(0.99 0.004 160)); box-shadow: var(--edge),var(--inner),var(--drop); }
.costcard.bad2 { background-image: linear-gradient(oklch(0.984 0.012 28), oklch(0.966 0.018 28)); }
.costcard .pics { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.costcard .pics span { width: 26px; height: 22px; border-radius: 4px 4px 7px 7px; background: linear-gradient(oklch(0.34 0.012 250), oklch(0.24 0.012 250)); }
.costcard.bad2 .pics span { opacity: 0.85; }
.costcard b { display: block; font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -0.025em; }
.costcard span.sub2 { display: block; color: var(--mut); font-size: 13.5px; margin-top: 4px; }
.costx { font-size: 22px; color: var(--mut); font-weight: 300; }
@media (max-width: 860px) {
  .loosewrap, .costrow { grid-template-columns: 1fr; }
  .costx { display: none; }
}
.playr { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.playr .body { width: min(252px, 70vw); background: oklch(0.16 0.02 155); border-radius: 30px; padding: 8px; box-shadow: oklch(0.21 0.02 155 / 0.1) 0px 2px 4px, oklch(0.21 0.02 155 / 0.26) 0px 26px 60px; }
.playr .glass { position: relative; border-radius: 23px; overflow: hidden; background: rgb(0, 0, 0); aspect-ratio: 415 / 900; }
.playr img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; transition: opacity 0.45s; }
.playr img.on { opacity: 1; }
.cap2 { text-align: center; min-height: 46px; }
.cap2 b { display: block; font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.cap2 span { display: block; font-size: 13.5px; color: var(--mut); margin-top: 3px; }
.dots2 { display: flex; gap: 6px; }
.dots2 i { width: 26px; height: 3px; border-radius: 99px; background: var(--line); display: block; overflow: hidden; position: relative; font-style: normal; }
.dots2 i.on::after { content: ""; position: absolute; inset: 0px; background: var(--leaf2); transform-origin: left center; animation: 2.4s linear 0s 1 normal forwards running fill2; }
@keyframes fill2 { 
  0% { scale: 0 1; }
  100% { scale: 1; }
}
.dots2 i.done { background: color-mix(in oklch,var(--leaf2) 40%,var(--line)); }
.hw { display: grid; grid-template-columns: 1fr 64px 1fr; gap: 0px; margin-top: 44px; border-radius: 26px; overflow: hidden; box-shadow: var(--edge),var(--inner),var(--drop); }
.hwside { padding: 30px 26px; display: flex; flex-direction: column; gap: 18px; min-height: 300px; }
.hwside.old { background-image: linear-gradient(oklch(0.984 0.012 28), oklch(0.964 0.018 28)); }
.hwside.new { background-image: linear-gradient(oklch(0.982 0.016 152), oklch(0.962 0.024 152)); }
.hwh { font-size: clamp(17px, 1.9vw, 21px); font-weight: 700; letter-spacing: -0.025em; color: var(--ink); line-height: 1.2; }
.hwsub { font-size: 13.5px; color: var(--mut); }
.pairs { display: flex; gap: clamp(10px, 2.2vw, 22px); justify-content: center; align-items: center; flex-wrap: wrap; margin-top: auto; min-height: 186px; }
.pair { position: relative; display: grid; place-items: center; width: 98px; height: 120px; opacity: 0; }
.go6 .pair { animation: 0.4s ease 0s 1 normal both running popin; }
.go6 .pair:nth-child(2) { animation-delay: 0.16s; }
.go6 .pair:nth-child(3) { animation-delay: 0.32s; }
.pair .ring2 { position: absolute; top: 34px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid oklch(0.62 0.19 30 / 0.45); opacity: 0; }
.go6 .pair .ring2 { animation: 3s ease-out 0s infinite normal none running wave2; }
.go6 .pair:nth-child(2) .ring2 { animation-delay: 0.6s; }
.go6 .pair:nth-child(3) .ring2 { animation-delay: 1.2s; }
@keyframes wave2 { 
  0% { scale: 1; opacity: 0.7; }
  100% { scale: 2.2; opacity: 0; }
}
.pair .mini { position: absolute; top: 26px; z-index: 2; width: 48px; height: 36px; border-radius: 7px 7px 10px 10px; background: linear-gradient(oklch(0.34 0.012 250), oklch(0.23 0.012 250)); box-shadow: oklch(0.21 0.02 155 / 0.26) 0px 8px 18px; }
.pair .mini::before { content: ""; position: absolute; top: -6px; left: 50%; translate: -50%; width: 40px; height: 5px; border-radius: 3px; background: oklch(0.76 0.01 230); }
.pair .mini::after { content: ""; position: absolute; inset: auto 8px 6px; height: 9px; border-radius: 3px; background: oklch(0.4 0.07 150); }
.pair .ph2 { position: absolute; top: 0px; right: 4px; z-index: 3; width: 24px; height: 42px; border-radius: 6px; background: oklch(0.18 0.02 155); padding: 2.5px; box-shadow: oklch(0.21 0.02 155 / 0.24) 0px 6px 14px; }
.pair .ph2 i { display: block; height: 100%; border-radius: 4px; background: oklch(0.94 0.01 160); font-style: normal; }
.go6 .pair .ph2 i { animation: 3s ease-in-out 0s infinite normal none running litred; }
.go6 .pair:nth-child(2) .ph2 i { animation-delay: 0.6s; }
.go6 .pair:nth-child(3) .ph2 i { animation-delay: 1.2s; }
@keyframes litred { 
  0%, 70%, 100% { background: oklch(0.94 0.01 160); }
  20%, 50% { background: oklch(0.72 0.17 30); }
}
.rupee { position: absolute; bottom: 4px; font-size: 12.5px; font-weight: 800; color: oklch(0.5 0.19 30); }
.hub { position: relative; margin-top: auto; height: 186px; display: grid; place-items: center; }
.hub .ring { position: absolute; width: 76px; height: 76px; border-radius: 50%; border: 2px solid oklch(0.52 0.16 255 / 0.5); opacity: 0; }
.go6 .hub .ring { animation: 3s ease-out 0s infinite normal none running wave; }
.go6 .hub .ring:nth-child(2) { animation-delay: 1s; }
.go6 .hub .ring:nth-child(3) { animation-delay: 2s; }
@keyframes wave { 
  0% { scale: 1; opacity: 0.75; }
  100% { scale: 3.1; opacity: 0; }
}
.hubscale { position: relative; z-index: 2; width: 74px; height: 54px; border-radius: 9px 9px 13px 13px; background: linear-gradient(oklch(0.32 0.012 250), oklch(0.21 0.012 250)); box-shadow: oklch(0.21 0.02 155 / 0.3) 0px 10px 22px; display: grid; place-items: end center; padding-bottom: 7px; }
.hubscale::before { content: ""; position: absolute; top: -9px; left: 50%; translate: -50%; width: 62px; height: 7px; border-radius: 4px; background: oklch(0.78 0.01 230); }
.hubscale span { width: 46px; height: 13px; border-radius: 3px; background: oklch(0.3 0.07 150); color: oklch(0.86 0.19 150); font: 800 9px / 13px ui-monospace, Menlo, monospace; text-align: center; }
.pods { position: absolute; inset: 0px; }
.pod { position: absolute; width: 30px; height: 52px; border-radius: 7px; background: oklch(0.18 0.02 155); padding: 3px; box-shadow: oklch(0.21 0.02 155 / 0.22) 0px 6px 14px; opacity: 0.4; transition: opacity 0.3s, scale 0.3s; }
.pod i { display: block; height: 100%; border-radius: 5px; background: oklch(0.94 0.01 160); font-style: normal; }
.pod.lit { opacity: 1; scale: 1.12; }
.pod.lit i { background: oklch(0.78 0.16 150); }
.pod.p1 { top: 6px; left: 12%; }
.pod.p2 { top: 6px; right: 12%; }
.pod.p3 { bottom: 6px; left: 12%; }
.pod.p4 { bottom: 6px; right: 12%; }
.hubnote { text-align: center; font-size: 13px; color: var(--leaf); font-weight: 700; margin-top: 6px; }
@media (max-width: 860px) {
  .hw { grid-template-columns: 1fr; }
  .hw .sgap { min-height: 46px; border-inline: 0px; rotate: 90deg; }
}
.mrg { display: grid; grid-template-columns: minmax(0px, 1.15fr) minmax(0px, 0.85fr); gap: clamp(26px, 4vw, 54px); align-items: center; margin-top: 40px; }
.mwhy { display: grid; gap: 10px; }
.mw { display: grid; grid-template-columns: 28px 1fr; gap: 13px; align-items: center; padding: 15px 18px; border-radius: 16px; background-image: linear-gradient(oklch(1 0 0), oklch(0.99 0.004 160)); box-shadow: var(--edge),var(--inner),0 6px 16px oklch(21% .02 155/.05); }
.mw i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: var(--tint); color: var(--leaf); font-style: normal; font-weight: 800; font-size: 12.5px; }
.mw h4 { font-size: 15.5px; letter-spacing: -0.02em; }
.mw.win { background-image: linear-gradient(oklch(0.976 0.018 152), oklch(0.96 0.024 152)); }
.mw.win i { background: var(--leaf2); color: white; }
.bstage { position: relative; padding: 38px 26px 30px; min-height: 430px; display: flex; flex-direction: column; justify-content: center; border-radius: 26px; background-image: linear-gradient(oklch(0.99 0.004 160), oklch(0.964 0.008 160)); box-shadow: var(--edge),var(--inner),var(--drop); }
.pkts { display: flex; justify-content: center; align-items: flex-start; gap: clamp(26px, 6vw, 70px); position: relative; }
.pkt { width: 134px; display: grid; justify-items: center; gap: 10px; position: relative; }
.bag { width: 110px; height: 122px; border-radius: 9px 9px 13px 13px; position: relative; background: linear-gradient(165deg, oklch(0.62 0.17 32), oklch(0.46 0.16 32)); box-shadow: oklch(0.21 0.02 155 / 0.26) 0px 14px 28px; }
.bag::before { content: ""; position: absolute; top: -8px; left: 50%; translate: -50%; width: 64px; height: 14px; border-radius: 7px 7px 2px 2px; background: oklch(0.54 0.16 32); }
.bag span { position: absolute; inset: auto 0px 40px; text-align: center; color: white; font: 800 13px / 1.25 Inter, sans-serif; letter-spacing: -0.01em; }
.bcode { width: 112px; height: 40px; border-radius: 7px; background: white; display: grid; place-items: center; box-shadow: var(--edge),0 4px 10px oklch(21% .02 155/.08); padding: 5px 7px; }
.bars { width: 100%; height: 19px; background: repeating-linear-gradient(90deg, oklch(0.2 0.01 250) 0px, oklch(0.2 0.01 250) 2px, transparent 2px, transparent 4px, oklch(0.2 0.01 250) 4px, oklch(0.2 0.01 250) 5px, transparent 5px, transparent 8px, oklch(0.2 0.01 250) 8px, oklch(0.2 0.01 250) 11px, transparent 11px, transparent 13px); }
.pkt.two .bars { background: repeating-linear-gradient(90deg, oklch(0.2 0.01 250) 0px, oklch(0.2 0.01 250) 3px, transparent 3px, transparent 5px, oklch(0.2 0.01 250) 5px, oklch(0.2 0.01 250) 6px, transparent 6px, transparent 10px, oklch(0.2 0.01 250) 10px, oklch(0.2 0.01 250) 12px, transparent 12px, transparent 14px); }
.bnum { font: 700 10px / 1 ui-monospace, Menlo, monospace; color: var(--mut); margin-top: 3px; letter-spacing: 0.02em; }
.rdr { position: absolute; top: 4px; width: 134px; height: 3px; border-radius: 2px; left: 0px; background: oklch(0.58 0.2 30); box-shadow: oklch(0.58 0.2 30) 0px 0px 16px; opacity: 0; }
.go7 .rdr { animation: 6s ease-in-out 0s infinite normal none running readbeam; }
@keyframes readbeam { 
  0% { opacity: 0; transform: translateX(0px) translateY(0px); }
  4% { opacity: 1; transform: translateX(0px) translateY(0px); }
  12% { opacity: 1; transform: translateX(0px) translateY(146px); }
  16% { opacity: 0; transform: translateX(0px) translateY(146px); }
  20% { opacity: 0; transform: translateX(var(--gap,168px)) translateY(0); }
  24% { opacity: 1; transform: translateX(var(--gap,168px)) translateY(0); }
  32% { opacity: 1; transform: translateX(var(--gap,168px)) translateY(146px); }
  36%, 100% { opacity: 0; transform: translateX(var(--gap,168px)) translateY(146px); }
}
.oops { display: block; margin: 30px auto 0px; width: max-content; font-size: 12px; font-weight: 800; padding: 7px 15px; border-radius: 999px; background: oklch(0.6 0.19 30); color: white; opacity: 0; box-shadow: oklch(0.6 0.19 30 / 0.35) 0px 8px 16px; white-space: nowrap; }
.go7 .oops { animation: 6s ease-in-out 0s infinite normal none running oopsin; }
@keyframes oopsin { 
  0%, 36% { opacity: 0; }
  42%, 56% { opacity: 1; }
  62%, 100% { opacity: 0; }
}
.oops.ok3 { background: var(--leaf2); box-shadow: 0 8px 16px var(--ring); }
.go7 .oops.ok3 { animation: 6s ease-in-out 0s infinite normal none running oopsok; }
@keyframes oopsok { 
  0%, 66% { opacity: 0; }
  72%, 94% { opacity: 1; }
  100% { opacity: 0; }
}
.recs { display: flex; justify-content: center; align-items: flex-start; gap: 18px; margin-top: 14px; min-height: 128px; position: relative; flex-wrap: nowrap; }
.rec { width: 186px; padding: 15px 17px; border-radius: 14px; text-align: left; opacity: 0; background-image: linear-gradient(oklch(1 0 0), oklch(0.99 0.004 160)); box-shadow: var(--edge),var(--inner),0 8px 18px oklch(21% .02 155/.09); }
.rec b { display: block; font-size: 12.5px; color: var(--ink); font-weight: 700; }
.rec i { display: block; font: 600 9.5px / 1 ui-monospace, Menlo, monospace; color: var(--mut); margin-top: 4px; }
.rec em { display: inline-block; margin-top: 9px; font-style: normal; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: oklch(0.62 0.19 30 / 0.13); color: oklch(0.46 0.18 30); }
.go7 .rec.r1 { animation: 6s ease-in-out 0s infinite normal none running recA; }
.go7 .rec.r2 { animation: 6s ease-in-out 0s infinite normal none running recB; }
@keyframes recA { 
  0%, 12% { opacity: 0; translate: 0px 10px; }
  18%, 58% { opacity: 1; translate: 0px; }
  64%, 100% { opacity: 0; translate: 0px -8px; }
}
@keyframes recB { 
  0%, 32% { opacity: 0; translate: 0px 10px; }
  38%, 58% { opacity: 1; translate: 0px; }
  64%, 100% { opacity: 0; translate: 0px -8px; }
}
.rec.one2 { position: absolute; left: 50%; top: 0px; translate: -50%; width: 252px; opacity: 0; box-shadow: 0 0 0 2px var(--leaf2),var(--inner),var(--dropup); }
.rec.one2 em { background: oklch(0.52 0.16 150 / 0.15); color: oklch(0.4 0.15 152); }
.go7 .rec.one2 { animation: 6s ease-in-out 0s infinite normal none running onein; }
@keyframes onein { 
  0%, 66% { opacity: 0; translate: -50% 8px; }
  72%, 94% { opacity: 1; translate: -50%; }
  100% { opacity: 0; translate: -50% 8px; }
}
.bnote { margin-top: 16px; text-align: center; font-size: 13px; font-weight: 700; color: var(--mut); min-height: 20px; }
.mwhy { display: grid; gap: 10px; }
.mw { display: grid; grid-template-columns: 28px 1fr; gap: 13px; align-items: center; padding: 15px 18px; border-radius: 16px; background-image: linear-gradient(oklch(1 0 0), oklch(0.99 0.004 160)); box-shadow: var(--edge),var(--inner),0 6px 16px oklch(21% .02 155/.05); }
.mw i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: var(--tint); color: var(--leaf); font-style: normal; font-weight: 800; font-size: 12.5px; }
.mw h4 { font-size: 15.5px; letter-spacing: -0.02em; }
.mw.win { background-image: linear-gradient(oklch(0.976 0.018 152), oklch(0.96 0.024 152)); }
.mw.win i { background: var(--leaf2); color: white; }
.mrg { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 0.86fr); gap: clamp(26px, 4vw, 54px); align-items: center; margin-top: 40px; }
@media (max-width: 860px) {
  .mrg { grid-template-columns: 1fr; }
}
.center .mw, .center .icard, .center .hwside, .center .cap2 { text-align: left; }
.center .cap2 { text-align: center; }
#merge h2, #loose h2, #buying h2 { font-size: clamp(23px, 2.6vw, 32px); }
.shotwrap { position: relative; padding: 40px 0px 34px; }
.shot2 { position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--edge),var(--inner),var(--drop); }
.shot2 img { width: 100%; height: auto; display: block; transition: filter 0.6s; }
.go7 .shot2 img { animation: 6s ease-in-out 0s infinite normal none running dim; }
@keyframes dim { 
  0%, 22% { filter: none; }
  34%, 92% { filter: saturate(0.5) brightness(0.72) blur(1.4px); }
  100% { filter: none; }
}
.lens { position: absolute; left: 11%; right: 7%; top: 44%; height: 30%; border-radius: 12px; box-shadow: 0 0 0 2.5px var(--leaf2),0 0 0 9999px oklch(21% .02 155/0); opacity: 0; }
.go7 .lens { animation: 6s ease-in-out 0s infinite normal none running lensin; }
@keyframes lensin { 
  0%, 10% { opacity: 0; scale: 1.1; }
  18%, 30% { opacity: 1; scale: 1; }
  36%, 100% { opacity: 0; scale: 0.96; }
}
.zoomcard { position: absolute; left: 4%; right: 4%; bottom: -6%; border-radius: 16px; overflow: hidden; background: oklch(0.16 0.012 250); opacity: 0; box-shadow: 0 0 0 2.5px var(--leaf2),0 26px 60px oklch(21% .02 155/.38); }
.zoomcard img { width: 100%; height: auto; display: block; }
.go7 .zoomcard { animation: 6s cubic-bezier(0.3, 0, 0.2, 1) 0s infinite normal none running zoomup; }
@keyframes zoomup { 
  0%, 30% { opacity: 0; transform: translateY(26px) scale(0.9); }
  42%, 92% { opacity: 1; transform: translateY(0px) scale(1); }
  100% { opacity: 0; transform: translateY(26px) scale(0.9); }
}
.fcard2 { position: absolute; z-index: 5; display: flex; align-items: center; gap: 9px; white-space: nowrap; padding: 9px 13px; border-radius: 13px; opacity: 0; border: 1px solid color-mix(in oklch,var(--line) 80%,transparent); background: color-mix(in oklch,var(--paper) 92%,transparent); backdrop-filter: blur(14px); box-shadow: var(--sh-2); }
.fcard2 b { display: block; color: var(--ink); font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.fcard2 em { display: block; font-style: normal; color: var(--mut); font-size: 11px; }
.fcard2 .dotg { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.fcard2.c1 { top: 2%; left: 2%; }
.fcard2.c1 .dotg { background: var(--leaf2); }
.fcard2.c2 { top: 2%; right: 2%; }
.fcard2.c2 .dotg { background: oklch(0.62 0.14 255); }
.fcard2.c3 { bottom: -2%; left: 50%; translate: -50%; }
.fcard2.c3 .dotg { background: var(--sun); }
.go7 .fcard2 { animation: 9s ease-in-out 0s infinite normal none running cardpop; }
.go7 .fcard2.c1 { animation-delay: 0.3s; }
.go7 .fcard2.c2 { animation-delay: 1.1s; }
.go7 .fcard2.c3 { animation-delay: 3.9s; }
@keyframes cardpop { 
  0% { opacity: 0; transform: translateY(8px) scale(0.94); }
  6%, 86% { opacity: 1; transform: translateY(0px) scale(1); }
  94%, 100% { opacity: 0; transform: translateY(8px) scale(0.94); }
}
@media (max-width: 700px) {
  .fcard2 { display: none; }
  .zoomcard { bottom: -4%; }
}
.recs { flex-wrap: wrap; }
.rec { width: auto; flex: 1 1 168px; min-width: 0px; max-width: 200px; }
.rec.one2 { width: min(252px, 94%); max-width: none; }
.rec i { overflow-wrap: anywhere; }
@media (max-width: 620px) {
  .rec { flex: 1 1 100%; max-width: 260px; }
  .pkts { gap: 18px; }
  .pkt { width: 118px; }
  .bag { width: 96px; height: 106px; }
  .bcode { width: 100px; }
  .zoomcard.z2 { width: 62%; }
  .zlabel { font-size: 10px; padding: 5px 10px; }
}
.go7 .lens { animation: 6s ease-in-out 0s infinite normal none running lensin; }
@keyframes lensin { 
  0%, 16% { opacity: 0; scale: 1.08; }
  22%, 34% { opacity: 1; scale: 1; }
  40%, 100% { opacity: 0; scale: 0.97; }
}
.go7 .shot2 img { animation: 6s ease-in-out 0s infinite normal none running dim; }
@keyframes dim { 
  0%, 32% { filter: none; }
  40%, 92% { filter: saturate(0.55) brightness(0.74) blur(1.3px); }
  100% { filter: none; }
}
.go7 .zoomcard { animation: 6s cubic-bezier(0.3, 0, 0.2, 1) 0s infinite normal none running zoomup; }
@keyframes zoomup { 
  0%, 34% { opacity: 0; transform: translateY(26px) scale(0.9); }
  44%, 92% { opacity: 1; transform: translateY(0px) scale(1); }
  100% { opacity: 0; transform: translateY(26px) scale(0.9); }
}
.go7 .fcard2 { animation-delay: 0s; }
.go7 .fcard2.c1 { animation: 6s ease-in-out 0s infinite normal none running card1; }
.go7 .fcard2.c2 { animation: 6s ease-in-out 0s infinite normal none running card2; }
.go7 .fcard2.c3 { animation: 6s ease-in-out 0s infinite normal none running card3; }
@keyframes card1 { 
  0%, 10% { opacity: 0; transform: translateY(8px) scale(0.94); }
  16%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(8px) scale(0.94); }
}
@keyframes card2 { 
  0%, 30% { opacity: 0; transform: translateY(8px) scale(0.94); }
  36%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(8px) scale(0.94); }
}
@keyframes card3 { 
  0%, 62% { opacity: 0; transform: translateY(8px) scale(0.94) translateX(-50%); }
  70%, 90% { opacity: 1; transform: none; translate: -50%; }
  96%, 100% { opacity: 0; transform: translateY(8px) scale(0.94); translate: -50%; }
}
#merge:hover *, #merge:focus-within * { animation-play-state: paused !important; }
.proofline { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 38px; flex-wrap: wrap; text-align: center; }
.proofline b { font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.proofline span { font-size: 15px; color: var(--mut); }
.proofline em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--leaf); background: var(--tint); padding: 5px 11px; border-radius: 999px; }
.mobnotes { display: none; margin-top: 20px; gap: 9px; }
.mobnotes div { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-radius: 14px; background-image: linear-gradient(oklch(1 0 0), oklch(0.99 0.004 160)); box-shadow: var(--edge),var(--inner),0 6px 14px oklch(21% .02 155/.05); text-align: left; }
.mobnotes i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; font-style: normal; }
.mobnotes b { display: block; font-size: 13px; color: var(--ink); font-weight: 700; }
.mobnotes span { display: block; font-size: 12px; color: var(--mut); }
@media (max-width: 700px) {
  .mobnotes { display: grid; }
}
.bstage { min-height: 0px; padding: 26px 24px 22px; }
.pkts { gap: clamp(22px, 4.6vw, 52px); }
.pkt { width: 118px; gap: 8px; }
.bag { width: 94px; height: 102px; }
.bag::before { top: -7px; width: 56px; height: 12px; }
.bag span { inset: auto 0px 32px; font-size: 12px; }
.bcode { width: 98px; height: 34px; }
.bars { height: 16px; }
.bnum { font-size: 9.5px; }
.oops { margin-top: 18px; padding: 6px 13px; font-size: 11.5px; }
.recs { min-height: 104px; margin-top: 10px; gap: 14px; align-items: flex-start; }
.rec { padding: 12px 14px; max-width: 180px; }
.rec b { font-size: 12px; }
.rec em { margin-top: 7px; padding: 3px 9px; font-size: 11.5px; }
.rec.one2 { width: min(236px, 94%); }
.bnote { margin-top: 12px; font-size: 12.5px; }
.go7 .rdr { animation: 6s ease-in-out 0s infinite normal none running readbeam; }
@keyframes readbeam { 
  0% { opacity: 0; transform: translateX(0px) translateY(0px); }
  4% { opacity: 1; transform: translateX(0px) translateY(0px); }
  12% { opacity: 1; transform: translateX(0px) translateY(126px); }
  16% { opacity: 0; transform: translateX(0px) translateY(126px); }
  20% { opacity: 0; transform: translateX(var(--gap,168px)) translateY(0); }
  24% { opacity: 1; transform: translateX(var(--gap,168px)) translateY(0); }
  32% { opacity: 1; transform: translateX(var(--gap,168px)) translateY(126px); }
  36%, 100% { opacity: 0; transform: translateX(var(--gap,168px)) translateY(126px); }
}
.rdr { width: 118px; }
.proofline { display: flex; align-items: center; gap: 14px; margin-top: 26px; text-align: left; padding: 16px 20px; border-radius: 18px; background-image: linear-gradient(oklch(0.976 0.018 152), oklch(0.958 0.024 152)); box-shadow: var(--edge),var(--inner),0 8px 20px oklch(21% .02 155/.06); }
.proofline b { font-size: clamp(30px, 3.4vw, 42px); font-weight: 800; letter-spacing: -0.045em; color: oklch(0.4 0.15 152); font-variant-numeric: tabular-nums; line-height: 0.9; }
.proofline span { font-size: 14px; color: var(--body); line-height: 1.35; }
.proofline span u { display: block; text-decoration: none; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--leaf); margin-top: 4px; }
.proofline em { display: none; }
.shotwrap { padding-bottom: 96px; }
.zoomcard { bottom: 0px; }
.proofline { margin-top: 10px; }
.shotwrap { padding: 40px 0px 0px; }
.zoomcard { position: static; margin: -26px auto 0px; width: 94%; transform-origin: center top; }
.go7 .zoomcard { animation: 6s cubic-bezier(0.3, 0, 0.2, 1) 0s infinite normal none running zoomup2; }
@keyframes zoomup2 { 
  0%, 34% { opacity: 0; transform: translateY(-10px) scale(0.94); }
  44%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-10px) scale(0.94); }
}
.proofline { margin-top: 22px; }
.fcard2.c3 { top: auto; left: 50%; translate: -50%; position: absolute; bottom: -18px; }
.go7 .shot2 img { animation: auto ease 0s 1 normal none running none !important; filter: none !important; }
.shot2::after { content: ""; position: absolute; inset: 0px; background: oklch(0.18 0.02 155 / 0.52); opacity: 0; pointer-events: none; }
.go7 .shot2::after { animation: 6s ease-in-out 0s infinite normal none running dimlayer; }
@keyframes dimlayer { 
  0%, 32% { opacity: 0; }
  40%, 92% { opacity: 1; }
  100% { opacity: 0; }
}
.rdr, .rec, .oops, .lens, .zoomcard, .fcard2, .shot2::after, .ptile, .float, .drip, .heap, .pour { will-change: transform, opacity; }
.fcard2 { backdrop-filter: none; background: oklch(1 0 0 / 0.96); }
.film { position: relative; border-radius: 22px; overflow: hidden; background: oklch(0.14 0.012 250); aspect-ratio: 16 / 11; box-shadow: var(--edge),var(--inner),var(--dropup); }
.film .fr { position: absolute; inset: 0px; display: grid; place-items: center; opacity: 0; transition: opacity 0.45s; background: oklch(0.96 0.006 160); }
.film .fr.on { opacity: 1; }
.film .fr img { width: 100%; height: 100%; object-fit: contain; object-position: center center; }
.film .fr.dark2 { background: oklch(0.14 0.012 250); }
.mark { position: absolute; border: 3px solid oklch(0.58 0.2 30); border-radius: 10px; box-shadow: oklch(0.58 0.2 30 / 0.18) 0px 0px 0px 4px; opacity: 0; }
.fr.on .mark { animation: 0.5s ease 0.45s 1 normal both running markin; }
@keyframes markin { 
  0% { opacity: 0; scale: 1.08; }
  100% { opacity: 1; scale: 1; }
}
.marktag { position: absolute; z-index: 3; background: oklch(0.58 0.2 30); color: white; font: 800 11.5px / 1 Inter, sans-serif; letter-spacing: 0.02em; padding: 7px 12px; border-radius: 999px; white-space: nowrap; opacity: 0; box-shadow: oklch(0.58 0.2 30 / 0.4) 0px 8px 18px; }
.fr.on .marktag { animation: 0.5s ease 0.6s 1 normal both running markin; }
.steps4 { display: flex; gap: 8px; margin-top: 16px; }
.steps4 button { flex: 1 1 0%; text-align: left; border: 0px; padding: 12px 14px; border-radius: 14px; cursor: pointer; font-family: inherit; background-image: linear-gradient(oklch(1 0 0), oklch(0.99 0.004 160)); box-shadow: var(--edge),var(--inner),0 6px 14px oklch(21% .02 155/.05); transition: box-shadow 0.25s, transform 0.25s; }
.steps4 button b { display: block; font-size: 13.5px; color: var(--ink); font-weight: 700; letter-spacing: -0.015em; }
.steps4 button span { display: block; font-size: 11.5px; color: var(--mut); margin-top: 2px; }
.steps4 button.live { box-shadow: 0 0 0 1.5px var(--leaf2),var(--inner),var(--dropup); transform: translateY(-2px); }
.steps4 button .bar2 { display: block; height: 3px; border-radius: 99px; background: var(--line); margin-top: 9px; overflow: hidden; position: relative; }
.steps4 button.live .bar2::after { content: ""; position: absolute; inset: 0px; background: var(--leaf2); transform-origin: left center; animation: 3.2s linear 0s 1 normal forwards running fill3; }
@keyframes fill3 { 
  0% { scale: 0 1; }
  100% { scale: 1; }
}
@media (max-width: 760px) {
  .steps4 { flex-wrap: wrap; }
  .steps4 button { flex: 1 1 46%; }
}
/* ======================================================================
   Buying, drawn. A sheet lifts into the drop box and the order fills itself
   in beside it. No real bill is shown: a supplier bill carries his GSTIN,
   his address and his buying rates. [owner, 03/10/2026]
   ====================================================================== */
.buy{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
     gap:clamp(24px,4vw,52px);align-items:center;margin-top:42px}
.dropstage{position:relative;padding:30px 24px 26px;border-radius:24px;min-height:286px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background-image:linear-gradient(180deg,oklch(99% .004 160),oklch(96.4% .008 160));
  box-shadow:var(--edge),var(--inner),var(--drop)}
.sheet2{width:106px;padding:11px 10px;border-radius:8px;background:white;position:relative;z-index:3;
  box-shadow:var(--edge),0 10px 22px oklch(21% .02 155/.16)}
.sheet2 span{display:block;height:4px;border-radius:2px;background:oklch(87% .008 160);margin-bottom:5px}
.sheet2 span:nth-child(1){width:52%;background:oklch(70% .012 160)}
.sheet2 span:nth-child(3){width:80%}
.sheet2 span:nth-child(5){width:62%}
.sheet2 span:last-child{margin-bottom:0}
.sheet2::after{content:"PDF";position:absolute;right:-8px;top:-8px;font:800 8.5px/1 Inter,sans-serif;
  letter-spacing:.06em;color:white;background:oklch(55% .19 28);padding:4px 6px;border-radius:5px}
.go8 .sheet2{animation:drop8 7s cubic-bezier(.4,0,.2,1) infinite}
@keyframes drop8{0%{opacity:0;transform:translateY(-30px) scale(.9) rotate(-6deg)}
  8%,22%{opacity:1;transform:translateY(0) scale(1) rotate(-2deg)}
  34%{opacity:1;transform:translateY(70px) scale(.7) rotate(1deg)}
  40%,100%{opacity:0;transform:translateY(80px) scale(.58) rotate(2deg)}}
.dropbox{width:min(286px,94%);padding:18px 16px;border-radius:16px;text-align:center;
  border:2px dashed oklch(72% .02 160);background:oklch(100% 0 0/.6)}
.go8 .dropbox{animation:boxlive 7s ease-in-out infinite}
@keyframes boxlive{0%,26%{border-color:oklch(72% .02 160);background:oklch(100% 0 0/.6)}
  34%,58%{border-color:var(--leaf2);background:var(--tint)}
  66%,100%{border-color:oklch(72% .02 160);background:oklch(100% 0 0/.6)}}
.dropbox b{display:block;font-size:14px;color:var(--ink);font-weight:700;letter-spacing:-.02em}
.dropbox small{display:block;font-size:12px;color:var(--mut);margin-top:3px}
.dropbox .prog{height:4px;border-radius:99px;background:var(--line);margin-top:13px;overflow:hidden}
.dropbox .prog i{display:block;height:100%;width:0;border-radius:99px;background:var(--leaf2)}
.go8 .dropbox .prog i{animation:prog8 7s ease-in-out infinite}
@keyframes prog8{0%,34%{width:0;opacity:1}56%{width:100%;opacity:1}66%,100%{width:100%;opacity:0}}
.readnote{font-size:12.5px;color:var(--mut);text-align:center;min-height:17px}
.readnote b{color:var(--leaf)}

.potab{border-radius:20px;overflow:hidden;
  background-image:linear-gradient(180deg,oklch(100% 0 0),oklch(99% .004 160));
  box-shadow:var(--edge),var(--inner),var(--drop)}
.pohead{padding:14px 18px;display:flex;align-items:center;gap:10px;
  box-shadow:0 1px 0 oklch(62% .012 160/.14)}
.pohead b{font-size:13.5px;color:var(--ink);font-weight:800;letter-spacing:-.02em}
.pohead small{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut)}
.porow{display:grid;grid-template-columns:20px 1fr auto auto;gap:12px;align-items:center;
  padding:11px 18px;box-shadow:0 1px 0 oklch(62% .012 160/.08);opacity:0;text-align:left}
.porow i{width:18px;height:18px;border-radius:50%;background:var(--tint);color:var(--leaf);
  display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:800}
.porow b{display:block;font-size:13px;color:var(--ink);font-weight:600}
.porow u{display:block;text-decoration:none;font-size:11px;color:var(--mut);margin-top:2px}
.porow em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.porow s{text-decoration:none;font-size:11.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.go8 .porow{animation:rowin8 7s ease-in-out infinite}
.go8 .porow:nth-of-type(2){animation-delay:.14s}
.go8 .porow:nth-of-type(3){animation-delay:.28s}
.go8 .porow:nth-of-type(4){animation-delay:.42s}
@keyframes rowin8{0%,40%{opacity:0;translate:-12px 0}48%,92%{opacity:1;translate:0}
  100%{opacity:0;translate:-12px 0}}
.pofoot{padding:14px 18px;display:flex;align-items:center;gap:12px;background:oklch(97.4% .006 160)}
.pofoot b{font-size:13.5px;color:var(--ink);font-weight:700}
.pofoot span{margin-left:auto;font-size:12.5px;font-weight:800;color:var(--leaf);opacity:0}
.go8 .pofoot span{animation:rowin8 7s ease-in-out infinite;animation-delay:.6s}
@media(max-width:860px){.buy{grid-template-columns:1fr}}

/* ======================================================================
   The auto order. The shelf falls to its line, the sum is worked out and a
   draft waits. Nothing is sent until a person says so. Taken off
   includes/reorder.php so the page says exactly what the code does.
   ====================================================================== */
.atg{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
     gap:clamp(24px,4vw,52px);align-items:center;margin-top:42px}
.jar{position:relative;padding:30px 26px 24px;border-radius:24px;
  background-image:linear-gradient(180deg,oklch(99% .004 160),oklch(96.4% .008 160));
  box-shadow:var(--edge),var(--inner),var(--drop)}
.shelfwrap{position:relative;min-height:188px;display:flex;flex-direction:column;
  justify-content:flex-end;gap:0}
.packs{display:flex;align-items:flex-end;justify-content:center;gap:7px;padding-bottom:7px;
  min-height:92px}
.pk{width:30px;height:46px;border-radius:4px 4px 6px 6px;position:relative;
  background:linear-gradient(165deg,oklch(64% .16 32),oklch(48% .15 32));
  box-shadow:0 5px 10px oklch(21% .02 155/.18)}
.pk::before{content:"";position:absolute;top:-5px;left:50%;translate:-50% 0;width:17px;height:8px;
  border-radius:4px 4px 0 0;background:oklch(56% .15 32)}
.pk::after{content:"";position:absolute;inset:auto 5px 7px;height:9px;border-radius:2px;
  background:oklch(90% .03 85/.75)}
.go9 .pk{animation:sold 8s ease-in-out infinite}
.go9 .pk:nth-child(1){animation-delay:.1s}
.go9 .pk:nth-child(2){animation-delay:.5s}
.go9 .pk:nth-child(3){animation-delay:.9s}
.go9 .pk:nth-child(4){animation-delay:1.3s}
.go9 .pk:nth-child(5){animation-delay:1.7s}
.go9 .pk:nth-child(6){animation-delay:2.1s}
.go9 .pk:nth-child(7),.go9 .pk:nth-child(8){animation:none}
@keyframes sold{0%{opacity:1;transform:none}
  22%{opacity:0;transform:translateY(-16px) scale(.8)}
  82%{opacity:0;transform:translateY(-16px) scale(.8)}
  92%,100%{opacity:1;transform:none}}
.plank{height:9px;border-radius:3px;background:linear-gradient(180deg,oklch(78% .03 70),oklch(62% .04 65));
  box-shadow:0 5px 12px oklch(21% .02 155/.18)}
.levelline{position:absolute;inset:auto 0 44px;height:2px;background:oklch(58% .2 30);opacity:.9}
.levelline::after{content:"reorder level 10";position:absolute;right:0;top:-15px;
  font:800 9.5px/1 Inter,sans-serif;letter-spacing:.05em;color:oklch(48% .19 30)}
.countline{display:flex;align-items:baseline;justify-content:center;gap:9px;margin-top:16px}
.countline b{font-size:27px;font-weight:800;color:var(--ink);letter-spacing:-.04em;
  font-variant-numeric:tabular-nums}
.countline b.now{color:oklch(50% .19 30)}
.countline span{font-size:12.5px;color:var(--mut)}
.countline i{font-style:normal;color:var(--mut);font-size:16px}
.jarlab{margin-top:10px;text-align:center;font-size:13px;color:var(--ink);font-weight:700}
.jarlab small{display:block;font-weight:500;color:var(--mut);font-size:12px;margin-top:2px}
.bell{position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%;
  background:oklch(58% .2 30);display:grid;place-items:center;opacity:0;
  box-shadow:0 8px 18px oklch(58% .2 30/.4)}
.bell svg{width:18px;height:18px;stroke:white;fill:none;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round}
.go9 .bell{animation:bellin 8s ease-in-out infinite}
@keyframes bellin{0%,28%{opacity:0;scale:.6}34%{opacity:1;scale:1.12}
  38%,80%{opacity:1;scale:1}88%,100%{opacity:0;scale:.6}}

.draft{border-radius:20px;overflow:hidden;
  background-image:linear-gradient(180deg,oklch(100% 0 0),oklch(99% .004 160));
  box-shadow:var(--edge),var(--inner),var(--drop)}
.dhead{padding:14px 18px;display:flex;align-items:center;gap:10px;
  box-shadow:0 1px 0 oklch(62% .012 160/.14)}
.dhead b{font-size:13.5px;color:var(--ink);font-weight:800;letter-spacing:-.02em}
.dhead .pill2{margin-left:auto;font:800 10px/1 Inter,sans-serif;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 10px;border-radius:999px;
  background:oklch(84% .16 90/.3);color:oklch(42% .11 80)}
.sum2{padding:18px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  text-align:center}
.sum2 span{display:grid;gap:2px;opacity:0}
.sum2 b{font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.sum2 u{text-decoration:none;font-size:10.5px;color:var(--mut);letter-spacing:.02em}
.sum2 i{font-style:normal;font-size:17px;color:var(--mut);font-weight:600;opacity:0}
.sum2 .out b{color:var(--leaf);font-size:26px}
.go9 .sum2 span,.go9 .sum2 i{animation:sumin 8s ease-in-out both infinite}
.go9 .sum2>*:nth-child(1){animation-delay:.0s}
.go9 .sum2>*:nth-child(2){animation-delay:.12s}
.go9 .sum2>*:nth-child(3){animation-delay:.24s}
.go9 .sum2>*:nth-child(4){animation-delay:.36s}
.go9 .sum2>*:nth-child(5){animation-delay:.48s}
.go9 .sum2>*:nth-child(6){animation-delay:.6s}
.go9 .sum2>*:nth-child(7){animation-delay:.78s}
@keyframes sumin{0%,36%{opacity:0;translate:0 6px}44%,88%{opacity:1;translate:0}
  96%,100%{opacity:0;translate:0 6px}}
.dwho{padding:14px 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  box-shadow:0 -1px 0 oklch(62% .012 160/.1),0 1px 0 oklch(62% .012 160/.1)}
.dwho b{font-size:13px;color:var(--ink);font-weight:700}
.dwho span{font-size:12px;color:var(--mut)}
.dwho .tagw{margin-left:auto;font:800 10px/1 Inter,sans-serif;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 10px;border-radius:999px;background:var(--tint);color:var(--leaf)}
.dfoot{padding:14px 18px;display:flex;align-items:center;gap:12px;background:oklch(97.4% .006 160)}
.dfoot b{font-size:13px;color:var(--ink);font-weight:700}
.dfoot span{margin-left:auto;font-size:12.5px;color:var(--mut)}
@media(max-width:860px){.atg{grid-template-columns:1fr}}

/* ======================================================================
   The counter screen. The real display, recorded off the shop's own phone,
   and the play counter beside it. Numbers here are the ones KIO holds; the
   rate is blank because the owner has not set one. [owner, 03/10/2026]
   ====================================================================== */
.adwrap{display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,1fr);
        gap:clamp(26px,4vw,56px);align-items:center;margin-top:42px}
.tvbox{justify-self:center;width:min(206px,58vw);background:oklch(14% .012 250);border-radius:20px;
  padding:7px;box-shadow:0 2px 4px oklch(21% .02 155/.1),0 28px 64px oklch(21% .02 155/.3)}
.tvbox video{display:block;width:100%;border-radius:14px;background:#000}
.tvfoot{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:12px;
  font-size:12px;color:var(--mut)}
.tvfoot i{width:8px;height:8px;border-radius:50%;background:var(--leaf2);font-style:normal;
  animation:beat 2.4s ease-in-out infinite}

.earn{display:grid;gap:14px}
.ecard{padding:17px 20px;border-radius:16px;
  background-image:linear-gradient(180deg,oklch(100% 0 0),oklch(99% .004 160));
  box-shadow:var(--edge),var(--inner),0 8px 20px oklch(21% .02 155/.06)}
.ecard b{display:block;font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.045em;
  color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.ecard span{display:block;font-size:13px;color:var(--mut);margin-top:6px}
.ecard.green{background-image:linear-gradient(180deg,oklch(97.6% .018 152),oklch(95.8% .024 152))}
.ecard.green b{color:oklch(40% .15 152)}
.whopays{display:flex;gap:8px;flex-wrap:wrap}
.whopays span{padding:9px 14px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--ink);
  background-image:linear-gradient(180deg,oklch(100% 0 0),oklch(99% .004 160));
  box-shadow:var(--edge),var(--inner),0 6px 14px oklch(21% .02 155/.06);opacity:0}
.goA .whopays span{animation:popin .4s both}
.goA .whopays span:nth-child(2){animation-delay:.2s}
.goA .whopays span:nth-child(3){animation-delay:.4s}
.goA .whopays span:nth-child(4){animation-delay:.6s}
@media(max-width:860px){.adwrap{grid-template-columns:1fr}}

/* ---- the display, in a phone. The app letterboxes its own ad video, so the
   frame crops to the content instead of showing black bands. ---- */
.tvbox{position:relative;width:min(214px,60vw);background:oklch(13% .012 250);border-radius:34px;
  padding:8px;box-shadow:0 2px 4px oklch(21% .02 155/.12),0 26px 58px oklch(21% .02 155/.3)}
.tvbox::before{content:"";position:absolute;top:17px;left:50%;translate:-50% 0;z-index:2;
  width:58px;height:17px;border-radius:99px;background:oklch(9% .01 250)}
.tvbox video{display:block;width:100%;aspect-ratio:9/19;object-fit:cover;object-position:center;
  border-radius:27px;background:#000}

/* the width and height attributes on the video were setting its box, so the
   aspect never applied and the frame ran 990px tall. */
.tvbox video{width:100%;height:auto;aspect-ratio:9/15.5;object-fit:cover;object-position:center}
.tvbox{width:min(200px,56vw)}

/* ======================================================================
   A phone that looks like a phone. Body, an even bezel, the island floating
   clear of the screen edge, and the side buttons. Every size is a share of
   the width, so it holds together at any scale. [owner, 03/10/2026]
   ====================================================================== */
.tvbox{--pw:186px;position:relative;width:var(--pw);padding:calc(var(--pw) * .028);
  border-radius:calc(var(--pw) * .155);background:
    linear-gradient(145deg,oklch(42% .006 250) 0%,oklch(22% .006 250) 22%,
                    oklch(16% .006 250) 52%,oklch(30% .006 250) 86%,oklch(18% .006 250) 100%);
  box-shadow:0 0 0 1px oklch(55% .008 250/.55),
             inset 0 0 0 1px oklch(70% .01 250/.22),
             0 3px 6px oklch(21% .02 155/.16),0 26px 54px oklch(21% .02 155/.3)}
.tvbox::before,.tvbox::after{content:"";position:absolute;left:calc(var(--pw) * -.009);
  width:calc(var(--pw) * .012);border-radius:2px;
  background:linear-gradient(90deg,oklch(48% .006 250),oklch(28% .006 250))}
.tvbox::before{top:22%;height:7%}
.tvbox::after{top:33%;height:11%}
.tvbox .pbtn{position:absolute;right:calc(var(--pw) * -.009);top:28%;height:13%;
  width:calc(var(--pw) * .012);border-radius:2px;
  background:linear-gradient(270deg,oklch(48% .006 250),oklch(28% .006 250))}
.tvscreen{position:relative;border-radius:calc(var(--pw) * .128);overflow:hidden;background:#000;
  box-shadow:inset 0 0 0 1px oklch(0% 0 0/.9)}
.tvbox video{display:block;width:100%;height:auto;aspect-ratio:9/19.5;object-fit:cover;
  object-position:center}
.island{position:absolute;z-index:3;top:calc(var(--pw) * .028);left:50%;translate:-50% 0;
  width:30%;height:calc(var(--pw) * .085);border-radius:99px;background:#000;
  box-shadow:0 0 0 1px oklch(18% .006 250)}
.island::after{content:"";position:absolute;right:16%;top:50%;translate:0 -50%;
  width:calc(var(--pw) * .028);height:calc(var(--pw) * .028);border-radius:50%;
  background:radial-gradient(circle at 36% 32%,oklch(32% .03 250),oklch(10% .01 250) 70%)}
.glare{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(118deg,oklch(100% 0 0/.09) 0%,oklch(100% 0 0/.02) 28%,
             transparent 46%)}
@media(min-width:900px){.tvbox{--pw:200px}}

/* ======================================================================
   The counter screen, running. The video is the ad and nothing else was
   ever recorded on it, so the bill and the payment screen are rebuilt here
   from NSHOP DISPLAY itself, same navy, same white paper, same green tick.
   Ad, then the bill filling line by line, then RECEIVED, then the ad again.
   [owner, 03/10/2026: "bill aate dikhayao", "paise earn karte bhi dikhao"]
   ====================================================================== */
.tvbox{--pw:200px}
.tvbox video{aspect-ratio:460/858}
.tvscreen{isolation:isolate}

/* the bill paper */
.dbill{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;
  padding:6% 5% 17%;background:oklch(21% .04 265);opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility .35s}
.dbill.on{opacity:1;visibility:visible}
.dpaper{width:100%;background:#fff;border-radius:5px;padding:8px 9px 7px;text-align:center;
  box-shadow:0 8px 22px oklch(0% 0 0/.4);font-size:5.2px;line-height:1.25}
.dshop{display:block;font-size:11px;font-weight:800;letter-spacing:.5px;color:#00236F}
.dcap{display:block;font-size:5px;letter-spacing:2px;font-weight:700;color:#0006;margin-top:1px}
.dno{display:block;font-size:5.5px;color:#0007;font-weight:700;margin-top:2px;
  font-variant-numeric:tabular-nums}
.drule{display:block;height:1px;background:#0001;margin:5px 0}
.drows{display:flex;flex-direction:column;gap:3px;min-height:58px;justify-content:flex-end}
.drow{display:grid;grid-template-columns:1fr auto;gap:4px;text-align:left;
  animation:dpop .3s cubic-bezier(.2,1.4,.4,1) both}
.drow .dn{font-size:6px;font-weight:700;color:#111;line-height:1.15}
.drow .dq{display:block;font-size:5px;color:#0008;font-weight:600;margin-top:.5px}
.drow .dv{font-size:7px;font-weight:800;color:#111;font-variant-numeric:tabular-nums;
  align-self:center}
@keyframes dpop{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}
.dmeta{display:flex;justify-content:space-between;font-size:5px;color:#0007;margin-top:3px}
.dtot{display:flex;justify-content:space-between;align-items:center;margin-top:1px}
.dtot span{font-size:7px;font-weight:800;letter-spacing:1.4px;color:#0008}
.dtot b{font-size:21px;font-weight:800;color:#000;line-height:1;
  font-variant-numeric:tabular-nums}
.dsave{margin-top:5px;padding:4px 0;border-radius:3px;background:#059669;color:#fff;
  font-size:6.5px;font-weight:800;letter-spacing:.6px;opacity:0;transition:opacity .3s}
.dsave.on{opacity:1}
.dfoot{display:block;font-size:5px;color:#0006;margin-top:4px}

/* the offer strip that keeps running under the bill */
.dstrip{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:center;
  gap:4px;padding:4px 5px;background:#141C2E;translate:0 100%;transition:translate .4s ease}
.dstrip.on{translate:0 0}
.dsbadge{padding:3px 4px;border-radius:3px;background:#C62828;color:#FFD34D;font-size:4.4px;
  font-weight:800;line-height:1.15;text-align:center}
.dsnum{width:11px;height:11px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:#FFD34D;color:#8A1B12;font-size:5.5px;font-weight:800}
.dstxt{flex:1;min-width:0;text-align:left}
.dstxt small{display:block;font-size:4px;letter-spacing:.8px;color:#8A94AD;font-weight:700}
.dstxt b{display:block;font-size:6.5px;color:#fff;font-weight:700;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsmrp{font-size:4.2px;color:#8A94AD;font-weight:700;text-align:center}
.dsmrp s{display:block;font-size:5.5px;text-decoration-color:#EF4444}
.dsnow{text-align:center;font-size:4.2px;color:#FFD34D;font-weight:700}
.dsnow b{display:block;font-size:8px;color:#fff;font-weight:800}

/* received */
.dpaid{position:absolute;inset:0;z-index:6;display:grid;place-content:center;justify-items:center;
  gap:7px;opacity:0;visibility:hidden;transition:opacity .3s;
  background:radial-gradient(circle at 50% 46%,#10b981,#006E2D 55%,#00401b)}
.dpaid.on{opacity:1;visibility:visible}
.dring{position:absolute;top:calc(50% - 27px);width:44px;height:44px;border-radius:50%;
  border:1.5px solid #fff6;opacity:0}
.dpaid.on .dring{animation:dring 1.8s ease-out infinite}
.dpaid.on .dring:nth-of-type(2){animation-delay:.5s}
@keyframes dring{0%{scale:1;opacity:.75}100%{scale:2.5;opacity:0}}
.dtick{width:44px;height:44px;border-radius:50%;background:#fff;color:#006E2D;
  display:grid;place-items:center;font-size:26px;font-weight:900;line-height:1;
  box-shadow:0 6px 18px oklch(0% 0 0/.25)}
.dpaid.on .dtick{animation:dtick .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes dtick{from{scale:.3}to{scale:1}}
.drec{font-size:5.5px;letter-spacing:3px;font-weight:700;color:#ffffffb8;margin-top:4px}
.damt{font-size:30px;font-weight:900;color:#fff;line-height:1;
  text-shadow:0 3px 14px oklch(0% 0 0/.3);font-variant-numeric:tabular-nums}
.dpaid.on .drec,.dpaid.on .damt{animation:drise .5s .15s ease-out both}
@keyframes drise{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}

/* the right hand side: what the shop gets out of it */
.eflow{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:9px;
  text-align:left}
.eflow li{display:grid;grid-template-columns:20px 1fr;gap:9px;align-items:start;
  font-size:14.5px;line-height:1.45;color:var(--mut)}
.eflow b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;
  font-weight:800;background:var(--leaf2);color:#fff}
.ecards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.emath{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0;padding:11px 13px;
  border-radius:12px;background:var(--paper);box-shadow:var(--sh-1);font-size:15px;font-weight:700}
.emath small{font-weight:500;color:var(--mut);font-size:12.5px}
.emath .ex{color:var(--mut);font-weight:400}
.emath .epay{font-size:13.5px;font-weight:600;color:var(--leaf2)}
#plays,#plays2{font-variant-numeric:tabular-nums}
#plays2{color:var(--ink)}
@media(max-width:640px){.ecards{grid-template-columns:1fr}}

/* the money card. Every finished play drops a coin into it and pushes the
   Free bar along, so the earning is something you watch happen rather than
   a number sitting still. The rupee figure waits for the owner's rate. */
.ecard.money{position:relative;overflow:hidden}
.ecard.money.hit{animation:mhit .5s ease}
@keyframes mhit{0%,100%{background:var(--paper)}35%{background:color-mix(in oklch,var(--leaf2) 11%,var(--paper))}}
.coinport{position:absolute;inset:0;pointer-events:none}
.coin{position:absolute;left:50%;top:-16px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font:800 12px/1 Inter,sans-serif;color:#7a4b00;
  background:radial-gradient(circle at 34% 30%,#ffe9a8,#f5c249 58%,#d99a16);
  box-shadow:0 1px 3px oklch(21% .02 155/.35);animation:cdrop .85s cubic-bezier(.4,.1,.6,1) forwards}
@keyframes cdrop{0%{translate:-50% 0;opacity:0;scale:.5}
  18%{opacity:1;scale:1}70%{translate:-50% 34px}100%{translate:-50% 44px;opacity:0;scale:.8}}
.ecard.money b{position:relative;z-index:1}
.plus{position:absolute;right:12px;top:10px;font:700 12px/1 Inter,sans-serif;color:var(--leaf2);
  opacity:0;animation:pfade 1s ease forwards}
@keyframes pfade{0%{opacity:0;translate:0 6px}30%{opacity:1}100%{opacity:0;translate:0 -10px}}

.ecard.free{text-align:center}
.fbar{display:block;height:7px;border-radius:99px;margin:12px auto 7px;max-width:300px;
  background:color-mix(in oklch,var(--leaf2) 14%,transparent);overflow:hidden}
.fbar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--leaf2),oklch(62% .16 150));
  transition:width .5s cubic-bezier(.3,1,.5,1)}
.fnote{display:block;font-size:12.5px;color:var(--mut)}
.fnote b{font-size:12.5px;color:var(--leaf2)}

/* three words for the three screens. The one the phone is showing lights up,
   so the rail reads as a live state and not as a caption. */
.steps{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.steps span{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:99px;
  background:var(--paper);box-shadow:var(--sh-1);font-size:14px;font-weight:600;color:var(--mut);
  transition:color .25s,box-shadow .25s}
.steps i{width:7px;height:7px;border-radius:50%;background:color-mix(in oklch,var(--mut) 45%,transparent);
  transition:background .25s,box-shadow .25s}
.steps span.on{color:var(--ink);box-shadow:var(--sh-1),0 0 0 1.5px var(--leaf2)}
.steps span.on i{background:var(--leaf2);box-shadow:0 0 0 4px color-mix(in oklch,var(--leaf2) 18%,transparent)}

/* the rate is the visitor's own pick, never ours. Tap a rate and the earned
   figure above rebuilds from the plays the counter has really done. */
.rates{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 14px}
.rlab{font-size:14px;font-weight:600;color:var(--mut)}
.rchip{padding:7px 15px;border:0;border-radius:99px;background:var(--paper);box-shadow:var(--sh-1);
  font:700 14.5px/1 Inter,sans-serif;color:var(--ink);cursor:pointer;transition:.18s}
.rchip:hover{translate:0 -1px}
.rchip.on{background:var(--leaf2);color:#fff;box-shadow:0 2px 10px color-mix(in oklch,var(--leaf2) 30%,transparent)}
.rates small{flex-basis:100%;font-size:12.5px;color:var(--mut)}
#earned{font-variant-numeric:tabular-nums}
.ecard.free{text-align:center}

/* the active step was losing its pill because the ring sat on top of the
   base shadow. Give it its own ground instead. */
.steps span.on{color:var(--ink);background:var(--paper);
  box-shadow:0 0 0 1.6px var(--leaf2),0 2px 10px color-mix(in oklch,var(--leaf2) 18%,transparent)}

/* the rate lives inside the money card now, so the number and the thing that
   changes it are never read apart */
.ecard.money{position:relative;overflow:hidden;padding-bottom:16px}
.ecard.money .rates{display:flex;gap:6px;justify-content:center;margin:11px 0 5px}
.ecard.money .rchip{padding:6px 13px;border:0;border-radius:99px;cursor:pointer;
  background:color-mix(in oklch,var(--ink) 6%,transparent);color:var(--mut);
  font:700 13.5px/1 Inter,sans-serif;transition:.16s}
.ecard.money .rchip:hover{color:var(--ink)}
.ecard.money .rchip.on{background:var(--leaf2);color:#fff}
.rnote{display:block;font-size:12px;color:var(--mut);text-align:center}
#earned{display:block;transition:color .25s}
.ecard.money.hit #earned{color:var(--leaf2)}

/* the loop as a timeline. The line fills in real time and the head carries
   the clock, so the three screens read as a thing that is running and not as
   three words sitting on a shelf. */
.tl{position:relative;height:56px;margin:0 0 22px;padding-top:26px}
.tlrail{position:absolute;left:0;right:0;top:32px;height:4px;border-radius:99px;
  background:color-mix(in oklch,var(--ink) 8%,transparent)}
.tlrail i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--leaf2),oklch(64% .17 150))}
.tlhead{position:absolute;top:0;left:0;translate:-50% 0;padding:2px 8px;border-radius:99px;
  background:var(--leaf2);color:#fff;font:700 11.5px/1.5 Inter,sans-serif;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tlhead::after{content:"";position:absolute;left:50%;top:100%;translate:-50% 0;
  width:2px;height:12px;background:var(--leaf2)}
.tlnode{position:absolute;top:26px;left:var(--at);translate:-6px 0;display:flex;
  flex-direction:column;align-items:flex-start;gap:0}
.tlnode::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--paper);
  box-shadow:0 0 0 2.5px color-mix(in oklch,var(--ink) 16%,transparent);
  transition:box-shadow .2s,background .2s}
.tlnode.on::before{background:var(--leaf2);box-shadow:0 0 0 2.5px var(--leaf2),
  0 0 0 7px color-mix(in oklch,var(--leaf2) 16%,transparent)}
.tlnode b{margin-top:7px;font-size:14px;font-weight:700;color:var(--mut);white-space:nowrap;
  transition:color .2s}
.tlnode.on b{color:var(--ink)}
.tlnode small{font-size:11.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.tlend{position:absolute;right:0;top:46px;font-size:11.5px;color:var(--mut);
  font-variant-numeric:tabular-nums}

/* the loop line reads as the money line. Gold while the screen is selling,
   green the moment the bill is paid, and every finished play throws a rupee
   chip off the head of the bar. */
.tl{height:62px;padding-top:30px}
.tlrail{position:absolute;left:0;right:0;top:34px;height:9px;border-radius:99px;overflow:hidden;
  background:color-mix(in oklch,var(--ink) 7%,transparent)}
.seg{position:absolute;top:0;height:100%;display:block}
.s1{left:0;width:29%;background:color-mix(in oklch,var(--sun) 30%,transparent)}
.s2{left:29%;width:43%;background:color-mix(in oklch,var(--ink) 5%,transparent)}
.s3{left:72%;right:0;background:color-mix(in oklch,var(--leaf2) 22%,transparent)}
.tlrail i{position:absolute;left:0;top:0;height:100%;width:0;border-radius:99px;z-index:1;
  background:linear-gradient(90deg,var(--sun) 0%,oklch(76% .17 110) 38%,var(--leaf2) 78%,var(--leaf) 100%);
  box-shadow:0 0 12px color-mix(in oklch,var(--sun) 45%,transparent)}
.tlhead{top:2px;padding:3px 9px;background:var(--ink);color:#fff;font-weight:700;z-index:2}
.tlhead::after{background:var(--ink)}
.tlnode{top:30px}
.tlnode::before{width:13px;height:13px;background:var(--paper);
  box-shadow:0 0 0 2.5px color-mix(in oklch,var(--ink) 15%,transparent)}
.tlnode[data-k=ad].on::before{background:var(--sun);box-shadow:0 0 0 2.5px var(--sun),
  0 0 0 7px color-mix(in oklch,var(--sun) 24%,transparent)}
.tlnode[data-k=paid].on::before{background:var(--leaf2);box-shadow:0 0 0 2.5px var(--leaf2),
  0 0 0 7px color-mix(in oklch,var(--leaf2) 20%,transparent)}
.tlnode b{margin-top:8px}
.tlend{top:50px}
.fly{position:absolute;top:0;translate:-50% 0;font:800 13px/1 Inter,sans-serif;color:var(--leaf);
  pointer-events:none;animation:fly 1.1s cubic-bezier(.3,.9,.4,1) forwards}
@keyframes fly{0%{opacity:0;translate:-50% 6px;scale:.7}
  25%{opacity:1;scale:1.1}100%{opacity:0;translate:-50% -26px;scale:1}}

/* The body is black and the rim is metal, the way the real one is. The rim is
   a border painted with a conic gradient so the light runs round the edge
   instead of sitting flat on it. Every size is still a share of the width. */
.tvbox{--pw:200px;position:relative;width:var(--pw);
  padding:calc(var(--pw) * .036);
  border:calc(var(--pw) * .014) solid transparent;
  border-radius:calc(var(--pw) * .158);
  background:
    linear-gradient(#0a0a0c,#0a0a0c) padding-box,
    conic-gradient(from 212deg,
      #6b7075,#d2d7db,#878d92,#eef1f3,#73787d,#bcc2c7,#5c6166,#d2d7db,#6b7075) border-box;
  box-shadow:0 2px 5px oklch(21% .02 155/.14),0 30px 64px oklch(21% .02 155/.3)}
.tvbox::before,.tvbox::after{content:none}
.tvscreen{border-radius:calc(var(--pw) * .112);
  box-shadow:inset 0 0 0 1px oklch(0% 0 0/.9),0 0 0 1px oklch(100% 0 0/.05)}

.sbtn{position:absolute;width:calc(var(--pw) * .013);border-radius:3px;
  background:linear-gradient(90deg,#8d9398,#4a4f54 55%,#2e3338)}
.sbtn.act{left:calc(var(--pw) * -.013);top:17%;height:5.5%}
.sbtn.vup{left:calc(var(--pw) * -.013);top:26%;height:8.5%}
.sbtn.vdn{left:calc(var(--pw) * -.013);top:36.5%;height:8.5%}
.sbtn.pwr{right:calc(var(--pw) * -.013);top:29%;height:13%;
  background:linear-gradient(270deg,#8d9398,#4a4f54 55%,#2e3338)}

.island{top:calc(var(--pw) * .036);width:31%;height:calc(var(--pw) * .088)}
.glare{background:linear-gradient(116deg,oklch(100% 0 0/.1) 0%,oklch(100% 0 0/.025) 26%,
  transparent 44%)}

/* the draft is a list now, not one sum. Three lines land one after the other
   and each one carries its own working, so the rule is read once at the foot
   and proved three times above it. Both cards stand the same height. */
.atg{align-items:stretch}
.jar,.draft{height:100%}
.draft{display:flex;flex-direction:column}
.dlist{flex:1;padding:6px 0 10px}
.dl{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;
  padding:9px 18px;opacity:0;border-bottom:1px solid oklch(94% .006 160)}
.go9 .dl{animation:dlin .5s ease forwards}
.go9 .dl:nth-child(1){animation-delay:.55s}
.go9 .dl:nth-child(2){animation-delay:.95s}
.go9 .dl:nth-child(3){animation-delay:1.35s}
@keyframes dlin{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
.dnm{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.25}
.dmath{grid-column:1;font-size:11.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.dmath u{text-decoration:none;font-size:10.5px}
.dbr{grid-column:2;grid-row:1 / span 2;font-size:22px;font-weight:800;color:var(--leaf);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.dkey{display:block;padding:10px 18px 0;font-size:11.5px;color:var(--mut);line-height:1.45}

/* the page is centred, these are not. A later reset had also knocked the foot
   row back to block, so the two halves of it were running together. */
.dl,.dnm,.dmath,.dkey,.dwho,.dfoot{text-align:left}
.dfoot{display:flex;align-items:center;gap:10px}
.dkey{padding-top:12px;border-top:1px solid oklch(94% .006 160);margin-top:2px}

/* a line that is bought but not open yet still stands in the list, greyed and
   labelled, so the plan shows where it is going [owner, 03/10/2026: B2B] */
.plan li.soon{color:var(--mut)}
.plan li.soon i{display:inline-block;margin-left:7px;font:800 9.5px/1 Inter,sans-serif;
  font-style:normal;letter-spacing:.09em;text-transform:uppercase;padding:4px 7px;
  border-radius:99px;background:color-mix(in oklch,var(--sun) 24%,transparent);
  color:oklch(42% .09 80);vertical-align:1px}

/* the charges that are not a month. They sit apart so the three plans stay
   one clean comparison. */
.extras{margin-top:30px;padding:20px 22px 22px;border-radius:20px;
  background:oklch(97.4% .006 160);box-shadow:var(--edge),var(--inner)}
.exlab{display:block;font:700 10.5px/1 Inter,sans-serif;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mut);margin-bottom:14px}
.exrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ex1{text-align:left;padding:14px 16px;border-radius:14px;background:var(--paper);
  box-shadow:var(--edge),var(--inner)}
.ex1 b{display:block;font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.ex1 span{display:block;margin-top:3px;font-size:12.5px;color:var(--mut);line-height:1.4}
@media(max-width:760px){.exrow{grid-template-columns:1fr}}

/* three plans read as one comparison only if they stand level and the button
   sits on the same line in all three */
.plans{align-items:stretch}
.plan{display:flex;flex-direction:column;height:100%}
.plan ul{flex:1}
.plan .btn{margin-top:auto}

/* ======================================================================
   The price cards, properly dressed. Each line carries its own mark and
   sits on its own hairline, the price reads as money rather than as a
   headline, and the card it recommends is the only one allowed any colour.
   [owner, 03/10/2026: premium look, icons on the rows, a line under each]
   ====================================================================== */
.plan{padding:28px 26px 26px;text-align:left;position:relative;overflow:hidden}
.plan .pn{display:block;font:700 11px/1 Inter,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut)}
.plan .pp{display:flex;align-items:baseline;gap:1px;margin-top:14px;
  font:800 46px/1 Inter,sans-serif;letter-spacing:-.045em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.plan .pp .cur{font-size:27px;font-weight:600;letter-spacing:0;translate:0 -1px}
.plan .per{display:block;margin-top:7px;font:500 13px/1 Inter,sans-serif;color:var(--mut)}
.plan .pw{margin:16px 0 0;padding-bottom:18px;font-size:14px;color:var(--body);
  border-bottom:1px solid var(--line)}

.plan ul{list-style:none;margin:0;padding:0}
.plan li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:center;
  padding:13px 0;border-bottom:1px solid color-mix(in oklch,var(--line) 62%,transparent);
  font-size:14.5px;line-height:1.4;color:var(--ink);font-weight:500}
.plan li:last-child{border-bottom:0}
.pic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in oklch,var(--leaf2) 9%,var(--paper));
  box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--leaf2) 16%,transparent)}
.pic svg{width:15px;height:15px;fill:none;stroke:var(--leaf);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.plan li.soon{color:var(--mut)}
.plan li.soon .pic{background:color-mix(in oklch,var(--sun) 16%,var(--paper));
  box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--sun) 30%,transparent)}
.plan li.soon .pic svg{stroke:oklch(58% .12 80)}
.plan li.soon em{display:inline-block;margin-left:8px;font:800 9.5px/1 Inter,sans-serif;
  font-style:normal;letter-spacing:.09em;text-transform:uppercase;padding:4px 7px;
  border-radius:99px;background:color-mix(in oklch,var(--sun) 26%,transparent);
  color:oklch(42% .09 80);vertical-align:1px}
.plan .btn{margin-top:22px;width:100%;padding:14px 20px;font-size:15px}

/* the one we point at gets the colour. The other two stay quiet. */
.plan.best{box-shadow:0 0 0 1.6px var(--leaf),var(--inner),var(--sh-2)}
.plan.best::before{content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--leaf2),var(--leaf))}
.plan .flag{top:-1px;left:50%;translate:-50% -50%}

/* the flag sits above the card edge, so the card cannot clip it */
.plan{overflow:visible}
.plan.best::before{border-radius:var(--r) var(--r) 0 0}
.plan .flag{top:0;left:50%;translate:-50% -50%;z-index:2}

/* the three charges that are not a month, dressed like the plans above them */
.ex1{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto auto;
  gap:2px 13px;align-items:start;padding:17px 18px;text-align:left}
.exic{grid-row:1 / span 3;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in oklch,var(--leaf2) 9%,var(--paper));
  box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--leaf2) 16%,transparent)}
.exic svg{width:18px;height:18px;fill:none;stroke:var(--leaf);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ex1 b{font-size:18.5px;line-height:1.2}
.extag{display:inline-block;justify-self:start;margin:4px 0 5px;padding:3px 8px;border-radius:99px;
  font:700 10px/1 Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase;
  background:color-mix(in oklch,var(--ink) 6%,transparent);color:var(--mut)}
.ex1 span:last-child{margin-top:0;font-size:12.5px;line-height:1.45}

/* the old tick is gone, every line has its own mark now. And the older rule
   that dressed any <i> in a soon row as a tag was catching the icon tile. */
.plan li::before{content:none}
.plan li.soon i.pic{margin-left:0;padding:0;font:inherit;letter-spacing:normal;
  text-transform:none;border-radius:11px;vertical-align:baseline}

/* white has no hue, so mixing a green with it in oklch drags the hue to 13
   and the tile comes out pink. Mix these in srgb instead. */
.pic,.exic{background:color-mix(in srgb,var(--leaf2) 11%,#fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--leaf2) 22%,#fff)}
.plan li.soon .pic{background:color-mix(in srgb,var(--sun) 20%,#fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sun) 38%,#fff)}
.extag{background:color-mix(in srgb,var(--ink) 7%,#fff)}

/* tighter. The same six lines in less room, and the tile is plainly green
   [owner, 03/10/2026: card ki height kam karo, icon ka colour sahi karo] */
.plan{padding:22px 22px 20px}
.plan .pp{margin-top:11px;font-size:38px}
.plan .pp .cur{font-size:23px}
.plan .per{margin-top:5px;font-size:12.5px}
.plan .pw{margin-top:12px;padding-bottom:13px;font-size:13.5px}
.plan li{grid-template-columns:26px 1fr;gap:11px;padding:9px 0;font-size:14px}
.pic{width:26px;height:26px;border-radius:8px}
.pic svg{width:14px;height:14px;stroke-width:1.8}
.plan .btn{margin-top:16px;padding:12px 18px;font-size:14.5px}
.plan .flag{font-size:11px;padding:5px 12px}

/* a tile that reads green at a glance, not a white square with a green line */
.pic,.exic{background:color-mix(in srgb,var(--leaf2) 15%,#fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--leaf2) 30%,#fff)}
.pic svg,.exic svg{stroke:oklch(44% .13 150)}
.plan li.soon .pic{background:color-mix(in srgb,var(--sun) 26%,#fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sun) 46%,#fff)}
.plan li.soon .pic svg{stroke:oklch(50% .12 78)}

.extras{margin-top:24px;padding:16px 18px 18px}
.ex1{padding:14px 16px;grid-template-columns:30px 1fr;gap:2px 11px}
.exic{width:30px;height:30px;border-radius:10px}
.exic svg{width:16px;height:16px}
.ex1 b{font-size:17px}

/* tighter again. An old rule was still holding 24px under the list. */
.plan{padding:20px 20px 18px}
.plan ul{margin-bottom:0}
.plan .pp{margin-top:9px;font-size:34px}
.plan .pp .cur{font-size:21px}
.plan .per{margin-top:4px;font-size:12px}
.plan .pw{margin-top:10px;padding-bottom:11px;font-size:13px}
.plan li{padding:7px 0;font-size:13.5px;line-height:1.35}
.pic{width:24px;height:24px;border-radius:8px}
.pic svg{width:13px;height:13px}
.plan li{grid-template-columns:24px 1fr;gap:10px}
.plan .btn{margin-top:13px;padding:11px 16px;font-size:14px}
.plan .pn{font-size:10.5px}

/* ======================================================================
   Solved. Half the height it was, and the row now moves the way the story
   does: the arrow crosses, a light passes over the fix as it lands, and the
   problem beside it goes quiet. [owner, 03/10/2026: compact karo, effect do]
   ====================================================================== */
.scenes{gap:12px;margin-top:32px}
.scene{grid-template-columns:1fr 52px 1fr;
  transition:box-shadow .28s ease,translate .28s ease}
.scene:hover{translate:0 -2px;box-shadow:var(--sh-2)}
.half{padding:17px 19px;gap:10px;min-height:0}
.sline{font-size:clamp(15.5px,1.45vw,18.5px);line-height:1.25;letter-spacing:-.02em}
.stag{font-size:10px;padding:4px 9px;letter-spacing:.1em}
.viz{min-height:50px;gap:6px}
.tally{margin-top:28px}

/* the crossing */
.sgap{position:relative;color:transparent;font-size:0;
  background:linear-gradient(180deg,oklch(97% .012 28),oklch(97% .016 152))}
.sgap::after{content:"\2192";position:absolute;inset:0;display:grid;place-items:center;
  color:var(--mut);font-size:17px;font-family:Inter,sans-serif}
.scene.on4 .sgap::after{animation:cross 2.6s ease-in-out infinite}
@keyframes cross{0%,100%{translate:-5px 0;opacity:.4}50%{translate:5px 0;opacity:1}}

/* the fix lands and a light passes over it once */
.half.good{position:relative;overflow:hidden}
.half.good::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(100deg,transparent 36%,oklch(100% 0 0/.5) 50%,transparent 64%);
  translate:-130% 0}
.scene.on4 .half.good::after{animation:sweep 1s .3s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes sweep{to{translate:130% 0}}
.half.good::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2.5px;
  background:var(--leaf2);scale:1 0;transform-origin:50% 0;transition:scale .5s .2s ease}
.scene.on4 .half.good::before{scale:1 1}

/* the problem goes quiet once it is answered */
.half.bad{transition:opacity .5s .9s ease,filter .5s .9s ease}
.scene.on4 .half.bad{opacity:.68;filter:saturate(.75)}
.scene:hover .half.bad{opacity:1;filter:none;transition-delay:0s}

@media(prefers-reduced-motion:reduce){
  .scene.on4 .sgap::after,.scene.on4 .half.good::after{animation:none}
  .scene.on4 .half.bad{opacity:1;filter:none}
}

/* ======================================================================
   NearQ. The customer's phone in front of the counter's tablet, which is
   where the thing actually happens. The tablet is built the same way the
   phone is: a metal rim painted on the border, an even black bezel inside.
   Five screens take their turn on the phone. [owner, 03/10/2026]
   ====================================================================== */
.nqhero{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:40px;
  align-items:center;margin-top:38px}
.nqsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;
  text-align:left}
.nqsteps li{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start}
.nqsteps li>b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font:800 13px/1 Inter,sans-serif;color:#fff;background:var(--leaf2)}
.nqsteps u{display:block;text-decoration:none;font-size:15.5px;font-weight:700;color:var(--ink);
  margin-bottom:2px}
.nqsteps li>span{font-size:14px;line-height:1.5;color:var(--mut)}

.nqstage{position:relative;display:flex;justify-content:center;align-items:flex-end;
  padding-bottom:26px}

/* the tablet */
.padbox{--tw:min(520px,100%);position:relative;width:var(--tw);
  padding:calc(var(--tw) * .021);
  border:calc(var(--tw) * .006) solid transparent;
  border-radius:calc(var(--tw) * .042);
  background:
    linear-gradient(#0a0a0c,#0a0a0c) padding-box,
    conic-gradient(from 212deg,
      #6b7075,#d2d7db,#878d92,#eef1f3,#73787d,#bcc2c7,#5c6166,#d2d7db,#6b7075) border-box;
  box-shadow:0 2px 5px oklch(21% .02 155/.12),0 26px 56px oklch(21% .02 155/.26)}
.padcam{position:absolute;top:calc(var(--tw) * .0095);left:50%;translate:-50% 0;z-index:2;
  width:calc(var(--tw) * .009);height:calc(var(--tw) * .009);border-radius:50%;
  background:radial-gradient(circle at 36% 32%,#2d3340,#0b0d12 70%)}
.padscreen{border-radius:calc(var(--tw) * .026);overflow:hidden;background:#000;
  box-shadow:inset 0 0 0 1px oklch(0% 0 0/.9)}
.padscreen img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  object-position:left center}

/* the phone sits in front of it */
.nqphone{position:absolute;left:0;bottom:0;--pw:150px;z-index:3}
.nqroll{position:relative;aspect-ratio:460/996;background:#000}
.nqroll img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s ease}
.nqroll img.on{opacity:1}

.nqdots{position:absolute;left:0;bottom:-20px;width:150px;display:flex;justify-content:center;
  gap:7px}
.nqdots i{width:7px;height:7px;border-radius:50%;cursor:pointer;
  background:color-mix(in srgb,var(--ink) 16%,#fff);transition:background .25s,scale .25s}
.nqdots i.on{background:var(--leaf2);scale:1.25}

@media(max-width:900px){
  .nqhero{grid-template-columns:1fr;gap:28px}
  .nqstage{padding-bottom:34px}
  .nqphone{--pw:120px}
  .nqdots{width:120px;bottom:-24px}
}
@media(max-width:560px){
  .nqphone{--pw:104px}
  .nqdots{width:104px}
}

/* the bar carries four names now instead of eight. Nothing was dropped, the
   counter links moved into a panel under the first one. */
.mgroup{position:static}
.mtrig::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  rotate:45deg;translate:0 -2px;transition:rotate .2s}
.mgroup:hover .mtrig::after,.mgroup:focus-within .mtrig::after{rotate:-135deg;translate:0 1px}
.drop{position:absolute;top:calc(100% + 6px);left:0;z-index:30;min-width:232px;padding:6px;
  border-radius:16px;background:var(--paper);border:1px solid var(--line);
  box-shadow:var(--sh-2);display:grid;gap:1px;
  opacity:0;visibility:hidden;translate:0 -6px;transition:opacity .18s,translate .18s,visibility .18s}
.mgroup:hover .drop,.mgroup:focus-within .drop{opacity:1;visibility:visible;translate:0 0}
.drop a{display:block;padding:9px 12px;border-radius:10px;text-decoration:none;
  font:500 14px/1.3 Inter,sans-serif;color:var(--body);white-space:nowrap;transition:background .15s}
.drop a:hover{background:var(--soft);color:var(--ink)}
.shlab{display:block;margin:10px 0 2px;font:700 10.5px/1 Inter,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut)}

/* side by side, not stacked. Both screenshots stay whole, which is the point
   of showing them at all. */
.nqstage{display:flex;align-items:flex-end;justify-content:center;gap:20px;padding-bottom:0}
.nqph{display:flex;flex-direction:column;align-items:center;gap:13px;flex:none}
.nqphone{position:static;--pw:148px}
.padbox{--tw:min(400px,100%);flex:1 1 auto}
.nqdots{position:static;width:auto}
@media(max-width:900px){.nqphone{--pw:132px}.padbox{--tw:min(340px,100%)}}
@media(max-width:560px){.nqstage{gap:14px}.nqphone{--pw:108px}}

/* ======================================================================
   The bar. Four names, each with its own small mark, and the counter links
   open as a panel where every line says what it is. Nothing was dropped
   from the old bar. [owner, 03/10/2026]
   ====================================================================== */
.menu a{display:inline-flex;align-items:center;gap:7px}
.nic{width:17px;height:17px;flex:none;display:grid;place-items:center}
.nic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:.72}
.menu>a[aria-current] .nic svg,.mtrig[aria-current] .nic svg{opacity:1;stroke:var(--leaf)}

.drop{min-width:0;width:min(620px,calc(100vw - 32px));padding:10px;border-radius:20px;
  background:color-mix(in srgb,#fff 86%,transparent);backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid color-mix(in srgb,var(--line) 80%,transparent);
  box-shadow:0 1px 2px oklch(21% .02 155/.05),0 24px 60px oklch(21% .02 155/.16)}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.dgrid a{display:grid;grid-template-columns:30px 1fr;gap:11px;align-items:start;
  padding:11px 12px;border-radius:13px;white-space:normal;transition:background .16s}
.dgrid a:hover{background:color-mix(in srgb,var(--leaf2) 7%,#fff)}
.dgrid .nic{width:30px;height:30px;border-radius:10px;
  background:color-mix(in srgb,var(--leaf2) 12%,#fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--leaf2) 24%,#fff)}
.dgrid .nic svg{width:16px;height:16px;stroke:oklch(44% .13 150);opacity:1}
.dgrid b{display:block;font:600 14px/1.25 Inter,sans-serif;color:var(--ink)}
.dgrid small{display:block;margin-top:2px;font:400 12.5px/1.35 Inter,sans-serif;color:var(--mut)}

.dfootlnk{display:flex!important;align-items:center;justify-content:space-between;
  margin-top:6px;padding:11px 14px;border-radius:13px;text-decoration:none;
  background:color-mix(in srgb,var(--leaf2) 9%,#fff);
  font:600 13.5px/1 Inter,sans-serif;color:var(--leaf)}
.dfootlnk em{font-style:normal;transition:translate .2s}
.dfootlnk:hover em{translate:4px 0}

/* the panel hangs under the bar, centred on its trigger */
.mgroup{position:relative}
.drop{left:-14px;top:calc(100% + 10px)}
@media(max-width:900px){.dgrid{grid-template-columns:1fr}}

/* the customer comes first in the story, so the phone stands left */
.nqph{order:-1}

/* the tablet carries NearQ itself, taken off the tablet in the shop, so the
   frame takes that picture's own shape and nothing is cropped away */
.padscreen img{aspect-ratio:1200/712;object-position:center}

/* the whole thing in one line under the picture, so the flow is read in a
   second and the words above can stay about why it is needed at all */
.nqflow{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin-top:32px;padding:14px 16px;border-radius:16px;background:var(--paper);
  box-shadow:var(--edge),var(--inner)}
.nqflow span{font:600 14px/1 Inter,sans-serif;color:var(--ink);padding:8px 14px;border-radius:99px;
  background:color-mix(in srgb,var(--ink) 4%,#fff)}
.nqflow span.last{background:color-mix(in srgb,var(--leaf2) 13%,#fff);color:var(--leaf)}
.nqflow i{font-style:normal;color:var(--mut);font-size:15px}
@media(max-width:620px){.nqflow i{display:none}.nqflow span{font-size:13px;padding:7px 12px}}

/* the panel was see through and the hero was reading straight through it */
.drop{background:var(--paper);backdrop-filter:none;
  border:1px solid color-mix(in srgb,var(--line) 92%,#fff);
  box-shadow:0 1px 2px oklch(21% .02 155/.06),0 10px 24px oklch(21% .02 155/.1),
             0 34px 70px oklch(21% .02 155/.18)}

/* three cards drifting down past the tablet, the same idea the hero uses, so
   the two pictures on the page feel like one family [owner, 03/10/2026] */
.nqstage{position:relative}
.nqcard{position:absolute;z-index:4;display:grid;grid-template-columns:30px 1fr;gap:10px;
  align-items:center;padding:11px 15px 11px 12px;border-radius:15px;background:var(--paper);
  box-shadow:var(--edge),var(--inner),0 14px 34px oklch(21% .02 155/.16);
  text-align:left;pointer-events:none;opacity:0}
.nqcard b{grid-column:2;font:700 13px/1.2 Inter,sans-serif;color:var(--ink)}
.nqcard span{grid-column:2;font:400 12px/1.3 Inter,sans-serif;color:var(--mut)}
.nqic{grid-row:1 / span 2;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--leaf2) 14%,#fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--leaf2) 26%,#fff)}
.nqic svg{width:16px;height:16px;fill:none;stroke:oklch(44% .13 150);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.nqcard.c1{top:2%;right:4%}
.nqcard.c2{top:40%;right:-3%}
.nqcard.c3{bottom:4%;right:8%}
.rv.in .nqcard{animation:nqdrift 9s ease-in-out infinite}
.rv.in .nqcard.c1{animation-delay:0s}
.rv.in .nqcard.c2{animation-delay:.9s}
.rv.in .nqcard.c3{animation-delay:1.8s}
@keyframes nqdrift{
  0%{opacity:0;translate:0 -14px}
  10%{opacity:1;translate:0 0}
  78%{opacity:1;translate:0 10px}
  92%,100%{opacity:0;translate:0 18px}}
@media(max-width:900px){.nqcard{padding:9px 12px 9px 10px}
  .nqcard b{font-size:12px}.nqcard span{font-size:11px}
  .nqcard.c1{top:0;right:0}.nqcard.c2{top:42%;right:-2%}.nqcard.c3{bottom:0;right:4%}}
@media(max-width:560px){.nqcard.c2{display:none}}

/* they hang off the right edge instead of sitting on the shelf rows */
.nqcard.c1{top:-2%;right:-5%}
.nqcard.c2{top:44%;right:-9%}
.nqcard.c3{bottom:0;right:-3%}
@media(max-width:1100px){
  .nqcard.c1{top:-2%;right:0}.nqcard.c2{top:44%;right:-3%}.nqcard.c3{bottom:0;right:2%}}

/* ======================================================================
   Three tiles, two or three words on each, and they light up one after the
   other on a loop so the order is read by eye. Nobody reads a paragraph on
   a page they are deciding on. [owner, 03/10/2026: itna text kaun padhega]
   ====================================================================== */
.nq3{display:flex;flex-direction:column;gap:14px;position:relative}
.nq3::before{content:"";position:absolute;left:33px;top:46px;bottom:46px;width:2px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--leaf2) 30%,#fff),
             color-mix(in srgb,var(--leaf2) 10%,#fff))}
.n3{display:grid;grid-template-columns:28px 54px 1fr;gap:0 14px;align-items:center;
  padding:14px 18px;border-radius:18px;background:var(--paper);
  box-shadow:var(--edge),var(--inner);position:relative;z-index:1;
  transition:box-shadow .4s ease,translate .4s ease}
.n3n{grid-row:1 / span 2;font:800 15px/1 Inter,sans-serif;color:var(--mut);
  transition:color .4s ease}
.n3ic{grid-row:1 / span 2;width:54px;height:54px;border-radius:17px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--leaf2) 11%,#fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--leaf2) 22%,#fff);
  transition:background .4s ease,scale .4s cubic-bezier(.3,1.4,.5,1)}
.n3ic svg{width:27px;height:27px;fill:none;stroke:oklch(44% .13 150);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.n3 b{font:700 19px/1.15 Inter,sans-serif;color:var(--ink);letter-spacing:-.02em;text-align:left}
.n3 span:not(.n3n){font:500 14px/1.3 Inter,sans-serif;color:var(--mut);text-align:left}

.n3.lit{box-shadow:0 0 0 1.6px var(--leaf2),var(--inner),var(--sh-2);translate:0 -2px}
.n3.lit .n3n{color:var(--leaf)}
.n3.lit .n3ic{background:color-mix(in srgb,var(--leaf2) 22%,#fff);scale:1.06}

/* one line instead of the five step strip */
.nqvs{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-top:30px}
.vsb{font:600 16px/1 Inter,sans-serif;color:var(--mut);text-decoration:line-through;
  text-decoration-color:oklch(62% .19 32/.5);text-decoration-thickness:2px}
.nqvs em{font-style:normal;font:800 clamp(19px,2.2vw,26px)/1.1 Inter,sans-serif;
  letter-spacing:-.03em;color:var(--ink)}
@media(max-width:560px){.n3 b{font-size:17px}.n3ic{width:46px;height:46px;border-radius:15px}
  .n3ic svg{width:23px;height:23px}.nq3::before{left:30px}}

/* the third card was drifting past the bottom of the stage and landing on
   the line under it */
.nqcard.c3{bottom:14%;right:-6%}
@media(max-width:1100px){.nqcard.c3{bottom:14%;right:0}}

/* the tablet stands portrait, the way it sits on a counter, and it comes
   first with the phone beside it [owner, 03/10/2026: pehle tab phir mobile] */
.padscreen img{aspect-ratio:900/1157}
.nqph{order:0}
.padbox{--tw:min(286px,100%);flex:0 1 auto}
.nqstage{gap:24px;align-items:flex-end}
@media(max-width:900px){.padbox{--tw:min(240px,100%)}.nqphone{--pw:124px}.nqstage{gap:16px}}
@media(max-width:560px){.padbox{--tw:min(188px,100%)}.nqphone{--pw:100px}.nqstage{gap:12px}}

/* the phone had been made static, so its side buttons were measuring from the
   stage and landing out in the open next to the tiles */
.nqphone{position:relative}

/* the phone stands on the right now, so the cards move to the other side and
   hang off the tablet instead of covering the phone */
.nqcard.c1{top:0;left:-3%;right:auto}
.nqcard.c2{top:42%;left:-11%;right:auto}
.nqcard.c3{bottom:12%;left:-5%;right:auto}
@media(max-width:1100px){
  .nqcard.c1{top:0;left:0}.nqcard.c2{top:42%;left:-4%}.nqcard.c3{bottom:12%;left:-1%}}
@media(max-width:700px){.nqcard{display:none}}

/* a card answers its own step. It waits off to the side, comes in when the
   step on the left lights up, and goes when the step does. */
.rv.in .nqcard{animation:none}
.nqcard{opacity:0;translate:0 -10px;scale:.96;
  transition:opacity .45s ease,translate .45s cubic-bezier(.2,1,.4,1),scale .45s}
.nqcard.lit{opacity:1;translate:0 0;scale:1}

/* one line to close on, and it is about the shop and not about anyone else */
.nqline{margin:30px auto 0;max-width:38ch;font:700 clamp(18px,2vw,24px)/1.3 Inter,sans-serif;
  letter-spacing:-.025em;color:var(--ink);text-wrap:balance}

/* the middle card was reaching back over the steps */
.nqcard.c1{top:1%;left:0}
.nqcard.c2{top:41%;left:-3%}
.nqcard.c3{bottom:11%;left:2%}
@media(max-width:1100px){
  .nqcard.c1{top:1%;left:2%}.nqcard.c2{top:41%;left:0}.nqcard.c3{bottom:11%;left:4%}}

/* the card belongs to its own step, so it comes out of that step and not out
   of the side of the tablet [owner, 03/10/2026: poora left kar do] */
.n3{position:relative;overflow:visible}
.nqcard{position:absolute;top:50%;left:auto;right:auto;
  inset-inline-start:calc(100% + 16px);translate:-10px -50%;z-index:6;
  width:max-content;max-width:230px}
.nqcard.c1,.nqcard.c2,.nqcard.c3{top:50%;bottom:auto;left:auto;right:auto}
.n3.lit .nqcard{opacity:1;translate:0 -50%;scale:1}
.nqcard::before{content:"";position:absolute;right:100%;top:50%;width:16px;height:2px;
  translate:0 -1px;background:color-mix(in srgb,var(--leaf2) 45%,#fff);
  scale:0 1;transform-origin:100% 50%;transition:scale .4s .1s ease}
.n3.lit .nqcard::before{scale:1 1}

/* the pills say what is in it, not what the steps already said */
.nqpills{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:30px}
.nqpills span{padding:9px 16px;border-radius:99px;background:var(--paper);
  box-shadow:var(--edge),var(--inner);font:600 14px/1 Inter,sans-serif;color:var(--ink)}
@media(max-width:1100px){.nqcard{max-width:190px}}
@media(max-width:820px){.nqcard{display:none}}

/* the c1/c2/c3 rule was setting left back to auto after the logical property
   had placed the card, so every card fell back to the start of its step */
.nqcard,.nqcard.c1,.nqcard.c2,.nqcard.c3{
  top:50%;bottom:auto;right:auto;left:calc(100% + 14px);max-width:196px}

/* the devices sit to the right of their column so the card coming out of the
   step has room before it reaches them */
.nqstage{justify-content:flex-end}
.nqcard,.nqcard.c1,.nqcard.c2,.nqcard.c3{max-width:182px}
@media(max-width:1100px){.nqstage{justify-content:center}}

/* ======================================================================
   The reel. One button under the pills, and it opens in a phone at 9:16,
   which is the shape it was shot in. [owner, 03/10/2026]
   ====================================================================== */
.reelbtn{margin-top:22px;gap:10px;padding:13px 22px;font-size:15px}
.reelbtn svg{width:15px;height:15px;fill:currentColor;stroke:none}
.reelbtn em{font-style:normal;font-weight:500;opacity:.78;font-size:13px;
  padding-left:10px;margin-left:2px;border-left:1px solid oklch(100% 0 0/.3)}

.reelwrap{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;
  background:oklch(18% .02 155/.72);backdrop-filter:blur(8px) saturate(1.2);
  animation:reelin .22s ease both}
.reelwrap[hidden]{display:none}
@keyframes reelin{from{opacity:0}to{opacity:1}}
.reelphone{--pw:min(330px,74vw);animation:reelup .3s cubic-bezier(.2,1,.4,1) both}
@keyframes reelup{from{opacity:0;translate:0 16px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
.reelphone .tvscreen{max-height:84vh}
.reelphone video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;
  background:#000;max-height:84vh}
.reelclose{position:absolute;top:18px;right:18px;width:42px;height:42px;border:0;cursor:pointer;
  border-radius:50%;display:grid;place-items:center;background:oklch(100% 0 0/.14);
  backdrop-filter:blur(6px);transition:background .18s}
.reelclose:hover{background:oklch(100% 0 0/.26)}
.reelclose svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
@media(max-width:560px){.reelphone{--pw:min(300px,86vw)}.reelbtn em{display:none}}

/* ======================================================================
   The left side is a bar now, not three boxes. The bar runs, the point it
   passes lights up, and the card under it changes with it.
   [owner, 03/10/2026: teen tile hatao, progress bar mein dikhao]
   ====================================================================== */
.nqleft{text-align:left}
.nqtl{position:relative;height:74px;padding-top:0}
.nqrail{position:absolute;left:0;right:0;top:7px;height:6px;border-radius:99px;
  background:color-mix(in srgb,var(--ink) 7%,#fff);overflow:hidden}
.nqrail i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--leaf2),var(--leaf))}
.nqnode{position:absolute;top:0;left:var(--at);display:flex;flex-direction:column;
  align-items:flex-start}
.nqnode:nth-child(2){translate:0 0}
.nqnode:nth-child(3){translate:-50% 0;align-items:center}
.nqnode:nth-child(4){translate:-100% 0;align-items:flex-end}
.nqnode::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--paper);
  box-shadow:0 0 0 2.5px color-mix(in srgb,var(--ink) 14%,#fff);
  transition:background .3s,box-shadow .3s;margin-left:0}
.nqnode:nth-child(3)::before{margin:0}
.nqnode.on::before{background:var(--leaf2);
  box-shadow:0 0 0 2.5px var(--leaf2),0 0 0 7px color-mix(in srgb,var(--leaf2) 16%,#fff)}
.nqnode b{margin-top:11px;font:700 15px/1.2 Inter,sans-serif;color:var(--mut);white-space:nowrap;
  transition:color .3s}
.nqnode.on b{color:var(--ink)}
.nqnode small{font:500 12.5px/1.3 Inter,sans-serif;color:var(--mut);white-space:nowrap}

/* the card sits under the bar and only one is ever up */
.nqnow{position:relative;height:84px;margin-top:16px}
#nqnow .nqcard{position:absolute;inset:0 auto auto 0;left:0;right:auto;top:0;bottom:auto;
  translate:0 8px;max-width:none;width:min(320px,100%);
  padding:15px 18px 15px 14px;grid-template-columns:38px 1fr;gap:12px}
#nqnow .nqcard .nqic{width:38px;height:38px;border-radius:12px}
#nqnow .nqcard .nqic svg{width:20px;height:20px}
#nqnow .nqcard b{font-size:15.5px}
#nqnow .nqcard span{font-size:13px}
#nqnow .nqcard::before{content:none}
#nqnow .nqcard.lit{opacity:1;translate:0 0;scale:1}
@media(max-width:820px){#nqnow .nqcard{display:grid}}
@media(max-width:560px){.nqnode b{font-size:13.5px}.nqnode small{display:none}
  .nqnow{height:92px}}

/* the reel and the next step, side by side. One to watch, one to act on. */
.nqcta{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  margin-top:24px}
.nqcta .btn{margin-top:0}
.nqdemo{padding:13px 22px;font-size:15px;gap:9px}
.nqdemo i{font-style:normal;transition:translate .2s}
.nqdemo:hover i{translate:4px 0}

/* the card has to stay overflow visible so its flag can sit on the top edge,
   which means a 3px bar across the top sticks out past the rounded corners.
   The ring and the flag already mark the card, so the bar goes. */
.plan.best::before{content:none}

/* a bare number on the right of a line reads as money. It is a quantity.
   [owner, 04/10/2026: number ke pehle chhota Qty likho] */
.dbr{display:flex;align-items:baseline;justify-content:flex-end;gap:6px}
.dbr u{text-decoration:none;font:700 10px/1 Inter,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut)}

/* ======================================================================
   NSHOP POS. Nine real screens off the shop phone, light theme. Pick a row
   on the left and it shows on the phone. It walks on its own until you
   touch it. [owner, 04/10/2026: NEXT GEN POS, single screen, no dropdown]
   ====================================================================== */
.poswrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:40px;
  align-items:center;margin-top:36px}
.poslist{display:flex;flex-direction:column;gap:6px;text-align:left}
.posrow{display:grid;grid-template-columns:30px 1fr;gap:13px;align-items:center;
  padding:11px 15px;border:0;border-radius:14px;background:transparent;cursor:pointer;
  font-family:inherit;text-align:left;transition:background .22s,box-shadow .22s}
.posrow:hover{background:color-mix(in srgb,var(--ink) 3%,#fff)}
.posrow.on{background:var(--paper);box-shadow:var(--edge),var(--inner),var(--sh-1)}
.posn{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  font:800 13px/1 Inter,sans-serif;color:var(--mut);
  background:color-mix(in srgb,var(--ink) 5%,#fff);transition:.22s}
.posrow.on .posn{background:var(--leaf2);color:#fff}
.posrow b{display:block;font:700 15.5px/1.2 Inter,sans-serif;color:var(--ink)}
.posrow small{display:block;margin-top:2px;font:500 13px/1.35 Inter,sans-serif;color:var(--mut)}

.posstage{display:flex;justify-content:center}
.posphone{--pw:260px}
.posroll{position:relative;aspect-ratio:460/928;background:#fff}
.posroll img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .4s ease}
.posroll img.on{opacity:1}

@media(max-width:900px){
  .poswrap{grid-template-columns:1fr;gap:26px}
  .posstage{order:-1}
  .posphone{--pw:224px}
  .posrow b{font-size:14.5px}.posrow small{font-size:12.5px}
}

/* the small print sits on its own line under each charge
   [owner, 04/10/2026: sab par Conditions apply chhota likh dena] */
.ex1{grid-template-rows:auto auto auto auto}
.exic{grid-row:1 / span 4}
.excond{margin-top:7px;font:500 10.5px/1.3 Inter,sans-serif;color:var(--mut);opacity:.8}

/* ======================================================================
   NSHOP POS. The phone stands in the middle and the ten things it does
   stand five on each side, each in its own colour so they can be told
   apart without reading. Pick one or let it walk.
   [owner, 04/10/2026: mobile beech mein, 5 left 5 right, colourful]
   ====================================================================== */
#posapp{position:relative;overflow:hidden}
#posapp::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(44rem 30rem at 8% 16%,color-mix(in srgb,#2fb67c 11%,transparent),transparent 70%),
    radial-gradient(40rem 28rem at 92% 22%,color-mix(in srgb,#3b82f6 9%,transparent),transparent 70%),
    radial-gradient(38rem 26rem at 50% 104%,color-mix(in srgb,#f59e0b 10%,transparent),transparent 70%)}

.posgrid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:26px;align-items:center;margin-top:40px}
.pcol{display:flex;flex-direction:column;gap:8px}

.prow{--h:#2fb67c;display:grid;grid-template-columns:40px 1fr;gap:13px;align-items:center;
  padding:12px 15px;border:0;border-radius:16px;cursor:pointer;font-family:inherit;
  background:color-mix(in srgb,var(--paper) 70%,transparent);text-align:left;
  transition:background .25s,box-shadow .25s,translate .25s}
.pcol.left .prow{grid-template-columns:1fr 40px;text-align:right;direction:rtl}
.pcol.left .prow>span{direction:ltr}
.prow:hover{background:var(--paper);box-shadow:var(--sh-1)}
.prow.on{background:var(--paper);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--h) 55%,transparent),
  var(--inner),var(--sh-1)}
.pcol.left .prow.on{translate:6px 0}
.pcol.right .prow.on{translate:-6px 0}
.pric{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--h) 13%,#fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--h) 26%,#fff);transition:.25s}
.prow.on .pric{background:var(--h);box-shadow:0 4px 12px color-mix(in srgb,var(--h) 36%,transparent)}
.pric svg{width:21px;height:21px;fill:none;stroke:color-mix(in srgb,var(--h) 72%,#000);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.prow.on .pric svg{stroke:#fff}
.prow b{display:block;font:700 15.5px/1.2 Inter,sans-serif;color:var(--ink)}
.prow small{display:block;margin-top:2px;font:500 13px/1.35 Inter,sans-serif;color:var(--mut)}

.c1{--h:#2fb67c}.c2{--h:#3b82f6}.c3{--h:#f59e0b}.c4{--h:#8b5cf6}.c5{--h:#0ea5e9}
.c6{--h:#10b981}.c7{--h:#ec4899}.c8{--h:#6366f1}.c9{--h:#f97316}.c10{--h:#14b8a6}

.pmid{display:flex;flex-direction:column;align-items:center;gap:14px}
.posphone{--pw:252px}
.posroll{position:relative;aspect-ratio:460/928;background:#fff}
.posroll img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .4s ease}
.posroll img.on{opacity:1}
.pdots{display:flex;gap:6px}
.pdots i{width:7px;height:7px;border-radius:50%;cursor:pointer;
  background:color-mix(in srgb,var(--ink) 15%,#fff);transition:.25s}
.pdots i.on{background:var(--leaf2);scale:1.3}

@media(max-width:1040px){
  .posgrid{grid-template-columns:1fr 1fr;gap:18px}
  .pmid{grid-column:1 / -1;order:-1;margin-bottom:10px}
  .pcol.left .prow{grid-template-columns:40px 1fr;text-align:left;direction:ltr}
  .pcol.left .prow.on{translate:0 0}.pcol.right .prow.on{translate:0 0}
}
/* ----------------------------------------------------------------------
   The POS points on a phone.
   On a wide screen the ten lines sit five and five around the handset and
   the whole thing reads at once. Stacked on a phone they became ten rows
   under a picture: a long scroll, and nothing tying a line to the screen
   it describes.
   So on a phone only one line is on, the one for the screen showing now.
   It sits under the handset and changes with it. Ten rows become one.
   [owner, 04/10/2026]
   ---------------------------------------------------------------------- */
@media(max-width:620px){
  .posgrid{display:grid;grid-template-columns:1fr;gap:14px}
  .posphone{--pw:214px}
  .pmid{order:-1;margin-bottom:0}

  /* both columns land in the same cell, so the ten rows share one place */
  .pcol{display:grid;grid-column:1;grid-row:2;gap:0}
  .prow{grid-area:1/1;justify-content:center;gap:11px;
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(-10px);   /* it drops out from under the handset */
    transition:opacity .34s cubic-bezier(.2,.9,.3,1),
      transform .4s cubic-bezier(.2,.9,.3,1),visibility .34s}
  .prow.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;translate:0 0}
  .pcol.left .prow,.pcol.right .prow{grid-template-columns:40px 1fr;text-align:left}
  .pcol.left .prow .pric{order:1}
  .pcol.left .prow>span{order:2;text-align:left}
  .prow b{font-size:15px}.prow small{font-size:13px}

  /* bigger dots, because here they are the way through */
  .pdots{gap:9px}
  .pdots i{width:8px;height:8px}
  .posroll{touch-action:pan-y}
}

/* the left side was flipped with direction rtl, which squeezed the text into
   a one word wide column. Order moves the icon instead. */
.pcol.left .prow{grid-template-columns:1fr 40px;direction:ltr;text-align:right}
.pcol.left .prow .pric{order:2}
.pcol.left .prow>span{order:1;direction:ltr;text-align:right;min-width:0}
.prow>span{min-width:0}
@media(max-width:1040px){
  .pcol.left .prow{grid-template-columns:40px 1fr;text-align:left}
  .pcol.left .prow .pric{order:1}
  .pcol.left .prow>span{order:2;text-align:left}
}

/* the row was taking the whole column, so the lit card ran far past the words
   [owner, 04/10/2026: border text tak rakho] */
.pcol{align-items:stretch}
.pcol.left{align-items:flex-end}
.pcol.right{align-items:flex-start}
.prow{width:max-content;max-width:100%}
@media(max-width:1040px){
  .pcol.left,.pcol.right{align-items:stretch}
  .prow{width:auto}
}

/* the product's name goes up top like every other section, and the claim
   sits under the heading [owner, 04/10/2026] */
.gentag{display:inline-flex;align-items:center;gap:8px;margin:14px 0 6px;padding:7px 16px;
  border-radius:99px;font:800 11.5px/1 Inter,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;
  background:linear-gradient(90deg,var(--leaf),oklch(58% .15 215));
  box-shadow:0 4px 14px color-mix(in srgb,var(--leaf2) 30%,transparent)}
.gentag::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px oklch(100% 0 0/.3)}

/* the full rate above the launch price, struck, with how much is off beside
   it [owner, 04/10/2026] */
.pwas{display:flex;align-items:center;gap:9px;margin-top:9px}
.pwas s{font:600 16px/1 Inter,sans-serif;color:var(--mut);
  text-decoration-color:oklch(62% .19 32/.6);text-decoration-thickness:1.6px;
  font-variant-numeric:tabular-nums}
.pwas em{font-style:normal;padding:4px 9px;border-radius:99px;
  font:800 10.5px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:oklch(58% .2 28)}
.plan .pp{margin-top:5px}
.note b{color:var(--ink)}

/* ======================================================================
   The demo form, with the code step in the middle of it. The Call me button
   stays dead until the number has answered. [owner, 04/10/2026]
   ====================================================================== */
.mobrow{display:flex;gap:8px;align-items:stretch}
.mobrow input{flex:1;min-width:0}
.otpbtn{flex:none;padding:0 16px;border:0;border-radius:12px;cursor:pointer;
  font:700 13.5px/1 Inter,sans-serif;white-space:nowrap;
  background:oklch(100% 0 0/.14);color:#fff;
  box-shadow:inset 0 0 0 1px oklch(100% 0 0/.22);transition:background .18s,opacity .18s}
.otpbtn:hover:not(:disabled){background:oklch(100% 0 0/.24)}
.otpbtn:disabled{opacity:.45;cursor:default}

.otpbox{margin-top:4px;padding:13px;border-radius:14px;
  background:oklch(100% 0 0/.06);box-shadow:inset 0 0 0 1px oklch(100% 0 0/.12)}
.otpbox[hidden]{display:none}
.otpbox.done{background:oklch(62% .16 150/.16);box-shadow:inset 0 0 0 1px oklch(70% .16 150/.4)}
.otpnote{display:block;margin-top:7px;font-size:12px;color:oklch(100% 0 0/.6)}
.otpnote.bad,#leadmsg.bad{color:oklch(78% .15 30)}

/* the honeypot. Off the screen and out of the tab order, never display none,
   which a good bot checks for. */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;
  pointer-events:none}

#leadgo:disabled{opacity:.5;cursor:not-allowed}
.leadok{display:grid;gap:7px;padding:28px 4px;text-align:center}
.leadok b{font:800 22px/1.2 Inter,sans-serif;color:#fff;letter-spacing:-.02em}
.leadok span{font-size:14.5px;color:oklch(100% 0 0/.72)}

/* ======================================================================
   The podcast. Two long recordings, one playing at a time, and a line under
   them that walks straight into the form. [owner, 04/10/2026]
   ====================================================================== */
.pcasts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px;text-align:left}
.pcast{display:grid;grid-template-columns:62px 1fr;gap:16px;align-items:center;
  padding:20px 22px;border-radius:22px;background:var(--paper);
  box-shadow:var(--edge),var(--inner),var(--sh-1);
  transition:box-shadow .3s ease,translate .3s ease}
.pcast:hover{translate:0 -2px;box-shadow:var(--edge),var(--inner),var(--sh-2)}
.pcast.on{box-shadow:0 0 0 1.6px var(--leaf2),var(--inner),var(--sh-2)}

.podplay{width:62px;height:62px;flex:none;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:var(--leaf);color:#fff;
  box-shadow:0 6px 18px color-mix(in srgb,var(--leaf2) 38%,transparent);
  transition:scale .18s,background .2s}
.podplay:hover{scale:1.05}
.podplay svg{width:24px;height:24px;fill:currentColor;stroke:none}
.podplay .i_pause,.pcast.on .podplay .i_play{display:none}
.pcast.on .podplay .i_pause{display:block}
.pcast.on .podplay{background:var(--ink)}

.podtop{display:flex;align-items:baseline;gap:10px}
.podtop b{font:800 18px/1.2 Inter,sans-serif;color:var(--ink);letter-spacing:-.02em}
.podlen{font:600 12.5px/1 Inter,sans-serif;color:var(--mut);
  font-variant-numeric:tabular-nums}
.podbody p{margin:4px 0 12px;font-size:13.5px;line-height:1.45;color:var(--mut)}

.podbar{position:relative;height:7px;border-radius:99px;cursor:pointer;touch-action:none;
  background:color-mix(in srgb,var(--ink) 8%,#fff)}
.podbar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--leaf2),var(--leaf))}
.podhead{position:absolute;top:50%;left:0;translate:-50% -50%;width:14px;height:14px;
  border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--leaf),0 2px 6px oklch(21% .02 155/.25);
  opacity:0;transition:opacity .2s}
.pcast:hover .podhead,.pcast.on .podhead{opacity:1}

.podfoot{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.podtime{font:600 12px/1 Inter,sans-serif;color:var(--mut);font-variant-numeric:tabular-nums}
.podspeed{border:0;cursor:pointer;padding:5px 10px;border-radius:99px;
  font:700 11.5px/1 Inter,sans-serif;color:var(--mut);
  background:color-mix(in srgb,var(--ink) 6%,#fff);transition:.18s}
.podspeed:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 11%,#fff)}

.podcta{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;
  margin-top:34px;padding:22px 26px;border-radius:20px;
  background:linear-gradient(100deg,color-mix(in srgb,var(--leaf2) 11%,#fff),
             color-mix(in srgb,var(--sun) 12%,#fff))}
.podcta p{margin:0;font:700 clamp(16px,1.7vw,20px)/1.3 Inter,sans-serif;color:var(--ink);
  letter-spacing:-.02em}
.podcta .btn i{font-style:normal;margin-left:7px;transition:translate .2s}
.podcta .btn:hover i{translate:4px 0}

@media(max-width:860px){.pcasts{grid-template-columns:1fr}}
@media(max-width:520px){
  .pcast{grid-template-columns:52px 1fr;gap:13px;padding:17px 18px}
  .podplay{width:52px;height:52px}.podplay svg{width:20px;height:20px}
  .podtop b{font-size:16.5px}
  .podcta{flex-direction:column;gap:14px;text-align:center}
}

/* the cover. No photograph to find, so it is drawn: a colour of its own, the
   part number, and five little bars that run while it plays.
   [owner, 04/10/2026: wave effect do, thumbnail bana do, colourful] */
.pcast{grid-template-columns:104px 1fr;gap:20px;align-items:center}
.pcover{position:relative;width:104px;height:104px;border-radius:20px;overflow:hidden;
  display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px oklch(100% 0 0/.18),0 8px 22px oklch(21% .02 155/.18)}
.e1 .pcover{background:linear-gradient(145deg,#0f9d58,#0b6b3c 48%,#07512f)}
.e2 .pcover{background:linear-gradient(145deg,#f0a21c,#d2651d 48%,#a8391f)}
.pcnum{position:absolute;top:9px;left:12px;font:800 13px/1 Inter,sans-serif;
  color:oklch(100% 0 0/.55)}
.pcbars{position:absolute;inset:auto 0 16px;display:flex;align-items:flex-end;
  justify-content:center;gap:4px;height:34px;opacity:.5}
.pcbars i{width:4px;border-radius:99px;background:#fff;height:28%}
.pcast.on .pcbars{opacity:.85}
.pcast.on .pcbars i{animation:pcb .9s ease-in-out infinite}
.pcast.on .pcbars i:nth-child(2){animation-delay:.12s}
.pcast.on .pcbars i:nth-child(3){animation-delay:.24s}
.pcast.on .pcbars i:nth-child(4){animation-delay:.36s}
.pcast.on .pcbars i:nth-child(5){animation-delay:.48s}
@keyframes pcb{0%,100%{height:22%}50%{height:92%}}

.pcover .podplay{position:relative;z-index:1;width:46px;height:46px;
  background:oklch(100% 0 0/.92);color:var(--ink);
  box-shadow:0 4px 14px oklch(21% .02 155/.3)}
.pcover .podplay:hover{background:#fff}
.pcover .podplay svg{width:19px;height:19px}
.pcast.on .pcover .podplay{background:#fff;color:var(--ink)}

/* the wave is the seek bar */
.wave{display:block;width:100%;height:48px;cursor:pointer;touch-action:none}
.podbody p{margin:4px 0 6px}
.podfoot{margin-top:2px}

@media(max-width:520px){
  .pcast{grid-template-columns:76px 1fr;gap:14px}
  .pcover{width:76px;height:76px;border-radius:16px}
  .pcover .podplay{width:38px;height:38px}
  .pcbars{bottom:9px;height:24px;gap:3px}
  .pcbars i{width:3px}
  .wave{height:40px}
}

/* shorter, and the whole card with it [owner, 04/10/2026: compact karo] */
.wave{height:34px}
.pcast{padding:16px 20px;grid-template-columns:88px 1fr;gap:17px}
.pcover{width:88px;height:88px;border-radius:18px}
.pcover .podplay{width:40px;height:40px}
.pcover .podplay svg{width:17px;height:17px}
.pcbars{bottom:11px;height:26px}
.podtop b{font-size:17px}
.podbody p{margin:3px 0 4px;font-size:13px}
.podfoot{margin-top:0}
@media(max-width:520px){.wave{height:30px}}

/* a record, turning while it plays. The number is gone from the cover: it is
   already on the line beside it. [owner, 04/10/2026: CD ghumte hue effect]
   The grooves are a repeating gradient, so there is no image to load. */
.pcover{display:grid;place-items:center;overflow:hidden}
.pcnum,.pcbars{display:none}

.disc{position:absolute;inset:7px;border-radius:50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      oklch(26% .01 260) 0 1.6px, oklch(18% .01 260) 1.6px 3.4px),
    radial-gradient(circle at 50% 50%, oklch(30% .012 260), oklch(14% .01 260));
  box-shadow:inset 0 0 0 1px oklch(100% 0 0/.1), 0 3px 10px oklch(0% 0 0/.35);
  animation:spin 3.4s linear infinite;animation-play-state:paused}
.pcast.on .disc{animation-play-state:running}
@keyframes spin{to{rotate:360deg}}

/* the paper label in the middle, in the colour of its own part */
.disc i{position:absolute;inset:26%;border-radius:50%;display:block;
  box-shadow:inset 0 0 0 1px oklch(100% 0 0/.18)}
.e1 .disc i{background:radial-gradient(circle at 36% 30%,#2fc98a,#0f9d58 55%,#07693a)}
.e2 .disc i{background:radial-gradient(circle at 36% 30%,#ffc247,#f0a21c 55%,#c2651a)}
.disc::after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:9%;height:9%;border-radius:50%;background:oklch(12% .01 260)}

/* the shine stays still while the record turns under it */
.sheen{position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(118deg,oklch(100% 0 0/.22) 0 18%,transparent 34% 66%,
             oklch(100% 0 0/.1) 82% 100%)}

.pcover .podplay{position:relative;z-index:2;width:34px;height:34px;
  background:oklch(100% 0 0/.95);box-shadow:0 2px 8px oklch(0% 0 0/.4)}
.pcover .podplay svg{width:14px;height:14px}

@media(prefers-reduced-motion:reduce){.disc{animation:none}}
@media(max-width:520px){.pcover .podplay{width:30px;height:30px}}

/* ======================================================================
   The record is gone. Its black was not a colour this site owns. The cover
   is the shop's own green and gold again, with a light that runs round the
   edge while it plays. [owner, 04/10/2026: brand colour, neon border]
   ====================================================================== */
.disc,.sheen{display:none}
.pcnum{display:none}
.pcbars{display:flex}

.pcover{position:relative;overflow:visible;border-radius:18px;
  display:grid;place-items:center}
.e1 .pcover{background:linear-gradient(145deg,
  oklch(66% .16 148),oklch(52% .14 150) 52%,oklch(40% .11 152))}
.e2 .pcover{background:linear-gradient(145deg,
  oklch(86% .16 92),oklch(72% .16 74) 52%,oklch(58% .15 56))}

/* the light that runs round the edge. A turning cone cut down to a ring, so
   it is one element and no image. */
.pcover::before{content:"";position:absolute;inset:-2px;border-radius:20px;z-index:0;
  padding:2px;opacity:.55;transition:opacity .3s;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.e1 .pcover::before{background:conic-gradient(from 0deg,
  transparent 0 42%, oklch(78% .2 150) 50%, oklch(92% .14 160) 56%, transparent 64% 100%)}
.e2 .pcover::before{background:conic-gradient(from 0deg,
  transparent 0 42%, oklch(88% .18 85) 50%, oklch(96% .12 95) 56%, transparent 64% 100%)}
.pcast.on .pcover::before{opacity:1;animation:neon 2.4s linear infinite}
@keyframes neon{to{rotate:360deg}}

.pcast.on .pcover{box-shadow:inset 0 0 0 1px oklch(100% 0 0/.22),
  0 0 22px color-mix(in srgb,var(--leaf2) 45%,transparent),
  0 8px 22px oklch(21% .02 155/.2)}
.pcast.on.e2 .pcover{box-shadow:inset 0 0 0 1px oklch(100% 0 0/.22),
  0 0 22px color-mix(in srgb,var(--sun) 55%,transparent),
  0 8px 22px oklch(21% .02 155/.2)}

.pcbars{position:absolute;inset:auto 0 11px;display:flex;align-items:flex-end;
  justify-content:center;gap:4px;height:22px;opacity:.6;z-index:1}
.pcbars i{width:4px;border-radius:99px;background:#fff;height:26%}
.pcast.on .pcbars{opacity:.95}
.pcast.on .pcbars i{animation:pcb .9s ease-in-out infinite}

.pcover .podplay{position:relative;z-index:2;width:40px;height:40px;
  background:oklch(100% 0 0/.95);color:var(--ink);
  box-shadow:0 3px 12px oklch(21% .02 155/.3)}
.pcover .podplay svg{width:16px;height:16px}
@media(prefers-reduced-motion:reduce){.pcast.on .pcover::before{animation:none}}
@media(max-width:520px){.pcover .podplay{width:34px;height:34px}}

/* one star at the end of the line, and the words for it once at the foot
   [owner, 04/10/2026: alag se mat likho, card compact rakho] */
.excond{display:none}
.ast{font-style:normal;color:var(--mut);padding-left:2px}
.ex1{padding:13px 15px;grid-template-rows:auto auto auto;gap:1px 11px}
.exic{grid-row:1 / span 3}
.ex1 b{font-size:16.5px}
.ex1 span:last-child{font-size:12.5px;line-height:1.4}
.extag{margin:3px 0 4px;padding:3px 7px;font-size:9.5px}
.extras{padding:14px 16px 16px;margin-top:22px}
#plans .note{margin-top:16px}

/* ======================================================================
   The light runs round the whole card, not round the cover. On the cover it
   was leaking past the corner, because a rotated cone cannot be held inside
   a two pixel ring by a mask alone. The angle turns instead of the box, so
   the ring stays exactly on the border it was cut from.
   [owner, 04/10/2026: neon bahar ja raha, card ke border par ghume]
   ====================================================================== */
@property --ang { syntax:'<angle>'; initial-value:0deg; inherits:false }

.pcover::before{content:none}            /* the one that leaked */
.pcover{overflow:hidden}

.pcast{position:relative}
.pcast::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:inherit;padding:1.6px;opacity:0;transition:opacity .35s;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.e1.pcast::before{background:conic-gradient(from var(--ang),
  transparent 0 40%, oklch(72% .2 150) 48%, oklch(90% .15 158) 52%,
  oklch(72% .2 150) 56%, transparent 64% 100%)}
.e2.pcast::before{background:conic-gradient(from var(--ang),
  transparent 0 40%, oklch(82% .18 80) 48%, oklch(94% .13 90) 52%,
  oklch(82% .18 80) 56%, transparent 64% 100%)}
.pcast.on::before{opacity:1;animation:angspin 2.8s linear infinite}
@keyframes angspin{to{--ang:360deg}}

/* the glow outside stays, the ring around the cover goes */
.pcast.on .pcover{box-shadow:inset 0 0 0 1px oklch(100% 0 0/.22),
  0 6px 18px oklch(21% .02 155/.22)}
.pcast.on.e2 .pcover{box-shadow:inset 0 0 0 1px oklch(100% 0 0/.22),
  0 6px 18px oklch(21% .02 155/.22)}

@media(prefers-reduced-motion:reduce){.pcast.on::before{animation:none;opacity:.7}}

/* When to call: a day and a time, not a part of the day.
   The five chips before this said Any time, Morning, Afternoon, Evening,
   Night. Nobody can be rung at any time, and the chips were drawn for a
   dark card so four of the five were white on the white form and could not
   be read at all. [owner, 04/10/2026] */
.when{margin-bottom:4px}
.whenq{display:flex;gap:7px;margin-bottom:9px}
.qd{padding:8px 14px;border:0;border-radius:99px;cursor:pointer;
  font:600 13px/1 Inter,sans-serif;color:var(--body);background:var(--soft);
  box-shadow:inset 0 0 0 1.5px var(--line);
  transition:background .18s,color .18s,box-shadow .18s}
.qd:hover{color:var(--ink);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 18%,transparent)}
.qd.on{background:var(--sun);color:oklch(28% .05 90);box-shadow:none;font-weight:700}

.whenrow{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.whenf{position:relative;display:block;min-width:0}
.whenf i{position:absolute;left:15px;top:9px;z-index:1;pointer-events:none;
  font-style:normal;font:600 9.5px/1 Inter,sans-serif;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mut)}
/* the label lives inside the box, so the control needs the room back */
/* the native control carries its own icon, so the box has to leave room
   for the digits and the icon both */
.leadcard .whenf input{padding:23px 10px 10px;font:600 13.5px/1.2 Inter,sans-serif;
  font-variant-numeric:tabular-nums}
.whenf i{left:11px}
.whensay{margin:9px 0 0;font:500 12.5px/1.45 Inter,sans-serif;color:var(--mut)}
.whensay.bad{color:oklch(55% .19 28)}

@media(max-width:350px){
  .whenrow{grid-template-columns:1fr}
}

/* ======================================================================
   Book a demo, template A. The number is asked on its own, then the code,
   then the rest of somebody already in. Real counts do the trusting.
   [owner, 04/10/2026, picked from two] 2026 reading: two or three fields at
   the first ask, one button, and numbers instead of claims.
   ====================================================================== */
.lead-grid{align-items:center}
.proof{display:flex;gap:clamp(20px,3vw,34px);flex-wrap:wrap;margin-top:32px;
  padding-top:26px;border-top:1px solid oklch(100% 0 0/.14)}
.proof div b{display:block;color:#fff;font:800 clamp(21px,2.3vw,30px)/1 Inter,sans-serif;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.proof div span{display:block;margin-top:5px;color:oklch(100% 0 0/.6);font-size:12.5px}

.leadcard{background:#fff;border-radius:24px;padding:28px 26px;box-shadow:var(--sh-2)}
.leadcard label{display:block;font:700 13px/1 Inter,sans-serif;color:var(--ink);
  margin:0 0 9px}
.pane:not([hidden])+.pane{display:none}
.pane label:not(:first-child){margin-top:15px}

.big{display:flex;gap:9px}
.big span{display:grid;place-items:center;padding:0 15px;border-radius:13px;
  background:var(--soft);font:700 16px/1 Inter,sans-serif;color:var(--mut)}
.big input{flex:1;min-width:0;border:0;border-radius:13px;padding:17px 16px;
  background:var(--soft);font:600 19px/1 Inter,sans-serif;color:var(--ink);
  letter-spacing:.04em;box-shadow:inset 0 0 0 1.5px var(--line)}
.leadcard input{width:100%;border:0;border-radius:12px;padding:14px 15px;background:var(--soft);
  font:500 15px/1.2 Inter,sans-serif;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.leadcard input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--leaf2)}
.btn.wide{width:100%;margin-top:12px;padding:17px}
.fine{margin:11px 0 0;font:400 12.5px/1.5 Inter,sans-serif;color:var(--mut);text-align:center}
.fine.bad{color:oklch(55% .19 28)}

.steps2{margin-top:20px;padding-top:17px;border-top:1px solid var(--line);
  display:grid;gap:9px;opacity:.5}
.steps2 div{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:center;
  font-size:13.5px;color:var(--mut)}
.steps2 .n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--soft);font:800 11px/1 Inter,sans-serif;color:var(--mut)}

.back{display:block;margin:14px auto 0;border:0;background:none;cursor:pointer;
  font:600 13px/1 Inter,sans-serif;color:var(--mut);text-decoration:underline;
  text-underline-offset:3px}
.back:hover{color:var(--ink)}
.ok3{display:flex;align-items:center;gap:9px;margin-bottom:16px;padding:10px 13px;
  border-radius:11px;background:color-mix(in srgb,var(--leaf2) 11%,#fff);
  font:700 13.5px/1 Inter,sans-serif;color:var(--leaf)}
.ok3 i{width:19px;height:19px;border-radius:50%;background:var(--leaf);color:#fff;
  display:grid;place-items:center;font:800 11px/1 Inter,sans-serif;font-style:normal}

.leadok{display:grid;justify-items:center;gap:9px;padding:34px 6px;text-align:center}
.leadok i{width:48px;height:48px;border-radius:50%;background:var(--leaf);color:#fff;
  display:grid;place-items:center;font:800 24px/1 Inter,sans-serif;font-style:normal}
.leadok b{font:800 22px/1.2 Inter,sans-serif;color:var(--ink);letter-spacing:-.02em}
.leadok span{font-size:14.5px;color:var(--mut)}

/* ======================================================================
   The bar on a phone: the drawer on the left where a thumb already is, the
   mark beside it, and the one button that matters pushed to the right.
   [owner, 04/10/2026: drawer icon left, Book a demo right]
   ====================================================================== */
@media(max-width:900px){
  .nav .bar{padding:8px 10px;gap:10px}
  .burger{display:flex;flex:none}      /* first in the markup, so first on the line */
  .brand{flex:1 1 auto;min-width:0;gap:8px}
  .navcta{flex:none;margin-left:auto}
  .navcta .btn{padding:11px 16px;font-size:14px;white-space:nowrap}
}
@media(max-width:400px){
  .brand .nm span{display:none}        /* the second line goes, the name stays */
  .navcta .btn{padding:10px 13px;font-size:13.5px}
}

/* ======================================================================
   SOLVED: "the counter, four times"
   ----------------------------------------------------------------------
   One card, four acts, the same on a phone and on a desktop. The two
   halves side by side are gone: they only ever worked on a wide screen,
   and this says the same four things in one place at any width.

   Drag the handle and the act heals under your thumb, the card turning
   from clay to green. When it closes the card moves to the next one by
   itself. Left alone it plays all four. The dots go back to any of them.

   Every keyframe is paused and placed by a negative delay, so the whole
   scene rides one number and the browser does the rest on the compositor.
   [owner, 04/10/2026]
   ====================================================================== */

/* a card, middle of the page, the same shape everywhere */
.s4{position:relative;margin:30px auto 0;max-width:560px;text-align:left}

/* ---- the stage ---------------------------------------------------- */
.s4wrap{position:relative}
.s4stage{position:relative;height:min(40vh,300px);border-radius:22px;overflow:hidden;
  border:1px solid var(--line);background:var(--paper);box-shadow:var(--sh-2);
  isolation:isolate}

/* the ground under every act. It warms up for the problem then cools to
   green the moment the fix lands */
.s4stage::before{content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,oklch(62% .13 36) 13%,#fff) 0%,#fff 72%);
  animation:s4heal 4.6s cubic-bezier(.22,1,.3,1) forwards}
@keyframes s4heal{
  0%,36%{background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,oklch(62% .13 36) 13%,#fff) 0%,#fff 72%)}
  46%  {background:radial-gradient(150% 120% at 50% 40%,color-mix(in srgb,var(--leaf) 20%,#fff) 0%,#fff 80%)}
  100% {background:radial-gradient(120% 90% at 50% 100%,color-mix(in srgb,var(--leaf) 11%,#fff) 0%,#fff 74%)}
}
/* one white flash at the moment it is fixed */
.s4stage::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:#fff;opacity:0;animation:s4flash 4.6s linear forwards}
@keyframes s4flash{0%,40%{opacity:0}43%{opacity:.5}52%,100%{opacity:0}}

/* ---- four dots, which act is on ---------------------------------- */
.s4rail{position:absolute;z-index:5;left:0;right:0;bottom:4px;
  display:flex;justify-content:center}
.s4rail{gap:0}
.s4rail button{appearance:none;border:0;background:none;cursor:pointer;
  padding:9px 5px;line-height:0;-webkit-tap-highlight-color:transparent}
.s4rail button::before{content:"";display:block;width:5px;height:5px;border-radius:50%;
  background:color-mix(in srgb,var(--ink) 16%,transparent);
  transition:.45s cubic-bezier(.2,.9,.3,1)}
.s4stage[data-act="1"] .s4rail button:nth-child(1)::before,
.s4stage[data-act="2"] .s4rail button:nth-child(2)::before,
.s4stage[data-act="3"] .s4rail button:nth-child(3)::before,
.s4stage[data-act="4"] .s4rail button:nth-child(4)::before{
  width:18px;border-radius:99px;background:var(--leaf)}

/* ---- every act sits in the same box ------------------------------ */
.s4act{position:absolute;inset:0;z-index:2;margin:0;padding:20px 18px 84px;
  display:flex;flex-direction:column;justify-content:center;gap:13px;
  opacity:0;visibility:hidden;transform:scale(.97);
  transition:opacity .4s,transform .5s cubic-bezier(.2,.9,.3,1),visibility .4s}
.s4stage[data-act="1"] .s4a1,.s4stage[data-act="2"] .s4a2,
.s4stage[data-act="3"] .s4a3,.s4stage[data-act="4"] .s4a4{opacity:1;visibility:visible;transform:none}

.s4lab{font:600 10.5px/1 Inter,sans-serif;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mut)}

/* a number never swaps. It slides out through a blur and the new one
   arrives the same way, which is the whole trick */
.s4c1,.s4c2{position:absolute;left:0;top:0;font-variant-numeric:tabular-nums;
  font:800 40px/1 Inter,sans-serif;letter-spacing:-.04em}
.s4ws{position:relative;display:grid;margin-top:5px;height:24px}
.s4w1,.s4w2{grid-area:1/1;align-self:center;white-space:nowrap;
  font:800 20px/24px Inter,sans-serif;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.s4clk{position:relative;display:block;height:40px}
.s4c1{color:oklch(55% .15 32);animation:s4numout 4.6s cubic-bezier(.3,0,.2,1) forwards}
.s4c2{color:var(--leaf);animation:s4numin 4.6s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes s4numout{0%,38%{opacity:1;filter:blur(0);transform:none}
  47%,100%{opacity:0;filter:blur(7px);transform:translateY(-16px) scale(.9)}}
@keyframes s4numin{0%,40%{opacity:0;filter:blur(7px);transform:translateY(18px) scale(.9)}
  52%,100%{opacity:1;filter:blur(0);transform:none}}

/* ---- 1. the line ------------------------------------------------- */
.s4line{display:flex;align-items:flex-end;gap:4px;height:34px;flex-wrap:wrap}
.s4line i{width:9px;height:14px;border-radius:5px 5px 2px 2px;flex:0 0 auto;
  background:color-mix(in srgb,oklch(58% .13 32) 42%,#fff);
  opacity:0;animation:s4manin 4.6s cubic-bezier(.2,.9,.3,1) both}
.s4line i::before{content:"";display:block;width:7px;height:7px;border-radius:50%;
  margin:-8px auto 0;background:inherit}
/* the line is already there when you arrive. That is the problem.
   Each one leaves on its own beat, which is what --s is for */
@keyframes s4manin{
  0%,40%{opacity:1;transform:none;width:9px;margin-right:0}
  54%{opacity:0;transform:translateX(34px);width:9px;margin-right:0}
  64%,100%{opacity:0;transform:translateX(34px);width:0;margin-right:-4px}
}
.s4line i:nth-child(n+12){animation-name:s4manstay;animation-fill-mode:both}
@keyframes s4manstay{
  0%,42%{opacity:1;background:color-mix(in srgb,oklch(58% .13 32) 42%,#fff)}
  58%,100%{opacity:1;background:color-mix(in srgb,var(--leaf) 55%,#fff)}
}
.s4bar{display:block;height:7px;border-radius:99px;background:var(--soft);overflow:hidden}
.s4bar b{display:block;height:100%;border-radius:99px;width:0;
  background:oklch(62% .15 32);animation:s4fill 4.6s cubic-bezier(.3,0,.2,1) forwards}
@keyframes s4fill{0%{width:4%}38%{width:100%}
  52%,100%{width:13%;background:var(--leaf)}}

/* ---- 2. the rate ------------------------------------------------- */
.s4tag{position:relative;display:block;height:46px}
.s4tag b,.s4tag em{position:absolute;left:0;top:0;font-style:normal;
  font:800 36px/1.2 Inter,sans-serif;letter-spacing:-.04em;color:var(--ink);
  font-variant-numeric:tabular-nums}
/* the rate will not hold still, and nobody said so */
.s4tag b {animation:s4rt1 4.6s steps(1) forwards}
.s4tag em:nth-of-type(1){animation:s4rt2 4.6s steps(1) forwards}
.s4tag em:nth-of-type(2){animation:s4rt3 4.6s steps(1) forwards}
@keyframes s4rt1{0%,8%{opacity:1}8.01%,16%{opacity:0}16.01%,24%{opacity:0}
  24.01%,32%{opacity:1}32.01%,100%{opacity:0}}
@keyframes s4rt2{0%,8%{opacity:0}8.01%,16%{opacity:1}16.01%,100%{opacity:0}}
@keyframes s4rt3{0%,16%{opacity:0}16.01%,24%{opacity:1}24.01%,100%{opacity:0}}
.s4tag u{position:absolute;right:6px;top:4px;text-decoration:none;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,oklch(60% .16 32) 14%,#fff);color:oklch(55% .16 32);
  font:800 15px/1 Inter,sans-serif;animation:s4qpulse 4.6s ease forwards}
@keyframes s4qpulse{0%,6%{opacity:0;scale:.6}10%,36%{opacity:1;scale:1}
  38%{opacity:1;scale:1.25}44%,100%{opacity:0;scale:.5}}

/* ---- 3. loose goods ---------------------------------------------- */
.s4sackw{position:relative;display:block;height:58px}
.s4sack{position:absolute;left:3px;top:14px;width:44px;height:42px;
  border-radius:16px 16px 9px 9px;
  background:linear-gradient(oklch(90% .03 80),oklch(81% .05 78));
  box-shadow:inset 0 -6px 10px oklch(70% .06 76/.35)}
/* the neck, gathered and tied */
.s4sack::before{content:"";position:absolute;left:13px;top:-11px;width:18px;height:16px;
  border-radius:6px 6px 2px 2px;background:oklch(86% .04 78);
  clip-path:polygon(16% 0,84% 0,100% 100%,0 100%)}
.s4sack::after{content:"";position:absolute;left:11px;top:2px;width:22px;height:4px;
  border-radius:3px;background:oklch(66% .07 74)}
/* the beam goes over twice and finds nothing, because there is nothing */
.s4beam{position:absolute;left:0;top:4px;width:46px;height:2px;border-radius:2px;
  background:oklch(60% .2 28);box-shadow:0 0 12px oklch(60% .2 28);
  animation:s4sweep 4.6s cubic-bezier(.4,0,.6,1) forwards}
@keyframes s4sweep{0%{opacity:0;transform:translateY(0)}
  4%{opacity:1}18%{transform:translateY(46px)}32%{transform:translateY(0)}
  38%{opacity:1;transform:translateY(46px)}42%,100%{opacity:0}}
.s4cross{position:absolute;left:56px;top:18px;width:22px;height:22px;border-radius:50%;
  background:color-mix(in srgb,oklch(60% .18 28) 13%,#fff);
  animation:s4qpulse 4.6s ease forwards}
.s4cross::before,.s4cross::after{content:"";position:absolute;inset:50% 5px auto 5px;height:1.8px;
  border-radius:2px;background:oklch(55% .18 28)}
.s4cross::before{rotate:45deg}.s4cross::after{rotate:-45deg}

.s4key{position:absolute;right:6px;top:1px;z-index:2;display:block;
  width:52px;height:52px;border-radius:15px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--sh-2);
  display:grid;place-items:center;opacity:0;
  animation:s4keypress 4.6s cubic-bezier(.2,.9,.3,1) forwards}
.s4key b{font:800 24px/1 Inter,sans-serif;color:var(--ink)}
@keyframes s4keypress{0%,40%{opacity:0;transform:translateY(10px) scale(.8)}
  50%{opacity:1;transform:scale(1.06)}
  56%{transform:scale(.86)}            /* it goes down */
  64%,100%{opacity:1;transform:scale(1)}}

.s4brow{display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:13px;
  background:#fff;border:1px solid color-mix(in srgb,var(--leaf) 22%,#fff);
  box-shadow:0 10px 24px color-mix(in srgb,var(--leaf) 12%,transparent);
  opacity:0;animation:s4rowin 4.6s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes s4rowin{0%,56%{opacity:0;transform:translateX(44px)}
  70%,100%{opacity:1;transform:none}}
.s4brow b{font:700 14px/1 Inter,sans-serif;color:var(--ink)}
.s4brow i{font-style:normal;font-size:12px;color:var(--mut)}
.s4brow u{margin-left:auto;text-decoration:none;font:800 15px/1 Inter,sans-serif;
  color:var(--leaf);font-variant-numeric:tabular-nums}

/* ---- 4. money to weight ------------------------------------------ */
.s4mon{display:flex;align-items:center;gap:9px}
.s4fld{flex:1;min-width:0;padding:11px 12px;border-radius:13px;background:#fff;
  border:1px solid var(--line)}
.s4fld i{display:block;font-style:normal;font:600 9.5px/1 Inter,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.s4fld > b{display:block;margin-top:5px;font:800 23px/24px Inter,sans-serif;
  letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.s4fld.s4out{position:relative;border-color:color-mix(in srgb,var(--leaf) 30%,#fff);
  box-shadow:0 10px 24px color-mix(in srgb,var(--leaf) 12%,transparent)}
.s4w1{color:var(--mut)!important;animation:s4numout 4.6s cubic-bezier(.3,0,.2,1) forwards}
.s4w2{color:var(--leaf)!important;animation:s4numin 4.6s cubic-bezier(.2,.9,.3,1) forwards}

/* the swap arrow is the machine doing the sum */
.s4swap{flex:0 0 auto;width:24px;height:24px;border-radius:50%;position:relative;
  color:var(--leaf);animation:s4swapturn 4.6s cubic-bezier(.2,.9,.3,1) forwards}
.s4swap::before,.s4swap::after{content:"";position:absolute;left:6px;right:6px;height:1.6px;
  border-radius:2px;background:currentcolor}
.s4swap::before{top:9px}.s4swap::after{top:13px}
@keyframes s4swapturn{
  0%,40%{rotate:0deg;color:var(--leaf);background:color-mix(in srgb,var(--leaf) 11%,#fff)}
  62%,100%{rotate:180deg;color:#fff;background:var(--leaf)}}

/* ---- the rate, as it really moved -------------------------------
   Eighteen purchases of one item off this shop's own books. The line
   draws itself and the two marks land on the dearest and the cheapest.
   ------------------------------------------------------------------ */
.s4chart{position:relative;display:block;height:74px;opacity:0;
  animation:s4chartin 4.6s ease forwards}
@keyframes s4chartin{0%,40%{opacity:0}50%,100%{opacity:1}}
.s4chart svg{display:block;width:100%;height:100%;overflow:visible}
.s4cfill{fill:color-mix(in srgb,var(--leaf) 11%,transparent);opacity:0;
  animation:s4cfadein 4.6s ease forwards}
@keyframes s4cfadein{0%,62%{opacity:0}86%,100%{opacity:1}}
.s4cline{fill:none;stroke:var(--leaf);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:380;stroke-dashoffset:380;
  animation:s4draw 4.6s cubic-bezier(.3,0,.2,1) forwards}
@keyframes s4draw{0%,44%{stroke-dashoffset:380}82%,100%{stroke-dashoffset:0}}

.s4cdot{position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;
  translate:-50% -50%;opacity:0;animation:s4dotin 4.6s cubic-bezier(.2,.9,.3,1) forwards}
.s4cdot.s4hi{left:24.6%;top:13.5%;border:2.2px solid oklch(58% .18 28)}
.s4cdot.s4lo{left:97%;top:83.8%;border:2.2px solid var(--leaf);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--leaf) 45%,transparent)}
@keyframes s4dotin{0%,60%{opacity:0;scale:.3}72%{opacity:1;scale:1.5}78%,100%{opacity:1;scale:1}}
.s4cdot.s4lo{animation-name:s4dotlast}
@keyframes s4dotlast{0%,78%{opacity:0;scale:.3}88%{opacity:1;scale:1.6;
    box-shadow:0 0 0 9px color-mix(in srgb,var(--leaf) 0%,transparent)}
  100%{opacity:1;scale:1;box-shadow:0 0 0 0 color-mix(in srgb,var(--leaf) 0%,transparent)}}

.s4stat{display:flex;gap:7px}
.s4stat b{flex:1;min-width:0;padding:7px 9px;border-radius:11px;background:#fff;
  border:1px solid var(--line);font:800 14px/1.1 Inter,sans-serif;color:var(--ink);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  opacity:0;animation:s4statin 4.6s cubic-bezier(.2,.9,.3,1) forwards}
.s4stat b:nth-child(2){animation-name:s4statin2}
.s4stat b:nth-child(3){animation-name:s4statin3}
.s4stat i{display:block;margin-top:2px;font-style:normal;font-weight:500;
  font-size:9px;letter-spacing:.03em;text-transform:uppercase;color:var(--mut);
  white-space:nowrap}
@keyframes s4statin {0%,70%{opacity:0;transform:translateY(10px)}82%,100%{opacity:1;transform:none}}
@keyframes s4statin2{0%,74%{opacity:0;transform:translateY(10px)}86%,100%{opacity:1;transform:none}}
@keyframes s4statin3{0%,78%{opacity:0;transform:translateY(10px)}90%,100%{opacity:1;transform:none}}

/* ---- the one thing a thumb can hold ------------------------------
   Research for 2026 is blunt about this: one interactive element beats
   three, and every drag needs a tap that does the same job. So the
   whole act is scrubbed by this handle, a tap runs it to the end, and
   if nobody touches it the act plays itself after a moment.
   ------------------------------------------------------------------ */
.s4stage{--s4p:0}
.s4stage::before,.s4stage::after,.s4act *{
  animation-play-state:paused!important;
  animation-delay:calc(var(--s4p) * -4.6s + var(--s4s,0s))!important}

.s4grip{position:absolute;z-index:6;left:14px;right:14px;bottom:24px;height:42px;
  padding:0;border:0;background:none;cursor:grab;touch-action:pan-y;
  -webkit-tap-highlight-color:transparent}
.s4grip:active{cursor:grabbing}
.s4track{position:absolute;inset:0;border-radius:99px;overflow:hidden;
  background:color-mix(in srgb,var(--ink) 4%,#fff);border:1px solid var(--line)}
.s4gfill{position:absolute;inset:0;transform-origin:left center;transform:scaleX(var(--s4p));
  background:color-mix(in srgb,var(--leaf) 15%,#fff)}
.s4knob{position:absolute;top:4px;width:34px;height:34px;border-radius:50%;
  left:calc(4px + var(--s4p) * (100% - 42px));
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
/* two chevrons on the knob, so it reads as a thing you pull */
.s4knob::before,.s4knob::after{content:"";position:absolute;top:12px;width:6px;height:6px;
  border-top:1.6px solid var(--leaf);border-right:1.6px solid var(--leaf);
  rotate:45deg;border-radius:1px;opacity:calc(1 - var(--s4p) * 1.6)}
.s4knob::before{left:9px}.s4knob::after{left:16px}
.s4gtxt{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.s4gtxt em,.s4gtxt i{grid-area:1/1;font-style:normal;
  font:600 12.5px/1 Inter,sans-serif;letter-spacing:.02em;padding-left:30px}
.s4gtxt em{color:var(--mut);opacity:calc(1 - var(--s4p) * 2.2)}
.s4gtxt i{color:var(--leaf);opacity:calc(var(--s4p) * 2.4 - 1.4);padding-left:0}
/* a small breath while it waits to be touched */
.s4:not(.s4touched) .s4knob{animation:s4nudge 2.6s ease-in-out infinite}
@keyframes s4nudge{0%,62%,100%{translate:0 0}72%{translate:7px 0}82%{translate:0 0}}

/* ---- the words, riding with the card ----------------------------
   They sit with the card and swap with the act, so the two are never
   pulled apart.
   ------------------------------------------------------------------ */
.s4cap{position:relative;display:grid;margin-top:18px;min-height:112px}
.s4cp{grid-area:1/1;align-self:start;
  opacity:0;visibility:hidden;transform:translateY(16px);filter:blur(5px);
  transition:opacity .42s cubic-bezier(.2,.9,.3,1),transform .5s cubic-bezier(.2,.9,.3,1),
    filter .42s,visibility .42s}
.s4stage[data-act="1"] ~ .s4cap .s4cp[data-i="1"],
.s4stage[data-act="2"] ~ .s4cap .s4cp[data-i="2"],
.s4stage[data-act="3"] ~ .s4cap .s4cp[data-i="3"],
.s4stage[data-act="4"] ~ .s4cap .s4cp[data-i="4"]{
  opacity:1;visibility:visible;transform:none;filter:blur(0)}

.s4no{display:block;font:800 11px/1 Inter,sans-serif;letter-spacing:.16em;color:var(--leaf)}
.s4bad{margin-top:7px;color:var(--mut);font-size:14px;line-height:1.4;
  text-decoration:line-through;
  text-decoration-color:color-mix(in srgb,var(--mut) 45%,transparent)}
.s4good{margin-top:4px;font-size:clamp(21px,2.3vw,29px);font-weight:800;line-height:1.16;
  letter-spacing:-.025em;color:var(--ink);text-wrap:balance}


#solved .tally{margin-top:8px}

@media(max-width:380px){
  .s4c1,.s4c2{font-size:34px}
}

/* a page that still says everything, with nothing moving */
@media(prefers-reduced-motion:reduce){
  .s4stage::before,.s4stage::after,.s4c1,.s4c2,.s4w1,.s4w2,.s4line i,.s4bar b,.s4tag b,.s4tag em,.s4tag u,
  .s4beam,.s4cross,.s4key,.s4brow,.s4swap{animation:none!important}
  .s4cp{transition:none!important}
  .s4c1,.s4w1,.s4tag em,.s4tag u,.s4cross,.s4beam,.s4key{display:none!important}
  .s4c2,.s4w2,.s4brow,.s4chart,.s4cline,.s4cfill,.s4cdot,.s4stat b{
    opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
  .s4bar b{width:13%;background:var(--leaf)}
  .s4line i{opacity:1;background:color-mix(in srgb,var(--leaf) 55%,#fff)}
}