/* YourAppt.app — Concept C design system, namespaced under .ya for WordPress.
Generated from concept-c.html. Every selector is scoped so it cannot leak into
Astra/Elementor theme CSS or wp-admin. */
/* ============ CONCEPT C — BOLD & EDITORIAL (INTERACTIVE) ============ */
/* Design tokens: values are read from #uichemy-globals (UiChemy Globals manager)
   so the whole page re-themes from one place. The literal fallback after each
   var() keeps the design exact if the globals block is ever removed. */
.ya{
  --bg: var(--ya-bg, #FFFFFF);
  --bg-soft: var(--ya-bg-soft, #F4F5F8);
  --bg-ink: var(--ya-bg-ink, #0A0E1A);
  --bg-ink-2: var(--ya-bg-ink-2, #131A2E);
  --ink: var(--ya-ink, #0A0E1A);
  --ink-2: var(--ya-ink-2, #39405A);
  --muted: var(--ya-muted, #6B7390);
  --brand: var(--ya-brand, #2F5BFF);
  --brand-2: var(--ya-brand-2, #5B7BFF);
  --brand-soft: var(--ya-brand-soft, #E8EDFF);
  --brand-deep: var(--ya-brand-deep, #1E3FD6);
  --lime: var(--ya-lime, #C6F24E);
  --coral: var(--ya-coral, #FF6B4A);
  --line: var(--ya-line, #E4E6EE);
  --line-2: var(--ya-line-2, #D2D6E2);
  --line-dark: var(--ya-line-dark, rgba(255,255,255,.12));
  --radius: var(--ya-radius, 14px);
  --radius-lg: var(--ya-radius-lg, 22px);
  --shadow: var(--ya-shadow, 0 20px 50px -22px rgba(10,14,26,.3));
  --shadow-lg: var(--ya-shadow-lg, 0 50px 90px -40px rgba(10,14,26,.55));
  --maxw: var(--ya-maxw, 1200px);
  --font-d: var(--ya-font-d, 'Space Grotesk',system-ui,sans-serif);
  --font-b: var(--ya-font-b, 'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif);
  --ease: var(--ya-ease, cubic-bezier(.2,.7,.2,1));
  /* Scheduling-sandbox geometry. These live here rather than as inline styles on
     the markup so the calendar grid can respond to the viewport (see the 640px
     breakpoint). --sb-time is the time gutter, --sb-row the height of one slot. */
  --sb-time: var(--ya-sb-time, 72px);
  --sb-row: var(--ya-sb-row, 66px);
}

/* ============ HOST THEME INTEGRATION ============
   The one block in this file that is deliberately NOT .ya-scoped: it repairs the
   Elementor containers the theme-builder templates render into.

   Elementor's own container rule is `.e-con{display:var(--display)}`. These containers
   never receive --display, so that declaration is invalid at computed-value time and
   display falls back to its initial value, `inline`. An inline box wrapping a block
   child gets a strut line box above and below it, so the 73px nav sat inside a 137px
   box - white body showing above and below the bar - and the page and footer
   containers picked up the same phantom space on top of Elementor's default 10px
   padding.

   Each container holds a single widget (the page container holds the 15 sections), so
   `block` is the honest value: no flex `gap` (which would insert 20px between every
   section) and normal margin behaviour. Padding goes to 0 because these are
   full-bleed bands that must sit flush against each other.

   Set `display` directly, NOT `--display`. Custom properties INHERIT, so writing
   `--display:block` here leaks `block` into every one of the ~400 descendants of the
   page container. Setting `display` on the container is the entire fix and touches
   nothing else. Specificity (0,3,0) beats Elementor's `.e-con` rule at (0,1,0). */
.elementor-location-header > .e-con.e-parent,
.elementor-location-footer > .e-con.e-parent,
.elementor-16 > .e-con.e-parent{display:block;padding:0}

/* ============ STICKY HEADER (Round 9) ============
   The design declares `.ya .nav{position:sticky;top:0}` but that cannot travel: a sticky
   element's travel is bounded by its parent's content box, and `.ya.ya-header` (the
   Elementor location-header container) is only 73px tall — so the nav was pinned to the
   top of a 73px box and scrolled away with the page.

   Fix: pin the header CONTAINER itself. `.elementor-location-header` is a direct child of
   <body>, so making it `position:sticky;top:0` keeps the whole bar fixed while the page
   scrolls underneath, with no document-height change.

   The wrapper `.ya.ya-header` carries an opaque white background that sat BEHIND the nav's
   semi-transparent `background:rgba(10,14,26,.82)` + `backdrop-filter:blur(16px)`, flattening
   it to a flat grey slab (rgb 54,57,67) at every scroll position. Force it transparent so
   the nav's glass actually blurs the content scrolling behind it — the design's intended
   behaviour (navy over the dark hero, grey over light sections).

   `scroll-padding-top` reserves the bar's 73px so in-page anchor links (#features, #cta,
   the footer's #top "back to top", etc.) land clear of the bar instead of hidden under it. */
.elementor-location-header{position:sticky;top:0;z-index:900}
.ya.ya-header{background:transparent}
html{scroll-padding-top:73px}

.ya *{box-sizing:border-box;margin:0;padding:0}
.ya{scroll-behavior:smooth}
.ya{font-family:var(--font-b);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.ya h1, .ya h2, .ya h3, .ya h4{font-family:var(--font-d);line-height:1.05;letter-spacing:-.03em;font-weight:700}
.ya a{color:inherit;text-decoration:none}
.ya button{font-family:var(--font-b)}
.ya .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.ya .eyebrow{font-family:var(--font-b);font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brand)}
.ya .on-dark .eyebrow{color:var(--lime)}
.ya .sec{padding:104px 0}
.ya .sec-head{max-width:760px;margin:0 auto 60px;text-align:center}
.ya .sec-head h2{font-size:clamp(32px,4.6vw,52px);margin:16px 0 18px}
.ya .sec-head p{font-size:18.5px;color:var(--muted)}
.ya .btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;padding:15px 27px;border-radius:11px;border:1.5px solid transparent;cursor:pointer;transition:.2s ease;white-space:nowrap}
.ya .btn-primary{background:var(--brand);color:#fff}
.ya .btn-primary:hover{background:var(--brand-deep);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(47,91,255,.7)}
.ya .btn-lime{background:var(--lime);color:#0A0E1A}
.ya .btn-lime:hover{background:#B4E02F;transform:translateY(-2px)}
.ya .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.ya .btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.ya .btn-ghost-d{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.ya .btn-ghost-d:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.ya .btn-lg{padding:17px 32px;font-size:16px}
/* ---------- ya-scroll progress ---------- */
.ya #prog{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--brand),var(--lime));z-index:999;transition:width .1s linear}
/* ---------- reveal ---------- */
.ya .rv{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.ya .rv.in{opacity:1;transform:none}
.ya .rv.d1{transition-delay:.07s}
.ya .rv.d2{transition-delay:.14s}
.ya .rv.d3{transition-delay:.21s}
.ya .rv.d4{transition-delay:.28s}
.ya .rv.d5{transition-delay:.35s}
.ya .rv.d6{transition-delay:.42s}
.ya .rv-l{opacity:0;transform:translateX(-26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.ya .rv-l.in{opacity:1;transform:none}
.ya .rv-r{opacity:0;transform:translateX(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.ya .rv-r.in{opacity:1;transform:none}
/* nav */
.ya .nav{position:sticky;top:0;z-index:100;background:rgba(10,14,26,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-dark)}
.ya .nav-in{display:flex;align-items:center;justify-content:space-between;height:72px}
.ya .logo{display:flex;align-items:center;gap:10px;color:#fff}
.ya .logo .ya-lockup{height:32px;width:auto;display:block;color:#fff}
.ya footer .logo .ya-lockup{height:34px}
.ya .nav-links{display:flex;gap:32px;font-size:14.5px;font-weight:500;color:rgba(255,255,255,.72)}
.ya .nav-links a:hover{color:#fff}
.ya .nav-cta{display:flex;align-items:center;gap:16px}
.ya .nav-cta .login{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.72)}
.ya .nav-cta .login:hover{color:#fff}
/* hero */
.ya .hero{background:var(--bg-ink);color:#fff;position:relative;overflow:hidden;padding:80px 0 88px}
.ya .hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(700px 480px at 82% 6%, rgba(47,91,255,.34), transparent 62%),
  radial-gradient(560px 420px at 6% 88%, rgba(198,242,78,.10), transparent 60%);pointer-events:none}
.ya .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;position:relative}
.ya .hero .kicker{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line-dark);border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.8)}
.ya .hero .kicker .dot2{width:7px;height:7px;border-radius:50%;background:var(--lime);animation:ya-pulseDot 2s infinite}
@keyframes ya-pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(198,242,78,.5)}70%{box-shadow:0 0 0 8px rgba(198,242,78,0)}}
.ya .hero h1{font-size:clamp(38px,5.4vw,68px);margin:26px 0 24px;color:#fff;letter-spacing:-.04em}
.ya .hero h1 .ln{display:block;overflow:hidden}
.ya .hero h1 .ln span{display:inline-block;animation:ya-riseIn .9s var(--ease) both}
.ya .hero h1 .ln:nth-child(1) span{animation-delay:.1s}
.ya .hero h1 .ln:nth-child(2) span{animation-delay:.22s}
.ya .hero h1 .ln:nth-child(3) span{animation-delay:.34s}
@keyframes ya-riseIn{from{transform:translateY(110%);opacity:0}to{transform:none;opacity:1}}
.ya .hero h1 .hl{color:var(--lime)}
.ya .hero p.sub{font-size:19px;color:rgba(255,255,255,.72);max-width:540px;animation:ya-fadeUp .9s .45s var(--ease) both}
.ya .hero-cta{display:flex;gap:14px;margin:34px 0 30px;flex-wrap:wrap;animation:ya-fadeUp .9s .55s var(--ease) both}
.ya .hero-meta{display:flex;gap:30px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--line-dark);animation:ya-fadeUp .9s .65s var(--ease) both}
.ya .hero-meta .m b{display:block;font-family:var(--font-d);font-size:24px;color:#fff}
.ya .hero-meta .m span{font-size:12.5px;color:rgba(255,255,255,.6)}
@keyframes ya-fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.ya .hero-visual{position:relative}
.ya .hero-app{background:#0F1526;border:1px solid var(--line-dark);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;animation:ya-fadeUp 1s .3s var(--ease) both}
.ya .badge-float{position:absolute;background:#fff;color:var(--ink);border-radius:12px;padding:11px 14px;box-shadow:var(--shadow);display:flex;gap:10px;align-items:center;font-size:12.5px;font-weight:600;z-index:3}
.ya .badge-float .ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none}
.ya .bf1{top:-18px;left:-18px;animation:ya-floaty 5.5s ease-in-out infinite,ya-fadeUp .8s .8s var(--ease) both}
.ya .bf2{bottom:104px;right:-20px;animation:ya-floaty 5.5s 1.2s ease-in-out infinite,ya-fadeUp .8s 1s var(--ease) both}
@keyframes ya-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
/* Status ticker now lives INSIDE the app card, as a footer bar directly beneath the
   calendar grid (moved from a floating overlay below the card). In-flow so it sits
   within the card's rounded corners and scales with the window. */
.ya .live-strip{display:flex;justify-content:center;padding:11px 16px 13px;border-top:1px solid var(--line-dark);background:#0B1120}
.ya .live-pill{background:rgba(21,29,51,.92);border:1px solid var(--line-dark);border-radius:999px;padding:9px 17px;font-size:12.5px;color:rgba(255,255,255,.85);display:flex;gap:10px;align-items:center}
.ya .live-pill .lt{width:7px;height:7px;border-radius:50%;background:var(--lime);animation:ya-pulseDot 1.8s infinite;flex:none}
.ya #liveText{transition:opacity .35s}
/* dark app window */
.ya .app-chrome{display:flex;align-items:center;gap:12px;padding:11px 14px;background:#0B1120;border-bottom:1px solid var(--line-dark)}
.ya .dots{display:flex;gap:6px}
.ya .dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.ya .app-chrome .url{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--line-dark);border-radius:7px;font-size:11px;color:rgba(255,255,255,.5);padding:5px 11px;max-width:260px}
.ya .app-chrome .url b{color:var(--lime)}
.ya .app-body{display:grid;grid-template-columns:150px 1fr;min-height:392px}
.ya .app-side{background:#0B1120;border-right:1px solid var(--line-dark);padding:13px 10px}
.ya .side-logo{display:flex;align-items:center;gap:8px;color:#fff;margin-bottom:14px}
.ya .side-logo .ya-lockup{height:19px;width:auto;display:block;color:#fff}
.ya .side-item{display:flex;align-items:center;gap:9px;font-size:12px;color:rgba(255,255,255,.5);padding:7px 9px;border-radius:7px;margin-bottom:2px;font-weight:500}
.ya .side-item svg{width:14px;height:14px;opacity:.8}
.ya .side-item.on{background:rgba(47,91,255,.2);color:#fff;font-weight:600}
.ya .app-main{padding:15px 16px;min-width:0;background:#0F1526}
.ya .app-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px;flex-wrap:wrap}
.ya .app-toolbar h3{font-size:15px;color:#fff;font-family:var(--font-d)}
.ya .app-toolbar .sub{font-size:11px;color:rgba(255,255,255,.5)}
.ya .tool-right{display:flex;gap:8px;align-items:center}
.ya .seg{display:flex;background:rgba(255,255,255,.06);border-radius:8px;padding:2px}
.ya .seg button{border:0;background:none;font-size:11px;font-weight:600;color:rgba(255,255,255,.55);padding:5px 10px;border-radius:6px;cursor:pointer}
.ya .seg button.on{background:rgba(255,255,255,.14);color:#fff}
.ya .mini-btn{background:var(--brand);color:#fff;border:0;border-radius:8px;font-size:11px;font-weight:600;padding:7px 12px;cursor:pointer}
.ya .cal{border:1px solid var(--line-dark);border-radius:11px;overflow:hidden;position:relative;background:#0B1120}
.ya .cal-head{display:grid;background:#0B1120;border-bottom:1px solid var(--line-dark)}
.ya .cal-head .hcell{font-size:10.5px;font-weight:600;color:rgba(255,255,255,.85);padding:7px;border-left:1px solid var(--line-dark);display:flex;align-items:center;gap:6px}
.ya .cal-head .hcell:first-child{border-left:0}
.ya .cal-head .hcell .d{width:6px;height:6px;border-radius:50%}
.ya .cal-head .hcell small{display:block;font-size:9px;color:rgba(255,255,255,.45);font-weight:400}
.ya .cal-grid{position:relative;display:grid}
.ya .tcell{font-size:9px;color:rgba(255,255,255,.35);text-align:right;padding-right:6px;position:relative}
.ya .tcell span{position:absolute;right:6px;top:-6px}
.ya .gcol{border-left:1px solid var(--line-dark);grid-row:1/-1}
.ya .ev{border-radius:6px;padding:3px 7px;font-size:9.5px;font-weight:600;color:#0A0E1A;overflow:hidden;margin:1px 3px;line-height:1.25;cursor:pointer;transition:transform .16s}
.ya .ev:hover{transform:scale(1.04);z-index:5}
.ya .ev small{display:block;font-weight:500;opacity:.75;font-size:8.5px}
.ya .ev.b{background:#5B7BFF;color:#fff}
.ya .ev.l{background:var(--lime)}
.ya .ev.c{background:var(--coral);color:#fff}
.ya .ev.w{background:rgba(255,255,255,.14);color:#fff}
.ya .blk{background:repeating-linear-gradient(45deg,rgba(255,255,255,.05),rgba(255,255,255,.05) 4px,rgba(255,255,255,.09) 4px,rgba(255,255,255,.09) 8px);border-radius:6px;margin:1px 3px;display:grid;place-items:center;font-size:8.5px;font-weight:700;color:rgba(255,255,255,.5);letter-spacing:.05em;text-transform:uppercase;border:1px dashed rgba(255,255,255,.16)}
.ya .hero-app .ev, .ya .hero-app .blk{animation:ya-evPop .5s var(--ease) both}
@keyframes ya-evPop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}

/* ============ HERO CALENDAR <-> STATUS CHOREOGRAPHY (Round 10) ============
   The hero calendar sits next to two floating status badges and, underneath it,
   a live ticker that cycles six status messages every 3.2s. Before this block
   the grid played a one-shot pop and then sat still, so every one of those claims
   was asserted but never demonstrated. This block makes the grid demonstrate each
   message the moment it appears.

   The cycle is 19.2s = the ticker's own 6 messages x 3.2s, and every animation
   below is keyframed as a percentage of that single duration. That is what keeps
   them in sync: there is one clock, not six. The badges, the provider dots, the
   grid and the ticker text cannot drift apart because they share a period.

     beat  ticker message                              what the grid does
     ----  ------------------------------------------  --------------------------------
     1     Booking confirmed - Aisha, Sat 11:00         a booking lands in Aisha's free
                                                            11:00 slot and locks green
     2     Reminder sent - WhatsApp - 24h before        three appointments one day out
                                                            ring up in lime, each with a
                                                            "24h" chip, staggered
     3     Conflict blocked - slot already booked      a scan sweeps the grid, a new
                                                            request drops onto Dr. Tan's
                                                            taken 9:00 slot, is refused
                                                            with a red flash + shake + X,
                                                            then relocates to a free slot
     4     Dr. Tan blocked - on leave 14:00-17:00      the On-leave block pulses coral
     5     Rescheduled - moved to Sun 3:30 PM           an appointment slides down two
                                                            slots and locks into the new
                                                            time
     6     New booking via WhatsApp - Ms. Goh           a message chip flies in from the
                                                            left and a WhatsApp booking
                                                            appears in Nurul's free 10:00

   The two badges only light up while their own claim is on stage: bf2 ("Reminder
   sent - 24h before") during beat 2, bf1 ("No double-bookings") during beats 3
   and 4, which are the two moments where a booking is actually prevented.

   Why this is safe to lay over the existing design:
   * Every animation returns to its base state at 100%, so the loop is seamless,
     and the existing prefers-reduced-motion block (one 0.001s iteration) simply
     leaves the calendar in its original, unmodified appearance.
   * Nothing here changes layout. Each actor is an absolutely-positioned pseudo
     element whose containing block is a named grid area, so it cannot reflow the
     grid it lands in.
   * The badges gain an animation-list ENTRY, not a replacement: ya-floaty and
     ya-fadeUp keep their exact durations and delays, and the new keyframe only
     animates box-shadow, which neither of them touches.
   * Targets are matched on each appointment's inline grid placement, not on
     :nth-child, so re-ordering events in the Composer editor re-targets the
     choreography instead of silently misfiring it. */

/* --- beat 1: booking confirmed ------------------------------------------------ */
/* The confirmed booking is a real grid item dropped into Aisha's free 11:00 slot
   (grid-column:3 / row 5-7). position:relative (not absolute) lets it sit in that
   exact cell while z-index keeps it above the cell it lands in. The green lock-in
   glow is folded into ya-new's box-shadow so no nested pseudo is needed. */
.ya .hero-app .cal-grid::after{content:"Confirmed\A Ms. Tan \00B7 11:00";white-space:pre;position:relative;margin:1px 3px;grid-column:3;grid-row:5/7;z-index:6;border-radius:6px;padding:3px 7px;font-size:9.5px;font-weight:600;line-height:1.25;text-align:left;opacity:0;pointer-events:none;border:1px solid rgba(15,169,122,.75);background:rgba(15,169,122,.3);color:#fff;animation:ya-new 19.2s linear infinite}
@keyframes ya-new{
0%,1.4%{opacity:0;transform:translateY(-7px) scale(.9);box-shadow:0 0 0 0 rgba(15,169,122,0)}
3.6%{opacity:1;transform:none;box-shadow:0 0 0 3px rgba(15,169,122,.45),0 0 14px 2px rgba(15,169,122,.5)}
11.5%{opacity:1;transform:none;box-shadow:0 0 0 3px rgba(15,169,122,.45),0 0 14px 2px rgba(15,169,122,.5)}
14.6%,100%{opacity:0;transform:translateY(-5px) scale(.94);box-shadow:0 0 0 0 rgba(15,169,122,0)}}
/* the provider it belongs to acknowledges it */
.ya .hero-app .cal-head .hcell:nth-child(3) .d{animation:ya-dotNew 19.2s linear infinite}
@keyframes ya-dotNew{0%,2%{box-shadow:0 0 0 0 rgba(15,169,122,0)}5%{box-shadow:0 0 0 5px rgba(15,169,122,.45)}12%{box-shadow:0 0 0 0 rgba(15,169,122,0)}100%{box-shadow:0 0 0 0 rgba(15,169,122,0)}}

/* --- beat 2: reminder sent 24h before ----------------------------------------- */
.ya .hero-app .ev[style*="grid-column:3;"][style*="grid-row:3/5;"],
.ya .hero-app .ev[style*="grid-column:4;"][style*="grid-row:9/11;"],
.ya .hero-app .ev[style*="grid-column:5;"][style*="grid-row:9/11;"]{position:relative}
.ya .hero-app .ev[style*="grid-column:3;"][style*="grid-row:3/5;"]::before,
.ya .hero-app .ev[style*="grid-column:4;"][style*="grid-row:9/11;"]::before,
.ya .hero-app .ev[style*="grid-column:5;"][style*="grid-row:9/11;"]::before{content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;opacity:0;box-shadow:inset 0 0 0 2px var(--lime),0 0 12px 1px rgba(198,242,78,.4);animation:ya-rmRing 19.2s linear infinite}
.ya .hero-app .ev[style*="grid-column:4;"][style*="grid-row:9/11;"]::before{animation-delay:.3s}
.ya .hero-app .ev[style*="grid-column:5;"][style*="grid-row:9/11;"]::before{animation-delay:.6s}
@keyframes ya-rmRing{0%,17.6%{opacity:0}20.5%{opacity:1;box-shadow:inset 0 0 0 2px var(--lime),0 0 16px 3px rgba(198,242,78,.75)}25%{opacity:.5}28%{opacity:1;box-shadow:inset 0 0 0 2px var(--lime),0 0 16px 3px rgba(198,242,78,.75)}31.5%{opacity:0}100%{opacity:0}}
.ya .hero-app .ev[style*="grid-column:3;"][style*="grid-row:3/5;"]::after,
.ya .hero-app .ev[style*="grid-column:4;"][style*="grid-row:9/11;"]::after,
.ya .hero-app .ev[style*="grid-column:5;"][style*="grid-row:9/11;"]::after{content:"24h";position:absolute;bottom:1px;right:2px;font-size:7px;font-weight:800;line-height:1.5;letter-spacing:.02em;color:#0A0E1A;background:var(--lime);padding:0 3px;border-radius:3px;pointer-events:none;opacity:0;animation:ya-rmChip 19.2s linear infinite}
.ya .hero-app .ev[style*="grid-column:4;"][style*="grid-row:9/11;"]::after{animation-delay:.3s}
.ya .hero-app .ev[style*="grid-column:5;"][style*="grid-row:9/11;"]::after{animation-delay:.6s}
@keyframes ya-rmChip{0%,18.6%{opacity:0;transform:translateY(3px) scale(.7)}21.5%{opacity:1;transform:none}27%{opacity:1}30.5%{opacity:0;transform:translateY(-3px) scale(.8)}100%{opacity:0}}
.ya .hero-app .cal-head .hcell:nth-child(3) .d,
.ya .hero-app .cal-head .hcell:nth-child(4) .d,
.ya .hero-app .cal-head .hcell:nth-child(5) .d{animation:ya-dotRm 19.2s linear infinite}
.ya .hero-app .cal-head .hcell:nth-child(4) .d{animation-delay:.3s}
.ya .hero-app .cal-head .hcell:nth-child(5) .d{animation-delay:.6s}
@keyframes ya-dotRm{0%,18%{box-shadow:0 0 0 0 rgba(198,242,78,0)}21.5%{box-shadow:0 0 0 5px rgba(198,242,78,.5)}29%{box-shadow:0 0 0 0 rgba(198,242,78,0)}100%{box-shadow:0 0 0 0 rgba(198,242,78,0)}}

/* --- beat 3: conflict blocked -------------------------------------------------- */
.ya .hero-app .cal::after{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;z-index:7;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(91,123,255,0),rgba(91,123,255,.2) 55%,rgba(198,242,78,.5));animation:ya-scan 19.2s linear infinite}
@keyframes ya-scan{0%,34.4%{opacity:0;transform:translateX(-110%)}35.6%{opacity:.95}42%{opacity:.95}43.4%,100%{opacity:0;transform:translateX(405%)}}
/* The ghost request is a real grid item placed in Dr. Tan's taken 9:00 slot
   (grid-column:2 / row 1-3). position:relative keeps it in that cell; it flashes
   red, shakes, then slides down two slots and turns green to show it was relocated. */
.ya .hero-app .cal-grid::before{content:"New request\A Pending";white-space:pre;position:relative;margin:1px 3px;grid-column:2;grid-row:1/3;z-index:6;border-radius:6px;padding:3px 7px;font-size:9.5px;font-weight:600;line-height:1.25;text-align:left;opacity:0;pointer-events:none;border:1px solid rgba(91,123,255,.55);background:rgba(91,123,255,.16);color:#fff;animation:ya-ghost 19.2s linear infinite}
@keyframes ya-ghost{
0%,34.6%{opacity:0;transform:translateY(-6px) scale(.92);border-color:rgba(91,123,255,.55);background:rgba(91,123,255,.16);color:#fff}
36%{opacity:1;transform:none}
39%{opacity:1;transform:none;border-color:rgba(91,123,255,.8);background:rgba(91,123,255,.2)}
40%{opacity:1;transform:none;border-color:#FF3B1F;background:rgba(255,59,31,.24)}
40.4%{transform:translateX(-4px)}
41%{transform:translateX(4px)}
41.6%{transform:translateX(-2px)}
42.2%,44%{opacity:1;transform:none;border-color:#FF3B1F;background:rgba(255,59,31,.26)}
46%{transform:translateY(50px);border-color:rgba(15,169,122,.75);background:rgba(15,169,122,.2)}
48%{transform:translateY(50px);border-color:#0FA97A;background:rgba(15,169,122,.3)}
50%{opacity:0;transform:translateY(50px) scale(.94)}
100%{opacity:0;transform:translateY(50px) scale(.94)}}
/* The occupied booking the request landed on flashes red and stamps a hard X. This
   is a first-level ::after (supported), not a nested pseudo. The existing
   appointment is untouched - which is exactly what "no double-bookings" means. */
.ya .hero-app .ev[style*="grid-column:2;"][style*="grid-row:1/3;"]{position:relative}
.ya .hero-app .ev[style*="grid-column:2;"][style*="grid-row:1/3;"]::before{content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;opacity:0;box-shadow:inset 0 0 0 2px #FF3B1F,0 0 14px 2px rgba(255,59,31,.45);animation:ya-hit 19.2s linear infinite}
.ya .hero-app .ev[style*="grid-column:2;"][style*="grid-row:1/3;"]::after{content:"\2715";position:absolute;inset:0;border-radius:5px;display:grid;place-items:center;font-size:15px;font-weight:800;color:#fff;background:#FF3B1F;opacity:0;pointer-events:none;animation:ya-gx 19.2s linear infinite}
@keyframes ya-hit{0%,39.6%{opacity:0}40.4%{opacity:1}43%{opacity:1}44.8%,100%{opacity:0}}
@keyframes ya-gx{0%,39.8%{opacity:0;transform:scale(.45)}40.9%{opacity:1;transform:scale(1.2)}42.2%{opacity:1;transform:scale(1)}44.6%,100%{opacity:0;transform:scale(.5)}}
.ya .hero-app .cal-head .hcell:nth-child(2) .d{animation:ya-dotHit 19.2s linear infinite}
@keyframes ya-dotHit{0%,39.6%{box-shadow:0 0 0 0 rgba(255,59,31,0)}40.6%{box-shadow:0 0 0 5px rgba(255,59,31,.45)}43%{box-shadow:0 0 0 0 rgba(255,59,31,0)}100%{box-shadow:0 0 0 0 rgba(255,59,31,0)}}

/* --- beat 4: Dr. Tan blocked, on leave ----------------------------------------- */
.ya .hero-app .blk{position:relative}
.ya .hero-app .blk::before{content:"";position:absolute;inset:-1px;border-radius:6px;pointer-events:none;opacity:0;border:2px solid var(--coral);box-shadow:0 0 12px 1px rgba(255,107,74,.4);animation:ya-lvRing 19.2s linear infinite}
@keyframes ya-lvRing{0%,51.4%{opacity:0}54%{opacity:.95}58.5%{opacity:.35}62%{opacity:.95}65.4%{opacity:0}100%{opacity:0}}
.ya .hero-app .blk::after{content:"Blocked";position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:7px;font-weight:800;letter-spacing:.04em;line-height:1.5;color:#fff;background:#FF3B1F;padding:0 3px;border-radius:3px;pointer-events:none;opacity:0;animation:ya-lvChip 19.2s linear infinite}
@keyframes ya-lvChip{0%,52.4%{opacity:0;transform:translateY(4px) scale(.8)}55%{opacity:1;transform:none}62.5%{opacity:1}65.4%{opacity:0;transform:translateY(-3px) scale(.9)}100%{opacity:0}}

/* --- beat 5: rescheduled to a new time ----------------------------------------- */
.ya .hero-app .gcol{position:relative}
.ya .hero-app .gcol:nth-child(3)::after{content:"Follow-up\A Rescheduled";white-space:pre;position:absolute;top:250px;left:3px;right:3px;height:50px;z-index:6;border-radius:6px;padding:3px 7px;font-size:9.5px;font-weight:600;line-height:1.25;text-align:left;opacity:0;pointer-events:none;border:1px solid rgba(255,107,74,.8);background:rgba(255,107,74,.28);color:#fff;animation:ya-move 19.2s linear infinite}
@keyframes ya-move{
0%,67.4%{opacity:0;transform:translateY(0);border-color:rgba(255,107,74,.8);background:rgba(255,107,74,.28)}
69%{opacity:1;transform:translateY(0)}
73%{opacity:1;transform:translateY(0)}
77.5%{opacity:1;transform:translateY(100px);border-color:rgba(15,169,122,.75);background:rgba(15,169,122,.3)}
79.5%{opacity:1;transform:translateY(100px);border-color:#0FA97A;background:rgba(15,169,122,.32)}
82.5%{opacity:0;transform:translateY(100px) scale(.94)}
100%{opacity:0;transform:translateY(100px) scale(.94)}}
.ya .hero-app .gcol:nth-child(3)::before{content:"";position:absolute;top:250px;left:3px;right:3px;height:50px;z-index:5;border-radius:6px;pointer-events:none;opacity:0;border:1px dashed rgba(255,255,255,.35);animation:ya-vacate 19.2s linear infinite}
@keyframes ya-vacate{0%,69%{opacity:0}70.5%{opacity:.9}76%{opacity:.9}78.5%{opacity:0}100%{opacity:0}}
.ya .hero-app .cal-head .hcell:nth-child(4) .d{animation:ya-dotMove 19.2s linear infinite}
@keyframes ya-dotMove{0%,68%{box-shadow:0 0 0 0 rgba(255,107,74,0)}70%{box-shadow:0 0 0 5px rgba(255,107,74,.45)}77%{box-shadow:0 0 0 0 rgba(15,169,122,0)}79.5%{box-shadow:0 0 0 5px rgba(15,169,122,.45)}82%{box-shadow:0 0 0 0 rgba(15,169,122,0)}100%{box-shadow:0 0 0 0 rgba(15,169,122,0)}}

/* --- beat 6: new booking via WhatsApp ------------------------------------------ */
.ya .hero-app .cal::before{content:"WhatsApp \00B7 new request";position:absolute;left:8px;top:6px;z-index:8;border-radius:9px;padding:5px 9px;font-size:9px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;color:#05330F;background:#DCF8C6;box-shadow:0 4px 12px -6px rgba(0,0,0,.5);animation:ya-waChip 19.2s linear infinite}
@keyframes ya-waChip{0%,84.4%{opacity:0;transform:translateX(-16px) scale(.94)}86%{opacity:1;transform:none}90%{opacity:1;transform:none}93%,100%{opacity:0;transform:translateX(-12px) scale(.96)}}
.ya .hero-app .gcol:nth-child(4)::after{content:"Massage\A Ms. Goh \00B7 WhatsApp";white-space:pre;position:absolute;top:50px;left:3px;right:3px;height:50px;z-index:6;border-radius:6px;padding:3px 7px;font-size:9.5px;font-weight:600;line-height:1.25;text-align:left;opacity:0;pointer-events:none;border:1px solid rgba(37,211,102,.7);background:rgba(37,211,102,.26);color:#fff;animation:ya-waNew 19.2s linear infinite}
@keyframes ya-waNew{0%,87%{opacity:0;transform:translateY(-7px) scale(.9)}89%{opacity:1;transform:none}95.5%{opacity:1;transform:none}97.8%,100%{opacity:0;transform:translateY(-5px) scale(.94)}}
.ya .hero-app .cal-head .hcell:nth-child(5) .d{animation:ya-dotWa 19.2s linear infinite}
@keyframes ya-dotWa{0%,87%{box-shadow:0 0 0 0 rgba(37,211,102,0)}89.5%{box-shadow:0 0 0 5px rgba(37,211,102,.45)}95%{box-shadow:0 0 0 0 rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* --- the badges: each lights only while its own claim is on stage -------------- */
.ya .bf1{animation:ya-floaty 5.5s ease-in-out infinite,ya-fadeUp .8s .8s var(--ease) both,ya-bf1Glow 19.2s linear infinite}
.ya .bf2{animation:ya-floaty 5.5s 1.2s ease-in-out infinite,ya-fadeUp .8s 1s var(--ease) both,ya-bf2Glow 19.2s linear infinite}
@keyframes ya-bf1Glow{0%,34.4%{box-shadow:var(--shadow)}37%{box-shadow:var(--shadow),0 0 0 5px rgba(91,123,255,.2)}43%{box-shadow:var(--shadow),0 0 0 5px rgba(255,59,31,.14)}51.4%{box-shadow:var(--shadow)}54%{box-shadow:var(--shadow),0 0 0 5px rgba(255,107,74,.22)}63%{box-shadow:var(--shadow),0 0 0 5px rgba(255,107,74,.22)}65.6%,100%{box-shadow:var(--shadow)}}
@keyframes ya-bf2Glow{0%,17.4%{box-shadow:var(--shadow)}20%{box-shadow:var(--shadow),0 0 0 5px rgba(198,242,78,.24)}29%{box-shadow:var(--shadow),0 0 0 5px rgba(198,242,78,.24)}31.6%,100%{box-shadow:var(--shadow)}}
.ya .bf1::after, .ya .bf2::after{content:"";position:absolute;inset:-5px;border-radius:17px;opacity:0;pointer-events:none}
.ya .bf1::after{border:2px solid rgba(91,123,255,.55);animation:ya-bf1Ring 19.2s linear infinite}
.ya .bf2::after{border:2px solid rgba(198,242,78,.6);animation:ya-bf2Ring 19.2s linear infinite}
@keyframes ya-bf1Ring{0%{opacity:0;transform:scale(.93)}34.6%{opacity:0;transform:scale(.93)}36.4%{opacity:.95;transform:scale(1)}43%{opacity:.45;transform:scale(1.04)}51.6%{opacity:.95;transform:scale(1)}62%{opacity:.4;transform:scale(1.04)}65.6%{opacity:0;transform:scale(1.06)}100%{opacity:0;transform:scale(1.06)}}
@keyframes ya-bf2Ring{0%{opacity:0;transform:scale(.93)}17.6%{opacity:0;transform:scale(.93)}19.6%{opacity:.95;transform:scale(1)}28%{opacity:.45;transform:scale(1.04)}31.6%{opacity:0;transform:scale(1.06)}100%{opacity:0;transform:scale(1.06)}}
.ya .bf1 .ic{animation:ya-bf1Ic 19.2s linear infinite}
.ya .bf2 .ic{animation:ya-bf2Ic 19.2s linear infinite}
@keyframes ya-bf1Ic{0%,34.6%{transform:scale(1)}37.5%{transform:scale(1.14)}42%{transform:scale(1)}51.6%{transform:scale(1)}54.5%{transform:scale(1.14)}59%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes ya-bf2Ic{0%,17.6%{transform:scale(1)}20.5%{transform:scale(1.16)}25%{transform:scale(1)}100%{transform:scale(1)}}

/* marquee */
/* full-bleed band. Sits in normal flow with a clear gap above/below — the
   .hero bottom padding guarantees it never crowds the hero content. */
.ya .marquee{background:var(--lime);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);overflow:hidden;white-space:nowrap;padding:15px 0;position:relative;z-index:1}
.ya .marquee .track{display:inline-flex;gap:40px;animation:ya-scroll 30s linear infinite;font-family:var(--font-d);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--ink)}
.ya .marquee .track span{display:inline-flex;align-items:center;gap:40px}
.ya .marquee .track span::after{content:"◆";font-size:11px}
@keyframes ya-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* stat band */
.ya .statband{background:var(--bg-ink);color:#fff;padding:56px 0}
/* The stat row is the reference layout: four equal columns on one line. minmax(0,1fr)
   rather than 1fr keeps the tracks exactly equal instead of letting a wide word push
   its own column wider (1fr resolves to minmax(auto,1fr), which floors at min-content). */
.ya .statband .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.ya .sb{border-left:2px solid rgba(255,255,255,.14);padding-left:20px;min-width:0}
.ya .sb .n{font-family:var(--font-d);font-size:clamp(30px,4vw,44px);font-weight:700;color:var(--lime);line-height:1}
.ya .sb p{font-size:13px;color:rgba(255,255,255,.65);margin-top:9px;line-height:1.5}
.ya .sb .src{font-size:10.5px;color:rgba(255,255,255,.35);margin-top:7px}
/* problems */
.ya .prob-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.ya .prob{padding:32px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:.28s var(--ease);background:#fff;cursor:pointer}
.ya .prob:nth-child(3n){border-right:0}
.ya .prob:nth-child(n+4){border-bottom:0}
.ya .prob:hover{background:var(--bg-soft)}
.ya .prob .no{font-family:var(--font-d);font-size:13px;font-weight:700;color:var(--brand);margin-bottom:16px;letter-spacing:.04em}
.ya .prob h4{font-size:18px;margin-bottom:9px}
.ya .prob p{font-size:14px;color:var(--muted)}
.ya .prob .toggle{margin-top:14px;font-size:12.5px;font-weight:700;color:var(--brand);display:flex;gap:8px;align-items:center}
.ya .prob .toggle .chev{transition:transform .3s var(--ease);display:inline-block}
.ya .prob.open .toggle .chev{transform:rotate(90deg)}
.ya .prob .fix{max-height:0;overflow:hidden;transition:max-height .4s var(--ease),opacity .3s;opacity:0;font-size:13.5px;font-weight:600;color:#0A7A58;display:flex;gap:9px;align-items:flex-start}
.ya .prob .fix svg{width:15px;height:15px;flex:none;margin-top:4px;stroke:#0A7A58}
.ya .prob.open .fix{max-height:110px;opacity:1;margin-top:12px}
/* ---------- SCHEDULING SANDBOX ---------- */
.ya .sandbox{display:grid;grid-template-columns:2fr 1fr;gap:28px;align-items:start}
.ya .sb-app{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.ya .sb-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px;background:var(--bg-soft);border-bottom:1px solid var(--line);flex-wrap:wrap}
.ya .sb-bar .l{display:flex;align-items:center;gap:10px}
.ya .sb-bar h3{font-size:19px}
.ya .sb-bar .badge{font-size:12.5px;font-weight:700;background:var(--brand);color:#fff;border-radius:999px;padding:4px 11px}
.ya .sb-modes{display:flex;background:#fff;border:1px solid var(--line-2);border-radius:9px;padding:3px}
.ya .sb-modes button{border:0;background:none;font-size:14.5px;font-weight:600;color:var(--muted);padding:9px 16px;border-radius:7px;cursor:pointer;transition:.18s}
.ya .sb-modes button.on{background:var(--ink);color:#fff}
.ya .sb-head{display:grid;grid-template-columns:var(--sb-time) repeat(3,1fr);background:#FAFBFE;border-bottom:1px solid var(--line)}
.ya .sb-head .h{padding:14px 12px;font-size:14.5px;font-weight:600;color:var(--ink-2);border-left:1px solid var(--line);display:flex;align-items:center;gap:8px}
.ya .sb-head .h:first-child{border-left:0;justify-content:flex-end;color:#A5ADC2;font-size:12px}
.ya .sb-head .h .d{width:10px;height:10px;border-radius:50%}
.ya .sb-head .h small{display:block;font-size:12.5px;color:var(--muted);font-weight:400}
/* Slot geometry. grid-auto-rows is an absolute px track, and the min-height floor
   restates the same total (8 slots) so the grid can never collapse if an ancestor
   rule or an engine quirk drops the custom property. */
.ya .sb-grid{display:grid;grid-template-columns:var(--sb-time) repeat(3,1fr);grid-auto-rows:var(--sb-row,66px);min-height:calc(var(--sb-row,66px) * 8);align-content:start;position:relative}
.ya .sb-time{font-size:13.5px;color:#A5ADC2;text-align:right;padding-right:11px;display:flex;align-items:flex-start;justify-content:flex-end;font-weight:500}
.ya .sb-time span{transform:translateY(-7px)}
.ya .sb-cell{border-left:1px solid var(--line);border-bottom:1px dashed #F0F1F6;margin:2px 3px;border-radius:6px;min-height:36px;transition:.16s var(--ease);position:relative}
.ya .sb-cell.free{background:#F8F9FC;cursor:pointer}
.ya .sb-cell.free:hover{background:var(--brand-soft);outline:1.5px solid var(--brand);outline-offset:-1px}
.ya .sb-cell.black{background:repeating-linear-gradient(45deg,#F4F5FA,#F4F5FA 5px,#E9EBF4 5px,#E9EBF4 10px);cursor:not-allowed;display:grid;place-items:center;font-size:12.5px;font-weight:700;color:#98A0B8;letter-spacing:.05em}
/* The chip holds two lines in a fixed-height box. line-height is pinned to 1.3 rather
   than the inherited 1.6: at 1.6 the two lines measured 43.2px inside a 42px inner
   box and were clipped by ~1px top and bottom, which is what shaved the patient name
   and the duration. min-height is a floor so the chip cannot be squeezed flat. */
.ya .sb-cell.appt{border:0;margin:4px 5px;padding:8px 12px;color:#fff;font-size:14.5px;line-height:1.3;font-weight:600;cursor:pointer;display:flex;flex-direction:column;justify-content:center;min-height:44px;overflow:hidden}
.ya .sb-cell.appt>span:first-child{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ya .sb-cell.appt small{display:block;font-weight:500;opacity:.8;font-size:12.5px;line-height:1.3;white-space:nowrap}
.ya .sb-cell.appt.sel{outline:2.5px solid var(--ink);outline-offset:1px;transform:scale(1.02);z-index:4}
.ya .sb-cell.pop{animation:ya-evPop .45s var(--ease) both}
.ya .sb-cell.ya-shake{animation:ya-shake .4s}
@keyframes ya-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.ya .sb-side .card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 2px 8px rgba(10,14,26,.04)}
.ya .sb-side h4{font-size:13.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:13px}
.ya .sb-kv{display:flex;justify-content:space-between;font-size:16px;padding:12px 0;border-bottom:1px dashed var(--line)}
.ya .sb-kv:last-of-type{border-bottom:0}
.ya .sb-kv span:first-child{color:var(--muted)}
.ya .sb-kv span:last-child{font-weight:600}
.ya .blk-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.ya .blk-btn{font-size:14px;font-weight:600;padding:10px 15px;border-radius:9px;border:1px solid var(--line-2);background:#fff;color:var(--ink-2);cursor:pointer;transition:.18s}
.ya .blk-btn:hover{border-color:var(--brand);color:var(--brand)}
.ya .blk-btn.on{background:var(--ink);border-color:var(--ink);color:#fff}
.ya .sb-hint{font-size:14.5px;color:var(--muted);background:var(--bg-soft);border-radius:11px;padding:16px 18px;margin-top:14px;line-height:1.55}
/* sandbox date strip */
.ya .sb-days{display:flex;gap:8px;padding:15px 18px;background:#fff;border-bottom:1px solid var(--line);overflow-x:auto}
.ya .sb-days::-webkit-scrollbar{height:0}
.ya .day-btn{flex:none;border:1px solid var(--line-2);background:#fff;border-radius:10px;padding:9px 14px;cursor:pointer;transition:.18s var(--ease);display:flex;flex-direction:column;align-items:center;gap:3px;min-width:76px}
.ya .day-btn span:first-child{font-size:12.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.ya .day-btn b{font-family:var(--font-d);font-size:21px;color:var(--ink);line-height:1}
.ya .day-btn .cnt{font-size:12px;font-weight:700;background:var(--brand-soft);color:var(--brand-deep);border-radius:999px;padding:2px 7px;margin-top:3px}
.ya .day-btn:hover{border-color:var(--brand)}
.ya .day-btn.on{background:var(--ink);border-color:var(--ink)}
.ya .day-btn.on span:first-child{color:rgba(255,255,255,.65)}
.ya .day-btn.on b{color:#fff}
.ya .day-btn.on .cnt{background:rgba(255,255,255,.2);color:#fff}
/* appointment quick-cancel */
.ya .sb-x{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:6px;background:rgba(10,14,26,.5);color:#fff;font-size:11px;line-height:1;display:grid;place-items:center;opacity:0;transition:.15s;cursor:pointer;font-weight:700}
.ya .sb-cell.appt:hover .sb-x{opacity:1}
.ya .sb-x:hover{background:#E5484D}
.ya .sb-cell.appt.removing{animation:ya-cancelOut .48s var(--ease) forwards}
@keyframes ya-cancelOut{0%{opacity:1;transform:scale(1)}55%{opacity:.45;transform:scale(.92)}100%{opacity:0;transform:scale(.65)}}
/* sandbox action form */
.ya .sb-form{display:flex;flex-direction:column;gap:12px}
.ya .sb-form label{font-size:12.5px;font-weight:600;color:var(--muted);display:block;margin-bottom:5px}
.ya .sb-form select{width:100%;font-family:var(--font-b);font-size:14px;padding:10px 12px;border:1px solid var(--line-2);border-radius:9px;background:#fff;color:var(--ink);cursor:pointer}
.ya .sb-form select:focus{outline:2px solid var(--brand-soft);border-color:var(--brand)}
.ya .sb-form .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ya .sb-actions{display:flex;gap:8px}
.ya .sb-actions button{flex:1;font-family:var(--font-b);font-size:13.5px;font-weight:600;padding:11px 13px;border-radius:9px;cursor:pointer;transition:.18s;border:0}
.ya .btn-apply{background:var(--brand);color:#fff}
.ya .btn-apply:hover{background:var(--brand-deep)}
.ya .btn-danger{background:#E5484D;color:#fff}
.ya .btn-danger:hover{background:#C93A3F}
.ya .btn-plain{background:#fff;border:1px solid var(--line-2)!important;color:var(--ink-2)}
.ya .btn-plain:hover{border-color:var(--brand)!important;color:var(--brand)}
.ya .sb-warnbox{font-size:13.5px;color:var(--ink-2);background:#FDF0F0;border:1px solid #F5D2D3;border-radius:11px;padding:12px 14px;line-height:1.55;margin-bottom:12px}
/* features with micro-demos */
.ya .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.ya .feat{padding:30px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;position:relative;transition:.3s var(--ease)}
.ya .feat:nth-child(3n){border-right:0}
.ya .feat:nth-child(n+4){border-bottom:0}
.ya .feat:hover{background:var(--bg-ink)}
.ya .feat:hover h4, .ya .feat:hover .benefit{color:#fff}
.ya .feat:hover p{color:rgba(255,255,255,.7)}
.ya .feat:hover .ic{background:rgba(255,255,255,.1)}
.ya .feat:hover .ic svg{stroke:var(--lime)}
.ya .feat .ic{width:44px;height:44px;border-radius:12px;background:var(--brand-soft);display:grid;place-items:center;margin-bottom:16px;transition:.3s}
.ya .feat .ic svg{width:22px;height:22px;stroke:var(--brand);transition:.3s}
.ya .feat .benefit{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:9px}
.ya .feat h4{font-size:18px;margin-bottom:8px;transition:.3s}
.ya .feat p{font-size:14px;color:var(--muted);transition:.3s}
.ya .mini{margin-top:18px;height:86px;border-radius:11px;background:var(--bg-soft);position:relative;overflow:hidden;transition:.3s}
.ya .feat:hover .mini{background:rgba(255,255,255,.06)}
.ya .m-notif{position:absolute;left:12px;right:12px;top:16px;background:#fff;border-radius:9px;padding:9px 12px;font-size:11.5px;font-weight:600;box-shadow:0 6px 16px -8px rgba(10,14,26,.4);display:flex;gap:8px;align-items:center;opacity:0}
.ya .m-notif .md{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none}
.ya .m-notif .mt{font-weight:400;color:var(--muted);font-size:10.5px;display:block}
.ya .play .m-notif{animation:ya-notifIn 3.2s infinite}
@keyframes ya-notifIn{0%{opacity:0;transform:translateX(40px)}15%{opacity:1;transform:none}80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-14px)}}
.ya .m-track{position:absolute;inset:14px 12px;display:flex;gap:6px}
.ya .m-track i{flex:1;border-radius:6px;background:#E9EBF4}
.ya .m-block{position:absolute;top:20px;left:16px;width:calc(33% - 12px);height:30px;border-radius:7px;background:var(--brand);opacity:0}
.ya .play .m-block{animation:ya-moveBlock 3.4s infinite}
@keyframes ya-moveBlock{0%{opacity:0;transform:translateX(0)}10%{opacity:1;transform:translateX(0)}45%{opacity:1;transform:translateX(0)}65%{opacity:1;transform:translateX(calc(100% + 6px))}90%{opacity:1;transform:translateX(calc(100% + 6px))}100%{opacity:0}}
.ya .m-hatch{position:absolute;top:14px;bottom:14px;left:50%;width:0;border-radius:7px;background:repeating-linear-gradient(45deg,#DDE1EC,#DDE1EC 5px,#CDD3E2 5px,#CDD3E2 10px);opacity:0}
.ya .play .m-hatch{animation:ya-hatchGrow 3.2s infinite}
@keyframes ya-hatchGrow{0%{opacity:0;width:0;left:50%}20%{opacity:1;width:0;left:50%}55%{opacity:1;width:38%;left:50%}85%{opacity:1;width:38%;left:50%}100%{opacity:0;width:38%;left:50%}}
.ya .m-b{position:absolute;top:22px;height:34px;width:38%;border-radius:7px;background:#5B7BFF}
.ya .m-b.b1{left:12px}
.ya .m-b.b2{left:12px;background:var(--coral)}
.ya .play .m-b.b2{animation:ya-conflictMove 3.4s infinite}
@keyframes ya-conflictMove{0%{transform:translateX(0);background:var(--coral)}30%{transform:translateX(58%);background:var(--coral)}42%{transform:translateX(58%);background:#FF3B1F;box-shadow:0 0 0 3px rgba(255,59,31,.25)}60%{transform:translateX(0);background:var(--coral)}100%{transform:translateX(0);background:var(--coral)}}
.ya .m-x{position:absolute;right:16px;top:26px;width:26px;height:26px;border-radius:50%;background:#FF3B1F;color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700;opacity:0}
.ya .play .m-x{animation:ya-xFlash 3.4s infinite}
@keyframes ya-xFlash{0%,38%{opacity:0;transform:scale(.6)}46%{opacity:1;transform:scale(1.1)}56%{opacity:1;transform:scale(1)}72%{opacity:0;transform:scale(.6)}100%{opacity:0}}
.ya .m-icons{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:26px}
.ya .mi{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:17px;position:relative}
.ya .mi-mail{background:var(--brand-soft);color:var(--brand)}
.ya .mi-wa{background:#DCF8C6;color:#128C7E}
.ya .play .mi::after{content:"";position:absolute;inset:0;border-radius:12px;border:2px solid currentColor;animation:ya-ring 2.4s infinite}
.ya .play .mi-wa::after{animation-delay:.6s}
@keyframes ya-ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
.ya .m-bub{position:absolute;left:12px;top:14px;background:#fff;border-radius:11px 11px 11px 3px;padding:8px 12px;font-size:11px;font-weight:600;box-shadow:0 6px 16px -8px rgba(10,14,26,.4);opacity:0}
.ya .play .m-bub{animation:ya-bubSeq 4s infinite}
@keyframes ya-bubSeq{0%{opacity:0;transform:translateY(8px)}12%{opacity:1;transform:none}45%{opacity:1}60%{opacity:0}100%{opacity:0}}
.ya .m-type{position:absolute;left:12px;bottom:14px;display:flex;gap:4px;opacity:0}
.ya .m-type i{width:6px;height:6px;border-radius:50%;background:#B4BACB}
.ya .play .m-type{animation:ya-typeSeq 4s infinite}
.ya .play .m-type i:nth-child(1){animation:ya-bounce 1s infinite}
.ya .play .m-type i:nth-child(2){animation:ya-bounce 1s .15s infinite}
.ya .play .m-type i:nth-child(3){animation:ya-bounce 1s .3s infinite}
@keyframes ya-bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
@keyframes ya-typeSeq{0%,45%{opacity:0}58%{opacity:1}85%{opacity:1}100%{opacity:0}}
.ya .m-check{position:absolute;right:14px;bottom:12px;width:28px;height:28px;border-radius:50%;background:#0FA97A;color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700;opacity:0}
.ya .play .m-check{animation:ya-checkSeq 4s infinite}
@keyframes ya-checkSeq{0%,72%{opacity:0;transform:scale(.5)}80%{opacity:1;transform:scale(1.15)}88%{opacity:1;transform:scale(1)}100%{opacity:1}}
/* channels */
.ya .chan{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ya .tabs{display:inline-flex;border:1.5px solid var(--ink);border-radius:11px;padding:4px;margin-bottom:26px;background:#fff}
.ya .tabs button{border:0;background:none;font-weight:600;font-size:14px;color:var(--muted);padding:10px 22px;border-radius:8px;cursor:pointer;transition:.2s}
.ya .tabs button.on{background:var(--ink);color:#fff}
/* The tab panel is deliberately transparent, matching the design source. It used to
   carry background:var(--bg-soft) as a hardening against a forced-dark ancestor, but
   the booking section no longer has a soft band of its own, so that fill would show
   through as a stray grey block around the copy. Dark-mode safety now rests on
   html{color-scheme:only light} in the page head, which is where it belongs. */
.ya .panel{display:none}
.ya .panel.on{display:block;animation:ya-fade .35s var(--ease)}
@keyframes ya-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ya .panel h3{font-size:24px;margin-bottom:12px}
.ya .panel p{font-size:16px;color:var(--muted);margin-bottom:18px}
.ya .steps{list-style:none;display:grid;gap:12px}
.ya .steps li{display:flex;gap:13px;font-size:14.5px;color:var(--ink-2);opacity:0;transform:translateX(-12px)}
.ya .panel.on .steps li{animation:ya-fadeUp .5s var(--ease) both}
.ya .panel.on .steps li:nth-child(1){animation-delay:.15s}
.ya .panel.on .steps li:nth-child(2){animation-delay:.28s}
.ya .panel.on .steps li:nth-child(3){animation-delay:.41s}
.ya .steps .n{width:24px;height:24px;border-radius:7px;background:var(--brand);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;flex:none;margin-top:2px}
.ya .setup-note{font-size:12.5px;color:#7A5B00;background:#FFF6D6;border:1px solid #F0E2A8;border-radius:11px;padding:11px 14px;margin-top:18px;display:flex;gap:8px;line-height:1.5}
/* chat */
.ya .phone{width:300px;margin:0 auto;background:#0A0E1A;border-radius:38px;padding:11px;box-shadow:var(--shadow-lg)}
.ya .phone-in{background:#E9EDF2;border-radius:28px;overflow:hidden;height:520px;display:flex;flex-direction:column}
.ya .p-head{background:#075E54;color:#fff;padding:13px 15px;display:flex;align-items:center;gap:11px}
.ya .p-head .av{width:34px;height:34px;border-radius:50%;background:#25D366;display:grid;place-items:center;font-weight:700;font-size:13px;font-family:var(--font-d)}
.ya .p-head b{font-size:13px;display:block}
.ya .p-head span{font-size:10px;opacity:.85}
.ya .p-body{flex:1;padding:15px 12px;display:flex;flex-direction:column;gap:9px;overflow:auto}
.ya .bub{max-width:84%;padding:9px 12px;border-radius:13px;font-size:12.5px;line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.06);animation:ya-bubIn .35s var(--ease) both}
@keyframes ya-bubIn{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:none}}
.ya .bub.them{background:#fff;border-top-left-radius:4px;align-self:flex-start}
.ya .bub.me{background:#DCF8C6;border-top-right-radius:4px;align-self:flex-end}
.ya .p-input{background:#fff;padding:10px 12px;display:flex;gap:9px;align-items:center}
.ya .p-input .f{flex:1;background:#F1F4F3;border-radius:999px;padding:9px 14px;font-size:11.5px;color:#9AA8A5}
.ya .p-input .send{width:34px;height:34px;border-radius:50%;background:#25D366;display:grid;place-items:center}
.ya .webchat{width:352px;margin:0 auto;background:#fff;border:1.5px solid var(--ink);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden}
.ya .wc-head{background:var(--ink);color:#fff;padding:17px 19px;display:flex;align-items:center;gap:12px}
.ya .wc-head .av{width:36px;height:36px;border-radius:11px;background:var(--brand);display:grid;place-items:center}
.ya .wc-head b{font-size:14px;display:block;font-family:var(--font-d)}
.ya .wc-head span{font-size:11px;opacity:.7}
.ya .wc-body{padding:17px;display:flex;flex-direction:column;gap:11px;height:400px;overflow:auto;background:var(--bg-soft)}
.ya .wb{max-width:84%;padding:11px 14px;border-radius:13px;font-size:12.5px;line-height:1.5;animation:ya-bubIn .35s var(--ease) both}
.ya .wb.bot{background:#fff;border:1px solid var(--line);border-top-left-radius:4px;align-self:flex-start}
.ya .wb.usr{background:var(--brand);color:#fff;border-top-right-radius:4px;align-self:flex-end}
.ya .wc-input{border-top:1px solid var(--line);padding:12px 14px;display:flex;gap:9px;align-items:center;background:#fff}
.ya .wc-input .f{flex:1;font-size:12px;color:#9AA8A5;background:var(--bg-soft);border-radius:9px;padding:10px 15px}
.ya .wc-input .send{width:34px;height:34px;border-radius:9px;background:var(--brand);display:grid;place-items:center}
.ya .typing{display:inline-flex;gap:4px;align-items:center;height:12px}
.ya .typing i{width:6px;height:6px;border-radius:50%;background:#B4BACB;animation:ya-bounce 1s infinite}
.ya .typing i:nth-child(2){animation-delay:.15s}
.ya .typing i:nth-child(3){animation-delay:.3s}
/* industries */
.ya .ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ya .ind{border-radius:var(--radius-lg);overflow:hidden;border:1.5px solid var(--ink);transition:.3s var(--ease);background:#fff;display:flex;flex-direction:column}
.ya .ind:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.ya .ind-top{padding:30px 28px 24px;border-bottom:1.5px solid var(--ink)}
.ya .ind-top.a{background:var(--brand);color:#fff}
.ya .ind-top.b{background:var(--lime)}
.ya .ind-top.c{background:var(--coral);color:#fff}
.ya .ind-top .ic{width:50px;height:50px;border-radius:14px;background:rgba(255,255,255,.22);display:grid;place-items:center;margin-bottom:18px;transition:.35s var(--ease)}
.ya .ind:hover .ind-top .ic{transform:rotate(-6deg) scale(1.08)}
.ya .ind-top.b .ic{background:rgba(10,14,26,.12)}
.ya .ind-top h3{font-size:22px;margin-bottom:6px}
.ya .ind-top p{font-size:14px;opacity:.85}
.ya .ind-body{padding:26px 28px 30px;flex:1}
.ya .ind-body ul{list-style:none;display:grid;gap:12px}
.ya .ind-body li{display:flex;gap:11px;font-size:14px;color:var(--ink-2)}
.ya .ind-body li svg{width:15px;height:15px;stroke:var(--brand);flex:none;margin-top:4px}
.ya .ind-scene{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line-2);opacity:.5;transition:.35s var(--ease)}
.ya .ind:hover .ind-scene{opacity:1}
.ya .ind-scene .lbl{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.ya .scene-row{display:flex;gap:7px;flex-wrap:wrap}
.ya .scene-chip{font-size:11px;font-weight:600;background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;padding:5px 10px;display:flex;gap:6px;align-items:center}
.ya .scene-chip i{width:7px;height:7px;border-radius:50%;display:block}
.ya .ind:hover .scene-chip{animation:ya-chipIn .45s var(--ease) both}
.ya .ind:hover .scene-chip:nth-child(2){animation-delay:.07s}
.ya .ind:hover .scene-chip:nth-child(3){animation-delay:.14s}
@keyframes ya-chipIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* how */
.ya .how{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ya .how .step{border:1.5px solid var(--ink);border-radius:var(--radius-lg);padding:32px 28px;background:#fff;position:relative;overflow:hidden;transition:.3s var(--ease)}
.ya .how .step:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.ya .how .step::before{content:"";position:absolute;left:0;top:0;height:4px;width:0;background:var(--brand);transition:width .6s var(--ease)}
.ya .how .step.in::before{width:100%}
.ya .how .step .n{font-family:var(--font-d);font-size:44px;font-weight:700;line-height:1;margin-bottom:14px;-webkit-text-stroke:1.5px var(--brand);color:transparent}
.ya .how .step h4{font-size:19px;margin-bottom:9px}
.ya .how .step p{font-size:14.5px;color:var(--muted)}
/* cta */
.ya .cta-dark{background:var(--bg-ink);color:#fff;border-radius:26px;padding:70px 52px;position:relative;overflow:hidden;text-align:center}
.ya .cta-dark::before{content:"";position:absolute;inset:0;background:radial-gradient(620px 380px at 50% 120%, rgba(47,91,255,.4), transparent 66%)}
.ya .cta-dark::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(198,242,78,.15),transparent 65%);left:50%;top:-170px;transform:translateX(-50%);animation:ya-drift 9s ease-in-out infinite}
@keyframes ya-drift{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-58%) translateY(22px)}}
.ya .cta-dark h2{color:#fff;font-size:clamp(32px,4.6vw,54px);margin-bottom:18px;position:relative}
.ya .cta-dark p{font-size:18px;color:rgba(255,255,255,.72);max-width:600px;margin:0 auto 34px;position:relative}
.ya .cta-dark .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}
.ya .cta-dark .fine{font-size:12.5px;color:rgba(255,255,255,.5);margin-top:22px;position:relative}
.ya footer{background:var(--bg-ink);color:rgba(255,255,255,.6);padding:64px 0 30px}
.ya .f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:42px;border-bottom:1px solid var(--line-dark)}
.ya footer .logo{color:#fff}
.ya footer p{font-size:13.5px;color:rgba(255,255,255,.5);max-width:290px;margin-top:15px}
.ya .f-col h5{color:#fff;font-size:13px;font-weight:700;margin-bottom:15px}
.ya .f-col a{display:block;font-size:13.5px;color:rgba(255,255,255,.5);margin-bottom:10px}
.ya .f-col a:hover{color:#fff}
.ya .f-note{font-size:11.5px;color:rgba(255,255,255,.38);padding-top:24px;line-height:1.7;max-width:900px}
.ya .f-bottom{display:flex;justify-content:space-between;padding-top:20px;flex-wrap:wrap;gap:12px;font-size:12.5px;color:rgba(255,255,255,.38)}
.ya .concept-tag{position:fixed;left:18px;bottom:18px;z-index:200;background:var(--brand);color:#fff;border-radius:11px;padding:11px 16px;font-size:12px;font-weight:600;box-shadow:var(--shadow-lg);display:flex;gap:9px;align-items:center}
.ya .concept-tag b{color:var(--lime)}
.ya .concept-tag a{color:rgba(255,255,255,.75);text-decoration:underline}
/* toast */
.ya .toast{position:fixed;right:20px;bottom:20px;z-index:400;display:flex;flex-direction:column;gap:9px;align-items:flex-end;pointer-events:none}
.ya .tst{background:#0A0E1A;color:#fff;border-radius:11px;padding:12px 16px;font-size:13px;font-weight:500;box-shadow:var(--shadow-lg);display:flex;gap:10px;align-items:center;max-width:330px;animation:ya-slideIn .32s var(--ease)}
@keyframes ya-slideIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.ya .tst.ok{background:#0A7A58}
.ya .tst.err{background:#E5484D}
.ya .tst.warn{background:#B87A1B}
.ya .tst.info{background:#1E3FD6}
@media(max-width:1020px){.ya .hero-grid, .ya .chan{grid-template-columns:1fr;gap:44px}
.ya .sandbox{grid-template-columns:1fr}
.ya .prob-grid, .ya .feat-grid, .ya .ind-grid, .ya .how{grid-template-columns:1fr 1fr}
.ya .app-body{grid-template-columns:1fr}
.ya .app-side{display:none}
.ya .f-grid{grid-template-columns:1fr 1fr}
.ya .nav-links{display:none}
.ya .prob:nth-child(3n), .ya .feat:nth-child(3n){border-right:1px solid var(--line)}
.ya .prob:nth-child(n+4), .ya .feat:nth-child(n+4){border-bottom:1px solid var(--line)}
.ya .bf1{left:0}
.ya .bf2{right:0}
.ya .logo .ya-lockup{height:30px}
.ya footer .logo .ya-lockup{height:32px}}

/* STAT BAND - column collapse.
   The stat row is a horizontal band in the design: 23% | -28% | 40% | 24/7. It used to
   collapse from four columns straight to two at 1020px, which made the row disappear on
   ordinary laptop widths (a 1280-1440px screen with the browser window not maximised,
   or a 1024px tablet in landscape, landed in the two-column branch). The four-column
   row now holds down to 900px, where each column is still ~190px wide and the 13px
   description wraps to a readable 4-5 lines. */
@media(max-width:900px){
  .ya .statband .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
}
/* Below ~480px a two-column stat grid leaves ~150px per column, which shatters the
   13px description into 6-7 line slivers, so the band drops to a single column. */
@media(max-width:480px){
  .ya .statband .grid{grid-template-columns:1fr}
}
@media(max-width:640px){.ya .sec{padding:70px 0}
.ya .prob-grid, .ya .feat-grid, .ya .ind-grid, .ya .how, .ya .f-grid{grid-template-columns:1fr}
.ya .cta-dark{padding:46px 26px}
.ya .hero-meta{gap:20px}
.ya .hero{padding:64px 0 64px}
.ya .webchat, .ya .phone{width:100%}
/* scheduling sandbox: tighter geometry and type so the 4-column grid (time + 3
   providers) still fits a 360px screen without clipping an appointment chip */
.ya .sandbox{--sb-time:52px;--sb-row:54px}
.ya .sb-bar{padding:14px 15px}
.ya .sb-bar h3{font-size:16px}
.ya .sb-modes button{font-size:13px;padding:8px 13px}
.ya .sb-head .h{padding:11px 7px;font-size:12.5px;gap:5px}
.ya .sb-head .h:first-child{font-size:11px}
.ya .sb-head .h small{font-size:11px}
.ya .sb-time{font-size:11.5px;padding-right:6px}
.ya .sb-time span{transform:translateY(-6px)}
.ya .sb-cell.appt{font-size:12px;padding:6px 8px;margin:3px 4px;min-height:40px}
.ya .sb-cell.appt small{font-size:10.5px}
.ya .sb-cell.black{font-size:11px}
.ya .sb-days{padding:12px 13px;gap:7px}
.ya .day-btn{min-width:64px;padding:8px 11px}
.ya .day-btn span:first-child{font-size:11.5px}
.ya .day-btn b{font-size:18px}
.ya .day-btn .cnt{font-size:11px}
/* keep the header on one line: smaller lockup, drop the secondary link */
.ya .nav-in{height:64px}
.ya .logo .ya-lockup{height:26px}
.ya .nav-cta{gap:10px}
.ya .nav-cta .login{display:none}
.ya footer .logo .ya-lockup{height:30px}}
/* ================= HERO TAGS (new differentiators) ================= */
.ya .hero-tags{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 28px;animation:ya-fadeUp .9s .6s var(--ease) both}
.ya .hero-tags span{font-size:12px;font-weight:600;border:1px solid var(--line-dark);border-radius:999px;padding:6px 13px;color:rgba(255,255,255,.8);display:flex;gap:7px;align-items:center}
.ya .hero-tags span i{width:6px;height:6px;border-radius:50%;background:var(--lime);flex:none}
/* ================= WHATSAPP SETUP DEMOS ================= */
.ya .wa-tabs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.ya .wa-tab{display:flex;align-items:center;gap:14px;text-align:left;border:1.5px solid var(--ink);border-radius:16px;background:#fff;padding:17px 19px;cursor:pointer;transition:.25s var(--ease);position:relative;overflow:hidden;font-family:var(--font-b);color:var(--ink)}
.ya .wa-tab:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ya .wa-tab.on{background:var(--ink);color:#fff}
.ya .wa-tab .ti{width:42px;height:42px;border-radius:12px;background:var(--brand-soft);display:grid;place-items:center;flex:none;transition:.25s}
.ya .wa-tab.on .ti{background:rgba(255,255,255,.14)}
.ya .wa-tab .ti svg{width:21px;height:21px;stroke:var(--brand);transition:.25s}
.ya .wa-tab.on .ti svg{stroke:var(--lime)}
.ya .wa-tab .tx{flex:1;min-width:0}
.ya .wa-tab b{font-family:var(--font-d);font-size:16px;display:block;line-height:1.25;margin-bottom:3px}
.ya .wa-tab .d{font-size:12.5px;color:var(--muted);display:block;line-height:1.45;transition:.25s}
.ya .wa-tab.on .d{color:rgba(255,255,255,.72)}
.ya .wa-tab .tick{width:22px;height:22px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-size:12px;font-weight:800;flex:none;opacity:0;transform:scale(.6);transition:.25s}
.ya .wa-tab.on .tick{opacity:1;transform:none}
.ya .wa-panel{display:none}
.ya .wa-panel.on{display:block;animation:ya-waIn .5s var(--ease) both}
@keyframes ya-waIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ya .wa-grid{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:26px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:0 2px 8px rgba(10,14,26,.04)}
.ya .wa-phone-col{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.ya .wa-phone-col .phone-in{height:384px}
.ya .wa-cap{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--muted);background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:5px 12px;text-align:center}
.ya .wa-cap i{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none}
.ya .wa-right{display:grid;grid-template-columns:.85fr 1.15fr;gap:18px;align-items:start;min-width:0}
.ya .wa-card{border:1px solid var(--line);border-radius:16px;padding:18px 19px;background:#fff;min-width:0}
.ya .wa-card>h5{font-family:var(--font-b);font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.ya .wa-ch{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.ya .wa-ch h5{font-family:var(--font-b);font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0;min-width:0}
.ya .wa-num{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:13px;padding:11px 13px;background:var(--bg-soft);min-width:0}
.ya .wa-num .av{width:38px;height:38px;border-radius:11px;background:#25D366;display:grid;place-items:center;flex:none}
.ya .wa-num .av svg{width:20px;height:20px;fill:#fff}
.ya .wa-num .tx{flex:1;min-width:0}
.ya .wa-num b{font-family:var(--font-d);font-size:14px;display:block;white-space:normal;overflow-wrap:break-word}
.ya .wa-num .tx>span{font-size:11.5px;color:var(--muted);display:block}
.ya .wa-pill{font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:4px 9px;flex:none;white-space:nowrap}
.ya .wa-pill.g{background:#DFF5EA;color:#0B7A52}
.ya .wa-pill.b{background:var(--brand-soft);color:var(--brand-deep)}
.ya .wa-req{list-style:none;display:grid;gap:9px;margin-top:14px}
.ya .wa-req li{display:flex;gap:9px;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.ya .wa-req li svg{width:14px;height:14px;stroke:#0B8A5F;flex:none;margin-top:3px}
.ya .wa-steps{list-style:none;display:grid;gap:11px}
.ya .wa-steps li{display:flex;gap:11px;align-items:flex-start;transition:.4s var(--ease)}
.ya .wa-steps li .n{width:23px;height:23px;border-radius:8px;background:var(--bg-soft);border:1px solid var(--line);color:var(--muted);font-size:10.5px;font-weight:800;display:grid;place-items:center;flex:none;transition:.4s var(--ease)}
.ya .wa-steps li .tx{min-width:0}
.ya .wa-steps li .tx b{font-family:var(--font-b);font-size:12.5px;font-weight:600;color:var(--muted);display:block;line-height:1.35;transition:.4s var(--ease)}
.ya .wa-steps li .tx span{font-size:11px;color:var(--muted);display:block;margin-top:2px;line-height:1.45;opacity:.72}
.ya .wa-steps li.done .n{background:#0B8A5F;border-color:#0B8A5F;color:#fff}
.ya .wa-steps li.done .tx b{color:var(--ink)}
.ya .wa-steps li.done .tx span{opacity:1}
.ya .wa-cal{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;min-width:0}
.ya .wa-cal .ch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--bg-soft);flex-wrap:wrap}
.ya .wa-cal .ch b{font-family:var(--font-d);font-size:12.5px}
.ya .wa-cal .ch span{font-size:11px;color:var(--muted);font-weight:600}
.ya .wa-cal .grid{display:grid;grid-template-columns:46px repeat(3,minmax(0,1fr));gap:4px;padding:12px}
.ya .wa-cal .h{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:center;padding-bottom:3px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ya .wa-cal .t{font-size:10px;color:var(--muted);display:flex;align-items:center;font-variant-numeric:tabular-nums}
.ya .wa-cal .cell{border-radius:8px;min-height:32px;background:#F5F6FA;display:grid;place-items:center;font-size:9.5px;font-weight:700;color:#A6ACC0;transition:.4s var(--ease);padding:0 3px;text-align:center;overflow:hidden}
.ya .wa-cal .cell.busy{background:#D8E0FF;color:#2440B8;letter-spacing:.02em}
.ya .wa-cal .cell.blk{background:repeating-linear-gradient(45deg,#EEF0F6,#EEF0F6 4px,#D8DCE8 4px,#D8DCE8 8px);color:#9AA1B5}
.ya .wa-cal .cell.new{background:#0B8A5F;color:#fff;font-weight:800;animation:ya-calPop .65s var(--ease) both}
@keyframes ya-calPop{0%{transform:scale(.35);opacity:0}55%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.ya .wa-legend{display:flex;gap:16px;flex-wrap:wrap;padding:0 16px 14px;font-size:10.5px;color:var(--muted);font-weight:600}
.ya .wa-legend span{display:inline-flex;align-items:center;gap:6px}
.ya .wa-legend i{width:11px;height:11px;border-radius:4px;flex:none}
.ya .wa-legend i.free{background:#F5F6FA}
.ya .wa-legend i.busy{background:#D8E0FF}
.ya .wa-legend i.blk{background:repeating-linear-gradient(45deg,#EEF0F6,#EEF0F6 3px,#D8DCE8 3px,#D8DCE8 6px)}
/* flow strip — replaces the old connector diagram; wraps instead of overlapping */
.ya .wa-flow{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:13px 16px;font-size:12px;font-weight:600;color:var(--ink-2)}
.ya .wa-flow i{display:inline-flex;align-items:center;gap:7px;font-style:normal;min-width:0}
.ya .wa-flow i::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none}
.ya .wa-flow .ar{color:var(--muted);font-weight:700}
/* ================= VOICE NOTES ================= */
.ya .lang-tabs{display:inline-flex;gap:5px;flex-wrap:wrap;background:#fff;border:1.5px solid var(--ink);border-radius:12px;padding:5px;margin-bottom:20px}
.ya .lang-tabs button{border:0;background:none;font-family:var(--font-b);font-weight:600;font-size:13px;color:var(--muted);padding:8px 15px;border-radius:8px;cursor:pointer;transition:.2s}
.ya .lang-tabs button.on{background:var(--ink);color:#fff}
.ya .v-bub{max-width:88%;padding:10px 12px;border-radius:14px;font-size:12.5px;line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.06);animation:ya-bubIn .35s var(--ease) both}
.ya .v-bub.them{background:#fff;border-top-left-radius:4px;align-self:flex-start}
.ya .v-bub.me{background:#DCF8C6;border-top-right-radius:4px;align-self:flex-end}
.ya .v-bub .vt{font-size:9.5px;font-weight:800;color:#128C7E;letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:5px}
.ya .v-bub .vn{display:flex;align-items:center;gap:9px}
.ya .v-bub .play{width:28px;height:28px;border-radius:50%;background:#25D366;display:grid;place-items:center;flex:none}
.ya .v-bub .play svg{width:12px;height:12px;fill:#fff}
.ya .wave{display:flex;align-items:center;gap:2px;height:22px;flex:1}
.ya .wave i{width:2.5px;border-radius:2px;background:#8FA0A0;height:35%;transition:height .18s}
.ya .wave.on i{animation:ya-waveBar .9s ease-in-out infinite}
.ya .wave.on i:nth-child(2n){animation-delay:.12s}
.ya .wave.on i:nth-child(3n){animation-delay:.24s}
@keyframes ya-waveBar{0%,100%{height:25%}50%{height:100%}}
.ya .v-bub .dur{font-size:10px;color:#7A8A88;flex:none}
.ya .v-trans{font-size:11.5px;color:var(--ink-2);background:var(--bg-soft);border-left:2.5px solid var(--brand);border-radius:0 10px 10px 0;padding:9px 12px;align-self:flex-start;max-width:88%;line-height:1.5;animation:ya-bubIn .35s var(--ease) both}
.ya .v-trans b{color:var(--brand);font-weight:800;display:block;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}
.ya .v-cal{align-self:flex-end;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 13px;box-shadow:var(--shadow);animation:ya-bubIn .4s var(--ease) both;max-width:88%}
.ya .v-cal .r{display:flex;gap:9px;align-items:center}
.ya .v-cal .ic{width:30px;height:30px;border-radius:9px;background:var(--brand-soft);display:grid;place-items:center;flex:none}
.ya .v-cal b{display:block;font-size:11.5px}
.ya .v-cal span{color:var(--muted);font-size:10.5px}
.ya .voice-cta{margin-top:16px}
/* ================= DEPLOYMENT / PRIVACY ================= */
.ya .deploy-wrap{text-align:center}
.ya .deploy-toggle{display:inline-flex;background:#fff;border:1.5px solid var(--ink);border-radius:12px;padding:5px;margin-bottom:38px;gap:5px}
.ya .deploy-toggle button{border:0;background:none;font-family:var(--font-b);font-weight:600;font-size:14px;color:var(--muted);padding:10px 24px;border-radius:8px;cursor:pointer;transition:.2s}
.ya .deploy-toggle button.on{background:var(--ink);color:#fff}
.ya .deploy{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;align-items:center}
.ya .infra{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow)}
.ya .infra-bound{border:2px dashed var(--brand);border-radius:16px;padding:20px 18px 18px;position:relative}
.ya .infra-bound .bl{position:absolute;top:-11px;left:16px;background:#fff;padding:2px 10px;font-size:11px;font-weight:700;color:var(--brand);letter-spacing:.06em;text-transform:uppercase}
.ya .rack{display:grid;gap:8px;margin-bottom:16px}
.ya .rack .u{height:26px;border-radius:7px;background:var(--bg-ink);display:flex;align-items:center;gap:8px;padding:0 12px}
.ya .rack .u i{width:6px;height:6px;border-radius:50%;background:var(--lime);animation:ya-pulseDot 2s infinite}
.ya .rack .u i:nth-child(2){animation-delay:.5s}
.ya .rack .u span{margin-left:auto;font-size:9.5px;color:rgba(255,255,255,.5);letter-spacing:.08em}
.ya .appwin{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.ya .appwin .bar{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:8px 12px;display:flex;gap:6px;align-items:center}
.ya .appwin .bar i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.ya .appwin .bar b{font-size:10.5px;color:var(--muted);margin-left:6px;font-weight:600}
.ya .appwin .bd{padding:14px}
.ya .mcal{display:grid;gap:7px}
.ya .mcrow{display:flex;align-items:center;gap:9px}
.ya .mcrow span{font-size:9px;color:#A5ADC2;width:28px;text-align:right;flex:none}
.ya .mcrow b{height:14px;border-radius:5px;flex:1;max-width:130px}
.ya .cloud-card{text-align:center}
.ya .cloud-card .cico{width:66px;height:66px;border-radius:20px;background:var(--brand-soft);display:grid;place-items:center;margin:0 auto 14px}
.ya .cloud-card .cico svg{width:32px;height:32px;stroke:var(--brand)}
.ya .cloud-card>b{font-family:var(--font-d);font-size:16px;display:block;margin-bottom:3px}
.ya .cloud-card>span{font-size:12px;color:var(--muted);display:block;margin-bottom:18px}
.ya .deploy-copy h3{font-size:24px;margin-bottom:12px}
.ya .deploy-copy p{font-size:15.5px;color:var(--muted);margin-bottom:16px}
.ya .deploy-copy ul{list-style:none;display:grid;gap:11px}
.ya .deploy-copy li{display:flex;gap:11px;font-size:14.5px;color:var(--ink-2)}
.ya .deploy-copy li svg{width:15px;height:15px;stroke:var(--brand);flex:none;margin-top:4px}
.ya .cmp{margin-top:36px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.ya .cmp table{width:100%;border-collapse:collapse;font-size:14px}
.ya .cmp th, .ya .cmp td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.ya .cmp thead th{background:var(--bg-soft);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.ya .cmp thead th:nth-child(3){color:var(--brand)}
.ya .cmp tbody tr:last-child td{border-bottom:0}
.ya .cmp td:first-child{color:var(--muted);font-weight:600;width:30%}
.ya .cmp td:nth-child(3){background:#F7F9FF}
.ya .illus-banner{background:#FFF6D6;border:1px solid #F0E2A8;border-radius:14px;padding:16px 20px;font-size:13px;color:#7A5B00;display:flex;gap:12px;align-items:flex-start;margin-bottom:26px;line-height:1.65}
.ya .illus-banner svg{width:19px;height:19px;flex:none;margin-top:2px;stroke:#B87A1B}
/* ================= INDUSTRY SHOWCASE (interactive) ================= */
.ya .st-tab[data-ind="health"], .ya .st-panel[data-ind="health"]{--ac:#2F5BFF}
.ya .st-tab[data-ind="ins"], .ya .st-panel[data-ind="ins"]{--ac:#D64A28}
.ya .st-tab[data-ind="fit"], .ya .st-panel[data-ind="fit"]{--ac:#5C8A0E}
.ya .st-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.ya .st-tab{position:relative;text-align:left;border:1.5px solid var(--ink);border-radius:18px;background:#fff;padding:17px 19px;cursor:pointer;overflow:hidden;transition:.28s var(--ease);font-family:var(--font-b);color:var(--ink);display:flex;gap:13px;align-items:center}
.ya .st-tab::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--ac);transform:scaleX(0);transform-origin:left;transition:.35s var(--ease)}
.ya .st-tab:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ya .st-tab.on{background:var(--ink);color:#fff}
.ya .st-tab.on::before{transform:none}
.ya .st-tab .ic{width:42px;height:42px;border-radius:12px;background:var(--ac);display:grid;place-items:center;flex:none;transition:.28s var(--ease)}
.ya .st-tab .ic svg{width:21px;height:21px;stroke:#fff}
.ya .st-tab .tx{min-width:0}
.ya .st-tab b{font-family:var(--font-d);font-size:16px;display:block;line-height:1.25;margin-bottom:3px}
.ya .st-tab span{font-size:12px;color:var(--muted);display:block;line-height:1.4;transition:.28s}
.ya .st-tab.on span{color:rgba(255,255,255,.7)}
.ya .st-stage{background:#fff;border:1.5px solid var(--ink);border-radius:22px;overflow:hidden}
.ya .st-panel{display:none}
.ya .st-panel.on{display:block;animation:ya-stIn .45s var(--ease) both}
@keyframes ya-stIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ya .st-layout{display:grid;grid-template-columns:minmax(0,1fr) 344px}
.ya .st-preview{padding:26px;border-right:1px solid var(--line);display:grid;grid-template-columns:minmax(0,304px) minmax(0,1fr);gap:22px;align-items:start;min-width:0}
.ya .st-pv-h{font-family:var(--font-b);font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:13px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.ya .st-pv-h em{font-style:normal;color:var(--ac)}
.ya .st-feedcol{min-width:0}
/* feed lines */
.ya .st-feed{display:flex;flex-direction:column;gap:9px}
.ya .st-feed .bub{max-width:90%;padding:9px 12px;border-radius:13px;font-size:12.5px;line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.05);opacity:0;transform:translateY(9px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.ya .st-feed .bub.in, .ya .st-feed .f-note.in, .ya .st-feed .f-chip.in, .ya .st-feed .f-card.in{opacity:1;transform:none}
.ya .st-feed .bub.them{background:#fff;border:1px solid var(--line);border-top-left-radius:4px;align-self:flex-start}
.ya .st-feed .bub.me{background:#DCF8C6;border-top-right-radius:4px;align-self:flex-end}
.ya .st-feed .f-note{align-self:center;font-size:10.5px;font-weight:700;color:var(--muted);background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:5px 13px;text-align:center;opacity:0;transform:translateY(9px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.ya .st-feed .f-chip{display:flex;gap:9px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:8px 11px;font-size:11.5px;font-weight:600;color:var(--muted);background:#fff;opacity:0;transform:translateY(9px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.ya .st-feed .f-chip .st{width:18px;height:18px;border-radius:6px;display:grid;place-items:center;font-size:9px;font-weight:800;color:#fff;background:#D6DAE6;flex:none}
.ya .st-feed .f-chip.ok{background:#F1FBF6;border-color:#CBEBDC;color:var(--ink-2)}
.ya .st-feed .f-chip.ok .st{background:#0B8A5F}
.ya .st-feed .f-chip.ag{background:#FFF8E9;border-color:#F0E0B4;color:var(--ink-2)}
.ya .st-feed .f-chip.ag .st{background:#D89B1E}
.ya .st-feed .f-card{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:9px 11px;background:#fff;opacity:0;transform:translateY(9px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.ya .st-feed .f-card .av{width:30px;height:30px;border-radius:50%;background:var(--ac);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800;flex:none}
.ya .st-feed .f-card .tx{min-width:0}
.ya .st-feed .f-card b{font-size:11.5px;display:block;line-height:1.25}
.ya .st-feed .f-card span{font-size:10px;color:var(--muted);display:block}
/* notification strip */
.ya .st-notif{display:flex;gap:11px;align-items:center;background:var(--bg-soft);border:1px solid var(--line);border-radius:13px;padding:11px 13px;margin-top:16px;opacity:0;transform:translateY(8px);transition:.45s var(--ease)}
.ya .st-notif.in{opacity:1;transform:none}
.ya .st-notif .ic{width:30px;height:30px;border-radius:9px;background:#DFF5EA;display:grid;place-items:center;flex:none}
.ya .st-notif .ic svg{width:16px;height:16px;stroke:#0B7A52}
.ya .st-notif b{display:block;font-size:11.5px;line-height:1.3}
.ya .st-notif span{font-size:10.5px;color:var(--muted);display:block}
/* workflow rail */
.ya .st-rail{padding:26px;display:flex;flex-direction:column;min-width:0}
.ya .st-rail-h{font-family:var(--font-b);font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.ya .st-step{display:flex;gap:13px;align-items:flex-start;text-align:left;background:none;border:0;padding:13px 0;cursor:pointer;position:relative;font-family:var(--font-b);width:100%;color:inherit}
.ya .st-step::after{content:"";position:absolute;left:13px;top:41px;bottom:-4px;width:2px;background:var(--line)}
.ya .st-step:last-child::after{display:none}
.ya .st-step .n{width:28px;height:28px;border-radius:50%;border:2px solid var(--line-2);background:#fff;color:var(--muted);font-size:11px;font-weight:800;display:grid;place-items:center;flex:none;transition:.3s var(--ease);z-index:1}
.ya .st-step .tx{min-width:0;flex:1}
.ya .st-step .tx b{font-family:var(--font-b);font-size:13px;font-weight:700;display:block;line-height:1.35;color:var(--muted);transition:.3s}
.ya .st-step .tx span{font-size:11.5px;color:var(--muted);display:block;margin-top:3px;line-height:1.45}
.ya .st-step .tx i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ac);display:block;margin-bottom:3px;opacity:0;transition:.3s}
.ya .st-step.on .n{background:var(--ac);border-color:var(--ac);color:#fff}
.ya .st-step.on .tx b{color:var(--ink)}
.ya .st-step.on .tx i{opacity:1}
.ya .st-step.done .n{background:#0B8A5F;border-color:#0B8A5F;color:#fff}
.ya .st-step.done .tx b{color:var(--ink-2)}
.ya .st-ctrl{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:20px;border-top:1px solid var(--line)}
.ya .st-ctrl button{font-family:var(--font-b);font-size:12.5px;font-weight:700;border:1.5px solid var(--ink);background:#fff;color:var(--ink);border-radius:10px;padding:9px 16px;cursor:pointer;transition:.22s var(--ease);display:inline-flex;align-items:center;gap:7px}
.ya .st-ctrl button:hover:not(:disabled){background:var(--ink);color:#fff}
.ya .st-ctrl button:disabled{opacity:.35;cursor:default}
.ya .st-ctrl .prog{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
/* footer: outcomes + quote */
.ya .st-foot{border-top:1px solid var(--line);padding:22px 26px;background:var(--bg-soft);display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:24px;align-items:start}
.ya .st-outs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ya .st-out{background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px 14px}
.ya .st-out .ic{width:28px;height:28px;border-radius:9px;background:var(--ac);display:grid;place-items:center;margin-bottom:9px}
.ya .st-out .ic svg{width:15px;height:15px;stroke:#fff}
.ya .st-out b{font-family:var(--font-d);font-size:12.5px;display:block;line-height:1.3;margin-bottom:4px}
.ya .st-out span{font-size:11px;color:var(--muted);display:block;line-height:1.45}
.ya .st-quote{background:#fff;border:1px solid var(--line);border-radius:13px;padding:15px 17px}
.ya .st-quote .qb{font-size:11.5px;color:var(--ink-2);line-height:1.6;font-style:italic}
.ya .st-quote .qb::before{content:"\201C";font-family:var(--font-d);font-size:28px;line-height:0;color:var(--ac);display:block;margin-bottom:8px}
.ya .st-quote .who{font-size:10.5px;color:var(--muted);margin-top:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* calendar cell change flash */
.ya .wa-cal .cell.flash{animation:ya-stFlash .95s var(--ease)}
@keyframes ya-stFlash{0%,18%{box-shadow:0 0 0 3px var(--ac)}100%{box-shadow:0 0 0 7px rgba(0,0,0,0)}}
/* ================= VALUE SUMMARY ================= */
.ya .summary-sec{background:var(--bg-ink);color:#fff}
.ya .summary-sec .sec-head h2{color:#fff}
.ya .summary-sec .sec-head p{color:rgba(255,255,255,.66)}
.ya .summary-sec .eyebrow{color:var(--lime)}
.ya .sum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-bottom:48px}
.ya .sum{border-top:2px solid var(--lime);padding-top:20px}
.ya .sum .si{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;margin-bottom:16px}
.ya .sum .si svg{width:21px;height:21px;stroke:var(--lime)}
.ya .sum b{font-family:var(--font-d);font-size:17px;color:#fff;display:block;margin-bottom:8px;line-height:1.25}
.ya .sum p{font-size:13.5px;color:rgba(255,255,255,.65);line-height:1.6}
.ya .sum-close{text-align:center;border-top:1px solid var(--line-dark);padding-top:38px}
.ya .sum-close p{font-family:var(--font-d);font-size:clamp(20px,2.7vw,31px);color:#fff;letter-spacing:-.02em;line-height:1.35;max-width:780px;margin:0 auto}
.ya .sum-close .hl{color:var(--lime)}
@media(max-width:1020px){.ya .deploy{grid-template-columns:1fr}
.ya .wa-tabs{grid-template-columns:1fr}
.ya .wa-grid{grid-template-columns:1fr;gap:24px}
.ya .sum-grid{grid-template-columns:1fr 1fr}
.ya .st-layout{grid-template-columns:1fr}
.ya .st-preview{border-right:0;border-bottom:1px solid var(--line)}
.ya .cmp{overflow-x:auto}
.ya .cmp table{min-width:560px}}
@media(max-width:640px){.ya .sum-grid{grid-template-columns:1fr}
.ya .st-tabs{grid-template-columns:1fr}
.ya .st-layout{grid-template-columns:1fr}
.ya .st-preview{grid-template-columns:1fr;padding:20px;gap:20px}
.ya .st-rail{padding:20px}
.ya .st-foot{grid-template-columns:1fr;padding:20px}
.ya .st-outs{grid-template-columns:1fr}
.ya .wa-right{grid-template-columns:1fr}
.ya .wa-grid{padding:18px}
.ya .wa-tab{padding:15px 16px;gap:12px}
.ya .wa-tab b{font-size:15px}
.ya .wa-tab .ti{width:38px;height:38px}
.ya .wa-cal .grid{grid-template-columns:40px repeat(3,minmax(0,1fr));gap:3px;padding:10px}
.ya .wa-cal .cell{min-height:28px}}
@media(prefers-reduced-motion:reduce){.ya *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.01s!important}
.ya .rv, .ya .rv-l, .ya .rv-r{opacity:1!important;transform:none!important}}

/* ===== YourAppt: back-to-top uses theme lime ===== */
#ast-scroll-top{background-color:#C6F24E!important;color:#0A0E1A!important;box-shadow:0 8px 22px -8px rgba(10,14,26,.45)}
#ast-scroll-top:hover{background-color:#b8e63c!important}
#ast-scroll-top .ast-icon svg,#ast-scroll-top svg{fill:currentColor!important;stroke:currentColor!important}

/* ===== YourAppt: floating web chat button (bottom-right) ===== */
.ya-webchat{position:fixed;right:24px;bottom:92px;z-index:1200;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#C6F24E;color:#0A0E1A;box-shadow:0 12px 30px -8px rgba(10,14,26,.45);text-decoration:none;transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s cubic-bezier(.2,.7,.2,1)}
.ya-webchat:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 16px 36px -8px rgba(10,14,26,.5)}
.ya-webchat svg{width:26px;height:26px}
.ya-webchat .ya-webchat-label{position:absolute;right:66px;top:50%;transform:translateY(-50%) translateX(6px);white-space:nowrap;background:#0A0E1A;color:#fff;font:600 13px/1 system-ui,sans-serif;padding:8px 12px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.ya-webchat:hover .ya-webchat-label{opacity:1;transform:translateY(-50%) translateX(0)}
@media (max-width:600px){.ya-webchat{right:16px;bottom:84px;width:52px;height:52px}}

/* ===== YourAppt: voice reply (agent speaks + text in one bubble) ===== */
.ya .v-bub .v-text{margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--ink)}
.ya .v-bub .vt+.vn{margin-top:1px}