/* Foxstep glass: product showcases stand in warm light behind frosted glass.
   A stage supplies the colour; frames, tiles and cards refract it.
   Words and screenshots stay on solid or near-solid surfaces. */

/* ─── Stage: the light the glass refracts ─────────────────────── */
/* Stages run from dawn to dusk down the page, in the logo's colours. */
.glass-stage{
  --stage-1:#ff8a4c;--stage-2:#ff4f00;--stage-3:#c83a00;--stage-4:#262626;
  --stage-glow-1:rgb(255 196 163 / .85);--stage-glow-2:rgb(17 17 17 / .4);
  --stage-pad:clamp(12px,3.4vw,44px);
  --guide-x:7%;--guide-y:9%;
  position:relative;isolation:isolate;overflow:hidden;
  padding:var(--stage-pad);
  border-radius:clamp(18px,2.4vw,28px);
  background:
    radial-gradient(55% 65% at 4% 2%,var(--stage-glow-1),transparent 72%),
    radial-gradient(55% 65% at 98% 100%,var(--stage-glow-2),transparent 72%),
    linear-gradient(125deg,var(--stage-1) 0%,var(--stage-2) 33%,var(--stage-3) 66%,var(--stage-4) 100%);
  /* The stage rests just above the page, its shadow tinted by its own light. */
  box-shadow:
    0 2px 4px -2px color-mix(in srgb,var(--stage-3) 30%,transparent),
    0 32px 64px -32px color-mix(in srgb,var(--stage-3) 55%,transparent);
}
.glass-stage--dawn{
  --stage-1:#ffc4a3;--stage-2:#ff8a4c;--stage-3:#ff6a2b;--stage-4:#ff4f00;
  --stage-glow-1:rgb(255 255 255 / .9);--stage-glow-2:rgb(200 58 0 / .5);
  --guide-x:85%;--guide-y:90%;
}
.glass-stage--sunset{
  --stage-1:#ff6a2b;--stage-2:#ff4f00;--stage-3:#a83100;--stage-4:#5a1e05;
  --stage-glow-1:rgb(255 138 76 / .75);--stage-glow-2:rgb(17 17 17 / .55);
  --guide-x:27%;--guide-y:calc(var(--stage-pad) / 2);
}
.glass-stage--dusk{
  --stage-1:#c83a00;--stage-2:#5a1e05;--stage-3:#262626;--stage-4:#111111;
  --stage-glow-1:rgb(255 106 43 / .7);--stage-glow-2:rgb(255 255 255 / .16);
}
/* Grain stops the gradient banding and gives the glass something to frost. */
.glass-stage::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity:.28;mix-blend-mode:overlay;
}
/* Dashed guide lines pass behind the glass, so its edges visibly bend them. */
.glass-stage::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(180deg,rgb(255 255 255 / .42) 0 6px,transparent 6px 12px) var(--guide-x) 0/1px 100% no-repeat,
    repeating-linear-gradient(90deg,rgb(255 255 255 / .42) 0 6px,transparent 6px 12px) 0 var(--guide-y)/100% 1px no-repeat;
}
/* A single frame fills its stage, so the lines would only peek out at its corners. They join several pieces instead. */
.glass-stage:has(>.glass-frame:only-child)::after{content:none}

/* ─── Materials ───────────────────────────────────────────────── */
/* Heavier blur and deeper shadow for large panes; lighter for small tiles. */
.glass-frame{
  --bezel:clamp(5px,.9vw,11px);
  --frame-radius:clamp(12px,1.8vw,22px);
  position:relative;
  padding:var(--bezel);
  border-radius:var(--frame-radius);
  background:linear-gradient(150deg,rgb(255 255 255 / .55),rgb(255 255 255 / .24) 45%,rgb(255 255 255 / .36));
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  backdrop-filter:blur(24px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .75),
    0 36px 70px -30px rgb(58 18 4 / .6),
    0 14px 28px -14px rgb(58 18 4 / .35);
}
.glass-frame>:is(img,video,iframe){
  position:relative;display:block;width:100%;height:auto;
  border-radius:calc(var(--frame-radius) - var(--bezel));
  background:#fff;
  box-shadow:0 0 0 1px rgb(58 18 4 / .14),0 3px 10px -4px rgb(58 18 4 / .35);
}
.glass-tile{
  position:relative;display:grid;place-items:center;
  width:var(--tile,72px);height:var(--tile,72px);
  border-radius:calc(var(--tile,72px) * .28);
  color:#111111;
  background:linear-gradient(155deg,rgb(255 255 255 / .72),rgb(255 255 255 / .36) 52%,rgb(255 255 255 / .52));
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  backdrop-filter:blur(14px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .95),
    inset 0 -10px 18px -12px rgb(255 255 255 / .7),
    0 18px 30px -14px rgb(58 18 4 / .6),
    0 4px 10px -4px rgb(58 18 4 / .25);
}
.glass-tile svg{width:50%;height:50%}
.glass-card{
  position:relative;
  border-radius:18px;
  background:linear-gradient(160deg,rgb(255 255 255 / .92),rgb(255 255 255 / .8));
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  backdrop-filter:blur(22px) saturate(160%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 18px 36px -22px rgb(58 18 4 / .6),
    0 4px 12px -6px rgb(58 18 4 / .22);
}
/* A rim that catches the light at the top left and fades round the edge. */
:is(.glass-frame,.glass-tile,.glass-card)::before{
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,rgb(255 255 255 / .95),rgb(255 255 255 / .25) 35%,rgb(255 255 255 / .06) 62%,rgb(255 255 255 / .55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
/* Orange focus rings vanish on an ember stage; white and ink show on any colour. */
.glass-stage :is(a,button,video):focus-visible{
  outline:3px solid var(--dark-text);outline-offset:3px;
  box-shadow:0 0 0 3px #fff;
}

/* ─── Agents: glass tiles beside an example conversation ───────── */
/* The figure is the query container, so narrow widths can re-lay the stage inside it. */
.agent-showcase{margin:0;container-type:inline-size}
.agent-stage{
  --tile:clamp(52px,12cqi,76px);
  --guide-x:calc(var(--stage-pad) + var(--tile) / 2);--guide-y:calc(var(--stage-pad) * .45);
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  padding-right:0;
}
/* A glass track behind the tiles and a shelf behind the conversation. */
.agent-stage::after{
  background:
    repeating-linear-gradient(90deg,rgb(255 255 255 / .42) 0 6px,transparent 6px 12px) 0 var(--guide-y)/100% 1px no-repeat,
    linear-gradient(rgb(255 255 255 / .16),rgb(255 255 255 / .08)) calc(var(--stage-pad) + var(--tile) * .2) 0/calc(var(--tile) * .6) 100% no-repeat,
    linear-gradient(rgb(255 255 255 / .14),rgb(255 255 255 / .14)) 0 calc(var(--stage-pad) - 14px)/100% calc(100% - 2 * (var(--stage-pad) - 14px)) no-repeat;
}
.agent-tiles{
  position:relative;z-index:2;
  display:grid;gap:clamp(12px,4cqi,24px);
  margin-right:calc(var(--tile) * -.3);
}
.agent-chat{
  position:relative;z-index:1;
  display:grid;gap:.8rem;
  padding:1.35rem clamp(1rem,5cqi,1.75rem) 1.35rem calc(var(--tile) * .3 + clamp(1rem,4cqi,1.5rem));
  border-radius:18px 0 0 18px;
  background:#fff;
  box-shadow:0 24px 50px -24px rgb(58 18 4 / .55),0 6px 14px -8px rgb(58 18 4 / .25);
  font-size:.88rem;line-height:1.55;color:var(--dark-text);
}
.agent-chat p{margin:0}
.chat-ask{
  justify-self:end;max-width:88%;
  padding:.5rem .85rem;border-radius:14px 14px 4px 14px;
  background:#f1f0ee;
}
.chat-source{
  display:flex;align-items:center;gap:.4rem;
  font-size:.75rem;font-weight:500;color:var(--body-text);
}
.chat-source img{width:16px;height:16px;border-radius:4px}
.chat-steps{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.9rem;align-items:start}
.chat-steps ol{display:grid;gap:.3rem;padding:0;list-style:none;counter-reset:step}
.chat-steps li{display:flex;gap:.55rem;counter-increment:step}
.chat-steps li::before{
  content:counter(step);flex:none;display:grid;place-items:center;
  width:1.35rem;height:1.35rem;margin-top:.05rem;border-radius:6px;
  background:var(--forest-light);color:var(--forest-dark);
  font-size:.7rem;font-weight:600;
}
.chat-steps img{
  width:clamp(120px,30cqi,184px);height:auto;border-radius:8px;
  box-shadow:0 0 0 1px var(--light-border),0 4px 12px -6px rgb(58 18 4 / .35);
}
/* Works with: apps that can use the local MCP connection. Static text, not links. */
.agent-showcase .works-with{display:block;margin:.85rem 0 0;font-size:.85rem;line-height:1.6;color:var(--muted-text)}
.product-page .agent-showcase{max-width:680px;margin:1.75rem 0 2rem}
/* Features: a product shot heads each feature's detail. */
.feature-shot{margin:0 0 1.75rem}
.feature-shot .glass-stage{--stage-pad:clamp(12px,2.8vw,32px)}
@container (max-width:520px){
  .chat-steps{grid-template-columns:minmax(0,1fr)}
  .chat-steps img{width:min(100%,220px)}
}
/* Narrow stages put the tiles in a row above the conversation. */
@container (max-width:420px){
  .agent-stage{grid-template-columns:minmax(0,1fr);align-items:start}
  .agent-stage::after{
    background:
      repeating-linear-gradient(180deg,rgb(255 255 255 / .42) 0 6px,transparent 6px 12px) 50% 0/1px 100% no-repeat,
      linear-gradient(rgb(255 255 255 / .16),rgb(255 255 255 / .08)) 0 calc(var(--stage-pad) + var(--tile) * .2)/100% calc(var(--tile) * .6) no-repeat;
  }
  .agent-tiles{display:flex;margin:0 0 calc(var(--tile) * -.3) 1rem}
  .agent-chat{padding:calc(var(--tile) * .3 + 1rem) 1rem 1.1rem;border-radius:18px 0 0 0;margin-bottom:calc(-1 * var(--stage-pad))}
}

/* ─── Access and fallbacks ────────────────────────────────────── */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .glass-frame{background:rgb(255 255 255 / .5)}
  .glass-tile{background:rgb(255 255 255 / .82)}
  .glass-card{background:rgb(255 255 255 / .95)}
}
@media (prefers-reduced-transparency:reduce){
  .glass-frame,.glass-tile,.glass-card{-webkit-backdrop-filter:none;backdrop-filter:none}
  .glass-frame{background:rgb(255 255 255 / .6)}
  .glass-tile,.glass-card{background:#fff}
}
@media (prefers-contrast:more){
  .glass-stage::before,.glass-stage::after{display:none}
  .glass-frame,.glass-tile,.glass-card{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 0 0 1px var(--dark-text)}
}
@media (forced-colors:active){
  .glass-stage::before,.glass-stage::after{display:none}
  .glass-frame,.glass-tile,.glass-card,.agent-chat{border:1px solid CanvasText}
}