/* Drone360 "How it works" explainers (from 20261010a).
   Scoped to .xp. The scene palette (--signal, --veg, --earth and the rest) is
   read by each explainer script with getComputedStyle(root), so these tokens
   drive the 3D colours as well as the controls. Light only, like the site. */

.xp{
  --panel:#fff; --fg:#1B1A18; --muted:#4A463F; --line:#E3DED5; --bg:#FBFAF9;
  --sky1:#EDE8E0; --sky2:#F6F3EE; --ground:#C9CFB8; --ground2:#B4BBA0;
  --signal:#0A84A8; --corr:#C77700; --gcp:#E0452B; --fix:#1F8A4C; --ink:#1B1A18;
  --veg:#3F7D3A; --earth:#A8682F;
  --accent:#9C4A2C;
  --f-display:"Space Grotesk",system-ui,-apple-system,sans-serif;
  --f-body:"Space Grotesk",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  display:grid;gap:14px;margin:0 0 3.2rem;color:var(--fg);
}
.xp:last-child{margin-bottom:0}
.xp-title{margin:0 0 .2rem}
.xp-lede{margin:0;color:var(--muted);max-width:64ch}

.xp .stage{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.xp canvas{display:block;width:100%;aspect-ratio:16/9;max-width:100%;touch-action:pan-y}
.xp .xp-poster{position:absolute;inset:0 0 auto 0;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;pointer-events:none}
.xp.xp-on .xp-poster{display:none}

.xp .bar{display:flex;align-items:center;gap:12px;padding:10px 12px;border-top:1px solid var(--line)}
.xp button{font:500 .9rem var(--f-body);color:var(--fg);background:transparent;border:1px solid var(--line);border-radius:2px;padding:7px 12px;cursor:pointer;min-width:74px}
.xp button:hover{border-color:var(--accent)}
.xp button:focus-visible,.xp input:focus-visible,.xp .step:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.xp input[type=range]{flex:1;min-width:0;accent-color:var(--accent)}
.xp .time{font-family:var(--f-mono);font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.xp .opts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.xp .seg{display:inline-flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.xp .seg button{border:0;border-radius:0;min-width:0;padding:7px 14px}
.xp .seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
.xp .hint{font:.75rem var(--f-mono);color:var(--muted);letter-spacing:.04em;margin-left:auto}
.xp .hint-touch{display:none}
@media (pointer:coarse){.xp .hint-mouse{display:none}.xp .hint-touch{display:inline}}
.xp .caption{display:grid;gap:4px;min-height:110px}
.xp .xp-capt{font:600 1.15rem var(--f-display);margin:0;letter-spacing:-.01em}
.xp .caption p{margin:0;max-width:68ch;line-height:1.55}
.xp .steps{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:6px}
.xp .step{display:grid;gap:6px;cursor:pointer;background:none;border:0;padding:0;text-align:left;min-width:0;color:var(--muted)}
.xp .step .track{height:4px;border-radius:0;background:var(--line);overflow:hidden}
.xp .step .track i{display:block;height:100%;width:0;background:var(--accent)}
.xp .step span{font:500 .72rem var(--f-mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xp .step.on{color:var(--fg)}

/* overlays drawn over the 3D scene */
.xp .ov{position:absolute;pointer-events:none}
.xp [data-x="pill"]{top:12px;right:12px;font:500 .8rem var(--f-mono);letter-spacing:.04em;background:var(--panel);border:2px solid var(--signal);color:var(--signal);border-radius:20px;padding:6px 12px;opacity:.94}
.xp [data-x="pill"]:empty{display:none}
.xp [data-x="pill"][data-k="b"]{border-color:var(--earth);color:var(--earth)}
.xp [data-x="pill"][data-k="c"]{border-color:var(--fix);color:var(--fix)}
.xp [data-x="pill"][data-k="d"]{border-color:var(--gcp);color:var(--gcp)}
.xp .tag3{transform:translate(-50%,-100%);font:.8rem var(--f-mono);background:var(--panel);color:var(--fg);border-radius:2px;padding:4px 8px;white-space:nowrap;opacity:0;transition:opacity .3s}
.xp [data-x="card"]{left:50%;top:42%;transform:translate(-50%,-50%);background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:18px 28px;text-align:center;opacity:0;max-width:calc(100% - 32px)}
.xp [data-x="card"] b{display:block;font:700 clamp(20px,3.4vw,38px) var(--f-display);letter-spacing:-.02em;color:var(--fg);text-wrap:balance}
.xp [data-x="card"] span{display:block;margin-top:6px;font:clamp(11px,1.4vw,15px) var(--f-mono);color:var(--muted)}
.xp [data-x="nogl"]{inset:0 0 auto 0;aspect-ratio:16/9;display:grid;place-items:center;background:var(--panel);color:var(--fg);padding:16px;text-align:center}
.xp [data-x="nogl"][hidden]{display:none}
.xp [data-x="big"]{top:12px;left:14px;display:grid;gap:2px;background:color-mix(in srgb,var(--panel) 88%,transparent);border-radius:2px;padding:8px 12px;opacity:0}
.xp [data-x="big"] b{font:700 clamp(17px,2.8vw,32px) var(--f-display);letter-spacing:-.02em;color:var(--fg)}
.xp [data-x="big"] b.r{color:var(--gcp)}
.xp [data-x="big"] b.g{color:var(--fix)}
.xp [data-x="big"] i{font:normal clamp(10px,1.3vw,13px) var(--f-mono);color:var(--muted)}
.xp [data-x="big"] .leg{display:block;width:clamp(120px,22vw,220px);height:10px;border-radius:0;background:linear-gradient(90deg,#c4281f,#f0b228,#b6d240,#1e803e)}
.xp [data-x="flash"]{inset:0 0 auto 0;aspect-ratio:16/9;background:#fff;opacity:0}

/* Until the scene runs (no JavaScript, no WebGL, not yet scrolled to), the
   still frame shows and the controls stay hidden. */
.xp .bar,.xp .opts,.xp .steps,.xp .caption{display:none}
.xp.xp-on .bar,.xp.xp-on .opts{display:flex}
.xp.xp-on .steps,.xp.xp-on .caption{display:grid}
.xp.xp-on canvas{visibility:visible}
.xp canvas{visibility:hidden}

.xp-read{border-top:1px solid var(--line);padding-top:.6rem}
.xp-read summary{cursor:pointer;font:500 .85rem var(--f-mono);color:var(--muted)}
.xp-read ol{margin:.8rem 0 0;padding-left:1.3rem;max-width:68ch}
.xp-read li{margin:0 0 .7rem}
.xp-read li b{display:block}

@media (max-width:560px){
  .xp [data-x="pill"]{font-size:10px;padding:4px 8px}
  .xp .tag3{font-size:10px}
  .xp .hint{display:none}
  .xp .step span{font-size:10px}
  .xp .caption{min-height:160px}
  .xp [data-x="big"]{padding:5px 8px}
  .xp .bar{gap:8px;padding:8px}
  .xp button{min-width:0}
}

/* zoom camera inset, pet search (from 20261010b) */
.xp [data-x="zoom"]{border:2px solid var(--fg);opacity:0;box-sizing:border-box}
.xp [data-x="zoom"]::before,.xp [data-x="zoom"]::after{content:"";position:absolute;left:50%;top:50%;background:var(--panel);opacity:.85;transform:translate(-50%,-50%)}
.xp [data-x="zoom"]::before{width:26px;height:2px}
.xp [data-x="zoom"]::after{width:2px;height:26px}
.xp .stage{container-type:inline-size}
.xp [data-x="zoom"] .zl,.xp [data-x="zoom"] .zr{position:absolute;left:0;max-width:100%;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;font:clamp(8px,1.5cqw,12px) var(--f-mono);letter-spacing:.04em;background:var(--panel);color:var(--fg);padding:2px 6px;white-space:nowrap}
.xp [data-x="zoom"] .zl{top:0}
.xp [data-x="zoom"] .zr{bottom:0;font-weight:500}
.xp [data-x="zoom"] .zr:empty{display:none}
.xp [data-x="zoom"] .zr.r{color:var(--gcp)}
.xp [data-x="zoom"] .zr.g{color:var(--fix)}

/* quote form cards (from 20261010b): still frame until tapped */
.xpform{margin:0 0 1.5rem;padding:1rem 1rem 1.1rem;background:#fff;border:1px solid var(--line,#E3DED5)}
.xpform-head{font:500 .76rem var(--f-mono,ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;color:#9C4A2C;margin:0 0 .5rem}
.xpform .xp{margin:0;gap:10px}
.xpform .xp-title{font:600 1.02rem/1.3 var(--f-display);margin:0 0 .3rem}
.xp .xp-go{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;background:#9C4A2C;color:#fff;border:0;border-radius:2px;padding:.7rem 1.1rem;font:500 .95rem var(--f-body);min-width:0;box-shadow:0 2px 10px rgba(27,26,24,.25)}
.xp .xp-go:hover{background:#7E3B23;border:0}
.xp .xp-go[hidden],.xp.xp-on .xp-go,.xp.xp-off .xp-go{display:none}
@media (max-width:560px){.xpform{padding:.8rem}.xp .xp-go{font-size:.85rem;padding:.55rem .85rem}}
.xp .xp-go{white-space:nowrap}

/* Picture height, phone portrait, info strip and Expand (from 20261010d).
   --h is the picture's height as a share of its width. The stage is an
   inline-size container, so 100cqw is the stage width. */
.xp{--h:.5625;--strip:0px}
.xp canvas,.xp .xp-poster,.xp [data-x="flash"],.xp [data-x="nogl"]{aspect-ratio:auto;height:calc(100cqw * var(--h))}
.xp picture{display:contents}
@media (max-width:600px){
  .xp[data-kind="3d"]{--h:1.25}
  .xp .tag3{font-size:9px;padding:2px 5px}
  .xp [data-x="card"]{padding:12px 16px}
}
/* Narrow explainers (phones, and the quote form cards on a computer): the
   step badge and headline box leave the picture for a strip under it that
   grows with its text. xp-narrow is set by explain.js from the stage width. */
.xp.xp-narrow[data-kind="3d"].xp-on .stage{display:grid;grid-template-columns:auto 1fr;column-gap:10px}
.xp.xp-narrow[data-kind="3d"].xp-on .stage > canvas{grid-row:1;grid-column:1 / -1}
.xp.xp-narrow[data-kind="3d"].xp-on .stage > .bar{grid-row:3;grid-column:1 / -1}
.xp.xp-narrow[data-kind="3d"].xp-on [data-x="pill"]{position:static;grid-row:2;grid-column:1;align-self:start;margin:10px 0 10px 8px;max-width:9.5em;white-space:normal;line-height:1.25}
.xp.xp-narrow[data-kind="3d"].xp-on [data-x="pill"]:empty{display:block;visibility:hidden}
.xp.xp-narrow[data-kind="3d"].xp-on [data-x="big"]{position:static;grid-row:2;grid-column:2;align-self:start;margin:8px 8px 8px 0;min-height:64px;background:transparent;padding:0;text-align:right}
.xp.xp-narrow[data-kind="3d"].xp-on [data-x="big"] b{font-size:clamp(15px,5cqw,24px)}
.xp.xp-narrow[data-kind="3d"].xp-on [data-x="big"] i{font-size:clamp(9px,2.8cqw,12px)}
.xp.xp-narrow[data-kind="3d"].xp-on [data-x="big"] .leg{margin-left:auto;width:100%}
.xp.xp-narrow [data-x="card"] b{font-size:clamp(16px,5.5cqw,30px)}
.xp.xp-narrow [data-x="card"] span{font-size:clamp(9px,2.6cqw,13px)}
/* wider on big screens */
@media (min-width:1400px){#how-it-works > .wrap{max-width:min(1500px,92vw)}}

/* Expand: the explainer fills the screen over the page */
.xp .xp-exp{margin-left:auto;min-width:0;white-space:nowrap}
.xp .xp-x{display:none}
html.xp-locked,html.xp-locked body{overflow:hidden}
.xp.xp-big{position:fixed;inset:0;z-index:3000;margin:0;background:#FBFAF9;overflow-y:auto;overscroll-behavior:contain;
  padding:56px 16px 24px;--bw:min(1500px,calc((100vh - 190px) / var(--h)));align-content:start;grid-auto-rows:max-content}
.xp.xp-big > *{width:100%;max-width:var(--bw);margin-inline:auto;box-sizing:border-box}
.xp.xp-big .xp-exp,.xp.xp-big .xp-read,.xp.xp-big .xp-go{display:none}
.xp.xp-big .xp-x{display:block;position:fixed;top:10px;right:12px;z-index:3001;width:auto;max-width:none;background:#fff}
@media (max-width:600px){
  .xp.xp-big{padding:52px 10px 16px;--bw:100%}
  .xp.xp-big[data-kind="3d"]{--h:1.4}
}

/* hub page */
.xp-hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem 2.2rem}
.xp-hub a{text-decoration:none;display:grid;gap:.7rem}
.xp-hub img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--rule);background:#fff}
.xp-hub h3{margin:0}
.xp-hub p{margin:0;color:var(--muted);font-size:.97rem}
.xp-hub .mono{font-size:.8rem;color:var(--clay-text)}
.xp-hub a:hover h3,.xp-hub a:focus-visible h3{text-decoration:underline;text-decoration-color:var(--clay)}
.xp-group{margin-bottom:3.2rem}
.xp-group:last-child{margin-bottom:0}