/* filefinch home: the lit "direct flight" landing page. Dark first, with
   hairline grids, soft radial light and objects drawn with light, and an
   equally careful light theme. Loaded only on the home page, after site.css. */

:root {
  --lx-line: #10244A; --lx-soft: rgba(16, 36, 74, .16); --lx-faint: rgba(16, 36, 74, .07);
  --lx-blue: #2F6FED; --lx-blue2: #5B93FF; --lx-coral: #FF6A2B; --lx-sun: #F5A623; --lx-mint: #14A77A; --lx-core: #10244A;
  --lx-panel: rgba(255, 255, 255, .86); --lx-panel-line: rgba(16, 36, 74, .14); --lx-text: #10244A; --lx-sub: #51658A;
  --hair: rgba(16, 36, 74, .08);
  --hair-2: rgba(16, 36, 74, .14);
  --bg-deep: #F7F9FD;
  --surface: rgba(255, 255, 255, .78);
  --grad: linear-gradient(92deg, #2F6FED 0%, #6C7BFF 38%, #FF8A4C 78%, #FFB347 100%);
  --solid-bg: #0B1530; --solid-fg: #FFFFFF;
  --glow-a: .55;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lx-line: #EAF1FF; --lx-soft: rgba(234, 241, 255, .16); --lx-faint: rgba(234, 241, 255, .07);
    --lx-blue: #7AB8FF; --lx-blue2: #4C8DFF; --lx-coral: #FF9B66; --lx-sun: #FFC86B; --lx-mint: #5BE6B8; --lx-core: #FFFFFF;
    --lx-panel: rgba(20, 34, 72, .72); --lx-panel-line: rgba(160, 190, 255, .22); --lx-text: #EAF1FF; --lx-sub: #9DB3E0;
    --hair: rgba(255, 255, 255, .07); --hair-2: rgba(255, 255, 255, .12);
    --bg-deep: #050913; --surface: rgba(14, 23, 48, .66);
    --grad: linear-gradient(92deg, #8FC3FF 0%, #9AA6FF 38%, #FF9B66 78%, #FFC86B 100%);
    --solid-bg: #FFFFFF; --solid-fg: #050913;
    --glow-a: 1;
  }
}
:root[data-theme="dark"] {
  --lx-line: #EAF1FF; --lx-soft: rgba(234, 241, 255, .16); --lx-faint: rgba(234, 241, 255, .07);
  --lx-blue: #7AB8FF; --lx-blue2: #4C8DFF; --lx-coral: #FF9B66; --lx-sun: #FFC86B; --lx-mint: #5BE6B8; --lx-core: #FFFFFF;
  --lx-panel: rgba(20, 34, 72, .72); --lx-panel-line: rgba(160, 190, 255, .22); --lx-text: #EAF1FF; --lx-sub: #9DB3E0;
  --hair: rgba(255, 255, 255, .07); --hair-2: rgba(255, 255, 255, .12);
  --bg-deep: #050913; --surface: rgba(14, 23, 48, .66);
  --grad: linear-gradient(92deg, #8FC3FF 0%, #9AA6FF 38%, #FF9B66 78%, #FFC86B 100%);
  --solid-bg: #FFFFFF; --solid-fg: #050913;
  --glow-a: 1;
}

body.home { background: var(--bg-deep); }
.home .topbar { background: color-mix(in oklab, var(--bg-deep) 72%, transparent); border-bottom-color: var(--hair); }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn-solid { background: var(--solid-bg); color: var(--solid-fg); border-color: var(--solid-bg); box-shadow: 0 0 0 1px var(--hair-2), 0 18px 40px -18px color-mix(in oklab, var(--lx-blue) 70%, transparent); }
.btn-solid:hover { color: var(--solid-fg); transform: translateY(-1px); box-shadow: 0 0 0 1px var(--hair-2), 0 22px 46px -16px color-mix(in oklab, var(--lx-blue) 85%, transparent); }
.btn-line { background: color-mix(in oklab, var(--bg-deep) 40%, transparent); color: var(--ink); border-color: var(--hair-2); backdrop-filter: blur(6px); }
.btn-line:hover { color: var(--ink); border-color: color-mix(in oklab, var(--lx-blue) 60%, transparent); }
.home .kicker { color: var(--lx-coral); letter-spacing: .18em; }
:root:not([data-theme="dark"]) .home .kicker { color: var(--coral-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .home .kicker { color: var(--lx-coral); } }

/* ---------- Hero ---------- */
.hx { position: relative; isolation: isolate; overflow: hidden; padding: clamp(2.6rem, 4.5vw, 5rem) 1rem clamp(3rem, 4vw, 4.5rem); border-bottom: 1px solid var(--hair); }
.hx-bg, .close-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hx-grid { position: absolute; inset: -1px; background-image: linear-gradient(var(--hair) 1px, transparent 1px), linear-gradient(90deg, var(--hair) 1px, transparent 1px); background-size: 64px 64px; background-position: center top; mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 75%); }
.hx-glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: calc(.42 * var(--glow-a) + .12); }
.hx-glow.g1 { width: 46rem; height: 30rem; left: 38%; top: -12rem; background: radial-gradient(closest-side, var(--lx-blue), transparent); }
.hx-glow.g2 { width: 34rem; height: 26rem; right: -8rem; top: 14rem; background: radial-gradient(closest-side, var(--lx-coral), transparent); opacity: calc(.32 * var(--glow-a) + .08); }
.hx-spot { position: absolute; width: 36rem; height: 36rem; left: calc(var(--mx, 70%) - 18rem); top: calc(var(--my, 40%) - 18rem); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--lx-blue) 22%, transparent), transparent); transition: opacity .4s; opacity: 0; }
.hx.is-pointer .hx-spot { opacity: 1; }
.hx-in { max-width: 82rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.pill { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .8rem .3rem .3rem; border-radius: 999px; border: 1px solid var(--hair-2); background: var(--surface); color: var(--ink); text-decoration: none; font-size: .88rem; font-weight: 600; backdrop-filter: blur(8px); margin-bottom: 1.6rem; }
.pill:hover { color: var(--ink); border-color: color-mix(in oklab, var(--lx-blue) 55%, transparent); }
.pill-new { padding: .18rem .55rem; border-radius: 999px; background: var(--grad); color: #fff; font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.pill .ic { width: 1rem; height: 1rem; }
.hx h1 { font-size: clamp(2.6rem, 1.2rem + 4.6vw, 5.4rem); line-height: .95; letter-spacing: -.055em; margin: 0 0 1.4rem; font-weight: 850; }
.hx h1 .grad { display: block; padding-bottom: .08em; }
.hx .lede { font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); margin: 0 0 2rem; max-width: 36rem; color: var(--soft); }
.hx-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 2rem; }
.promise { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.hx .promise li { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 600; color: var(--soft); background: none; border: 0; padding: 0; }
.promise .ic { width: 1rem; height: 1rem; color: var(--lx-mint); }
.hx-side { min-width: 0; }
.pill { margin-bottom: 1.2rem; }
@media (max-width: 1023px) {
  .hx-in { grid-template-columns: 1fr; }
  .hx-side { max-width: 44rem; width: 100%; justify-self: center; }
}

/* ---------- Platform strip ---------- */
.strip { padding: 2.4rem 1rem 2.6rem; text-align: center; border-bottom: 1px solid var(--hair); }
.strip-k { margin: 0 0 1.2rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .16em; color: var(--soft); font-weight: 700; }
.plats { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem clamp(1.2rem, 4vw, 3.4rem); max-width: 70rem; }
.plat { display: inline-flex; align-items: center; gap: .55rem; color: var(--soft); font-weight: 650; font-size: 1rem; opacity: .85; transition: opacity .2s, color .2s; }
.plat:hover { opacity: 1; color: var(--ink); }
.plat svg { width: 1.9rem; height: 1.9rem; }
.browsers { margin: 1.1rem 0 0; font-size: .9rem; color: var(--soft); letter-spacing: .02em; }
.browsers span { margin: 0 .35rem; opacity: .4; }

.c0 { background: #FF7A45; } .c1 { background: #2F6FED; } .c2 { background: #22B98A; } .c3 { background: #FFC93C; }
.bit { position: absolute; width: 22px; height: 22px; margin: -11px; filter: drop-shadow(0 0 6px rgb(255 160 90 / .6)); animation: burst 1.4s cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes burst {
  0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.4); }
  12% { opacity: 1; }
  70% { opacity: 1; transform: translate(var(--bx), var(--by)) rotate(var(--br)) scale(1); }
  100% { opacity: 0; transform: translate(var(--bx), calc(var(--by) + 40px)) rotate(calc(var(--br) * 1.4)) scale(.9); }
}

/* ---------- Sections ---------- */
.home .sec { padding: clamp(4rem, 8vw, 7.5rem) 1rem; border-bottom: 1px solid var(--hair); }
.home .sec-tint { background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--lx-blue) 5%, transparent) 50%, transparent); }
.home .sec-head h2, .st h2, .home .split h2 { font-size: clamp(2rem, 1.1rem + 3vw, 3.6rem); letter-spacing: -.045em; line-height: 1; }
.home .sec-head { margin-bottom: 3rem; }

.glow-card { position: relative; isolation: isolate; background: var(--surface); border: 1px solid var(--hair-2); border-radius: 22px; overflow: hidden; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; --gx: 50%; --gy: 0%; }
.glow-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(28rem 16rem at var(--gx) var(--gy), color-mix(in oklab, var(--gc) calc(var(--glow-a) * 26% + 8%), transparent), transparent 70%); opacity: .75; transition: opacity .3s; }
.glow-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; background: radial-gradient(18rem 12rem at var(--gx) var(--gy), color-mix(in oklab, var(--gc) 80%, transparent), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; }
.glow-card:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--gc) 45%, var(--hair-2)); box-shadow: 0 30px 60px -36px color-mix(in oklab, var(--gc) 70%, transparent); }
.glow-card:hover::before { opacity: 1; }
.glow-card:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .glow-card, .glow-card:hover { transform: none; transition: none; } }

/* Story sections */
.st { padding: clamp(4rem, 8vw, 8rem) 1rem; border-bottom: 1px solid var(--hair); position: relative; overflow: hidden; }
.st-in { max-width: 82rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.st-flip .st-copy { order: 2; }
.st-copy .lede { margin: 1rem 0 1.6rem; }
.st-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; border-top: 1px solid var(--hair-2); padding-top: 1.4rem; }
.st-list li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .6rem; color: var(--soft); line-height: 1.5; }
.st-list strong { color: var(--ink); }
.st-list .ic { width: 1.15rem; height: 1.15rem; margin-top: .2rem; color: var(--lx-mint); }
.honest-note { margin-top: 1.6rem; padding: 1rem 1.15rem; border-radius: 16px; border: 1px solid var(--hair-2); border-left: 4px solid var(--lx-coral); background: var(--surface); font-size: .95rem; color: var(--soft); }
.honest-note p { margin: 0; }
.honest-note strong { color: var(--ink); }
@media (max-width: 960px) { .st-in { grid-template-columns: 1fr; } .st-flip .st-copy { order: 0; } }

.vis-stack { position: relative; display: grid; gap: 1.2rem; }
.lit img { border-radius: 22px; }
.st-vis { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.st-vis.is-in { opacity: 1; transform: none; }
.no-js .st-vis, .st-vis.no-anim { opacity: 1; transform: none; }

.wf { margin: 0; border-radius: 14px; border: 1px solid var(--hair-2); background: var(--card); box-shadow: var(--shadow-lg), 0 0 80px -30px color-mix(in oklab, var(--lx-blue) calc(var(--glow-a) * 60%), transparent); overflow: hidden; }
.wf-bar { display: flex; align-items: center; gap: .4rem; padding: .55rem .8rem; border-bottom: 1px solid var(--hair-2); background: var(--card-2); }
.wf-bar i { width: .65rem; height: .65rem; border-radius: 50%; background: #ff5f57; }
.wf-bar i:nth-child(2) { background: #febc2e; } .wf-bar i:nth-child(3) { background: #28c840; }
.wf-bar span { margin-left: .6rem; font: 600 .75rem/1 var(--mono); color: var(--soft); padding: .3rem .7rem; border-radius: 6px; background: var(--hair); }
.wf img { display: block; width: 100%; height: auto; }
.pf { margin: 0; width: min(46%, 16rem); justify-self: end; border-radius: 36px; border: 8px solid #0F1B38; background: #0F1B38; overflow: hidden; box-shadow: var(--shadow-lg); }
.pf img { display: block; width: 100%; height: auto; }
.vis-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15.5rem); align-items: center; }
.vis-duo .pf { width: 100%; margin-left: -2.5rem; z-index: 2; position: relative; }
.vis-duo > :first-child { min-width: 0; }
.vis-glow { position: relative; }
.vis-glow .vis-bg { position: absolute; inset: -12% -8% auto; z-index: -1; opacity: .55; pointer-events: none; }
.st { isolation: isolate; }
@media (max-width: 560px) { .vis-duo { grid-template-columns: 1fr; gap: 1rem; } .vis-duo .pf { width: 70%; margin: 0 auto; } }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.stats div, .numbers div { padding: 1rem; border-radius: 16px; border: 1px solid var(--hair-2); background: var(--surface); }
.stats b, .numbers b { display: block; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); letter-spacing: -.04em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.stats span, .numbers span { display: block; margin-top: .35rem; font-size: .82rem; color: var(--soft); }
.numbers { max-width: var(--wrap); margin: 2.4rem auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 760px) { .numbers { grid-template-columns: 1fr 1fr; } .stats { grid-template-columns: 1fr; } }

.knit { position: relative; padding: 1.4rem; border-radius: 24px; border: 1px solid var(--hair-2); background: var(--surface); box-shadow: var(--shadow-lg); }
.knit svg { width: 100%; height: auto; overflow: visible; }
.knit path { fill: none; stroke-width: 5; stroke-linecap: round; }
.kn-a { stroke: var(--lx-blue); }
.kn-b { stroke: var(--lx-mint); stroke-dasharray: 400; stroke-dashoffset: 0; }
.kn-spark { fill: var(--lx-coral); filter: drop-shadow(0 0 8px var(--lx-coral)); opacity: 0; }
.kn-cut, .kn-resume { position: absolute; left: 50%; top: 1rem; translate: -50% 0; padding: .3rem .75rem; border-radius: 999px; font-weight: 750; font-size: .82rem; opacity: 0; transition: opacity .3s; display: inline-flex; gap: .3rem; align-items: center; }
.kn-cut { background: color-mix(in oklab, var(--lx-coral) 18%, transparent); color: var(--coral-ink); border: 1px solid color-mix(in oklab, var(--lx-coral) 40%, transparent); }
.kn-resume { background: var(--lx-mint); color: #04261b; }
.kn-resume .ic { width: .9rem; height: .9rem; }
.knit.is-play .kn-b { animation: knit 4.2s ease-in-out forwards; }
.knit.is-play .kn-spark { animation: sparkle 4.2s ease-in-out forwards; }
.knit.is-play .kn-cut { animation: show-mid 4.2s ease forwards; }
.knit.is-play .kn-resume { animation: show-end 4.2s ease forwards; }
@keyframes knit { 0% { stroke-dashoffset: 400; } 22% { stroke-dashoffset: 400; } 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes sparkle { 0%, 10% { opacity: 0; } 15%, 25% { opacity: 1; } 30% { opacity: .2; } 35% { opacity: 1; } 70% { opacity: 1; r: 7; } 80% { opacity: 0; r: 18; } 100% { opacity: 0; } }
@keyframes show-mid { 0%, 12% { opacity: 0; } 18%, 55% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes show-end { 0%, 68% { opacity: 0; } 76%, 100% { opacity: 1; } }

.unfold { position: relative; min-height: 18rem; border-radius: 24px; border: 1px solid var(--hair-2); background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; }
.uf-folder { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: .3rem; z-index: 2; transition: translate .7s cubic-bezier(.2, .9, .2, 1); }
.uf-folder svg { width: 5rem; height: 5rem; fill: var(--lx-sun); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 10px 22px color-mix(in oklab, var(--lx-sun) 50%, transparent)); }
.uf-folder b { font-size: .9rem; }
.uf-file { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .7rem; border-radius: 10px; background: var(--card); border: 1px solid var(--hair-2); font: 650 .82rem/1 var(--mono); white-space: nowrap; box-shadow: 0 10px 24px -14px rgb(0 0 0 / .4); translate: -50% -50%; scale: .3; opacity: 0; transition: translate .8s cubic-bezier(.2, .9, .2, 1), scale .8s cubic-bezier(.2, .9, .2, 1), opacity .5s; transition-delay: calc(var(--i) * 90ms + 150ms); }
.uf-file i { width: .7rem; height: .85rem; border-radius: 2px; }
.unfold.is-in .uf-folder { translate: -170% -50%; }
.unfold.is-in .uf-file { opacity: 1; scale: 1; }
.unfold.is-in .uf-file:nth-of-type(2) { translate: 10% -260%; }
.unfold.is-in .uf-file:nth-of-type(3) { translate: 40% -150%; }
.unfold.is-in .uf-file:nth-of-type(4) { translate: 20% -40%; }
.unfold.is-in .uf-file:nth-of-type(5) { translate: 50% 70%; }
.unfold.is-in .uf-file:nth-of-type(6) { translate: 10% 180%; }
.unfold.is-in .uf-file:nth-of-type(7) { translate: -60% 280%; }
.no-motion .unfold .uf-file, .no-motion .unfold .uf-folder { transition: none; }
@media (max-width: 480px) { .unfold { min-height: 24rem; } .unfold.is-in .uf-folder { translate: -50% -175%; } .unfold.is-in .uf-file:nth-of-type(n) { translate: -50% calc(-100% + var(--i) * 125%); } }

/* Feature cards */
.home .feat-grid { max-width: var(--wrap); margin: 0 auto; gap: 1rem; }
.home .feat { padding: 1.4rem 1.3rem 1.5rem; border-radius: 20px; }
.home .feat .fi { width: 2.5rem; height: 2.5rem; padding: .3rem; border-radius: 12px; background: color-mix(in oklab, var(--gc) 16%, transparent); border: 1px solid color-mix(in oklab, var(--gc) 35%, transparent); }
.home .feat .fi img { width: 100%; height: 100%; }
.home .feat h3 { margin: 1rem 0 .35rem; font-size: 1.06rem; }

/* Closing */
.close { padding: clamp(3rem, 7vw, 7rem) 1rem; }
.close-in { position: relative; isolation: isolate; overflow: hidden; max-width: 82rem; margin: 0 auto; padding: clamp(2.5rem, 6vw, 5.5rem) 1.4rem clamp(2.5rem, 5vw, 4.5rem); border-radius: 36px; border: 1px solid var(--hair-2); text-align: center; background: var(--surface); }
.close-art { max-width: 34rem; margin: -1rem auto 0; }
.close h2 { font-size: clamp(2.3rem, 1.2rem + 4.6vw, 5.4rem); letter-spacing: -.055em; line-height: .98; margin: 0 0 1rem; }
.close h2 .grad { display: inline-block; }
.close p { color: var(--soft); max-width: 34rem; margin: 0 auto 1.6rem; font-size: 1.1rem; }
.close .hx-cta { justify-content: center; }
.close-finn { position: absolute; right: 2.4rem; bottom: 1.6rem; width: 5.5rem; opacity: .95; }
@media (max-width: 640px) { .close-finn { position: static; margin: 1rem auto 0; } }

/* Other sections on the dark canvas */
.home .scene, .home .table-wrap, .home .faq details, .home .limits div, .home .gcard { background: var(--surface); border-color: var(--hair-2); }
.home .tabs button { background: var(--surface); border-color: var(--hair-2); }
.home .tabs button[aria-selected="true"] { background: var(--solid-bg); color: var(--solid-fg); border-color: var(--solid-bg); }
.home .split-art, .home .scene figure { box-shadow: none; border: 1px solid var(--hair-2); }

@media (min-width: 1800px) {
  .hx-in, .st-in, .close-in { max-width: 100rem; }
}
@media (prefers-reduced-motion: reduce) {
  .st-vis { opacity: 1; transform: none; transition: none; }
  .uf-file, .uf-folder { transition: none !important; }
  .knit.is-play .kn-b, .knit.is-play .kn-spark, .knit.is-play .kn-cut { animation: none; }
  .knit .kn-resume { opacity: 1; }
}

/* ---------- PC and phone animation (hero loop and "how it works") ----------
   One component, two uses. data-step on .duo picks what each screen shows:
   open, code, type, confirm, send, done. Only opacity and transform move, so
   it stays on the compositor. Sizes are in em of the .duo font size, which
   follows the width of the component (container query units). */
.duo { --frame: #0F1B38; --dt: .45s; position: relative; container-type: inline-size; width: 100%; aspect-ratio: 16 / 10.4; font: 400 10px/1.25 var(--sans); color: var(--ink); user-select: none; }
:root[data-theme="dark"] .duo { --frame: #26365F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .duo { --frame: #26365F; } }
.hx-side, .hiw-stage { container-type: inline-size; }
@supports (font-size: 1cqw) { .duo { font-size: max(6px, 1.7cqw); } }
.duo::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: -2%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--lx-blue) 30%, transparent), transparent); filter: blur(8px); opacity: calc(.5 + .5 * var(--glow-a)); }
.duo-pc { position: absolute; left: 0; top: 4%; width: 63%; height: 86%; }
.duo-mon { position: absolute; inset: 0 0 13%; border-radius: 1.1em; border: .55em solid var(--frame); background: var(--card); overflow: hidden; box-shadow: var(--shadow-lg), 0 0 60px -20px color-mix(in oklab, var(--lx-blue) calc(var(--glow-a) * 70%), transparent); }
.duo-bar { display: flex; align-items: center; gap: .35em; height: 2.1em; padding: 0 .8em; border-bottom: 1px solid var(--hair-2); background: var(--card-2); }
.duo-bar i { width: .6em; height: .6em; border-radius: 50%; background: #ff5f57; }
.duo-bar i:nth-child(2) { background: #febc2e; } .duo-bar i:nth-child(3) { background: #28c840; }
.duo-bar span { margin-left: .5em; padding: .2em .7em; border-radius: .4em; background: var(--hair); font: 700 .85em/1 var(--mono); color: var(--soft); }
.duo-scr { position: absolute; inset: 2.1em 0 0; }
.duo-stand { position: absolute; left: 39%; width: 22%; bottom: 0; height: 13.5%; background: linear-gradient(#2C4370, #15264B); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); border-radius: 0 0 .4em .4em; }
.duo-phone { position: absolute; right: 1%; top: 6%; width: 23.5%; height: 84%; border-radius: 2em; border: .5em solid var(--frame); background: var(--card); overflow: hidden; box-shadow: var(--shadow-lg), 0 0 50px -18px color-mix(in oklab, var(--lx-coral) calc(var(--glow-a) * 60%), transparent); }
.duo-phone::before { content: ""; position: absolute; left: 35%; right: 35%; top: .5em; height: .7em; border-radius: 1em; background: var(--frame); }
.ph-scr { position: absolute; inset: 0; }

.scn { position: absolute; inset: 0; padding: 1em 1.1em; display: flex; flex-direction: column; opacity: 0; transform: translateY(.8em); transition: opacity var(--dt) ease, transform var(--dt) cubic-bezier(.2, .8, .2, 1); }
.ph-scr .scn { padding: 2em .8em .8em; }
.scn-t { margin: 0 0 .7em; font-weight: 800; font-size: 1.05em; letter-spacing: -.01em; line-height: 1.2; }
.ph-scr .scn-t { font-size: .95em; }
.duo[data-step="open"] .duo-pc .s-open, .duo[data-step="code"] .duo-pc .s-code, .duo[data-step="type"] .duo-pc .s-code,
.duo[data-step="confirm"] .duo-pc .s-confirm, .duo[data-step="send"] .duo-pc .s-recv, .duo[data-step="done"] .duo-pc .s-recv,
.duo[data-step="open"] .duo-phone .s-open, .duo[data-step="code"] .duo-phone .s-open, .duo[data-step="type"] .duo-phone .s-type,
.duo[data-step="confirm"] .duo-phone .s-confirm, .duo[data-step="send"] .duo-phone .s-send, .duo[data-step="done"] .duo-phone .s-send { opacity: 1; transform: none; }

/* Open: the app start screen */
.s-open { align-items: center; justify-content: center; text-align: center; gap: .3em; }
.duo-pc .s-open .scn-t { font-size: 1.4em; }
.ph-scr .s-open { align-items: stretch; justify-content: flex-start; text-align: left; gap: 0; }
.ph-scr .s-open .dwords li { min-height: 1.95em; }
.duo-logo { display: grid; place-items: center; width: 3.6em; height: 3.6em; margin-bottom: .5em; border-radius: 1.1em; background: var(--grad); color: #fff; box-shadow: 0 .8em 2em -.8em color-mix(in oklab, var(--lx-blue) 80%, transparent); }
.duo-logo .ic { width: 1.8em; height: 1.8em; }
.duo-btn { padding: .65em 1.2em; border-radius: .8em; background: var(--blue); color: var(--on-blue); font-weight: 800; font-size: 1em; }
.duo[data-step="open"] .duo-btn { animation: duo-press 1.8s ease-in-out .9s infinite; }
@keyframes duo-press { 0%, 60%, 100% { transform: none; } 70% { transform: scale(.92); } 82% { transform: scale(1.03); } }

/* Words on the PC and on the phone */
.dcode { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1em; align-items: center; flex: 1; }
.dqr { width: 100%; border-radius: .6em; box-shadow: 0 0 0 1px var(--hair-2); opacity: 0; transform: scale(.85); transition: opacity .5s ease .1s, transform .6s cubic-bezier(.2, 1.3, .4, 1) .1s; }
.dwords { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .45em; }
.dwords li { position: relative; display: flex; align-items: center; gap: .4em; min-height: 2.1em; margin: 0; padding: .3em .45em; border-radius: .6em; border: 1px solid var(--hair-2); background: var(--card-2); font: 700 .95em/1 var(--mono); }
.dwords b { flex: none; display: grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: .45em; background: var(--grad); color: #fff; font: 800 .75em/1 var(--sans); }
.s-code .dwords li, .s-confirm .dwords:not(.dwords-ph) li { opacity: 0; transform: scale(.7); transition: opacity .3s ease, transform .4s cubic-bezier(.2, 1.4, .4, 1); }
.duo[data-step="code"] .s-code :is(li, .dqr), .duo[data-step="type"] .s-code :is(li, .dqr), .duo[data-step="confirm"] .s-confirm .dwords:not(.dwords-ph) li { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 80ms + 180ms); }
.dwords-ph { grid-template-columns: 1fr; gap: .38em; }
.dwords-ph li { min-height: 1.95em; font-size: .9em; }
.dwords-ph li::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--lx-blue); opacity: 0; transition: opacity .25s; }
.dwords-empty li:first-child span::after { content: ""; display: inline-block; width: 2px; height: 1em; vertical-align: -.15em; background: var(--lx-blue); animation: caret .9s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.dwords-typed li > span { opacity: 0; transform: translateY(.3em); transition: opacity .2s, transform .25s; }
.dwords-typed .dr { color: var(--soft); opacity: 0; transition: opacity .25s; }
.duo[data-step="type"] .s-type li > span, .duo[data-step="confirm"] .s-confirm .dwords-typed li > span { opacity: 1; transform: none; transition-delay: calc(var(--i) * 360ms + 300ms); }
.duo[data-step="type"] .s-type .dr, .duo[data-step="confirm"] .s-confirm .dr { opacity: .75; transition-delay: calc(var(--i) * 360ms + 520ms); }
.duo[data-step="type"] .s-type li::after { opacity: .9; transition-delay: calc(var(--i) * 360ms + 300ms); }
.duo[data-step="confirm"] .s-confirm .dwords-typed li > span { transition-delay: calc(var(--i) * 180ms + 700ms); }
.duo[data-step="confirm"] .s-confirm .dr { transition-delay: calc(var(--i) * 180ms + 800ms); }
.duo[data-step="confirm"] .s-confirm .dwords-ph li::after { opacity: .9; border-color: var(--lx-mint); transition-delay: calc(var(--i) * 180ms + 700ms); }

/* Received rows on the PC, files on the phone */
.drows { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.drows li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto 1.3em; gap: .6em; align-items: center; margin: 0; padding: .5em .6em; border-radius: .7em; border: 1px solid var(--hair-2); background: var(--card-2); }
.drows i, .dthumbs i { display: block; flex: none; width: 1.6em; height: 1.9em; border-radius: .35em; }
.dw-l { display: grid; gap: .35em; min-width: 0; }
.dw-l b { font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-l em { display: block; height: .35em; border-radius: 1em; background: var(--hair-2); overflow: hidden; }
.dw-l s { display: block; height: 100%; border-radius: inherit; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 0s linear .5s; }
.dw-s { font: 700 .78em/1 var(--mono); color: var(--soft); }
.dw-ok { width: 1.3em; height: 1.3em; padding: .2em; border-radius: 50%; background: var(--lx-mint); color: #04261b; stroke-width: 3.5; transform: scale(0); transition: transform 0s .5s; }
.duo[data-step="send"] .dw-l s, .duo[data-step="done"] .dw-l s { transform: none; transition: transform 1s cubic-bezier(.3, .1, .3, 1) calc(var(--i) * .45s + .55s); }
.duo[data-step="done"] .dw-ok { transform: none; transition: transform .45s cubic-bezier(.2, 1.6, .4, 1) calc(var(--i) * 110ms); }
.scn-ok { margin: auto 0 0; display: inline-flex; align-items: center; gap: .4em; font-weight: 800; font-size: .9em; color: var(--mint-ink); opacity: 0; transform: translateY(.4em); transition: opacity .3s, transform .3s; }
.scn-ok .ic { width: 1.1em; height: 1.1em; }
.duo[data-step="done"] .scn-ok { opacity: 1; transform: none; transition-delay: .35s; }
.t-done { display: none; }
.duo[data-step="done"] .t-recv { display: none; }
.duo[data-step="done"] .t-done { display: inline; }
.dthumbs { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; }
.dthumbs li { display: flex; align-items: center; gap: .5em; margin: 0; padding: .4em; border-radius: .6em; border: 1px solid var(--hair-2); background: var(--card-2); font-size: .82em; font-weight: 700; min-width: 0; transition: opacity .3s; }
.dthumbs span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duo[data-step="send"] .dthumbs li, .duo[data-step="done"] .dthumbs li { opacity: .4; transition-delay: calc(var(--i) * .45s + .25s); }

/* The link between the devices */
.duo-link { position: absolute; left: 61.5%; width: 16.5%; top: 47%; height: 0; z-index: 3; }
.beam { position: absolute; left: 0; right: 0; top: -.2em; height: .4em; border-radius: 1em; overflow: hidden; background: linear-gradient(90deg, var(--lx-mint), var(--lx-blue)); box-shadow: 0 0 1.2em color-mix(in oklab, var(--lx-mint) calc(var(--glow-a) * 80%), transparent); transform: scaleX(0); transform-origin: right; transition: transform .5s cubic-bezier(.3, .8, .3, 1); }
.beam::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .85), transparent); transform: translateX(260%); }
.duo:is([data-step="confirm"], [data-step="send"], [data-step="done"]) .beam { transform: none; }
.duo:is([data-step="send"], [data-step="done"]) .beam::after { animation: beam 1.1s linear infinite; }
@keyframes beam { from { transform: translateX(260%); } to { transform: translateX(-110%); } }
.duo-badge { position: absolute; left: 50%; bottom: 1em; display: inline-flex; align-items: center; gap: .35em; padding: .4em .75em; border-radius: 999px; background: var(--lx-mint); color: #04261b; font-weight: 800; font-size: .88em; white-space: nowrap; box-shadow: 0 .6em 1.4em -.6em rgb(0 0 0 / .45); opacity: 0; transform: translate(-50%, .5em) scale(.85); transition: opacity .3s, transform .4s cubic-bezier(.2, 1.5, .4, 1); }
.duo-badge .ic { width: 1.05em; height: 1.05em; stroke-width: 3; }
.b-direct { background: var(--solid-bg); color: var(--solid-fg); }
.duo[data-step="confirm"] .b-match { opacity: 1; transform: translate(-50%, 0); transition-delay: 1.9s; }
.duo:is([data-step="send"], [data-step="done"]) .b-direct { opacity: 1; transform: translate(-50%, 0); }

/* Files flying from the phone to the PC on an arc: x and y move on two nested
   layers with different easing, so only transforms change. */
.duo-fly, .duo-burst { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.fx { position: absolute; left: 87%; top: 46%; width: 2.8em; height: 3.3em; margin: -1.65em 0 0 -1.4em; opacity: 0; }
.fy, .fy i { display: block; width: 100%; height: 100%; }
.fy i { border-radius: .5em; border: .2em solid #fff; box-shadow: 0 .6em 1.4em -.4em rgb(0 0 0 / .45), 0 0 1.4em color-mix(in oklab, var(--lx-sun) calc(var(--glow-a) * 70%), transparent); }
.duo[data-step="send"] .fx { animation: duo-fx 1.15s linear calc(var(--i) * .45s + .2s) both; }
.duo[data-step="send"] .fy { animation: duo-fy 1.15s calc(var(--i) * .45s + .2s) both; }
@keyframes duo-fx { 0% { opacity: 0; transform: none; } 12%, 86% { opacity: 1; } 100% { opacity: 0; transform: translateX(-55cqw); } }
@keyframes duo-fy {
  0% { transform: translateY(0) scale(.6) rotate(0deg); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  50% { transform: translateY(-14cqw) scale(1.1) rotate(-10deg); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  100% { transform: translateY(1cqw) scale(.55) rotate(0deg); }
}
.duo-burst .bit { width: 1.9em; height: 1.9em; margin: -.95em; }
.duo-burst .bit svg { width: 100%; height: 100%; }
.duo.is-paused *, .duo.is-paused *::after { animation-play-state: paused !important; }

/* Narrow: bigger text, the QR code steps aside for the words */
@container (max-width: 520px) {
  .duo-bar span { display: none; }
  .dcode { grid-template-columns: 1fr; }
  .dqr { display: none; }
  .scn { padding: .8em; }
  .dwords { gap: .35em; }
  .dwords li { font-size: .88em; padding: .25em .35em; }
}
@media (max-width: 560px) { .duo { aspect-ratio: 16 / 12; font-size: max(7px, 2.25cqw); } }

/* Hero placement */
.hx .duo { max-width: 46rem; margin: 0 auto; }

/* ---------- How it works stepper ---------- */
.hiw { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hiw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.hiw-steps li { margin: 0; padding: 0; background: none; border: 0; }
.hiw-step { position: relative; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .9rem; align-items: start; width: 100%; padding: .95rem 1.1rem 1.15rem; border-radius: 18px; border: 1px solid transparent; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; opacity: .62; transition: opacity .25s, background-color .25s, border-color .25s, box-shadow .25s; }
.hiw-step:hover { opacity: .9; background: color-mix(in oklab, var(--surface) 60%, transparent); }
.hiw-step[aria-current] { opacity: 1; background: var(--surface); border-color: var(--hair-2); box-shadow: 0 24px 50px -34px color-mix(in oklab, var(--lx-blue) 80%, transparent); }
.hiw-step:focus-visible { outline: 3px solid color-mix(in oklab, var(--lx-blue) 70%, transparent); outline-offset: 2px; }
.hiw-n { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--hair-2); font-weight: 800; color: var(--soft); transition: background-color .25s, color .25s, transform .3s cubic-bezier(.2, 1.5, .4, 1); }
.hiw-step[aria-current] .hiw-n { background: var(--grad); color: #fff; border-color: transparent; transform: scale(1.06); }
.hiw-tx { display: grid; gap: .25rem; padding-top: .3rem; }
.hiw-tx b { font-size: 1.08rem; letter-spacing: -.01em; }
.hiw-tx span { color: var(--soft); font-size: .95rem; line-height: 1.5; }
.hiw-bar { position: absolute; left: 1.1rem; right: 1.1rem; bottom: .5rem; height: 3px; border-radius: 3px; background: var(--hair); overflow: hidden; opacity: 0; transition: opacity .25s; }
.hiw-bar s { display: block; height: 100%; background: var(--grad); transform: scaleX(1); transform-origin: left; }
.hiw-step[aria-current] .hiw-bar { opacity: 1; }
.hiw.is-playing .hiw-step[aria-current] .hiw-bar s { animation: hiw-bar var(--dur) linear both; }
@keyframes hiw-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hiw-stage { position: relative; display: grid; gap: 1.2rem; padding: clamp(1rem, 2.5vw, 2rem); border-radius: 28px; border: 1px solid var(--hair-2); background: radial-gradient(70% 60% at 50% 0%, color-mix(in oklab, var(--lx-blue) 14%, transparent), transparent), var(--surface); box-shadow: var(--shadow-lg); }
.hiw-cap { display: none; margin: 0; align-items: center; justify-content: center; gap: .6rem; font-weight: 750; text-align: center; }
.hiw-cap b { display: grid; place-items: center; flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--grad); color: #fff; font-size: .9rem; }
.hiw-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.hiw-play .i-play { display: none; }
.hiw-play.is-paused .i-play { display: inline; }
.hiw-play.is-paused .i-pause { display: none; }
.hiw-note { max-width: 46rem; margin: 2rem auto 0; display: flex; align-items: center; justify-content: center; gap: .55rem; text-align: center; font-size: .92rem; color: var(--soft); }
.dot { flex: none; width: .5rem; height: .5rem; border-radius: 50%; }
.dot-m { background: var(--lx-mint); box-shadow: 0 0 10px var(--lx-mint); }
@media (max-width: 960px) {
  .hiw { grid-template-columns: 1fr; }
  .hiw-stage { order: -1; }
  .hiw-cap { display: flex; }
  .hiw-step { padding: .8rem .9rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .duo *, .duo *::before, .duo *::after { transition: none !important; animation: none !important; }
  .fx { display: none; }
  .hiw-step, .hiw-n { transition: none; }
}

/* ---------- Special dates on the home page ---------- */
:root[data-season="newyear"] { --season-a: #F2C96B; --season-b: #8FB6FF; }
:root[data-season="carnival"] { --season-a: #B48CFF; --season-b: #FFD06B; }
:root[data-season="easter"] { --season-a: #9CC8FF; --season-b: #FFB3C7; }
:root[data-season="valentine"] { --season-a: #FF7C9C; --season-b: #FFB3C6; }
:root[data-season="junina"] { --season-a: #FF9F5A; --season-b: #FFD06B; }
:root[data-season="halloween"] { --season-a: #FF9F45; --season-b: #B48CFF; }
:root[data-season="christmas"] { --season-a: #5FD39A; --season-b: #FF7A88; }
:root[data-season] .hx-glow.g1 { background: radial-gradient(closest-side, color-mix(in oklab, var(--season-b) 70%, var(--lx-blue)), transparent); }
:root[data-season] .hx-glow.g2 { background: radial-gradient(closest-side, var(--season-a), transparent); }
.season-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.season-accent { position: absolute; left: 0; right: 0; top: 0; height: clamp(70px, 13vw, 200px); pointer-events: none; opacity: .9; animation: season-fade .8s ease both; }
.season-accent img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hx-side { position: relative; }
.season-slot { position: absolute; left: -2%; bottom: -6%; width: clamp(4.5rem, 22%, 9.5rem); z-index: 5; pointer-events: none; }
.season-finn { display: block; animation: season-hop .7s cubic-bezier(.2, 1.4, .4, 1) both; filter: drop-shadow(0 10px 18px rgb(0 0 0 / .18)); }
.season-finn img { width: 100%; height: auto; }
@keyframes season-fade { from { opacity: 0; } }
@keyframes season-hop { from { opacity: 0; transform: translateY(18px) scale(.9); } }
@media (max-width: 560px) { .season-slot { width: 4.6rem; left: -1%; bottom: -10%; } }
@media (prefers-reduced-motion: reduce) { .season-accent, .season-finn { animation: none; } }