.hero-3taps{--phone-top:max(24px, calc(50vh - 380px));--phone-h:min(760px, calc(100vh - 48px));--phone-aspect:9 / 19;--phone-radius:52px;--phone-pad:12px;--phone-bg:#0f0f12;--phone-shadow:0 60px 90px -50px #0000008c, inset 0 0 0 2px #2a2a30;--screen-radius:42px;--island-top:10px;--island-w:34%;--island-h:26px;--island-radius:14px;--finger-size:38px;--finger-fill:#17171b2e;--finger-edge:#17171b59;--finger-press:#ae262859;--key-size:120px;--t-slide:.7s;--t-finger:.6s;--t-fade:.3s;--t-press:.35s;--t-focus:.5s;--d-finger:.72s;--d-press:.65s;--step-min-h:78vh;--io-band:-45% 0px -45% 0px;--dir:1;--t-ring:2s;--d-ring-2:.7s;--d-tap-2:.3s;--d-tap-3:.6s;--loops:2;--demo-gap:clamp(30px, 6vw, 100px);--demo-cols:minmax(300px, 420px) 1fr;--stage-pad-bottom:16px;--screen-w:393px;--screen-h:852px;--screen-scale:.855;--island-ref-scale:.575}@property --io-band{syntax:"<length-percentage>+";inherits:true;initial-value:0}[dir=rtl] .hero-3taps{--dir:-1}@media (max-width:860px) and (orientation:portrait){.hero-3taps{--phone-top:10px;--phone-w-mobile:min(250px, calc((100svh - 320px) * 9 / 19));--stage-h:calc(var(--phone-top) + var(--phone-w-mobile) * 19 / 9 + var(--stage-pad-bottom));--step-min-h:calc(100svh - var(--stage-h));--io-band:calc(-50svh - var(--stage-h) / 2) 0px calc(var(--stage-h) / 2 - 50svh + 1px) 0px;--screen-scale:.575}}@media (max-width:860px) and (orientation:landscape){.hero-3taps{--demo-cols:auto 1fr}}@keyframes ring{0%{opacity:.8;transform:scale(.8)}to{opacity:0;transform:scale(1.5)}}@keyframes press{50%{background:var(--finger-press);transform:scale(.7)}}.hero-3taps .intro{padding-block:var(--intro-pad) 20px}.hero-3taps .taps i:nth-child(2){animation-delay:var(--d-tap-2)}.hero-3taps .taps i:nth-child(3){animation-delay:var(--d-tap-3)}.hero-3taps .taps i{animation-iteration-count:var(--loops)}.hero-3taps .demo{grid-template-columns:var(--demo-cols);gap:var(--demo-gap);padding-block:40px 80px;display:grid}.hero-3taps .stage{position:relative}.hero-3taps .phone{top:var(--phone-top);height:var(--phone-h);aspect-ratio:var(--phone-aspect);border-radius:var(--phone-radius);background:var(--phone-bg);max-width:100%;padding:var(--phone-pad);box-shadow:var(--phone-shadow);margin-inline:auto;position:sticky}.hero-3taps .screen{border-radius:var(--screen-radius);background:var(--a-bg);isolation:isolate;height:100%;position:relative;overflow:hidden}.hero-3taps .island{--k:min(1, var(--screen-scale) / var(--island-ref-scale));top:calc(var(--island-top) * var(--k));width:var(--island-w);height:calc(var(--island-h) * var(--k));border-radius:calc(var(--island-radius) * var(--k));background:var(--phone-bg);z-index:6;position:absolute;left:50%;translate:-50%}.hero-3taps .screen-box{width:var(--screen-w);height:var(--screen-h);transform:scale(var(--screen-scale));transform-origin:0 0;position:absolute;top:0;left:0;overflow:hidden}.hero-3taps .views{transform:translateX(calc(var(--step,0) * -100% * var(--dir)));transition:transform var(--t-slide) var(--ease-swap);will-change:transform;display:flex;position:absolute;inset:0}.hero-3taps .finger{width:var(--finger-size);height:var(--finger-size);background:var(--finger-fill);border:2px solid var(--finger-edge);z-index:7;opacity:0;pointer-events:none;transition:left var(--t-finger) var(--ease-swap), top var(--t-finger) var(--ease-swap), opacity var(--t-fade);border-radius:50%;position:absolute;top:0;left:0;translate:-50% -50%}.hero-3taps .finger.show{opacity:1}.hero-3taps .finger.press{animation:press var(--t-press) ease}.hero-3taps .finger.placed{transition:opacity var(--t-fade)}.hero-3taps .step{min-height:var(--step-min-h);flex-direction:column;justify-content:center;display:flex}.hero-3taps .step :is(.step-eyebrow,.step-title){transition:color var(--t-focus)}.js .hero-3taps .step:not([data-active]) :is(.step-eyebrow,.step-title){color:var(--color-muted)}@media (max-width:860px) and (orientation:portrait){.hero-3taps .demo{grid-template-columns:1fr;gap:0;padding-top:0}.hero-3taps .stage,.hero-3taps .steps{grid-area:1/1}.hero-3taps .stage{z-index:5;margin-inline:calc(-1 * var(--spacing-gutter));padding-top:var(--phone-top);padding-bottom:var(--stage-pad-bottom);background:var(--color-canvas);align-self:start;position:sticky;top:0}.hero-3taps .phone{width:var(--phone-w-mobile);height:auto;position:static}.hero-3taps .steps{padding-top:var(--stage-h)}.hero-3taps .step{justify-content:flex-start}.hero-3taps .step-head{top:var(--stage-h);z-index:1;background:var(--color-canvas);position:sticky}}@media (prefers-reduced-motion:reduce){.hero-3taps .views,.hero-3taps .step :is(.step-eyebrow,.step-title){transition:none}.hero-3taps .finger{display:none}}.hero-3taps .screen{--a-bg:#f4f3f1;--a-card:#fff;--a-ink:#141416;--a-muted:#6b6a70;--a-line:#e6e4e0;--a-fill:#edece9;--a-red:#ae2628;--a-red-t:#ae2628;--a-red-soft:#fbedec;--a-on-red:#fff;--a-seg-shadow:0 3px 8px #0000001f, 0 0 0 .5px #0000000a;--a-font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;--a-fs-large:34px;--a-fs-body:17px;--a-fs-subhead:13px;--a-fs-unit:12px;--a-fs-cal:16px;--a-fs-key:15px;--a-fs-note:14px;--a-lh:1.35;--a-lh-large:1.1;--a-lh-note:1.4;--a-track-large:-.02em;--a-track-section:.02em;--a-top:54px;--a-gutter:16px;--a-sec-gap:22px;--a-large-pad:4px 16px 10px;--a-sec-h-pad:0 16px 7px;--a-row-pad:11px 16px;--a-row-gap:12px;--a-card-pad:16px;--a-footer-pad:12px 16px 34px;--a-note-pad:12px 14px;--a-note-gap:10px;--a-btn-h:52px;--a-row-h:48px;--a-seg-h:32px;--a-cal-cell:40px;--a-thumb-w:70px;--a-thumb-h:48px;--a-r-group:14px;--a-r-card:18px;--a-r-button:14px;--a-r-note:14px;--a-r-seg:9px;--a-r-seg-thumb:7px;--a-r-thumb:9px}@media (prefers-color-scheme:dark){.hero-3taps .screen{--a-bg:#0b0b0c;--a-card:#1a1a1d;--a-ink:#f2f0ed;--a-muted:#a6a4ab;--a-line:#2c2c30;--a-fill:#242427;--a-red:#c3302f;--a-red-t:#ff6159;--a-red-soft:#ff615926}}[dir=rtl] .hero-3taps .screen{--a-font:var(--font-plex-arabic), var(--font-jakarta), "Segoe UI", Tahoma, sans-serif}.hero-3taps .view{height:100%;padding-top:calc(var(--a-top) + 4px);background:var(--a-bg);color:var(--a-ink);font:var(--a-fs-body)/var(--a-lh) var(--a-font);text-align:start;-webkit-font-smoothing:antialiased;flex-direction:column;flex:0 0 100%;display:flex}.hero-3taps .a-large{padding:var(--a-large-pad);font-size:var(--a-fs-large);letter-spacing:var(--a-track-large);font-weight:700;line-height:var(--a-lh-large)}[dir=rtl] .hero-3taps .a-large{letter-spacing:0}.hero-3taps .a-sec{padding:0 var(--a-gutter);margin-top:var(--a-sec-gap)}.hero-3taps .a-sec-h{font-size:var(--a-fs-subhead);color:var(--a-muted);text-transform:uppercase;letter-spacing:var(--a-track-section);padding:var(--a-sec-h-pad)}[dir=rtl] .hero-3taps .a-sec-h{text-transform:none;letter-spacing:0}.hero-3taps .a-group{background:var(--a-card);border-radius:var(--a-r-group);overflow:hidden}.hero-3taps .a-card{background:var(--a-card);border-radius:var(--a-r-card);padding:var(--a-card-pad)}.hero-3taps .a-row{align-items:center;gap:var(--a-row-gap);padding:var(--a-row-pad);min-height:var(--a-row-h);display:flex;position:relative}.hero-3taps .a-row+.a-row:before{content:"";top:0;background:var(--a-line);height:.5px;position:absolute;inset-inline-start:var(--a-gutter);inset-inline-end:0}.hero-3taps .a-row.sel{background:var(--a-red-soft)}.hero-3taps .a-row .tx{flex:1;min-width:0}.hero-3taps .a-row .v{color:var(--a-muted);text-align:end}.hero-3taps .a-row b{font-weight:700}.hero-3taps .a-row .tx b{font-size:var(--a-fs-body);display:block}.hero-3taps .a-row .tx small{color:var(--a-muted);font-size:var(--a-fs-subhead);margin-top:1px;display:block}.hero-3taps .a-row.sel .tx small,.hero-3taps .a-row.sel .pr small{color:var(--a-ink)}.hero-3taps .a-thumb{width:var(--a-thumb-w);height:var(--a-thumb-h);border-radius:var(--a-r-thumb);object-fit:cover;background:var(--a-fill);flex:none}.hero-3taps .pr{text-align:end;font-weight:700;font-size:var(--a-fs-body);white-space:nowrap}.hero-3taps .pr small{font-weight:400;font-size:var(--a-fs-unit);color:var(--a-muted);display:block}.hero-3taps .a-seg{background:var(--a-fill);border-radius:var(--a-r-seg);grid-auto-columns:1fr;grid-auto-flow:column;padding:2px;display:grid}.hero-3taps .a-seg span{font-size:var(--a-fs-subhead);border-radius:var(--a-r-seg-thumb);min-height:var(--a-seg-h);place-items:center;padding:7px 4px;font-weight:500;display:grid}.hero-3taps .a-seg .on{background:var(--a-card);box-shadow:var(--a-seg-shadow);font-weight:600}.hero-3taps .a-footer{padding:var(--a-footer-pad);margin-top:auto}.hero-3taps .a-btn{min-height:var(--a-btn-h);border-radius:var(--a-r-button);background:var(--a-red);color:var(--a-on-red);font-weight:600;font-size:var(--a-fs-body);justify-content:center;align-items:center;gap:8px;display:flex}.hero-3taps .a-cal{text-align:center;grid-template-columns:repeat(7,1fr);row-gap:4px;display:grid}.hero-3taps .a-cal .h{font-size:var(--a-fs-unit);color:var(--a-muted);padding:4px 0;font-weight:600}.hero-3taps .a-cal .d{height:var(--a-cal-cell);font-size:var(--a-fs-cal);isolation:isolate;place-items:center;display:grid;position:relative}.hero-3taps .a-cal .mid{background:var(--a-red-soft)}.hero-3taps .a-cal .s,.hero-3taps .a-cal .e{color:var(--a-on-red)}.hero-3taps .a-cal .s:before,.hero-3taps .a-cal .e:before{content:"";background:var(--a-red);z-index:-1;border-radius:50%;position:absolute;inset:2px 4px}.hero-3taps .a-cal .s{background:linear-gradient(90deg, transparent 50%, var(--a-red-soft) 50%)}.hero-3taps .a-cal .e{background:linear-gradient(90deg, var(--a-red-soft) 50%, transparent 50%)}[dir=rtl] .hero-3taps .a-cal .s{background:linear-gradient(-90deg, transparent 50%, var(--a-red-soft) 50%)}[dir=rtl] .hero-3taps .a-cal .e{background:linear-gradient(-90deg, var(--a-red-soft) 50%, transparent 50%)}.hero-3taps .a-methods{padding:0 var(--a-gutter);font-size:var(--a-fs-key);color:var(--a-muted)}.hero-3taps .a-total{font-weight:700}.hero-3taps .a-note{gap:var(--a-note-gap);border-radius:var(--a-r-note);padding:var(--a-note-pad);background:var(--a-fill);font-size:var(--a-fs-note);line-height:var(--a-lh-note);align-items:flex-start;display:flex}.hero-3taps .a-note svg{flex:none;margin-top:1px}.hero-3taps .a-key{width:var(--key-size);height:var(--key-size);background:var(--a-red-soft);color:var(--a-red-t);border-radius:50%;place-items:center;margin:10px auto 0;display:grid;position:relative}.hero-3taps .a-key:before,.hero-3taps .a-key:after{content:"";border:2px solid var(--a-red);opacity:0;border-radius:50%;position:absolute;inset:0}@media (prefers-reduced-motion:no-preference){.hero-3taps .demo[data-step="3"] .a-key:before{animation:ring var(--t-ring) ease-out var(--loops)}.hero-3taps .demo[data-step="3"] .a-key:after{animation:ring var(--t-ring) ease-out var(--d-ring-2) var(--loops)}}