/* ============================================================
   GUIDED TOURS — six short tours of Tojo
   ------------------------------------------------------------
   Lifted whole from the approved prototype and split the way the
   rest of this project is split: the page in tour-guide.html,
   this sheet, and the behaviour in assets/js/tour-guide.js.

   The page is a working mock of the Tojo app inside a stage —
   sidebar, top bar, composer, cards and all — with a tour layer
   over it: a spotlight cut into an SVG overlay, a card that moves
   to whatever is being pointed at, and a caption bar underneath.
   Everything here styles one of those two layers.

   The tool screens the tour opens are whole documents of their
   own, carried as strings in the script and handed to the three
   iframes as srcdoc; they bring their own styles with them and
   nothing in this sheet reaches inside them.
   ============================================================ */

/* Layout: a 1440x900 replica of the Tojo app, scaled to fit, under a spotlight. The tour card is a tilted 3D panel beside the lit area (docked under the stage on phones). Each tour has its own card and highlight colours; the design language stays the same. One committed dark look, as the app ships. */
:root{
  color-scheme:dark;
  --forest:#10241a; --forest-2:#183528; --cream:#F3F1EA; --cream-dim:#C3CBBF; --gold:#d4a94f; --gold-deep:#b98d33;
  --page:#070a08; --ink-on-gold:#1d1606;
  --f-display:'Bebas Neue','Oswald','Arial Narrow',sans-serif;
  --f-body:'Poppins','Segoe UI',system-ui,sans-serif;
  --f-hand:'Caveat','Segoe Print',cursive;
  /* tour theme: set per tour from script (Tour 1 = indigo, pink, sun) */
  --c1:#3D52C9; --c2:#1E2A7A; --hl:#FF4FA3; --hl-soft:#FFB3D9; --key:#FFD86B; --key-ink:#1E2A7A;
  --a-bg:#0a0d0b; --a-side:#0d110e; --a-panel:#131815; --a-card:#151b17; --a-card-2:#1b231e; --a-line:#222b25;
  --a-fg:#EDEFEA; --a-muted:#8E978F; --a-dim:#5b645d; --a-green:#2b8a4f; --a-green-2:#1f6e3d; --a-mint:#4cc47a;
  --a-gold-bg:#1a170e; --a-gold-line:#4b3e1c; --a-gold:#e2b448; --a-blue:#1d2b45; --a-blue-fg:#8fb2ec;
}
html,body{background:var(--page);color:var(--cream)}
body{font-family:var(--f-body);margin:0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 28px}
*{box-sizing:border-box}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:3px solid var(--key);outline-offset:2px}

.bar{max-width:1440px;margin:0 auto;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-block:16px 12px}
.brand{font-family:var(--f-display);font-size:34px;line-height:1;color:var(--gold);letter-spacing:.02em}
.bar h1{margin:0;font-family:var(--f-display);font-weight:400;font-size:26px;letter-spacing:.03em;line-height:1}
.bar .sub{font-size:13px;color:var(--cream-dim);flex:1 1 240px;min-width:0}
.ghost{border:1px solid #2c4335;border-radius:999px;padding:6px 14px;font-size:13px;color:var(--cream)}
.ghost:hover{border-color:var(--gold)}

/* ---------- picker ---------- */
#picker{max-width:1100px;margin:8px auto 0;background:radial-gradient(1200px 500px at 85% -10%,#1d3a2a 0,transparent 60%),var(--forest);border-radius:14px;padding:clamp(22px,4vw,48px)}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600}
#picker h2{font-family:var(--f-display);font-weight:400;font-size:clamp(44px,7vw,84px);line-height:.92;margin:10px 0 12px;letter-spacing:.01em;text-wrap:balance}
#picker h2 em{font-style:normal;color:var(--gold)}
#picker .lede{max-width:60ch;color:var(--cream-dim);font-size:15px;line-height:1.6;margin:0}
.pk-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:26px 0 30px}
.btn-gold{background:var(--gold);color:var(--ink-on-gold);font-weight:600;border-radius:999px;padding:12px 22px;font-size:15px;box-shadow:0 6px 0 -2px var(--gold-deep)}
.btn-gold:hover{filter:brightness(1.06)}
.btn-line{border:1.5px solid var(--cream-dim);border-radius:999px;padding:11px 20px;font-size:15px;font-weight:500}
.btn-line:hover{border-color:var(--gold);color:var(--gold)}
.resume{font-size:13px;color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.tours{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;list-style:none;margin:0;padding:0}
.tour{width:100%;background:var(--forest-2);border:1px solid #2a4a38;border-radius:10px;padding:16px 16px 14px;display:flex;flex-direction:column;gap:8px;text-align:left;min-height:178px;position:relative;overflow:hidden}
.tour::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--t1),var(--t2))}
.tour .n{font-family:var(--f-display);font-size:40px;line-height:.8;color:var(--th);margin-top:6px}
.tour h3{margin:0;font-size:16px;font-weight:600}
.tour p{margin:0;font-size:13px;line-height:1.5;color:var(--cream-dim);flex:1}
.tour .meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--cream-dim);gap:8px}
.tour.ready{cursor:pointer;background:linear-gradient(150deg,var(--t1),var(--t2));border-color:transparent;box-shadow:inset 0 2px 0 rgba(255,255,255,.3),inset 0 -5px 0 rgba(0,0,0,.25),10px 16px 30px rgba(0,0,0,.45);transform:perspective(900px) rotateY(-5deg) rotateX(4deg);transition:transform .35s}
.tour.ready::before{display:none}
.tour.ready p,.tour.ready .meta{color:rgba(255,255,255,.82)}
.tour.ready:hover{transform:perspective(900px) rotateY(0) rotateX(0) translateY(-3px)}
.tour .tag{font-size:11px;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:3px 9px;border:1px solid #3a5a48;white-space:nowrap}
.tour.ready .tag{background:var(--tk);color:var(--tki);border-color:var(--tk);font-weight:700}
.pk-foot{display:flex;gap:18px;margin-top:22px;font-size:13px;color:var(--cream-dim);flex-wrap:wrap}
.pk-foot button{text-decoration:underline;text-underline-offset:3px}

/* ---------- stage ---------- */
#tourArea{max-width:1440px;margin:0 auto;position:relative}
#stageBox{position:relative;width:100%;overflow:hidden;border-radius:10px;background:var(--a-bg);box-shadow:0 0 0 1px #1b241e}
#stage{position:absolute;left:0;top:0;width:1440px;height:900px;transform-origin:0 0}
#suiteFrame{position:absolute;left:0;top:0;width:1440px;height:900px;border:0;z-index:4;background:#e8eef3}
#simFrame{position:absolute;left:0;top:0;width:1440px;height:900px;border:0;z-index:4;background:#eef1f4}
#toolFrame{position:absolute;left:0;top:0;width:1440px;height:900px;border:0;z-index:4;background:#efede6}
#ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
#toast{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);background:var(--cream);color:var(--forest);font-size:13px;font-weight:500;padding:9px 16px;border-radius:999px;z-index:8;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}
#toast.on{opacity:1}
.under{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--cream-dim);padding-top:10px}
.under button{text-decoration:underline;text-underline-offset:3px}

/* ---------- the tilted 3D card (from "Same Question, Two Answers") ---------- */
#card{position:absolute;z-index:6;width:340px;color:#fff;border-radius:10px;padding:20px 22px 18px;
  background:linear-gradient(150deg,var(--c1),var(--c2));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -6px 0 rgba(0,0,0,.25),18px 28px 46px rgba(0,0,0,.55);
  transform:perspective(1000px) rotateX(5deg);
  transition:left .5s cubic-bezier(.65,.02,.25,1),top .5s cubic-bezier(.65,.02,.25,1),transform .5s cubic-bezier(.65,.02,.25,1),background .4s}
#card.r{transform:perspective(1000px) rotateY(-9deg) rotateX(5deg)}
#card.l{transform:perspective(1000px) rotateY(9deg) rotateX(5deg);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -6px 0 rgba(0,0,0,.25),-18px 28px 46px rgba(0,0,0,.55)}
#card .eh{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--hl-soft);font-weight:600;display:flex;justify-content:space-between;gap:8px}
#card h2{font-family:var(--f-display);font-weight:400;font-size:36px;line-height:.95;margin:8px 0 10px;letter-spacing:.01em;text-wrap:balance}
#card .body p{margin:0 0 8px;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.9)}
#card .body b{color:var(--key);font-weight:600}
#card .note{font-family:var(--f-hand);font-size:24px;color:var(--key);line-height:1.15;margin:4px 0 8px}
#card .later{font-size:12px;color:var(--hl-soft);font-style:italic;margin:2px 0 10px}
.dots{display:flex;gap:5px;margin:2px 0 12px}
.dots i{width:18px;height:4px;border-radius:2px;background:rgba(255,255,255,.2)}
.dots i.on{background:var(--key)}
.dots i.seen{background:var(--hl-soft);opacity:.7}
.try{border:1.5px dashed var(--hl-soft);border-radius:8px;padding:9px 12px;font-size:13px;display:flex;gap:10px;align-items:flex-start;margin:6px 0 12px;line-height:1.45;background:rgba(0,0,0,.14)}
.try .k{flex:none;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;background:var(--hl);color:#fff;border-radius:999px;padding:3px 9px;margin-top:1px}
.try.done{border-style:solid;border-color:var(--key)}
.try.done .k{background:var(--key);color:var(--key-ink)}
.try .res{display:block;color:rgba(255,255,255,.75);margin-top:4px}
.cfoot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cfoot .sp{flex:1}
.cfoot .lnk{font-size:13px;color:rgba(255,255,255,.75);text-decoration:underline;text-underline-offset:3px}
.cfoot .lnk:hover{color:#fff}
.go{background:var(--key);color:var(--key-ink);font-weight:700;border-radius:999px;padding:9px 18px;font-size:14px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.go:disabled{opacity:.35;cursor:not-allowed}
.go2{border:1.5px solid rgba(255,255,255,.6);border-radius:999px;padding:8px 14px;font-size:14px}
/* card controls: move, shrink, auto-place */
#card .ctl{display:flex;align-items:center;gap:8px;margin:-6px -6px 6px;font-size:11.5px}
#card .ctl .sp{flex:1}
#card .ctl button{border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:2px 9px;color:rgba(255,255,255,.85);font-size:11.5px;line-height:1.5}
#card .ctl button:hover{border-color:var(--key);color:var(--key)}
#card .grip{cursor:grab;letter-spacing:-.05em}
#card .eh{cursor:grab}
#card.drag{transition:none;cursor:grabbing;box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 2px var(--key)}
#card.drag .eh,#card.drag .grip{cursor:grabbing}
#card.pinned{transform:perspective(1000px) rotateX(3deg)}
#card.docked{transform:perspective(1000px) rotateY(9deg) rotateX(3deg)}
#tourArea.dock #stageBox{transition:width .4s}
#tourArea.dock{min-height:620px}
#card.compact .body,#card.compact .note,#card.compact .later,#card.compact .dots,#card.compact .ceo,#card.compact .try .res,#card.compact .dmx{display:none}
#card.compact h2{font-size:26px;margin:4px 0 8px}
#card.compact .try{margin:4px 0 10px}
@media (max-width:860px){#card .grip,#card #cAuto{display:none}#card .eh{cursor:auto}}
/* projection demo (Tour 5) */
.demo{background:rgba(0,0,0,.18);border-radius:8px;padding:10px 12px;margin:4px 0 12px}
.dmr{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}
.dmr input{flex:1;accent-color:var(--key)}
.dmr b{font-family:var(--f-display);font-size:22px;color:var(--key);min-width:36px;text-align:right}
.dm2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.dm2 small{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--hl-soft);font-weight:700;margin-bottom:4px}
.dm2 svg{width:100%;height:70px}
.dm2 p{margin:4px 0 0;font-size:11.5px;line-height:1.35;color:rgba(255,255,255,.75)}
#dmL{transition:d .4s}
#dmN{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
#dmN li{font-size:11.5px;border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:2px 7px;display:flex;justify-content:space-between;gap:6px;transition:background .3s,border-color .3s}
#dmN li::after{content:attr(data-d);color:var(--key);font-weight:600;white-space:nowrap}
#dmN li.on{border-color:var(--hl);background:rgba(255,176,32,.12)}
.dmx{display:block;font-size:11px;color:rgba(255,255,255,.6);margin-top:8px}
/* Tour 6 card extras */
.loop{background:rgba(0,0,0,.18);border-radius:8px;padding:10px 12px;margin:4px 0 12px}
#lpN{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:5px}
#lpN li{display:grid;grid-template-columns:62px 1fr;gap:8px;font-size:12px;line-height:1.35;border-radius:6px;padding:4px 6px;opacity:.45;transition:opacity .35s,background .35s}
#lpN li b{font-family:var(--f-display);font-weight:400;font-size:18px;letter-spacing:.03em;color:var(--hl-soft);line-height:1}
#lpN li.on{opacity:1;background:rgba(71,199,255,.14)}
#lpN li.on b{color:var(--key)}
.spick{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.spick button{font-size:12px;font-weight:600;border:1.5px solid var(--hl-soft);border-radius:999px;padding:5px 11px}
.spick button.seen{border-color:var(--key);color:var(--key)}
.spick button.on{background:var(--key);color:var(--key-ink);border-color:var(--key)}
.ceo{display:flex;flex-direction:column;gap:6px;margin:4px 0 12px}
.ceo .c0{background:var(--key);color:var(--key-ink);border-radius:8px;padding:8px 10px;font-size:12px;line-height:1.4}
.ceo .c0 b{display:block;font-family:var(--f-display);font-weight:400;font-size:22px;letter-spacing:.03em}
.ceo .c1{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ceo .c1 span{border:1.5px solid var(--hl-soft);border-radius:8px;padding:6px 8px;font-size:11.5px;color:rgba(255,255,255,.8)}
.ceo .c1 b{display:block;font-size:13px;color:#fff}
.ceo .c2{font-size:11.5px;color:rgba(255,255,255,.7);border-top:1px dashed rgba(255,255,255,.3);padding-top:6px}
/* sorter (Tour 2) */
.sort{display:flex;flex-direction:column;gap:8px;margin:4px 0 12px}
.sq{background:rgba(0,0,0,.18);border-radius:8px;padding:9px 11px;font-size:13px;line-height:1.4}
.sq .q{display:block;margin-bottom:7px}
.sq .bb{display:flex;gap:6px}
.sq .bb button{font-size:12px;font-weight:600;border:1.5px solid var(--hl-soft);border-radius:999px;padding:4px 12px}
.sq .bb button:hover{background:rgba(255,255,255,.1)}
.sq .why{display:block;margin-top:6px;font-size:12.5px;color:var(--hl-soft)}
.sq.ok{box-shadow:inset 0 0 0 1.5px var(--key)}
.sq.ok .why{color:var(--key)}
.sq.no{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.live-lbl{display:inline-block;background:var(--hl);color:#fff;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;margin-bottom:10px}
@media (max-width:860px){
  #card{position:relative;left:auto!important;top:auto!important;width:auto!important;margin-top:14px;transform:perspective(1000px) rotateX(4deg)!important}
}
@media (prefers-reduced-motion:reduce){#card{transition:none}.sq.no{animation:none}}
/* ============ the app replica ============ */
.app{position:absolute;inset:0;display:grid;grid-template-columns:300px 1fr;background:var(--a-bg);color:var(--a-fg);font-family:var(--f-body);font-size:15px;transition:background .3s,color .3s}
.app.locked *{pointer-events:none}
.app.locked .tryable,.app.locked .tryable *{pointer-events:auto}
.app svg{flex:none}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* sidebar */
.side{background:var(--a-side);border-right:1px solid var(--a-line);display:flex;flex-direction:column;padding:14px 14px 12px;min-height:0}
.logo{display:flex;align-items:center;gap:12px;padding:4px 6px 14px}
.logo .face{width:38px;height:38px;border-radius:9px;background:linear-gradient(160deg,#3a2a20,#1a1410);display:grid;place-items:center;font-family:var(--f-display);font-size:22px;color:var(--a-gold)}
.logo b{font-family:var(--f-display);font-weight:400;font-size:30px;letter-spacing:.04em;flex:1}
.logo .tg{color:var(--a-muted)}
.newchat{display:flex;align-items:center;gap:10px;background:var(--a-green);color:#fff;border-radius:10px;padding:13px 16px;font-weight:600;font-size:16px}
.newchat kbd{margin-left:auto;font:inherit;font-size:12px;font-weight:500;opacity:.8}
.nav{flex:1;overflow-y:auto;overflow-x:hidden;margin-top:8px;display:flex;flex-direction:column;gap:1px;position:relative;scrollbar-width:none;scroll-behavior:smooth;min-height:0}
.nav::-webkit-scrollbar{display:none}
.grp{font-size:11.5px;letter-spacing:.14em;font-weight:600;color:var(--a-muted);padding:11px 10px 4px;display:flex;align-items:center;gap:8px}
.grp.fold::before{content:"›";font-size:15px;line-height:1;transition:transform .2s}
.ni{display:flex;align-items:center;gap:14px;padding:7px 12px;border-radius:10px;color:#D5DAD3;font-size:16px;position:relative;transition:background .2s,color .2s}
.ni .chev{margin-left:auto;color:var(--a-dim);transition:transform .25s}
.ni.open .chev{transform:rotate(90deg)}
.ni:hover,.ni.hov{background:var(--a-card-2);color:#fff}
.ni.home{background:#12301e;border:1px solid #2b6a43;color:#fff;font-size:17px;padding:9px 14px;margin:6px 0 2px}
.ni.lock{color:var(--a-dim);font-size:14.5px;padding:5px 12px}
.ni.lock .lk{margin-left:auto;margin-right:10px;width:15px;height:15px;color:#6a5a2c}
.sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s}
.sub>div{overflow:hidden}
.sub.open{grid-template-rows:1fr}
.sub a{display:block;padding:6px 12px 6px 48px;font-size:14.5px;color:var(--a-muted);text-decoration:none;border-left:1px solid var(--a-line);margin-left:22px}
.sub a:hover{color:#fff}
.sub a .soon{font-size:11px;color:var(--a-dim);margin-left:6px}
.me{display:flex;align-items:center;gap:12px;border-top:1px solid var(--a-line);padding:12px 6px 2px}
.av{width:40px;height:40px;border-radius:50%;background:var(--a-green);display:grid;place-items:center;font-weight:600;color:#fff}
.me b{display:block;font-size:15px}
.me small{color:var(--a-muted);font-size:13px}
/* main */
.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.top{display:flex;align-items:center;gap:18px;padding:18px 26px 14px}
.org{display:flex;align-items:center;gap:12px;font-weight:600;font-size:18px}
.org .v{width:36px;height:36px;border-radius:8px;background:var(--a-green);display:grid;place-items:center;color:#fff;font-weight:700}
.top .gap{flex:1}
.tbtn{display:flex;align-items:center;gap:8px;color:#D5DAD3;font-size:16px}
.gift{position:relative}
.gift::after{content:"";position:absolute;right:-1px;top:-1px;width:7px;height:7px;border-radius:50%;background:#e2553f}
.credits{display:flex;align-items:center;gap:10px;border:1px solid var(--a-gold-line);background:var(--a-gold-bg);border-radius:999px;padding:4px 4px 4px 16px;color:var(--a-gold);font-weight:600;font-size:16px}
.credits .plan{background:var(--a-gold);color:#1b1407;border-radius:999px;padding:7px 16px;font-size:15px}
.scroll{position:relative;flex:1;overflow-y:auto;overflow-x:hidden;padding:0 26px 40px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#2a332d transparent}
.banner{display:flex;align-items:center;gap:16px;border:1px solid var(--a-gold-line);background:var(--a-gold-bg);border-radius:12px;padding:16px 18px 16px 22px;color:var(--a-gold);font-size:16px;margin-bottom:6px}
.banner>span:first-child{flex:1}
.banner .cmp{background:var(--a-gold);color:#1b1407;border-radius:999px;padding:9px 20px;font-weight:600;font-size:15px}
.hero{text-align:center;padding:52px 0 18px}
.hero .kick{font-size:12.5px;letter-spacing:.22em;color:var(--a-muted)}
.hero h2{font-family:var(--f-display);font-weight:400;font-size:74px;line-height:1;margin:14px 0 30px;letter-spacing:.015em}
.hero h2 span{color:var(--a-mint)}
.composer{width:900px;margin:0 auto;background:var(--a-panel);border:1px solid var(--a-line);border-radius:16px;padding:20px 20px 16px;text-align:left}
.composer textarea{width:100%;background:transparent;border:0;resize:none;color:var(--a-fg);font:inherit;font-size:19px;height:92px;outline:none}
.composer textarea::placeholder{color:#9aa39b}
.crow{display:flex;align-items:center;gap:12px}
.cbtn{width:46px;height:46px;border-radius:50%;border:1px solid var(--a-line);display:grid;place-items:center;color:#cfd5cd}
.send{background:var(--a-green);border-color:var(--a-green);color:#fff;width:52px;height:52px}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:1000px;margin:24px auto 0}
.chip{display:flex;align-items:center;gap:10px;border:1px solid var(--a-line);background:var(--a-panel);border-radius:999px;padding:11px 20px;font-size:16px;color:#D5DAD3}
.chip .ic{color:var(--a-mint);width:18px;height:18px}
.chip:hover{border-color:var(--a-mint)}
.sech{display:flex;align-items:center;justify-content:space-between;margin:54px 0 18px}
.sech h3{font-family:var(--f-display);font-weight:400;font-size:34px;margin:0;letter-spacing:.02em}
.sech .more{color:#cfd5cd;font-size:16px;display:flex;gap:8px;align-items:center}
.row{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.pc{background:var(--a-card);border:1px solid var(--a-line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,border-color .3s,box-shadow .3s;position:relative}
.pc:hover,.pc.hov{transform:translateY(-4px) scale(1.03);border-color:var(--a-mint);box-shadow:0 14px 30px rgba(0,0,0,.4);z-index:2}
.thumb{height:130px;background:#ECEADF;color:#22241f;padding:9px 10px;overflow:hidden;position:relative}
.thumb .h{font-family:var(--f-display);font-size:15px;line-height:1;letter-spacing:.01em}
.thumb .s{font-size:6px;color:#666;margin-top:3px;line-height:1.2}
.thumb svg{position:absolute;left:8px;right:8px;bottom:6px;width:calc(100% - 16px);height:78px}
.thumb.icon{background:var(--a-card-2);display:grid;place-items:center}
.thumb.icon .ic{width:46px;height:46px;color:var(--a-mint);stroke-width:1.5}
.pc .bd{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px}
.pc .t{font-weight:600;font-size:17.5px}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{font-size:12px;font-weight:600;letter-spacing:.06em;border-radius:999px;padding:4px 10px;background:var(--a-card-2);color:#c8cec6;border:1px solid var(--a-line)}
.tag.tool{background:var(--a-blue);color:var(--a-blue-fg);border-color:#2a3d60}
.pc .m{font-size:14.5px;color:var(--a-muted)}
.tc{background:var(--a-card);border:1px solid var(--a-line);border-radius:14px;overflow:hidden}
.tc .thumb.icon{height:110px}
.tc .bd{padding:16px 18px 18px}
.tc .t{font-weight:600;font-size:17.5px}
.tc .m{font-size:14.5px;color:var(--a-muted);margin-top:6px;line-height:1.45}
.tc.soon{opacity:.45}
.pbrow{display:grid;grid-template-columns:1fr 1fr 2fr;gap:18px}
.addpb{border:1px dashed #2b352e;border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:6px;min-height:150px;justify-content:flex-end;position:relative;text-align:left}
.addpb .plus{position:absolute;left:50%;top:28px;transform:translateX(-50%);color:var(--a-mint)}
.addpb b{font-size:17px;color:#b9c0b7}
.addpb small{color:var(--a-muted);font-size:14px}
.addpb input{display:none;background:var(--a-panel);border:1px solid var(--a-mint);border-radius:8px;padding:9px 12px;color:var(--a-fg);font:inherit;font-size:15px;width:100%}
.addpb.naming input{display:block}
.addpb.naming .plus{display:none}
.pb{background:var(--a-card);border:1px solid var(--a-line);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:8px;justify-content:space-between}
.pb .t{font-weight:600;font-size:17px}
.pb .m{color:var(--a-muted);font-size:14px}
.pb .ic{color:var(--a-mint)}
/* app light (try-it on step 7) */
.app.light{--a-bg:#F4F5F1;--a-side:#ECEEE8;--a-panel:#fff;--a-card:#fff;--a-card-2:#E5E9E2;--a-line:#D8DDD4;--a-fg:#141A16;--a-muted:#5c665e;--a-dim:#9aa39b;--a-gold-bg:#FBF3DD;--a-gold-line:#E4CF94;--a-gold:#8a6512;--a-blue:#DCE6F7;--a-blue-fg:#2c4f8c}
.app.light .ni{color:#2b322d}
.app.light .ni:hover,.app.light .ni.hov{color:#000}
.app.light .ni.home{background:#d9eedf;border-color:#8cc4a0;color:#0f3a20}
.app.light .tbtn,.app.light .chip,.app.light .sech .more,.app.light .cbtn{color:#2b322d}
.app.light .credits .plan,.app.light .banner .cmp{background:#d4a94f;color:#1b1407}
.app.light .composer textarea::placeholder{color:#7d867e}
.app.light .addpb b{color:#3a423c}
.app.light .addpb{border-color:#c3cabf}


/* ---- thread view (Tour 2) ---- */
.app:not([data-view="thread"]) .thread{display:none}
.app[data-view="thread"] .scroll{display:none}
.thread{flex:1;display:flex;flex-direction:column;min-height:0;padding:0 26px 22px}
.thead{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--a-line);padding:2px 0 14px}
.thead .tt{font-weight:600;font-size:18px}
.thead .tmeta{color:var(--a-muted);font-size:13.5px;flex:1}
.ctxbtn{width:40px;height:40px;border-radius:10px;border:1px solid var(--a-line);display:grid;place-items:center;color:#cfd5cd}
.tbody{flex:1;display:grid;grid-template-columns:440px 1fr;gap:20px;min-height:0;padding-top:16px;position:relative}
.tchat{overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:12px;padding-right:6px;scrollbar-width:thin;scrollbar-color:#2a332d transparent;scroll-behavior:smooth}
.ubub{align-self:flex-end;max-width:88%;background:var(--a-card-2);border:1px solid var(--a-line);border-radius:16px 16px 4px 16px;padding:11px 15px;font-size:15px;line-height:1.45}
.tojo-h{display:flex;align-items:center;gap:10px;margin-top:4px}
.tav{width:30px;height:30px;border-radius:50%;background:#2b1f17;color:var(--a-gold);display:grid;place-items:center;font-family:var(--f-display);font-size:18px}
.tojo-h small{color:var(--a-muted);font-size:13px}
.part{transition:opacity .45s,transform .45s}
.part.pend{opacity:0;transform:translateY(10px)}
.tchat p{margin:0 0 8px;font-size:15px;line-height:1.55;color:#dfe3dd}
.tchat .sm{color:var(--a-muted);margin:0 0 4px}
.tchat ol{margin:0;padding-left:20px;font-size:14.5px;line-height:1.5;color:#dfe3dd;display:flex;flex-direction:column;gap:4px}
.verdict{font-size:21px!important;font-weight:600;line-height:1.3!important;color:#fff!important}
.verdict span{color:var(--a-mint)}
.tnote{font-family:var(--f-hand);font-size:25px;line-height:1.15;color:var(--a-gold);border-left:3px solid var(--a-gold-line);padding:2px 0 2px 12px}
.tnote span{display:block;font-family:var(--f-body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--a-muted)}
.pts{display:flex;flex-direction:column;gap:6px}
.pts button{text-align:left;font-size:13.5px;color:#b9d8c4;border:1px solid var(--a-line);border-radius:8px;padding:7px 10px;background:var(--a-panel)}
.pts button:hover{border-color:var(--a-mint)}
.ask1{border:1px solid var(--a-line);border-radius:12px;padding:12px 14px;background:var(--a-panel)}
.ask1 b{display:block;font-size:15px;margin-bottom:8px}
.ask1 .opts{display:flex;flex-direction:column;gap:6px}
.ask1 .opts span{font-size:14px;border:1px solid var(--a-line);border-radius:8px;padding:7px 10px;color:#dfe3dd}
.nexts{display:flex;flex-wrap:wrap;gap:8px}
.nexts span{font-size:13.5px;border:1px solid var(--a-line);border-radius:999px;padding:7px 13px;color:#cfd5cd;background:var(--a-panel)}
/* canvas drawing */
.canvas{background:#ECEADF;color:#1f2420;border-radius:14px;padding:22px 26px;overflow:hidden;position:relative;min-height:0;display:flex;flex-direction:column;gap:14px}
.cv-eb{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#7a6a3a}
.cv-h{font-family:var(--f-display);font-size:40px;line-height:.95;margin-top:-8px}
.lane{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center;padding:12px 10px;border-radius:10px;transition:background .3s}
.lane .ln b{display:block;font-size:15px}
.lane .ln small{font-size:12px;color:#5d655f;line-height:1.3;display:block}
.trk{position:relative;height:46px}
.trk::before{content:"";position:absolute;left:0;right:0;top:22px;height:3px;background:#2a2f2b;border-radius:2px}
.lane.tojo .trk::before{background:linear-gradient(90deg,#2b8a4f,#2b8a4f)}
.trk .yes{position:absolute;top:6px;width:2px;height:36px;background:#b0413e}
.trk .yes em{position:absolute;top:-16px;left:-40px;width:90px;text-align:center;font-style:normal;font-size:10.5px;color:#b0413e;font-weight:600;white-space:nowrap}
.stp{position:absolute;top:13px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:#ECEADF;border:3px solid #2a2f2b;transition:transform .2s,background .2s}
.lane.tojo .stp{border-color:#2b8a4f}
.stp:hover,.stp.on{transform:scale(1.25);background:#d9a441}
.lane.hl,.beds.hl{background:rgba(217,164,65,.25)}
.axis{display:flex;justify-content:space-between;margin-left:174px;font-size:11px;color:#6b726c;border-top:1px dashed #b7b5aa;padding-top:4px}
.stopd{font-size:13.5px;line-height:1.5;background:#fff;border-radius:10px;padding:10px 14px;min-height:62px}
.stopd .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.stopd .row2 small{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#7a7f78}
.beds{display:flex;gap:14px;align-items:center;border-radius:10px;padding:6px 8px;transition:background .3s}
.beds .big{font-family:var(--f-display);font-size:54px;line-height:1;color:#2b8a4f}
.beds b{display:block;font-size:14px}
.beds small{font-size:11.5px;color:#5d655f;line-height:1.35;display:block}
/* side panel */
.ctx{position:absolute;right:0;top:16px;bottom:0;width:290px;background:var(--a-panel);border:1px solid var(--a-line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;transform:translateX(110%);transition:transform .45s cubic-bezier(.65,.02,.25,1);box-shadow:-18px 0 40px rgba(0,0,0,.45)}
.ctx.open{transform:none}
.ctabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--a-bg);border-radius:9px;padding:3px}
.ctabs button{font-size:12px;padding:7px 2px;border-radius:7px;color:var(--a-muted)}
.ctabs button.on{background:var(--a-card-2);color:#fff}
.cpane{display:flex;flex-direction:column;gap:8px}
.ci{border:1px solid var(--a-line);border-radius:10px;padding:10px 12px;position:relative}
.ci b{display:block;font-size:13.5px;padding-right:40px}
.ci small{color:var(--a-muted);font-size:12px}
.ci.dim{opacity:.55}
.ci .live{position:absolute;right:10px;top:10px;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--a-mint)}
.app.light .canvas{box-shadow:0 0 0 1px #d8d4c4}

.cpane[hidden],[hidden]{display:none!important}

/* ---- Tool page (Tour 3) ---- */
.main{position:relative}
.app:not([data-view="tool"]):not([data-view="compare"]) .tool{display:none}
.app[data-view="tool"] .scroll,.app[data-view="compare"] .scroll{display:none}
.app:not([data-view="compare"]) .cmp{display:none}
.tool{flex:1;display:flex;flex-direction:column;min-height:0;padding:0 26px 20px}
.tbar{border-bottom:1px solid var(--a-line);padding-bottom:12px}
.trail{display:flex;gap:6px;background:var(--a-panel);border:1px solid var(--a-line);border-radius:12px;padding:5px;width:max-content}
.trail button{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--a-muted);padding:9px 16px;border-radius:8px}
.trail button.on{background:#12301e;color:var(--a-mint)}
.trail button:hover{color:#fff}
.tgrid{flex:1;display:grid;grid-template-columns:1fr 360px;gap:18px;min-height:0;padding-top:14px}
.tscroll{position:relative;overflow-y:auto;min-height:0;padding-right:8px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#2a332d transparent;display:flex;flex-direction:column;gap:16px}
.thd .teb{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--a-muted);display:flex;gap:12px;align-items:center}
.thd .gt{font-size:11px;letter-spacing:.06em;border:1px solid var(--a-line);border-radius:999px;padding:3px 10px;color:#cfd5cd;text-transform:none}
.thd h2{font-family:var(--f-display);font-weight:400;font-size:58px;line-height:.95;margin:6px 0 6px}
.thd p{margin:0 0 12px;color:#cfd5cd;font-size:15px;line-height:1.5;max-width:62ch}
.tasks{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--a-gold-line);background:var(--a-gold-bg);border-radius:12px;padding:8px 16px 8px 8px}
.tasks .tn{width:40px;height:40px;border-radius:10px;background:var(--a-gold);color:#1b1407;display:grid;place-items:center;font-family:var(--f-display);font-size:28px}
.tasks b{display:block;font-size:14px;color:var(--a-gold)}
.tasks small{color:var(--a-muted);font-size:12.5px}
.tsec{background:var(--a-card);border:1px solid var(--a-line);border-radius:14px;padding:16px 18px}
.tsec .sn{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--a-mint);font-weight:600;display:flex;gap:10px;align-items:center}
.tsec h3{font-family:var(--f-display);font-weight:400;font-size:28px;margin:4px 0 10px;letter-spacing:.02em}
.aw{font-size:11px;letter-spacing:.08em;color:var(--a-gold);border:1px solid var(--a-gold-line);border-radius:999px;padding:2px 9px}
.tl{margin:0 0 10px;color:var(--a-muted);font-size:13.5px}
.res{display:flex;flex-wrap:wrap;gap:8px}
.rs{font-size:13px;border:1px solid var(--a-line);border-radius:9px;padding:7px 11px;display:flex;flex-direction:column}
.rs small{font-size:11px;color:var(--a-muted)}
.rs.need small{color:var(--a-gold)}
.rs.got{border-color:#2b6a43}.rs.got small{color:var(--a-mint)}
.flt{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.flt span{font-size:12.5px;border:1px solid var(--a-line);border-radius:999px;padding:5px 12px;color:#cfd5cd}
.flt span.on{border-color:var(--a-mint);color:var(--a-mint)}
.flt .smp{margin-left:auto;border-color:var(--a-gold-line);color:var(--a-gold)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tile{border:1px solid var(--a-line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:4px;background:var(--a-panel);position:relative;overflow:hidden}
.tile b{font-size:13px;line-height:1.3;min-height:34px}
.tile .v{font-size:14px;color:var(--a-dim);font-style:italic}
.tile.f .v{font-family:var(--f-display);font-size:34px;color:#fff;font-style:normal;line-height:1}
.tile small{font-size:11.5px;color:var(--a-muted)}
.tile .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--a-mint);transition:width .8s}
.tile.f .bar{width:100%}
.tact{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.tb{font-size:13.5px;border:1px solid var(--a-line);border-radius:999px;padding:8px 15px;color:#cfd5cd}
.tb.pri{background:var(--a-green);border-color:var(--a-green);color:#fff;font-weight:600}
.cnt{font-size:13px;color:var(--a-muted)}
.sus{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.su{text-align:left;border:1px solid var(--a-line);border-radius:10px;padding:11px 12px;display:flex;flex-direction:column;gap:5px;background:var(--a-panel);transition:border-color .2s,background .2s}
.su b{font-size:13.5px}
.su small{font-size:12px;color:var(--a-muted);line-height:1.35;flex:1}
.su .mk{font-size:11.5px;color:var(--a-muted);border:1px dashed var(--a-line);border-radius:999px;padding:3px 9px;align-self:flex-start}
.su.on{border-color:var(--a-gold)}
.su.on .mk{background:var(--a-gold);color:#1b1407;border-style:solid;border-color:var(--a-gold)}
.su .ts{font-size:11.5px;color:var(--a-mint)}
.fix{display:grid;grid-template-columns:1fr 150px;gap:14px;border:1px solid #2b6a43;background:#0f2017;border-radius:12px;padding:14px 16px;margin-bottom:10px}
.fix b{font-size:16px}
.fix p{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:#cfd5cd}
.hrs{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;border-left:1px solid #2b6a43;padding-left:14px}
.hrs span{font-family:var(--f-display);font-size:42px;line-height:1;color:var(--a-mint)}
.hrs small{font-size:12px;color:var(--a-muted)}
.case{margin-top:12px;border:1px solid var(--a-gold-line);background:var(--a-gold-bg);border-radius:12px;padding:12px 14px}
.ceb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--a-gold);font-weight:600}
.cq{display:flex;align-items:center;gap:10px;margin:8px 0 6px;flex-wrap:wrap}
.cq span{display:flex;flex-direction:column;max-width:150px}
.cq b{font-family:var(--f-display);font-size:34px;line-height:1;color:#fff}
.cq small{font-size:11px;color:var(--a-muted);line-height:1.3}
.cq .op{font-size:22px;color:var(--a-gold)}
.cq .res2 b{color:var(--a-gold)}
.cf{font-size:12px;color:var(--a-muted)}
.ags{display:flex;flex-direction:column;gap:8px}
.ag{display:flex;align-items:center;gap:14px;border:1px solid var(--a-line);border-radius:10px;padding:10px 12px;background:var(--a-panel)}
.ag span{flex:1}
.ag b{display:block;font-size:14px}
.ag small{font-size:12.5px;color:var(--a-muted)}
.ag button{font-size:13px;border:1px solid var(--a-mint);color:var(--a-mint);border-radius:999px;padding:6px 13px;white-space:nowrap}
.ag button.in{background:var(--a-mint);color:#08200f;font-weight:600}
.ppl{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.ppl span{border:1px solid var(--a-line);border-radius:10px;padding:10px;background:var(--a-panel)}
.ppl b{display:block;font-size:13.5px}
.ppl small{font-size:12px;color:var(--a-muted);line-height:1.35}
/* tool chat */
.tchatp{background:var(--a-panel);border:1px solid var(--a-line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;overflow:hidden;min-height:0}
.tch{display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--a-line);padding-bottom:10px}
.tch b{display:block;font-size:15px}.tch small{font-size:12px;color:var(--a-muted);line-height:1.3;display:block}
.tday{font-size:11px;letter-spacing:.16em;color:var(--a-muted);text-align:center}
.tchatp p{margin:0;font-size:14px;line-height:1.5;color:#dfe3dd}
.files{display:flex;flex-direction:column;gap:6px}
.fr{display:flex;align-items:center;gap:8px;border:1px solid var(--a-line);border-radius:9px;padding:7px 9px;font-size:13px}
.fr span{flex:1}
.fr button{font-size:12px;border:1px solid var(--a-line);border-radius:999px;padding:4px 11px;color:#cfd5cd}
.fr.got{border-color:#2b6a43}.fr.got button{background:var(--a-mint);color:#08200f;border-color:var(--a-mint);font-weight:600}
.drop{font-size:12px;color:var(--a-muted);text-align:center}
.tchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.tchips>*{font-size:12.5px;border:1px solid var(--a-line);border-radius:999px;padding:6px 11px;color:#cfd5cd}
.tchips button{border-color:var(--a-mint);color:var(--a-mint)}
.treply{font-size:13.5px;line-height:1.5;background:var(--a-card-2);border-radius:10px;padding:10px 12px}
/* ---- the comparison scene ---- */
.cmp{position:absolute;inset:0;z-index:3;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;gap:0;background:#000}
.cg{background:#E9EAEE;color:#24262B;font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;padding:20px 22px;display:flex;flex-direction:column;gap:12px;min-height:0}
.ct{background:#10241a;color:#F3F1EA;padding:20px 22px;display:flex;flex-direction:column;gap:12px;min-height:0}
.ch b{font-family:var(--f-display);font-weight:400;font-size:34px;letter-spacing:.03em;line-height:1}
.ch small{font-size:13px;margin-left:10px;opacity:.7}
.cqb{background:#DDE0E6;border-radius:14px;padding:10px 14px;font-size:14.5px;line-height:1.4}
.ct .cqb{background:#183528}
.cqb small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.65}
.gwin{flex:1;min-height:0;overflow:hidden;background:#fff;border:1px solid #D4D6DC;border-radius:12px;padding:14px 18px;font-size:12.5px;line-height:1.5;position:relative}
.gwin p,.gwin ul,.gwin h4,.gwin h5{margin:0 0 8px}
.gwin h4{font-size:13.5px}.gwin h5{font-size:12.5px}
.gwin ul{padding-left:18px}
.gwin>*{transition:opacity .3s}
.gwin .off{display:none}
.gm{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gm span{background:#fff;border:1px solid #D4D6DC;border-radius:10px;padding:8px 10px}
.gm b{display:block;font-family:var(--f-display);font-weight:400;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.gm small{font-size:11.5px;color:#5E636D;font-weight:600}
.gflags{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.gflags li{background:#fff;border-left:5px solid #8E2F1C;border-radius:6px;padding:7px 10px;font-size:13px;font-weight:600;transition:opacity .4s,transform .4s}
.gflags li::before{content:"✕  ";color:#8E2F1C}
.gflags li.off{opacity:0;transform:translateX(16px)}
.rd{display:flex;flex-direction:column;gap:6px}
.rdh{font-family:var(--f-display);font-size:24px;letter-spacing:.03em;color:#d4a94f}
.rdh small{font-family:var(--f-body);font-size:12px;color:#C9CFC6;margin-left:8px;letter-spacing:0}
.rd>span{display:block;border-left:3px solid #d4a94f;background:#183528;border-radius:4px;padding:5px 10px;transition:opacity .35s,transform .35s}
.rd>span b{display:block;font-size:12.5px}
.rd>span small{font-size:12px;color:#C9CFC6}
.rd>span.off,.zero.off,.ans.off,.wis.off{opacity:0;transform:translateY(6px)}
.zero{font-size:13px;color:#C9CFC6;transition:opacity .35s}
.zero b{font-family:var(--f-display);font-size:30px;color:#d4a94f;margin-right:6px;vertical-align:-4px}
.ans{background:#F7F9F5;color:#10241a;border-radius:12px;padding:12px 16px;display:flex;flex-direction:column;gap:8px;transition:opacity .4s,transform .4s}
.ans p{margin:0;font-size:13.5px;line-height:1.5}
.ans .av1{font-size:16px;font-weight:600}
.ans .av1 span{color:#2f7350}
.mini{display:flex;flex-direction:column;gap:10px}
.ml{position:relative;display:block;height:26px;margin-left:96px}
.ml small{position:absolute;left:-96px;top:4px;font-size:11.5px;font-weight:600;width:90px}
.ml::before{content:"";position:absolute;left:0;right:0;top:12px;height:3px;background:#2a2f2b}
.ml.tj::before{background:#2f7350}
.ml i{position:absolute;top:6px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#F7F9F5;border:3px solid #2a2f2b}
.ml.tj i{border-color:#2f7350}
.ml em{position:absolute;top:0;width:2px;height:26px;background:#b0413e}
.gm.tm{grid-template-columns:repeat(3,1fr)}
.gm.tm span{background:#fff;border-color:#d8dcd4}
.wis{grid-column:1/-1;background:#d4a94f;color:#1d1606;text-align:center;font-family:var(--f-display);font-size:30px;letter-spacing:.03em;padding:10px;transition:opacity .4s,transform .4s}
/* ---- Sanjay's three levels (Tour 4) ---- */
.app:not([data-view="levels"]) .lvv{display:none}
.lvv{position:absolute;inset:0;z-index:3;background:var(--a-bg);padding:22px 26px;display:flex;flex-direction:column;gap:16px}
.lvh{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.lveb{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--a-muted)}
.lvq{margin-top:8px;background:var(--a-card-2);border:1px solid var(--a-line);border-radius:14px;padding:12px 16px;font-size:17px;max-width:640px}
.lvseg{display:flex;background:var(--a-panel);border:1px solid var(--a-line);border-radius:999px;padding:4px}
.lvseg button{font-size:15px;font-weight:600;padding:9px 20px;border-radius:999px;color:var(--a-muted)}
.lvseg button.on{background:var(--a-green);color:#fff}
.lvcols{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;min-height:0}
.lvc{background:var(--a-card);border:1px solid var(--a-line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:12px;opacity:.35;transition:opacity .35s,border-color .35s,transform .35s}
.lvc.on{opacity:1;border-color:var(--a-mint);transform:translateY(-4px)}
.lvc.seen{opacity:.75}
.lvt b{display:block;font-family:var(--f-display);font-weight:400;font-size:40px;line-height:1;letter-spacing:.02em}
.lvt i{font-family:var(--f-hand);font-style:normal;font-size:24px;color:var(--a-gold)}
.lvi{margin:0;padding-left:18px;font-size:13.5px;color:var(--a-muted);display:flex;flex-direction:column;gap:3px}
.lva{border-top:1px solid var(--a-line);padding-top:12px;display:flex;flex-direction:column;gap:10px}
.lvk{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--a-mint);font-weight:600}
.lvv1{margin:0;font-size:19px;font-weight:600}
.lvfig{background:var(--a-panel);border:1px solid var(--a-line);border-radius:10px;padding:10px 12px}
.lvfig b{display:block;font-family:var(--f-display);font-weight:400;font-size:38px;line-height:1;color:var(--a-gold)}
.lvfig small{font-size:12px;color:var(--a-muted)}
.lva ol{margin:0;padding-left:18px;font-size:13.5px;line-height:1.45;display:flex;flex-direction:column;gap:4px;color:#dfe3dd}
.lva ol b{color:#fff}
.lvn{margin:0;font-size:13px;color:#cfd5cd}
.lvmini{display:flex;flex-direction:column;gap:8px;background:#ECEADF;border-radius:10px;padding:10px 12px}
.ml2{position:relative;display:block;height:22px;margin-left:70px}
.ml2 small{position:absolute;left:-70px;top:3px;font-size:11px;font-weight:600;color:#1f2420}
.ml2::before{content:"";position:absolute;left:0;right:0;top:10px;height:3px;background:#2a2f2b}
.ml2.tj::before{background:#2b8a4f}
.ml2 i{position:absolute;top:4px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#ECEADF;border:3px solid #2a2f2b}
.ml2.tj i{border-color:#2b8a4f}
.ml2 em{position:absolute;top:0;width:2px;height:22px;background:#b0413e}
.lvkpi{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.lvkpi span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--a-muted);margin-right:4px}
.lvkpi b{font-size:12px;font-weight:600;border:1px solid var(--a-mint);color:var(--a-mint);border-radius:999px;padding:3px 9px}
.crpop{position:absolute;right:120px;top:66px;width:300px;background:var(--a-panel);border:1px solid var(--a-gold-line);border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.5;color:#dfe3dd;box-shadow:0 14px 30px rgba(0,0,0,.45);z-index:5}
.crpop b{color:var(--a-gold)}
.top{position:relative}

.sub a.cur{color:#fff;background:#12301e;border-radius:0 8px 8px 0}

.tchat{position:relative}


/* ============================================================
   THE SITE SHELL — burger, overlay menu, right-hand drawer
   ------------------------------------------------------------
   Lifted from style.css rather than loading that whole sheet.
   Loading it was tried first and measured: the page renders
   differently with it in — the picker's heading loses Bebas to a
   global h2 rule, the tour cards lose their shadows and the
   column shifts six pixels. So only the shell's own rules come
   across, about ten kilobytes of them, and the tour's styles are
   left alone.

   THE COST OF THAT CHOICE: these rules are now a copy. If the
   burger or the drawer is restyled in style.css, this block does
   not follow and has to be brought over again.

   The bridge below is why they work out of context. They were
   written against style.css's tokens, and this page's :root
   declares its own --cream and --gold at different values, so
   the tokens are set on the shell's own roots instead of on
   :root — the drawer gets the site's palette and nothing leaks
   into the tour.
   ============================================================ */
#menu,#sidePane,#sideTab,.bar .burger{
  --ink:#1e3727;
  --cream:#f6f2e9;
  --grid:#c7a45d;
  --gold-dim:rgba(199,164,93,.35);
  --nav-h:72px;
  --font-display:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-mono:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

.side-tab{
  position:fixed;right:0;top:15px;z-index:860;
  width:34px;height:56px;padding:0;cursor:pointer;
  border:1px solid rgba(199,164,93,.30);border-right:0;
  border-radius:8px 0 0 8px;
  background:rgba(17,28,21,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:flex;align-items:center;justify-content:center;
  /* parked fully off-stage until it is wanted */
  transform:translateX(110%);opacity:0;pointer-events:none;
  transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .4s;
}
.side-tab.show{transform:translateX(0);opacity:1;pointer-events:auto;}
/* the chevron itself — two borders turned 45°. It was missed when the
   shell was first brought over, because its selector names neither the
   tab nor the pane, and the tab rendered as an empty box. */
.st-arrow{
  display:block;width:8px;height:8px;margin-left:3px;
  border-left:1.5px solid rgba(246,242,233,.85);
  border-bottom:1.5px solid rgba(246,242,233,.85);
  transform:rotate(45deg);
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
/* and the small-caps face the two drawer footers are set in, missed for
   the same reason */
#menu .mono,#sidePane .mono{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.14em;font-weight:600;}
.side-tab:hover .st-arrow{transform:rotate(45deg) translate(-2px,2px);}
.side-pane{
  position:fixed;inset:0;z-index:870;
  background:rgba(17,28,21,.6);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;
  transition:opacity .5s cubic-bezier(.77,0,.18,1),visibility 0s linear .5s;
}
.side-pane.open{opacity:1;visibility:visible;transition:opacity .5s cubic-bezier(.77,0,.18,1);}
.sd-inner{
  position:absolute;right:0;top:0;bottom:0;
  width:min(320px,82vw);
  background:linear-gradient(180deg,rgba(30,55,39,.98),rgba(18,32,24,.99));
  border-left:1px solid rgba(199,164,93,.28);
  box-shadow:-30px 0 80px rgba(0,0,0,.4);
  padding:24px 26px 22px;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.side-pane.open .sd-inner{transform:translateX(0);}
.sd-top{display:flex;align-items:center;justify-content:space-between;}
.sd-logo{
  font-family:var(--font-display);font-weight:600;font-size:17px;
  letter-spacing:.3em;text-indent:.3em;color:#f6f2e9;
}
.sd-close{
  background:none;border:0;cursor:pointer;width:22px;height:22px;
  position:relative;padding:0;
}
.sd-close span{
  position:absolute;left:0;top:50%;width:100%;height:1.5px;background:#f6f2e9;
}
.sd-close span:nth-child(1){transform:rotate(45deg);}
.sd-close span:nth-child(2){transform:rotate(-45deg);}
.side-pane ul{list-style:none;margin:34px 0 0;padding:0;flex:1 1 auto;}
.side-pane li{
  border-bottom:1px solid rgba(246,242,233,.12);
  /* the resting state IS the arrived state, so a drawer that opens with
     transitions disabled still reads correctly */
  opacity:1;transform:none;
}
.side-pane.open .sd-nav li{
  animation:mnRise .45s cubic-bezier(.17,.87,.28,1) both;
  animation-delay:calc(.08s + var(--n) * .10s);
}
.side-pane a{
  display:block;padding:15px 0;
  font-family:var(--font-display);font-weight:400;font-size:19px;
  letter-spacing:.02em;color:#f6f2e9;transition:color .35s,padding-left .35s;
}
.side-pane a:hover{color:var(--gold, #c7a45d);padding-left:6px;}
.sd-foot{
  padding-top:18px;font-size:9.5px;letter-spacing:.12em;
  color:rgba(246,242,233,.45);
}
#nav.solid .burger span{color:var(--ink);}
#nav.solid .burger span{background:var(--ink);}
.burger{background:none;border:0;cursor:pointer;width:34px;display:flex;flex-direction:column;gap:7px;justify-self:start;padding:6px 0;}
.burger span{display:block;height:2px;width:100%;background:var(--ink);transition:transform .4s cubic-bezier(.77,0,.18,1),opacity .3s,background .5s;}
.burger.open span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.burger.open span:nth-child(2){transform:translateY(-0px) rotate(-45deg);}
#menu{
  position:fixed;inset:0;z-index:850;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(17,28,21,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;
  transition:opacity .5s cubic-bezier(.77,0,.18,1),visibility 0s linear .5s;
}
#menu.open{opacity:1;visibility:visible;transition:opacity .5s cubic-bezier(.77,0,.18,1);}
.menu-card{
  width:min(420px,100%);max-height:calc(100vh - 48px);overflow-y:auto;
  /* THE TRACK IS THE PANEL, NOT THE PAGE.
     ::-webkit-scrollbar-track up at the top of this file paints every track
     in --bg — correct for the document, wrong inside a dark green card,
     where it drew a cream stripe down the right-hand edge. The card states
     its own, and the rules below do the same for WebKit. Only ever seen on
     a short screen now that the list itself is tighter. */
  scrollbar-width:thin;
  scrollbar-color:rgba(199,164,93,.45) transparent;
  background:linear-gradient(180deg,rgba(30,55,39,.98),rgba(18,32,24,.99));
  border:1px solid rgba(199,164,93,.28);border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.4);
  padding:24px 26px 22px;
  transform:translateY(18px) scale(.97);opacity:0;
  transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s;
}
#menu.open .menu-card{transform:translateY(0) scale(1);opacity:1;transition-delay:.08s;}
html[data-genie] .menu-card,html[data-genie] .sd-inner{transition:none;}
the blur is a refinement on an
   already obscured page and is not missed for a third of a second.

   Toggled as an attribute on the root and matched here,NOT written to
   element.style from the script: both end at the same computed value,but
   measured over three runs each,the inline write still cost 16 dropped
   frames and this costs none. */
html[data-genie-moving] #menu,html[data-genie-moving] .side-pane{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.menu-card::-webkit-scrollbar{width:6px;}
.menu-card::-webkit-scrollbar-track{background:transparent;}
.menu-card::-webkit-scrollbar-thumb{background:rgba(199,164,93,.45);border-radius:6px;}
.menu-card::-webkit-scrollbar-thumb:hover{background:rgba(199,164,93,.7);}
.menu-top{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:14px;border-bottom:1px solid rgba(199,164,93,.18);
}
.menu-close{
  background:none;border:0;cursor:pointer;width:20px;height:20px;
  position:relative;flex:none;
}
.menu-close span{
  position:absolute;left:0;top:50%;width:100%;height:1.5px;background:var(--cream);
  transform-origin:center;
}
.menu-close span:nth-child(1){transform:translateY(-50%) rotate(45deg);}
.menu-close span:nth-child(2){transform:translateY(-50%) rotate(-45deg);}
.menu-logo{
  font-family:var(--font-display);font-weight:600;font-size:15px;
  letter-spacing:.3em;text-indent:.3em;color:var(--cream);
}
.menu-tag{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grid);display:flex;align-items:center;gap:6px;flex:none;font-weight:600;}
.menu-tag em{font-style:normal;}
#menu ul{list-style:none;padding:3px 0 2px;}
#menu li{border-bottom:1px solid rgba(199,164,93,.12);}
#menu li:last-child{border-bottom:0;}
#menu a{
  display:block;padding:8px 2px;text-align:center;
  font-family:var(--font-display);font-weight:300;font-style:italic;
  font-size:1.5rem;color:var(--cream);transition:color .3s;
}
#menu a:hover{color:var(--grid);}
#menu .menu-foot{text-align:center;padding-top:14px;color:rgba(246,242,233,.45);font-size:10.5px;}
#menu .menu-nav a{
  /* the letters need a line to sit on and a box to be centred in, and the
     block cannot be inline or the per-letter transforms would reflow it */
  display:block;white-space:nowrap;
}
#menu .menu-nav a i{
  display:inline-block;font-style:italic;
  /* the resting state IS the arrived state: if the overlay never animates —
     reduced motion, or a browser that drops the transition — the words are
     simply there rather than stuck at zero */
  opacity:1;transform:none;
}
#menu .menu-nav a i.sp{white-space:pre;}
#menu.open .menu-nav a{
  animation:mnRise .45s cubic-bezier(.17,.87,.28,1) both;
  animation-delay:calc(.08s + var(--n) * .10s);
}
#menu .menu-nav a:hover i,#menu .menu-nav a:focus-visible i{
  animation:ftWave 1.5s cubic-bezier(.33,0,.2,1) both;
  animation-delay:calc(var(--r) * .042s);
}
#menu .menu-meta{
  display:flex;justify-content:space-between;gap:18px;
  padding:15px 2px 4px;margin-top:4px;
  border-top:1px solid rgba(199,164,93,.14);
}
#menu .menu-blk{display:flex;flex-direction:column;gap:5px;min-width:0;}
#menu .menu-lbl{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(246,242,233,.42);margin-bottom:2px;font-weight:600;}
#menu .menu-meta a{
  display:inline-block;padding:0;text-align:left;
  font-family:'Poppins',var(--font-display);font-weight:300;font-style:normal;
  font-size:12px;line-height:1.5;color:rgba(246,242,233,.82);
  text-decoration:none;transition:color .25s ease;
}
#menu .menu-meta a:hover{color:var(--grid);}
#menu .menu-soc{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;}
@media (max-width:980px){
#menu .menu-meta{flex-direction:column;gap:14px;padding-top:16px;}
#menu .menu-meta a{font-size:11.5px;}
#menu .menu-soc{gap:2px 10px;}
}
@media (prefers-reduced-motion:reduce){
#menu.open .menu-nav a i,#menu .menu-nav a:hover i{animation:none;opacity:1;transform:none;}
}
.side-pane .sd-nav a{display:block;white-space:nowrap;}
.side-pane .sd-nav a i{display:inline-block;font-style:normal;}
.side-pane .sd-nav a i.sp{white-space:pre;}
.side-pane .sd-nav a:hover i,.side-pane .sd-nav a:focus-visible i{
  animation:ftWave 1.5s cubic-bezier(.33,0,.2,1) both;
  animation-delay:calc(var(--r) * .042s);
}
.side-pane .sd-meta{
  padding:16px 0 4px;margin-top:6px;
  border-top:1px solid rgba(246,242,233,.14);
  display:flex;flex-direction:column;gap:14px;
}
.side-pane .sd-lbl{
  display:block;margin-bottom:5px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(246,242,233,.42);font-weight:600;}
.side-pane .sd-meta a{
  display:block;padding:0;
  font-family:'Poppins',var(--font-display);font-weight:300;
  font-size:11.5px;line-height:1.65;letter-spacing:0;
  color:rgba(246,242,233,.82);text-transform:none;
}
.side-pane .sd-meta a:hover{color:var(--grid);padding-left:0;}
.side-pane .sd-soc{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;}
@media (prefers-reduced-motion:reduce){
.side-pane.open .sd-nav li{animation:none;}
.side-pane .sd-nav a:hover i{animation:none;}
}

/* ---------- the bar, and the burger in it ----------
   The burger came from a light bar and its two strokes were ink;
   on this one they are the cream everything else here is set in. */
/* TWO CENTRED ROWS, WITH ONE CONTROL PINNED TO THE END.
   The site's own bar — burger, wordmark, tagline — sits on its own
   line above the page's title, both centred on the bar rather than
   on whatever happens to be beside them. "All tours" belongs to the
   page rather than to the site, so it stays at the right-hand end;
   being absolutely positioned, it is out of the flow and cannot pull
   either row off centre.

   The symmetric padding is what keeps the title clear of that button.
   A three-column grid was tried first and is not enough: the middle
   track takes its content width before the two 1fr tracks divide what
   is left, so once the title is wide the tracks fall back to their own
   content widths, which are not equal — the group sat 53px off, half
   the difference between them. */
.bar{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  gap:10px;
  padding-inline:180px;
}
.bar .bar-nav{
  display:flex;align-items:center;gap:18px;
}
.bar .bar-end{position:absolute;right:0;bottom:12px;}
.bar .bar-mid{
  display:flex;align-items:baseline;justify-content:center;
  flex-wrap:wrap;gap:6px 14px;
  text-align:center;
}
.bar .bar-mid .sub{flex:0 1 auto;}
.bar .burger span{background:var(--cream);}
.bar .burger:hover span{background:var(--gold);}

/* The shell already clears the tour: the tour's own stack tops out at
   8 and the drawer sits at 850-870, so the way out of the page stays
   reachable while a tour is running. Nothing to raise here. */

@media (max-width:900px){
  /* not enough width to hold the title clear of the button: it comes
     back into the flow and takes a line of its own under the title */
  .bar{padding-inline:0;}
  .bar .bar-end{position:static;}
}


/* ---------- the wordmark and the tagline ---------- */
.bar .wordmark{
  font-family:var(--f-display);
  font-size:26px;line-height:1;letter-spacing:.14em;
  color:var(--cream);text-decoration:none;
  transition:color .2s ease;
}
.bar .wordmark:hover{color:var(--gold);}

/* ---------- the page's own scroll gutter ----------
   color-scheme:dark already asks the browser for a dark bar, but the one
   it draws is the system's near-black, not this page's, so the gutter read
   as a seam down the right-hand edge. The track is set to the page's own
   ground instead, and the thumb to the cream everything here is written in.

   scrollbar-color does both engines in one property: its first value is
   the thumb and its second the track. */
html{scrollbar-color:rgba(243,241,234,.26) var(--page);}
/* the same pair for a Chrome too old for scrollbar-color. The two never
   both apply: Chrome ignores these pseudo-elements on any element that
   has scrollbar-color set. */
html::-webkit-scrollbar{width:14px;height:14px;background:var(--page);}
html::-webkit-scrollbar-track{background:var(--page);}
html::-webkit-scrollbar-thumb{background:rgba(243,241,234,.26);border-radius:10px;border:3px solid var(--page);background-clip:padding-box;}
html::-webkit-scrollbar-thumb:hover{background:rgba(243,241,234,.42);background-clip:padding-box;}
html::-webkit-scrollbar-corner{background:var(--page);}

/* the tagline, at the size and tracking the products page sets it in,
   recoloured for a dark bar */
.bar .nav-tag{
  font-family:var(--font-mono,'Poppins',sans-serif);
  font-size:12px;letter-spacing:.18em;font-weight:600;
  color:var(--cream-dim);text-decoration:none;
  transition:color .3s ease;
}
.bar .nav-tag:hover{color:var(--gold);}
.bar .nav-tag{--font-mono:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;}

/* ---------- the drawers inherit a line height, as they do on products ----------
   Everything else in the shell measured identical to the products page —
   same 24px Poppins, same card width, same padding — but the rows came out
   three pixels shorter. The rules were written under style.css, whose body
   sets line-height:1.6; this page's body sets none, so the links fell back
   to "normal". Stated here rather than on body, which belongs to the tour. */
#menu,#sidePane{line-height:1.6;}

/* style.css carries a global a{text-decoration:none} that this page does
   not, so every link inside the two ported drawers kept the browser's
   default underline — most visibly on the SOLUTIONS tag in the header,
   which the products page draws plain. Scoped to the drawers rather than
   set globally: the tour's own links are not ours to restyle. */
#menu a,#sidePane a{color:inherit;text-decoration:none;}