/* =============================================================================
   sbc-front-desk.css

   What this file does:
   Styles the homepage's "AI front desk" layer: the product scenes (browser, chat widget, phone,
   call screen, workflow lane, overnight log, owner cards) and the homepage sections built around
   them (hero stage, the three auto-advancing steps, the after-hours band, the definition on the
   pad, the capability bento, the customer story and the close).

   Context of where it's used in the repo:
   Linked from templates/homepage-2.html. Scene markup comes from
   templates/includes/front_desk_scene_macros.html; static/js/sbc-front-desk-scenes.js plays it.
   Brand values follow SBC-all-services/brand/README.md: evergreen, ivory, one terracotta accent per
   section, Newsreader and Figtree, three motifs (the pad, the perforation, day and night).

   What it calls:
   Nothing. Fonts come from the homepage's Google Fonts link; Sarah's photo from /static/images.

   What calls it:
   homepage-2.html's <link rel="stylesheet">.

   How a scene stays still without JavaScript:
   With no JavaScript, or with reduced motion, every scene shows its finished frame (the "poster").
   When motion is allowed, an inline script in the page head adds .fd-motion to <html> before first
   paint, which hides each timed element at frame zero; the player then takes over and adds .is-live
   to each scene.
   ============================================================================= */

:root{
  --fd-forest:#1F3D33; --fd-forest-hover:#163028; --fd-ivory:#F7F4EE; --fd-white:#FFFFFF;
  --fd-night:#12241D; --fd-sage:#A7BDAE; --fd-linen:#EEE8DB; --fd-sand:#F1EDE4;
  --fd-line:#E4DFD4; --fd-line-strong:#D6D0C2; --fd-ink:#222222; --fd-soft:#4A463E; --fd-muted:#6F6A60;
  --fd-terracotta:#B86A50; --fd-terracotta-on-dark:#E0A188;
  --fd-rule:rgba(31,61,51,.11); --fd-rule-strong:rgba(31,61,51,.18); --fd-margin:rgba(31,61,51,.22);
  --fd-stage-dot:rgba(247,244,238,.10);
  --fd-shadow-page:0 2px 8px rgba(34,34,34,.08); --fd-shadow-device:0 30px 60px -24px rgba(0,0,0,.6);
  --fd-ease-out:cubic-bezier(.23,1,.32,1); --fd-ease-in-out:cubic-bezier(.65,0,.35,1);
  /* device tokens: phones, browsers and the sample business website keep their own look */
  --fd-bezel:#141414; --fd-call-1:#0E1713; --fd-call-2:#1F3D33; --fd-call-ink:#F7F4EE; --fd-call-muted:rgba(247,244,238,.58);
  --fd-call-chip:rgba(247,244,238,.12); --fd-call-chip-line:rgba(247,244,238,.18); --fd-sarah-wave:#E0A188;
  --fd-lock-1:#2B4A3F; --fd-lock-2:#0E1713;
  --fd-screen:#FBF9F5; --fd-screen-ink:#222222; --fd-screen-muted:#6F6A60; --fd-screen-line:#E4DFD4;
  --fd-bubble-in:#ECE7DD; --fd-bubble-out:#1F3D33; --fd-bubble-out-ink:#F7F4EE; --fd-workflow:#E1EBE4;
  --fd-banner:rgba(251,249,245,.97); --fd-mail-icon:#4C7BD9;
  --fd-ok:#2E7D5B; --fd-ok-soft:#CFE9DC; --fd-ok-ink:#1D5A40; --fd-hangup:#C8483B;
  --fd-tap:rgba(34,34,34,.16); --fd-tap-line:rgba(34,34,34,.28); --fd-online:#22A35A; --fd-widget-bot:#F1F1F1;
  --fd-site-bg:#FFFFFF; --fd-site-chrome:#F3F1EC; --fd-site-line:#E6E2D9; --fd-site-line-strong:#D9D4C9;
  --fd-site-ink:#222222; --fd-site-muted:#7A756B; --fd-site-accent:#2F5D8A; --fd-site-on-accent:#FFFFFF;
  --fd-sarah-photo:url("/static/images/sarah-avatar-128.jpg");
}

.fd-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* =============================================================================
   Scene frame: the fit box reserves the scene's size (no layout shift), the canvas is drawn at
   design size and scaled down to fit. --fd-w / --fd-h are the design size per breakpoint.
   ============================================================================= */
.fd-scene{position:relative;font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.4}
.fd-fit{position:relative;width:min(100%, calc(var(--fd-w) * 1px));aspect-ratio:var(--fd-w) / var(--fd-h);margin-inline:auto;overflow:hidden}
.fd-canvas{position:absolute;left:0;top:0;width:calc(var(--fd-w) * 1px);height:calc(var(--fd-h) * 1px);transform-origin:0 0;transform:scale(var(--fd-scale,1))}
.fd-canvas *{box-sizing:border-box}
.fd-cam{position:absolute}

/* Poster and frame zero (see the note at the top of this file) */
.fd-motion .fd-scene:not(.is-live) [data-in],
.fd-motion .fd-scene:not(.is-live) [data-show]{opacity:0}
.fd-motion .fd-scene:not(.is-live) [data-grow],
.fd-motion .fd-scene:not(.is-live) [data-morph]{visibility:hidden}
html:not(.fd-motion) .fd-scene:not(.is-live) .fd-transient{visibility:hidden}
/* The hero's still frame is its last moment: chat closed, the website stepped back, the texts on the phone */
html:not(.fd-motion) .fd-scene--hero:not(.is-live) .fd-widget{visibility:hidden}
html:not(.fd-motion) .fd-scene--hero:not(.is-live) .fd-hero-browser{opacity:.42}

/* Scrolling boxes: anchored to the bottom in the poster, scrolled by the player when live */
.fd-follow{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.fd-follow-stack{display:flex;flex-direction:column}
.fd-scene.is-live .fd-follow-stack{position:absolute;left:0;right:0;top:0}

/* Shared pieces: tap ripple, token, pill, chips, check marks */
.fd-tap{position:absolute;left:0;top:0;z-index:40;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:var(--fd-tap);border:1.5px solid var(--fd-tap-line);opacity:0;pointer-events:none}
.fd-token{position:absolute;left:0;top:0;z-index:35;display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 7px;border-radius:999px;background:var(--fd-screen);color:var(--fd-screen-ink);font:500 12px/1.2 var(--sans);white-space:nowrap;box-shadow:0 12px 28px -10px rgba(0,0,0,.55);opacity:0;pointer-events:none}
.fd-token-icon{width:20px;height:20px;border-radius:50%;background:var(--fd-bubble-out);display:grid;place-items:center;flex:none}
.fd-token-icon svg{width:10px;height:10px;fill:var(--fd-bubble-out-ink)}
.fd-anchor{position:absolute;width:1px;height:1px}
.fd-pill-row{position:absolute;left:0;right:0;display:flex;justify-content:center;z-index:30}
.fd-pill{display:flex;align-items:center;gap:9px;max-width:92%;min-height:36px;padding:8px 16px 8px 12px;border-radius:999px;background:var(--fd-white);color:var(--fd-ink);font:500 13px/1.25 var(--sans);box-shadow:0 10px 24px -10px rgba(0,0,0,.45)}
.fd-pill-icon{width:14px;height:14px;display:grid;place-items:center;flex:none;color:var(--fd-forest)}
.fd-pill-dot{display:block;width:7px;height:7px;border-radius:50%;background:var(--fd-forest)}
.fd-pill-script{display:none}
.fd-ok-bg{fill:var(--fd-ok-soft)} .fd-ok-mark{fill:none;stroke:var(--fd-ok-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fd-chip-icon{width:14px;height:14px;display:grid;place-items:center;flex:none}
.fd-chip-icon svg{display:block}
.fd-chip [data-chip-busy]{display:none}
.fd-chip.is-busy [data-chip-busy]{display:inline}
.fd-chip.is-busy [data-chip-done]{display:none}
.fd-chip:not(.is-busy):not(.is-done){visibility:hidden}
.fd-scene:not(.is-live) .fd-chip{visibility:visible}

/* Sarah's photo, as in the real widget, greeting and summary emails */
.fd-persona{position:relative;display:inline-block;flex:none;border-radius:50%}
.fd-persona-photo{display:block;width:100%;height:100%;border-radius:50%;background:#E8E1D5 var(--fd-sarah-photo) center/cover no-repeat}
.fd-online{position:absolute;right:-1px;bottom:-1px;width:30%;height:30%;min-width:7px;min-height:7px;border-radius:50%;background:var(--fd-online);border:2px solid var(--fd-site-bg)}

/* Stub: the perforation motif, a ticket with notches and a dashed tear line */
.fd-stub-shadow{filter:drop-shadow(0 14px 22px rgba(0,0,0,.28))}
.fd-stub{--fd-notch:8px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 14px;align-items:center;padding:11px 18px 11px 16px;background:var(--fd-white);border-radius:10px;color:var(--fd-ink);
  -webkit-mask:radial-gradient(circle at 0 50%,#0000 var(--fd-notch),#000 calc(var(--fd-notch) + .5px)) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 50%,#0000 var(--fd-notch),#000 calc(var(--fd-notch) + .5px)) 100% 0/51% 100% no-repeat;
  mask:radial-gradient(circle at 0 50%,#0000 var(--fd-notch),#000 calc(var(--fd-notch) + .5px)) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 50%,#0000 var(--fd-notch),#000 calc(var(--fd-notch) + .5px)) 100% 0/51% 100% no-repeat}
.fd-stub time{grid-row:span 2;align-self:stretch;display:grid;place-items:center;padding-right:14px;border-right:1.5px dashed var(--fd-line-strong);font:600 12px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--fd-muted)}
.fd-stub b{font:600 13.5px/1.25 var(--sans)}
.fd-stub span{font-size:12px;color:var(--fd-muted)}

/* =============================================================================
   Browser, the business's website and the chat widget (copies the real widget:
   CircleWidget.js launcher, Profile.js header, install-chatbot-iframe.js greeting)
   ============================================================================= */
.fd-browser{width:100%;height:100%;background:var(--fd-site-bg);border-radius:12px;overflow:hidden;box-shadow:var(--fd-shadow-device);display:flex;flex-direction:column}
.fd-browser-bar{height:34px;flex:none;display:flex;align-items:center;gap:6px;padding:0 12px;background:var(--fd-site-chrome);border-bottom:1px solid var(--fd-site-line)}
.fd-browser-bar i{width:9px;height:9px;border-radius:50%;background:var(--fd-site-line-strong)}
.fd-url{margin-left:8px;flex:1;min-width:0;height:20px;border-radius:6px;background:var(--fd-site-bg);display:flex;align-items:center;padding:0 10px;font:500 11px/1 var(--sans);color:var(--fd-site-muted);white-space:nowrap;overflow:hidden}
.fd-site{position:relative;flex:1;padding:16px 18px;overflow:hidden;color:var(--fd-site-ink);background:var(--fd-site-bg)}
.fd-site-nav{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fd-site-logo{display:flex;align-items:center;gap:7px;font:700 12.5px/1 var(--sans)}
.fd-site-logo i{width:16px;height:16px;border-radius:4px;background:var(--fd-site-accent)}
.fd-site-links{display:flex;gap:8px}
.fd-site-links i{display:block;width:26px;height:6px;border-radius:3px;background:var(--fd-site-line-strong)}
.fd-site-hero{margin-top:28px;display:grid;gap:9px;justify-items:start}
.fd-site-hero b{font:700 21px/1.12 var(--sans);max-width:13ch}
.fd-site-line{display:block;height:7px;border-radius:4px;background:var(--fd-site-line)}
.fd-site-button{margin-top:6px;padding:9px 13px;border-radius:7px;background:var(--fd-site-accent);color:var(--fd-site-on-accent);font:600 11.5px/1 var(--sans)}
.fd-site-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:24px}
.fd-site-cards span{height:62px;border-radius:8px;background:var(--fd-site-chrome);border:1px solid var(--fd-site-line)}
.fd-greeting{position:absolute;right:12px;bottom:88px;z-index:2;width:236px;display:flex;align-items:center;gap:9px;padding:9px 24px 9px 10px;background:var(--fd-site-bg);border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.2);font:400 11.5px/1.45 var(--sans)}
.fd-greeting-close{position:absolute;top:5px;right:8px;font-size:13px;line-height:1;color:var(--fd-site-muted)}
.fd-agents-online{position:absolute;right:12px;bottom:8px;display:inline-flex;align-items:center;gap:5px;font:400 10.5px/1 var(--sans);white-space:nowrap}
.fd-agents-online i{width:7px;height:7px;border-radius:50%;background:var(--fd-online)}
.fd-launcher{position:absolute;right:12px;bottom:26px;z-index:4;width:52px;height:52px;border-radius:50%;background:var(--fd-site-accent);padding:3px;box-shadow:4px 4px 6px rgba(0,0,0,.2)}
.fd-launcher .fd-persona-photo{border-radius:50%}
.fd-widget{position:absolute;right:12px;bottom:12px;z-index:3;width:286px;height:400px;background:var(--fd-site-bg);border-radius:14px;box-shadow:0 0 10px rgba(0,0,0,.1),0 18px 40px -12px rgba(0,0,0,.3);display:flex;flex-direction:column;overflow:hidden}
.fd-widget-head{display:flex;align-items:center;gap:10px;padding:11px 12px;background:var(--fd-site-accent);color:var(--fd-site-on-accent);flex:none}
.fd-widget-head .fd-persona-photo{box-shadow:0 0 0 2px var(--fd-site-on-accent)}
.fd-widget-head .fd-online{border-color:var(--fd-site-on-accent)}
.fd-widget-head b{display:block;font:600 12.5px/1.25 var(--sans)}
.fd-widget-head div span{display:block;font-size:10.5px;opacity:.85}
.fd-widget-close{margin-left:auto;width:24px;height:24px;display:grid;place-items:center;border-radius:50%}
.fd-widget-close svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.fd-widget-body{flex:1;min-height:0}
.fd-widget-body .fd-follow-stack{padding:12px;gap:8px}
.fd-widget-bubble{max-width:86%;padding:8px 11px;font:400 12px/1.42 var(--sans);border-radius:10px 10px 10px 2px;background:var(--fd-widget-bot);color:var(--fd-site-ink);align-self:flex-start}
.fd-widget-bubble.is-visitor{align-self:flex-end;background:var(--fd-site-accent);color:var(--fd-site-on-accent);border-radius:10px 10px 2px 10px}
.fd-widget-input{flex:none;display:flex;align-items:center;margin:0 10px 10px;padding:6px 6px 6px 11px;border:1px solid var(--fd-screen-line);border-radius:12px;font:400 12px/1.3 var(--sans);color:var(--fd-screen-ink);min-height:38px;white-space:nowrap}
.fd-widget-text{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.fd-widget-text .is-placeholder{color:var(--fd-screen-muted)}
.fd-caret{display:inline-block;width:1.5px;height:14px;background:var(--fd-site-ink);margin-left:1px;vertical-align:middle;opacity:0}
.fd-widget-send{margin-left:auto;width:26px;height:26px;flex:none;border-radius:50%;background:var(--fd-site-accent);display:grid;place-items:center}
.fd-widget-send svg{width:12px;height:12px;fill:var(--fd-site-on-accent)}

/* Typing dots (in the widget and in text threads) */
.fd-typing{display:inline-flex;gap:4px;padding:11px 13px;border-radius:14px;background:var(--fd-bubble-in);align-self:flex-start}
.fd-widget .fd-typing{background:var(--fd-widget-bot);border-radius:10px 10px 10px 2px}
.fd-typing i{display:block;width:6px;height:6px;border-radius:50%;background:var(--fd-screen-muted)}
.fd-slot{display:grid}
.fd-slot>*{grid-area:1/1}
html:not(.fd-motion) .fd-scene:not(.is-live) .fd-slot .fd-typing{visibility:hidden}

/* =============================================================================
   Phone: frame, status bar, lock screen, banners, text thread, call screen
   ============================================================================= */
.fd-phone{width:100%;aspect-ratio:280/580;background:var(--fd-bezel);border-radius:36px;padding:7px;box-shadow:var(--fd-shadow-device)}
.fd-screen{position:relative;width:100%;height:100%;border-radius:30px;overflow:hidden;background:linear-gradient(180deg,var(--fd-call-1),var(--fd-call-2));isolation:isolate}
.fd-island{position:absolute;top:8px;left:50%;width:62px;height:17px;margin-left:-31px;background:var(--fd-bezel);border-radius:10px;z-index:20}
.fd-statusbar{position:absolute;top:0;left:0;right:0;height:32px;display:flex;justify-content:space-between;align-items:center;padding:0 18px 0 24px;font:600 11px/1 var(--sans);color:var(--fd-call-ink);z-index:19;font-variant-numeric:tabular-nums}
.fd-statusbar.is-dark{color:var(--fd-screen-ink)}
.fd-statusbar svg{width:32px;height:10px;display:block}
.fd-lock{position:absolute;inset:0;z-index:1;background:linear-gradient(165deg,var(--fd-lock-1),var(--fd-lock-2));color:var(--fd-call-ink);display:flex;flex-direction:column;align-items:center;padding-top:52px}
.fd-lock-date{font:500 11.5px/1 var(--sans);color:var(--fd-call-muted)}
.fd-lock-time{font:600 46px/1 var(--sans);letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums}
.fd-banner{position:absolute;top:40px;left:8px;right:8px;z-index:6;display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:start;padding:9px 11px;border-radius:16px;background:var(--fd-banner);box-shadow:0 12px 30px -8px rgba(0,0,0,.5);color:var(--fd-screen-ink)}
.fd-banner.is-on-lock{top:128px;z-index:3}
.fd-banner.is-top{z-index:12}
.fd-app-icon{width:28px;height:28px;border-radius:7px;background:var(--fd-ok);display:grid;place-items:center}
.fd-app-icon.is-mail{background:var(--fd-mail-icon)}
.fd-app-icon svg{width:16px;height:16px;fill:var(--fd-bubble-out-ink)}
.fd-banner-top{display:flex;justify-content:space-between;font:500 9.5px/1.2 var(--sans);color:var(--fd-screen-muted);text-transform:uppercase;letter-spacing:.07em}
.fd-banner b{display:block;font:600 12px/1.25 var(--sans);margin-top:2px}
.fd-banner p{margin:1px 0 0;font:400 11.5px/1.35 var(--sans);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fd-thread{position:absolute;inset:0;z-index:8;background:var(--fd-screen);color:var(--fd-screen-ink)}
.fd-thread .fd-morph-inner{position:absolute;inset:0;padding-top:32px;display:flex;flex-direction:column}
.fd-thread-head{display:flex;align-items:center;gap:8px;padding:7px 12px 9px;border-bottom:1px solid var(--fd-screen-line);flex:none}
.fd-thread-head svg{width:15px;height:15px;fill:none;stroke:var(--fd-forest);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fd-thread-head b{display:block;font:600 12.5px/1.2 var(--sans)}
.fd-thread-head div span{display:block;font-size:10.5px;color:var(--fd-screen-muted)}
.fd-thread-avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--fd-bubble-out);color:var(--fd-bubble-out-ink);font:600 10.5px/1 var(--sans);flex:none}
.fd-thread-body{flex:1;min-height:0}
.fd-thread-body .fd-follow-stack{padding:8px 10px 12px;gap:5px}
.fd-stamp{align-self:center;font:500 10px/1 var(--sans);color:var(--fd-screen-muted);margin:6px 0 4px}
.fd-message-tag{font:500 10px/1.2 var(--sans);color:var(--fd-screen-muted);padding-left:4px}
.fd-bubble{max-width:88%;padding:8px 11px;border-radius:16px;font:400 12px/1.4 var(--sans);color:var(--fd-screen-ink)}
.fd-bubble.is-sarah{background:var(--fd-bubble-in);border-bottom-left-radius:5px;align-self:flex-start}
.fd-bubble.is-workflow{background:var(--fd-workflow);border-bottom-left-radius:5px;align-self:flex-start}
.fd-bubble.is-person{background:var(--fd-bubble-out);color:var(--fd-bubble-out-ink);align-self:flex-end;border-bottom-right-radius:5px}
.fd-group{display:flex;flex-direction:column;gap:5px}
.fd-link{color:var(--fd-forest);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.fd-wait{align-self:stretch;display:grid;gap:6px;margin:6px 6px 2px;padding:8px 10px;border:1px dashed var(--fd-line-strong);border-radius:10px;font:500 10.5px/1.25 var(--sans);color:var(--fd-screen-muted)}
.fd-wait span{display:flex;align-items:center;gap:6px}
.fd-wait svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.fd-wait-bar{display:block;height:3px;border-radius:2px;background:var(--fd-screen-line);overflow:hidden}
.fd-wait-bar i{display:block;height:100%;width:100%;background:var(--fd-forest)}
.fd-note{align-self:center;display:inline-flex;align-items:center;gap:6px;font:500 10px/1.2 var(--sans);color:var(--fd-ok-ink);background:var(--fd-ok-soft);padding:5px 10px;border-radius:999px;margin:6px 0 2px}
.fd-note svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* call screen and incoming call */
.fd-call{position:absolute;inset:32px 0 0;display:flex;flex-direction:column;align-items:center;padding:18px 14px 18px;gap:10px;color:var(--fd-call-ink)}
.fd-call.is-solid{inset:0;padding-top:50px;background:linear-gradient(180deg,var(--fd-call-1),var(--fd-call-2));z-index:4}
.fd-avatar-wrap{position:relative;width:56px;height:56px;display:grid;place-items:center;flex:none}
.fd-avatar{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--fd-call-ink);color:var(--fd-bubble-out);font:600 17px/1 var(--sans)}
.fd-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--fd-call-ink);opacity:0}
.fd-call-name{font:600 16px/1.2 var(--sans);text-align:center}
.fd-call-state{font:400 12px/1 var(--sans);color:var(--fd-call-muted);font-variant-numeric:tabular-nums;margin-top:-5px}
.fd-wave{display:flex;align-items:center;gap:3px;height:30px;flex:none}
.fd-wave i{display:block;width:3px;height:3px;border-radius:2px;background:var(--fd-call-muted)}
.fd-wave[data-who="sarah"] i{background:var(--fd-sarah-wave)}
.fd-captions{position:relative;flex:1 1 auto;width:100%;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 38%);mask-image:linear-gradient(to bottom,transparent 0,#000 38%)}
.fd-cap-stack{display:flex;flex-direction:column;gap:9px}
.fd-scene.is-live .fd-cap-stack{position:absolute;left:0;right:0;top:0}
.fd-cap{margin:0;font:400 12.5px/1.42 var(--sans);color:var(--fd-call-ink)}
.fd-cap[data-who="caller"]{text-align:right;padding-left:18px}
.fd-cap[data-who="sarah"]{padding-right:18px}
.fd-cap b{display:block;font:600 9.5px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--fd-call-muted);margin-bottom:2px}
.fd-cap[data-who="sarah"] b{color:var(--fd-sarah-wave)}
.fd-call-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;background:var(--fd-call-chip);border:1px solid var(--fd-call-chip-line);font:500 11.5px/1 var(--sans);color:var(--fd-call-ink);flex:none;white-space:nowrap}
.fd-call-controls{display:flex;gap:12px;align-items:center;flex:none}
.fd-control{width:38px;height:38px;border-radius:50%;background:var(--fd-call-chip);display:grid;place-items:center}
.fd-control svg{width:17px;height:17px;fill:none;stroke:var(--fd-call-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fd-control.is-hangup{width:46px;height:46px;background:var(--fd-hangup)}
.fd-control.is-hangup svg{width:21px;height:21px;fill:var(--fd-call-ink);stroke:none}
.fd-incoming{position:absolute;inset:0;z-index:5;background:linear-gradient(180deg,var(--fd-call-1),var(--fd-call-2));color:var(--fd-call-ink);display:flex;flex-direction:column;align-items:center;padding:76px 14px 40px}
.fd-incoming-sub{font-size:12px;color:var(--fd-call-muted);margin-top:4px}
.fd-incoming-actions{margin-top:auto;display:flex;gap:48px}
.fd-incoming-button{display:grid;justify-items:center;gap:6px;font-size:10.5px;color:var(--fd-call-muted)}
.fd-incoming-button>span{width:52px;height:52px;border-radius:50%;display:grid;place-items:center}
.fd-incoming-button svg{width:23px;height:23px;fill:var(--fd-call-ink)}
.fd-incoming-button.is-decline>span{background:var(--fd-hangup)}
.fd-incoming-button.is-accept>span{background:var(--fd-ok)}
html:not(.fd-motion) .fd-scene:not(.is-live) .fd-incoming{display:none}

/* =============================================================================
   Owner side: business line card, summary email
   ============================================================================= */
.fd-owner-card{background:var(--fd-white);color:var(--fd-ink);border-radius:10px;padding:13px 15px;box-shadow:0 14px 30px -16px rgba(0,0,0,.55);border:1px solid var(--fd-line)}
.fd-line-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 11px;align-items:center}
.fd-live-dot{width:9px;height:9px;border-radius:50%;background:var(--fd-ok);grid-row:span 2}
.fd-line-card b{font:600 13px/1.3 var(--sans)}
.fd-line-card span{font-size:12px;color:var(--fd-muted);font-variant-numeric:tabular-nums}
.fd-mail-head{display:flex;gap:9px;align-items:center}
.fd-mail-head b{display:block;font:600 12.5px/1.25 var(--sans)}
.fd-mail-head div span{display:block;font-size:11px;color:var(--fd-muted)}
.fd-mail-title{display:block;margin:11px 0 4px;font:600 14px/1.3 var(--sans)}
.fd-mail p{margin:0;font-size:12.5px;line-height:1.5;color:var(--fd-muted)}
.fd-attachments{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.fd-attachments span{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:7px;background:var(--fd-sand);font:500 11px/1 var(--sans);color:var(--fd-ink)}
.fd-attachments svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6}
.fd-column-label{font:500 10.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(247,244,238,.64);margin:0 0 10px}

/* =============================================================================
   Workflow lane (the sequence track)
   ============================================================================= */
.fd-lane{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;position:relative;color:var(--fd-call-ink)}
.fd-lane::before{content:"";position:absolute;left:13px;top:16px;bottom:16px;width:2px;background:rgba(247,244,238,.16)}
.fd-lane li{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:1px 10px;padding:7px 0;color:rgba(247,244,238,.64)}
.fd-node-icon{grid-row:span 2;width:28px;height:28px;border-radius:50%;background:var(--fd-forest);border:2px solid rgba(247,244,238,.16);display:grid;place-items:center;position:relative;z-index:1;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}
.fd-node-icon svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fd-lane b{font:600 12.5px/1.25 var(--sans);align-self:end}
.fd-lane-sub{font-size:11px;line-height:1.35}
.fd-lane li.is-active{color:var(--fd-call-ink)}
.fd-lane li.is-active .fd-node-icon{border-color:var(--fd-call-ink);box-shadow:0 0 0 5px rgba(247,244,238,.16)}
.fd-lane li.is-done{color:var(--fd-call-ink)}
.fd-lane li.is-done .fd-node-icon{background:var(--fd-call-ink);border-color:var(--fd-call-ink);color:var(--fd-forest)}
.fd-lane .fd-wait-bar{background:rgba(247,244,238,.16);margin-top:5px}
.fd-lane .fd-wait-bar i{background:var(--fd-call-ink)}
.fd-lane-note{font-size:11.5px;color:rgba(247,244,238,.64);margin:10px 0 0;max-width:24ch}

/* =============================================================================
   Overnight log (the business's conversations view)
   ============================================================================= */
.fd-app{position:absolute;background:var(--fd-white);border-radius:12px;box-shadow:var(--fd-shadow-device);color:var(--fd-ink);display:flex;flex-direction:column;overflow:hidden}
.fd-app-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--fd-line);flex:none}
.fd-app-head b{font:600 14px/1.2 var(--sans)}
.fd-app-business{font-size:12px;color:var(--fd-muted)}
.fd-app-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--sans);color:var(--fd-ok-ink);background:var(--fd-ok-soft);padding:5px 9px;border-radius:999px;white-space:nowrap}
.fd-app-live i{width:6px;height:6px;border-radius:50%;background:var(--fd-ok)}
.fd-night{position:relative;padding:12px 16px 10px;background:var(--fd-night);color:var(--fd-ivory);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center;flex:none}
.fd-night-track{position:relative;height:18px;border-radius:5px;border:1px dashed rgba(167,189,174,.34);background-image:radial-gradient(rgba(167,189,174,.22) 1px,transparent 1.4px);background-size:7px 7px}
.fd-night-lit{position:absolute;top:-1px;bottom:-1px;border-radius:5px;background:var(--fd-linen)}
.fd-night-needle{position:absolute;top:-7px;bottom:-7px;width:2px;margin-left:-1px;border-radius:2px;background:var(--fd-terracotta-on-dark)}
.fd-night-needle::before{content:"";position:absolute;top:-3px;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--fd-terracotta-on-dark)}
.fd-night-time{grid-row:span 2;font:600 15px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--fd-ivory);min-width:68px;text-align:right}
.fd-night-scale{display:flex;justify-content:space-between;font:500 9.5px/1 var(--sans);color:rgba(247,244,238,.5)}
.fd-log{list-style:none;margin:0;padding:4px 16px 0;display:grid;flex:1;align-content:start}
.fd-log-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:2px 11px;align-items:center;padding:11px 0;border-bottom:1px dashed var(--fd-line-strong)}
.fd-channel{grid-row:span 2;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--fd-sand);color:var(--fd-forest)}
.fd-channel svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fd-log-top{display:flex;align-items:baseline;gap:8px;min-width:0}
.fd-log-top b{font:600 13px/1.25 var(--sans);white-space:nowrap}
.fd-log-top span{font-size:11px;color:var(--fd-muted);white-space:nowrap}
.fd-log-top time{margin-left:auto;font:500 11px/1 var(--sans);color:var(--fd-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.fd-log-row p{margin:0;font-size:12px;color:var(--fd-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;grid-column:2}
.fd-result{grid-row:1 / span 2;grid-column:3;display:inline-flex;align-items:center;gap:6px;padding:5px 9px 5px 7px;border-radius:999px;background:var(--fd-sand);font:500 11px/1.2 var(--sans);color:var(--fd-soft);white-space:nowrap}
.fd-result.is-done{background:var(--fd-ok-soft);color:var(--fd-ok-ink)}
.fd-app-foot{margin:auto 16px 16px}
.fd-app-foot .fd-stub{background:var(--fd-linen)}

/* =============================================================================
   Scene layouts. Each scene names its design size; phones get a narrower canvas so text stays
   readable instead of shrinking the desktop scene.
   ============================================================================= */

/* Hero: website chat books, then the job texts (620 x 600; phones 360 x 610, the stub below the phone) */
.fd-scene--hero{--fd-w:620;--fd-h:600}
.fd-scene--hero .fd-fit{background-color:var(--fd-forest);background-image:radial-gradient(var(--fd-stage-dot) 1px,transparent 1.5px);background-size:18px 18px;border-radius:16px}
.fd-hero-browser{left:24px;top:24px;width:420px;height:500px}
.fd-hero-phone{left:380px;top:62px;width:216px}
.fd-hero-stub{position:absolute;left:4px;top:430px;z-index:20}
.fd-hero-token-start{left:330px;top:470px}
.fd-scene--hero .fd-pill-row{top:546px}

/* Overnight log (560 x 520; phones 360 x 560) */
.fd-scene--inbound{--fd-w:560;--fd-h:520}
.fd-inbound-app{left:28px;top:28px;width:504px;height:464px}

/* Phone call (560 x 520; phones 360 x 520) */
.fd-scene--phone{--fd-w:560;--fd-h:520}
.fd-call-phone{left:48px;top:30px;width:216px}
.fd-call-owner{left:296px;top:30px;width:236px;display:grid;gap:12px;align-content:start;z-index:10}

/* Follow-up sequence (560 x 520; phones 360 x 540) */
.fd-scene--outreach{--fd-w:560;--fd-h:520}
.fd-outreach-lane{left:30px;top:28px;width:236px}
.fd-outreach-phone{left:312px;top:30px;width:216px}

@media (max-width:640px){
  .fd-scene--hero{--fd-w:360;--fd-h:610}
  .fd-hero-browser{left:12px;top:12px;width:336px;height:476px}
  .fd-hero-phone{left:72px;top:34px;width:216px}
  .fd-hero-stub{left:30px;top:494px}
  .fd-hero-token-start{left:240px;top:440px}
  .fd-scene--hero .fd-pill-row{top:560px}
  .fd-scene--hero .fd-widget{width:300px;height:400px;right:10px}
  .fd-scene--hero .fd-greeting{right:10px}

  .fd-scene--inbound{--fd-w:360;--fd-h:560}
  .fd-inbound-app{left:10px;top:10px;width:340px;height:540px}
  .fd-app-business{display:none}
  .fd-log{padding-inline:12px}
  .fd-log-row{grid-template-columns:28px minmax(0,1fr);gap:3px 10px;padding:9px 0}
  .fd-channel{width:28px;height:28px;grid-row:span 3}
  .fd-log-top span{display:none}
  .fd-result{grid-row:auto;grid-column:2;justify-self:start;margin-top:3px}
  .fd-night{padding-inline:12px}
  .fd-app-foot{margin-inline:12px}

  .fd-scene--phone{--fd-w:360;--fd-h:520}
  .fd-call-phone{left:72px;top:16px;width:216px}
  .fd-call-owner{left:16px;top:292px;width:328px}
  .fd-call-owner .fd-line-card,.fd-call-owner .fd-column-label{display:none}

  .fd-scene--outreach{--fd-w:360;--fd-h:540}
  .fd-outreach-lane{left:8px;top:20px;width:132px}
  .fd-outreach-lane .fd-lane-sub:not(.is-wait),.fd-outreach-lane .fd-lane-note{display:none}
  .fd-outreach-lane .fd-lane b{font-size:12px}
  .fd-outreach-lane .fd-column-label{font-size:9.5px;letter-spacing:.1em}
  .fd-outreach-phone{left:148px;top:30px;width:204px}
}

/* =============================================================================
   Homepage sections
   ============================================================================= */

/* Bands alternate ivory, white and linen, with a night or evergreen band every few sections.
   A scalloped, perforated edge marks the way into a dark band. */
.fd-band{position:relative;padding-block:5rem}
.fd-band--white{background:var(--fd-white)}
.fd-band--linen{background:var(--fd-linen)}
.fd-band--ivory{background:var(--fd-ivory)}
.fd-band--night{background:var(--fd-night);color:var(--fd-ivory)}
.fd-band--forest{background:var(--fd-forest);color:var(--fd-ivory)}
.fd-perforated::before{content:"";position:absolute;left:0;right:0;top:-8px;height:16px;z-index:2;background:radial-gradient(circle,var(--fd-perforation-color,var(--fd-white)) 7px,transparent 7.5px) 4px 0/24px 16px repeat-x}
.fd-section-head{display:grid;gap:.85rem;max-width:46rem;margin-bottom:2.75rem}
.fd-section-head h2{margin:0;font:500 clamp(1.9rem, 2.2vw + 1rem, 2.6rem)/1.08 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.fd-section-head p{margin:0;color:var(--fd-soft);font-size:1.1rem;max-width:40rem}
.fd-band--night .fd-section-head p,.fd-band--forest .fd-section-head p{color:rgba(247,244,238,.78)}
.fd-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:0 1.25rem;border-radius:8px;font:600 1rem/1 var(--sans);text-decoration:none;border:1px solid var(--fd-forest);background:var(--fd-forest);color:var(--fd-ivory);cursor:pointer;box-shadow:var(--fd-shadow-page);transition:background .2s ease,color .2s ease}
.fd-button:hover{background:var(--fd-forest-hover)}
.fd-button.is-ghost{background:transparent;color:var(--fd-forest);box-shadow:none}
.fd-button.is-ghost:hover{background:rgba(31,61,51,.08)}
.fd-band--forest .fd-button{background:var(--fd-ivory);border-color:var(--fd-ivory);color:var(--fd-forest)}
.fd-band--forest .fd-button:hover{background:#EDE7DA}
.fd-band--forest .fd-button.is-ghost{background:transparent;color:var(--fd-ivory);border-color:rgba(247,244,238,.6)}
.fd-band--forest .fd-button.is-ghost:hover{background:rgba(247,244,238,.08)}
.fd-button:focus-visible,.fd-play:focus-visible{outline:2px solid var(--fd-terracotta);outline-offset:3px}

/* Play and pause control for moving scenes */
.fd-play{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--fd-line-strong);background:var(--fd-white);color:var(--fd-ink);cursor:pointer;padding:0}
.fd-play svg{width:14px;height:14px;fill:currentColor}
.fd-play[hidden]{display:none}
/* The same button sits in the top right of the hero stage (.ss-play is its twin on Scene steps stages) */
.fd-play.is-on-stage{position:absolute;right:12px;top:12px;z-index:5;background:rgba(247,244,238,.92);border-color:transparent}

/* Hero stage */
.fd-hero-stage{position:relative;width:100%;margin:0}

@media (max-width:1023px){ .fd-hero-stage{max-width:620px;margin-inline:auto} }
@media (max-width:640px){ .fd-hero-stage{margin-inline:-1.25rem;width:calc(100% + 2.5rem)} }

/* The front desk steps use the shared Scene steps component: static/css/sbc-scene-steps.css */

/* After-hours band: day and night */
.fd-proof-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:3.25rem;align-items:center}
.fd-proof-title{margin:0 0 2rem;font:500 clamp(1.6rem, 1.6vw + 1rem, 2.2rem)/1.1 var(--serif);color:var(--fd-ivory);text-wrap:balance}
.fd-big{margin:0;font:500 clamp(5rem, 9vw, 8.25rem)/.88 var(--serif);letter-spacing:-.035em;color:var(--fd-ivory)}
.fd-big-sub{margin:.9rem 0 0;font-size:1.1rem;color:rgba(247,244,238,.8);max-width:26ch}
.fd-big-link{margin:1.1rem 0 0;font-size:1rem}
.fd-big-link a{color:var(--fd-ivory);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.fd-day-night{display:grid;grid-template-columns:86px minmax(0,1fr);gap:0 18px}
.fd-day-night-labels{display:grid;gap:14px;align-content:start}
.fd-day-night-labels span{height:28px;display:flex;align-items:center;font:500 .8rem/1 var(--sans);color:var(--fd-sage)}
.fd-day-night-tracks{position:relative;display:grid;gap:14px}
.fd-day-night-track{position:relative;height:28px;border-radius:6px;border:1px dashed rgba(167,189,174,.34);background-image:radial-gradient(rgba(167,189,174,.22) 1px,transparent 1.4px);background-size:8px 8px}
.fd-day-night-fill{position:absolute;top:-1px;bottom:-1px;border-radius:6px;background:var(--fd-linen)}
.fd-day-night-fill.is-full{left:-1px;right:-1px;background:var(--fd-sage)}
.fd-day-night-needle{position:absolute;top:-10px;left:88%;width:2px;height:92px;margin-left:-1px;border-radius:2px;background:var(--fd-terracotta-on-dark)}
.fd-day-night-needle::before{content:"";position:absolute;top:-4px;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--fd-terracotta-on-dark)}
/* The clock riding on the sweeping needle; the script slides it from the needle's left to its right
   across the bar so it never hangs past either end, and fills it in (empty without JavaScript). */
.fd-day-night-clock{position:absolute;bottom:calc(100% + 10px);left:0;font:600 .78rem/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--fd-terracotta-on-dark);white-space:nowrap}
.fd-day-night-clock:empty{display:none}
.fd-day-night-scale{display:flex;justify-content:space-between;font:500 .72rem/1 var(--sans);color:rgba(247,244,238,.5);margin-top:2px}
.fd-local-time-note{margin:1.1rem 0 0 104px;font-size:.95rem;line-height:1.5;color:rgba(247,244,238,.8)}
/* One statistic per section: no row of supporting figures under it (brand/pages.md) */
.fd-source{margin:2.5rem 0 0;font-size:.78rem;line-height:1.55;color:rgba(167,189,174,.8);max-width:80ch}
@media (max-width:900px){ .fd-proof-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:560px){
  .fd-day-night{grid-template-columns:64px minmax(0,1fr);gap:0 10px}
  .fd-local-time-note{margin-left:74px}
}

/* The definition band uses the shared block in static/css/sbc-definition-block.css */

/* Capability bento: each tile holds one piece at rest */
.fd-bento{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.fd-tile{background:var(--fd-white);border:1px solid var(--fd-line);border-radius:10px;padding:1.1rem;display:grid;gap:.4rem;align-content:start;min-width:0}
.fd-tile h3{margin:.4rem 0 0;font:600 1.1rem/1.3 var(--sans)}
.fd-tile p{margin:0;font-size:.95rem;color:var(--fd-muted);line-height:1.55}
.fd-plate{border-radius:8px;background:var(--fd-sand);height:168px;padding:16px;display:grid;place-items:center;position:relative;overflow:hidden}
.fd-plate.is-forest{background-color:var(--fd-forest);background-image:radial-gradient(var(--fd-stage-dot) 1px,transparent 1.5px);background-size:14px 14px}
.fd-plate-stack{display:flex;flex-direction:column;gap:7px;width:min(250px,100%)}
.fd-plate .fd-bubble,.fd-plate .fd-widget-bubble{font-size:11.5px;max-width:92%}
.fd-plate .fd-widget-bubble{display:block}
.fd-plate-pages{width:min(250px,100%);background:var(--fd-white);border-radius:8px;padding:4px 12px;box-shadow:0 8px 18px -12px rgba(34,34,34,.4)}
.fd-plate-pages div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;font:500 11.5px/1.2 var(--sans);color:var(--fd-ink)}
.fd-plate-pages div+div{border-top:1px dashed var(--fd-line-strong)}
.fd-plate-pages em{font:500 10.5px/1 var(--sans);font-style:normal;padding:4px 8px;border-radius:999px;background:var(--fd-ok-soft);color:var(--fd-ok-ink)}
.fd-plate .fd-mail{width:min(250px,100%);padding:12px 14px}
.fd-plate .fd-mail-title{font-size:13px;margin:9px 0 0}
.fd-contact{width:min(250px,100%);background:var(--fd-white);border-radius:8px;padding:12px 14px;box-shadow:0 8px 18px -12px rgba(34,34,34,.4)}
.fd-contact-head{display:flex;align-items:center;gap:9px;padding-bottom:9px;border-bottom:1px dashed var(--fd-line-strong)}
.fd-contact-head b{display:block;font:600 12.5px/1.2 var(--sans)}
.fd-contact-head div span{display:block;font-size:11px;color:var(--fd-muted)}
.fd-contact ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.fd-contact li{display:flex;gap:8px;font-size:11.5px;color:var(--fd-soft)}
.fd-contact li em{font-style:normal;font-weight:600;color:var(--fd-ink);min-width:34px}
.fd-transfer{display:flex;align-items:center;gap:10px;color:var(--fd-ivory)}
.fd-transfer svg{width:90px;height:10px;overflow:visible}
.fd-transfer path{fill:none;stroke:var(--fd-sage);stroke-width:2;stroke-linecap:round;stroke-dasharray:3 7}
.fd-transfer-you{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--fd-ivory);color:var(--fd-forest);font:600 11px/1 var(--sans)}
.fd-transfer-label{position:absolute;left:0;right:0;bottom:14px;text-align:center;font:500 11px/1.2 var(--sans);color:rgba(247,244,238,.72)}
@media (max-width:900px){ .fd-bento{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .fd-bento{grid-template-columns:minmax(0,1fr)} }

/* Customer story video above the testimonials */
.fd-story{max-width:760px;margin:2.5rem auto 0}

/* Close: plain, the same two buttons as everywhere */
.fd-close{text-align:center;display:grid;justify-items:center;gap:1.4rem}
.fd-close h2{margin:0;font:500 clamp(2.3rem, 4vw + 1rem, 3.9rem)/1.04 var(--serif);letter-spacing:-.015em;color:var(--fd-ivory);max-width:18ch;text-wrap:balance}
.fd-close h2 em{font-style:italic;color:var(--fd-terracotta-on-dark)}
.fd-close p{margin:0;color:rgba(247,244,238,.78);max-width:46ch}
.fd-close-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}