/* Narrow-screen layout only. Desktop colours, fonts, copy and controls use
   the original inline stylesheet. */
@media(hover:none),(pointer:coarse){
  /* iOS Safari zooms the page when a focused field is under 16px. */
  .site-home .field input,.site-home .field select,.site-home .field textarea{font-size:16px}
  .site-home .aud-imgwrap{overflow-x:clip}
}
@media(max-width:860px),(max-width:999px) and (pointer:coarse),(max-width:999px) and (hover:none){
  .site-home .aud-imgwrap{overflow-x:clip}
  .site-home .ax-embed{width:100%;max-width:min(100%,max(240px,calc((100svh - 75px - 175px)*2)));margin:26px auto 0}
  .site-home .ax-player-controls{display:grid;position:relative;grid-template-columns:1fr;gap:4px;align-items:center;padding-top:12px}
  .site-home .ax-ctl{position:static;display:flex;gap:8px}
  .site-home .ax-btn{width:44px;height:44px;opacity:1;flex-shrink:0;background:var(--paper)}
  .site-home .ax-btn svg{width:17px;height:17px}
  .site-home .ax-btn:disabled{opacity:.45}
  .site-home .ax-btn::after{display:none}
  .site-home #axExpand{display:block}
  .site-home .ax-scrub{position:relative;left:auto;right:auto;bottom:auto;grid-column:1/-1;height:44px;opacity:1;touch-action:manipulation}
  .site-home .ax-scrub-line{bottom:20px;height:4px}
  .site-home .ax-tick{bottom:18px;height:8px}
  /* Playback status is for screen readers; it only shows if the walkthrough fails to load. */
  .site-home #axStatus{display:block;position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .site-home .ax-shell:has(.ax-frame[data-playback="unavailable"])~#axStatus{position:static;width:auto;height:auto;margin:6px 0 0;overflow:visible;clip-path:none;white-space:normal;font-size:12px;line-height:1.5;text-align:center;color:var(--ink-2)}
  .site-home .ax-poster:not([hidden]){position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:12px;text-align:center;background:var(--paper);z-index:2}
  .site-home .ax-poster svg{width:30px;height:auto;flex-shrink:0}
  .site-home .ax-poster strong{font-size:15px;line-height:1.3}
  .site-home .ax-poster p{font-size:11px;line-height:1.5;max-width:48ch;color:var(--ink-2)}
}
/* Stacked layouts: the six use-case cards become one row of compact tabs that
   stays under the header, so the panel is always directly below them. The
   selected tab drops onto the rule under the row and shares the panel's
   surface, so tab and panel read as one piece. */
@media(max-width:860px){
  .site-home .pc-eyebrow{position:sticky;top:var(--nav-height);z-index:6;display:flex;align-items:flex-end;height:36px;margin:48px -24px 0;padding:0 24px 2px;background:var(--paper);transform-origin:left bottom;transition:font-size .2s ease,color .2s ease}
  .site-home .pc-eyebrow.obs{transform:none}
  .site-home .pc-eyebrow.is-stuck{font-size:13.5px;color:var(--ink-2)}
  .site-home .pc-grid{display:flex;gap:8px;position:sticky;top:calc(var(--nav-height) + 36px);z-index:5;margin:0 -24px;padding:10px 0 0;align-items:flex-end;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding:0 24px;scrollbar-width:none;background:linear-gradient(var(--line),var(--line)) center bottom/calc(100% - 48px) 1px no-repeat,var(--paper)}
  .site-home .pc-grid::-webkit-scrollbar{display:none}
  /* Soft edges, so a tab that runs off the side fades out instead of being cut. */
  .site-home .pc-grid::before,.site-home .pc-grid::after{content:"";position:sticky;z-index:1;flex:0 0 24px;align-self:stretch;pointer-events:none}
  .site-home .pc-grid::before{left:0;margin-right:-8px;background:linear-gradient(90deg,var(--paper) 35%,transparent)}
  .site-home .pc-grid::after{right:0;margin-left:-8px;background:linear-gradient(270deg,var(--paper) 35%,transparent)}
  .site-home .pc{flex:0 0 auto;flex-direction:row;align-items:center;gap:8px;min-height:44px;margin-bottom:10px;padding:8px 14px;border-radius:22px;background:var(--surface);scroll-snap-align:start}
  .site-home .pc[aria-selected="true"]{min-height:54px;margin-bottom:0;padding-bottom:18px;border-radius:14px 14px 0 0;border-color:var(--line);border-bottom-color:var(--surface)}
  .site-home .pc-grid .pc.obs,.site-home .pc-grid.obs{opacity:1;transform:none;transition:background .22s ease,border-color .22s ease,border-radius .3s cubic-bezier(.22,.61,.36,1),margin .3s cubic-bezier(.22,.61,.36,1),padding .3s cubic-bezier(.22,.61,.36,1),min-height .3s cubic-bezier(.22,.61,.36,1)}
  .site-home .pc .pc-row{width:auto}
  .site-home .pc .pc-ico{width:18px;height:18px}
  .site-home .pc strong{font-size:14px;white-space:nowrap}
  .site-home .pc strong br,.site-home .pc .pc-lede{display:none}
  .site-home .pc-panel{margin-top:0;border-top:0;border-radius:0 0 14px 14px}
  @media(prefers-reduced-motion:reduce){.site-home .pc-grid .pc.obs{transition:none}}
  /* Example screens grow toward the screen edge as they pass mid-view. The
     margins are the room they grow into, so captions are never covered. */
  .site-home .uc-stacked .out-shot.has-img{--shot-zoom:1;--shot-t:0;position:relative;z-index:2;margin:26px 0 36px;transform:scale(var(--shot-zoom));transform-origin:center;will-change:transform;border-color:rgba(27,37,48,calc(.18 - .06*var(--shot-t)));box-shadow:0 calc(6px + 12px*var(--shot-t)) calc(18px + 26px*var(--shot-t)) rgba(27,37,48,calc(.07 + .10*var(--shot-t)))}
  .site-home .uc-stacked .pc-shots .out-grid{gap:6px}
  /* Panels run one after another; each later one is its own card. */
  .site-home .uc-stacked .uc-slide+.uc-slide{margin-top:20px;border-top:1px solid var(--line);border-radius:14px}
}
@media(max-width:640px){
  /* The meeting clip is cropped to a thin strip on desktop; give it height here. */
  .site-home .aud-img{aspect-ratio:3/2;object-position:center}
  .site-home .amplify-annos{display:none}
  .site-home .uc-ask{min-height:52px}
  /* The audience line runs to the column width and the roles sit closer. */
  .site-home .understand .hero-aud{font-size:clamp(26px,7.6vw,32px)!important;text-wrap:balance}
  .site-home .understand .hero-aud br{display:none}
  .site-home .aud-roles{gap:10px;margin-top:0}
}
/* "Not just another AI tool." stacks three deep on desktop beside the grid.
   Once the section is a single column it runs on one line where it fits,
   and on phones as two with the orange words kept together. */
@media(max-width:900px){
  .site-home .ground-title{max-width:none}
  .site-home .ground-title br{display:none}
  .site-home .ground-title .em{white-space:nowrap}
}
@media(max-width:560px){
  .site-home .ground-title br:last-of-type{display:inline}
}
/* Footer on phones: brand, the line under it, the links, then the copyright
   with LinkedIn at the far right. */
@media(max-width:640px){
  .site-home .foot{flex-direction:column;align-items:stretch;gap:8px}
  .site-home .foot-right{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 16px}
  .site-home .foot-copy{display:contents}
  .site-home .foot-sep{display:none}
  .site-home .foot-tag{grid-column:1/-1;order:1}
  .site-home .foot-links{grid-column:1/-1;order:2;flex-wrap:wrap;gap:6px 18px}
  .site-home .foot-links a{display:inline-flex;align-items:center;min-height:44px;padding:0}
  .site-home .foot-c{order:3}
  .site-home .social{order:3;justify-self:end;width:44px;height:44px}
}
@media(max-width:520px){
  .site-home .row2{grid-template-columns:1fr;gap:18px}
  .site-home .form{padding:24px 20px}
  .site-home .field{min-width:0}
  .site-home .field input,.site-home .field select,.site-home .field textarea{min-width:0}
  /* The name collapses into the logo so About fits beside the button. */
  .site-home .nav-inner .brand-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .site-home .nav-inner .nav-link{display:inline-flex;align-items:center;min-height:44px;font-size:14px;white-space:nowrap}
  /* Emblem, About us and the button sit evenly across the bar. */
  .site-home .nav-inner .nav-actions{display:contents !important}
  .about-page footer .wrap{flex-wrap:wrap}
}
@media(max-width:380px){
  .site-home .nav-inner{padding:12px 16px;gap:12px}
  .site-home .nav-inner .nav-link{font-size:13px}
  .site-home .nav-inner .mark{width:32px}
  .site-home .nav-inner .btn{font-size:12px;padding:12px 10px;white-space:nowrap}
  .about-page .nav .wrap{padding:0 16px;gap:12px}
  .about-page .nav a.home{font-size:17px;gap:8px}
  .about-page .nav .cta{font-size:12px;padding:12px 10px;white-space:nowrap}
}

/* Full-screen player. --fw and --fh are the long and short sides available;
   --w is the player width that fits them. Held upright, the frame and its
   control row are turned a quarter so the walkthrough fills the screen. */
html.ax-lock{overflow:hidden}
.site-home .ax-shell.ax-immersive{--fw:100vw;--fh:100vh;--fw:100dvw;--fh:100dvh;--w:min(calc(var(--fw) - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)),calc((var(--fh) - 76px)*2));position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;overflow:hidden;background:var(--paper)}
.site-home .ax-immersive .ax-frame,.site-home .ax-immersive .ax-player-controls{width:var(--w);flex:0 0 auto}
.site-home .ax-immersive .ax-player-controls{display:flex;flex-direction:row-reverse;align-items:center;gap:12px;height:52px;padding:0;position:relative}
.site-home .ax-immersive .ax-ctl{position:static;display:flex;gap:8px;flex:0 0 auto}
.site-home .ax-immersive .ax-btn{width:44px;height:44px;opacity:1;flex-shrink:0;background:var(--paper)}
.site-home .ax-immersive .ax-btn svg{width:17px;height:17px}
.site-home .ax-immersive #axExpand{display:block}
.site-home .ax-immersive .ax-btn::after{display:none}
.site-home .ax-immersive .ax-scrub{position:relative;left:auto;right:auto;bottom:auto;flex:1 1 auto;height:44px;opacity:1}
.site-home .ax-immersive .ax-scrub-line{bottom:20px;height:4px}
.site-home .ax-immersive .ax-tick{bottom:18px;height:8px}
@media(orientation:portrait) and (pointer:coarse){
  .site-home .ax-shell.ax-immersive{--fw:100vh;--fh:100vw;--fw:100dvh;--fh:100dvw;display:block}
  .site-home .ax-immersive .ax-frame,.site-home .ax-immersive .ax-player-controls{position:absolute;left:50%;top:50%}
  .site-home .ax-immersive .ax-frame{transform:translate(-50%,-50%) rotate(90deg) translateY(-30px)}
  .site-home .ax-immersive .ax-player-controls{transform:translate(-50%,-50%) rotate(90deg) translateY(calc(var(--w)/4 + 4px))}
}

/* Close button for the full-screen player, floating top right. */
.ax-close{display:none}
.site-home .ax-immersive .ax-close:not([hidden]){display:flex;align-items:center;justify-content:center;position:absolute;z-index:4;top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(27,37,48,.16);background:var(--paper);color:var(--orange);box-shadow:0 4px 14px rgba(27,37,48,.14);cursor:pointer}
.site-home .ax-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

/* Portrait export on upright phones: a 9:16 frame that runs almost edge to
   edge. The export letterboxes itself by about 7%, so the frame crops that
   blank margin. Timeline sits tight under the frame, buttons to the right. */
.site-home .ax-embed.ax-portrait{width:auto;max-width:none;margin-left:-14px;margin-right:-14px}
.site-home .ax-portrait .ax-frame{aspect-ratio:9/16;overflow:hidden}
.site-home .ax-portrait .ax-frame iframe{transform:scale(1.07)}
.site-home .ax-portrait .ax-player-controls{padding-top:0;gap:0}
/* On the page the player is a card: soft border and shadow, with a 24px
   strip along its bottom edge that carries the timeline. */
.site-home .ax-portrait .ax-shell:not(.ax-immersive) .ax-frame{aspect-ratio:auto;height:0;padding-bottom:calc(177.78% + 24px);border:1px solid var(--line);border-radius:20px;background:#F5F2EC;box-shadow:0 1px 2px rgba(27,37,48,.05),0 14px 34px rgba(27,37,48,.10)}
.site-home .ax-portrait .ax-shell:not(.ax-immersive) .ax-frame iframe{inset:0 0 auto 0;height:calc(100% - 24px)}
.site-home .ax-portrait .ax-shell:not(.ax-immersive) .ax-poster:not([hidden]){inset:0 0 24px 0}
.site-home .ax-portrait .ax-shell:not(.ax-immersive) .ax-scrub{z-index:3;height:44px;margin:-34px 18px 0}
.site-home .ax-portrait .ax-shell:not(.ax-immersive) .ax-scrub-line{bottom:auto;top:20px;height:4px;border-radius:2px;overflow:hidden}
.site-home .ax-portrait .ax-shell:not(.ax-immersive) .ax-tick{bottom:auto;top:18px}
.site-home .ax-portrait .ax-shell:not(.ax-immersive) .ax-ctl{margin-top:4px}
.site-home .ax-portrait .ax-ctl{justify-content:flex-end}
/* Full screen keeps the portrait story upright and as large as the screen allows. */
.site-home .ax-portrait .ax-shell.ax-immersive{--w:min(100vw,calc((100vh - 96px)*.5625));--w:min(100dvw,calc((100dvh - 96px)*.5625));display:flex;gap:0}
.site-home .ax-portrait .ax-immersive .ax-frame,.site-home .ax-portrait .ax-immersive .ax-player-controls{position:relative;left:auto;top:auto;transform:none}
.site-home .ax-portrait .ax-immersive .ax-player-controls{flex-direction:row;gap:12px;height:52px;padding:0 12px;box-sizing:border-box}
.site-home .ax-portrait .ax-immersive .ax-scrub{height:44px}
.site-home .ax-portrait .ax-immersive .ax-scrub-line{top:20px}
.site-home .ax-portrait .ax-immersive .ax-tick{top:18px}