/* ==========================================================================
   SKANGEN.AI — Real Estate AI portfolio (loads after shell.css + site.css)
   Agent identity → switcher → hero → workspace screens → sections → responsive
   ========================================================================== */

/* ---------- Agent identity ---------- */
.re-page,.re-page[data-agent="sales"],.pal-sales{
  --ag:#809cff; --ag-soft:#c7d4ff; --ag-ink:#2c3f7a; --ag-tint:#1c2747; --ag-paper:#f4f6fc; --ag-glow:rgba(128,156,255,.34);
}
.re-page[data-agent="crm"],.pal-crm{
  --ag:#70bfa7; --ag-soft:#b9e5d4; --ag-ink:#24504a; --ag-tint:#1a302c; --ag-paper:#f2f7f5; --ag-glow:rgba(112,191,167,.3);
}
.re-page[data-agent="purchase"],.pal-purchase{
  --ag:#d79b7a; --ag-soft:#f0cdb6; --ag-ink:#6b4535; --ag-tint:#342720; --ag-paper:#faf6f2; --ag-glow:rgba(215,155,122,.3);
}
.re-page .s-dark{ --agc:var(--ag-soft); }
.re-page .s-light{ --agc:var(--ag-ink); }
.agc{ color:var(--agc); }
.re-page .label::before{ background:var(--ag); transition:background .5s var(--ease); }
.re-page .label{ color:var(--agc); }
.re-page main{ padding-top:var(--nav-h); }
/* jump links land just below the fixed header + sticky agent bar */
.re-page main section[id]{ scroll-margin-top:max(0px, calc(var(--nav-h) + 80px - var(--sec-y) + 1rem)); }
.re-page .sec-head .h2 .serif{ display:inline; }

/* ---------- Agent switcher ---------- */
.ag-switch{ position:sticky; top:var(--nav-h); z-index:60; background:rgba(10,11,15,.84); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); border-block:1px solid rgba(255,255,255,.08); }
.ag-switch .wrap{ display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem); min-height:72px; padding-block:.6rem; }
.ag-switch-label{ display:grid; gap:.15rem; flex:none; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.ag-switch-label small{ font-family:var(--f-body); font-size:.85rem; letter-spacing:0; text-transform:none; color:#f5f5f0; }
.ag-seg{ position:relative; flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; border-radius:var(--r-pill); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); }
.ag-ind{ position:absolute; top:4px; bottom:4px; left:0; width:0; border-radius:var(--r-pill); background:var(--ag-soft); box-shadow:0 8px 24px var(--ag-glow); transition:transform .55s var(--ease), width .55s var(--ease), background .45s var(--ease); pointer-events:none; }
.ag-seg:not(.has-ind) [aria-checked="true"]{ background:var(--ag-soft); }
.ag-seg button{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:.7rem; min-height:48px; padding:.45rem 1rem; border-radius:var(--r-pill); color:#c9ccd4; text-align:left; transition:color .35s var(--ease); }
.ag-seg button:hover{ color:#fff; }
.ag-seg button[aria-checked="true"]{ color:var(--ink); }
.ag-seg button:focus-visible{ outline:2px solid var(--lime); outline-offset:3px; }
.ag-ic{ width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center; background:color-mix(in srgb,var(--ag) 22%,transparent); color:var(--ag-soft); transition:background .35s, color .35s; }
.ag-ic svg{ width:17px; height:17px; }
.ag-seg button[aria-checked="true"] .ag-ic{ background:var(--ag-ink); color:#fff; }
.ag-txt b{ display:block; font-family:var(--f-display); font-weight:600; font-size:.95rem; letter-spacing:-.02em; line-height:1.15; }
.ag-txt small{ display:block; font-size:.74rem; opacity:.72; line-height:1.3; }

/* ---------- Hero ---------- */
.re-hero{ position:relative; overflow:hidden; isolation:isolate; padding:clamp(3rem,7vw,6rem) 0 clamp(4rem,8vw,7rem); }
.re-hero::before{ content:""; position:absolute; z-index:-1; width:70vmax; height:70vmax; right:-28vmax; top:-38vmax; border-radius:50%; background:radial-gradient(circle,var(--ag-glow),transparent 62%); filter:blur(40px); transition:background .6s var(--ease); pointer-events:none; }
.re-hero::after{ content:""; position:absolute; z-index:-1; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:72px 72px;
  mask-image:radial-gradient(ellipse 70% 60% at 70% 30%,#000 25%,transparent 100%); -webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 30%,#000 25%,transparent 100%); }
.re-hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(2rem,5vw,5rem); align-items:center; }
.re-hero h1{ font-size:clamp(2.8rem,6.2vw,5.6rem); font-weight:600; letter-spacing:-.045em; line-height:.98; margin:1.4rem 0 1.5rem; }
.re-hero h1 .serif{ display:block; color:var(--ag-soft); font-size:1.04em; transition:color .5s var(--ease); }
.re-hero .lead{ max-width:50ch; }
.proof{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem; }
.proof li{ display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .85rem; border-radius:var(--r-pill); border:1px solid var(--line-strong); color:#d6d8de; font-size:.82rem; }
.proof li::before{ content:""; width:14px; height:14px; flex:none; border-radius:50%; background:var(--ag-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0b0f' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/9px no-repeat; }

/* ---------- Workspace window ---------- */
.win{ margin:0; border-radius:var(--r-lg); overflow:hidden; border:1px solid color-mix(in srgb,var(--ag) 38%,transparent);
  background:radial-gradient(ellipse at 95% 0%,color-mix(in srgb,var(--ag) 18%,transparent),transparent 58%),linear-gradient(150deg,var(--ag-tint),#111318 68%);
  box-shadow:0 40px 100px rgba(0,0,0,.5),0 0 60px color-mix(in srgb,var(--ag) 10%,transparent); }
.win-bar{ display:flex; align-items:center; gap:.8rem; padding:.85rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.08); font-size:.84rem; }
.win-bar .dots{ display:inline-flex; gap:5px; }
.win-bar .dots i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.16); }
.win-bar b{ color:var(--ag-soft); font-weight:600; }
.win-bar span:last-child{ margin-left:auto; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.08em; color:var(--muted); text-align:right; }
.win-body{ padding:clamp(.7rem,1.6vw,1.1rem); }
.win-foot{ display:flex; justify-content:space-between; gap:1rem; padding:.2rem 1.1rem 1rem; font-size:.74rem; color:var(--muted); }

/* Light product screen inside the window */
.scr{ background:var(--ag-paper); color:#151821; border-radius:16px; overflow:hidden; font-size:.86rem; line-height:1.45; }
.scr-head{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.8rem 1rem; border-bottom:1px solid rgba(10,11,15,.07);
  background:linear-gradient(110deg,color-mix(in srgb,var(--ag) 16%,#fff),var(--ag-paper)); }
.scr-head b{ color:var(--ag-ink); font-weight:600; }
.scr-head span{ font-size:.72rem; color:#666b76; text-align:right; }
.chat{ display:grid; gap:.55rem; padding:1rem; }
.msg{ display:flex; align-items:flex-end; gap:.55rem; max-width:88%; }
.msg i{ flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-style:normal; font-size:.6rem; font-weight:700; background:var(--ag-ink); color:#fff; }
.msg p{ margin:0; padding:.6rem .8rem; border-radius:14px 14px 14px 4px; background:color-mix(in srgb,var(--ag) 17%,#fff); color:#1a1e28; }
.msg.me{ margin-left:auto; }
.msg.me p{ background:var(--ag-ink); color:#fff; border-radius:14px 14px 4px 14px; }
.facts{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin:0; padding:0 1rem 1rem; }
.facts div{ background:#fff; border:1px solid rgba(10,11,15,.07); border-radius:10px; padding:.55rem .75rem; }
.facts dt{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:#737884; }
.facts dd{ margin:.1rem 0 0; font-weight:600; font-size:.86rem; }
.done{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:0 1rem 1rem; padding:.7rem .9rem; border-radius:12px;
  background:color-mix(in srgb,var(--ag) 18%,#fff); border:1px solid color-mix(in srgb,var(--ag) 38%,transparent); color:var(--ag-ink); }
.done span{ display:inline-flex; align-items:center; gap:.55rem; font-weight:500; }
.done span::before{ content:"✓"; width:20px; height:20px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:.68rem; font-weight:700; background:var(--ag-ink); color:#fff; }
.done.wait span::before{ content:""; background:transparent; border:2px solid var(--ag-ink); border-top-color:transparent; animation:spin 1.4s linear infinite; }
.done b{ font-weight:600; text-align:right; }
.miles{ list-style:none; margin:0; padding:1rem 1rem .25rem; display:grid; gap:.5rem; }
.miles li{ display:grid; grid-template-columns:28px 1fr auto; column-gap:.7rem; row-gap:.45rem; align-items:center; background:#fff; border:1px solid rgba(10,11,15,.07); border-radius:12px; padding:.6rem .75rem; }
.miles .mi{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-size:.8rem; font-weight:700; background:color-mix(in srgb,var(--ag) 20%,#fff); color:var(--ag-ink); }
.miles b{ display:block; font-weight:600; font-size:.84rem; }
.miles small{ color:#666b76; font-size:.74rem; }
.miles em{ font-style:normal; font-family:var(--f-mono); font-size:.7rem; font-weight:600; color:var(--ag-ink); }
.miles .due .mi{ background:#fff0d4; color:#8a5200; }
.miles .due em{ color:#8a5200; }
.miles .next .mi{ background:#eef0f4; color:#5b606b; }
.miles .next em{ color:#5b606b; }
.miles .bar{ grid-column:2/4; height:4px; border-radius:4px; background:rgba(10,11,15,.08); overflow:hidden; }
.miles .bar i{ display:block; height:100%; width:var(--p); border-radius:inherit; background:var(--ag); transform-origin:left; animation:grow 1.2s var(--ease) both; animation-delay:calc(var(--d,0s) + .5s); }
.qt{ width:calc(100% - 2rem); margin:.85rem 1rem .4rem; border-collapse:separate; border-spacing:0 6px; font-size:.82rem; }
.qt thead th{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:#737884; font-weight:500; text-align:left; padding:0 .7rem; }
.qt tbody th,.qt tbody td{ background:#fff; padding:.6rem .7rem; text-align:left; border-block:1px solid rgba(10,11,15,.07); font-weight:400; }
.qt tbody th{ font-weight:600; border-left:1px solid rgba(10,11,15,.07); border-radius:10px 0 0 10px; }
.qt tbody td:last-child{ border-right:1px solid rgba(10,11,15,.07); border-radius:0 10px 10px 0; }
.qt tr.rec th,.qt tr.rec td{ background:color-mix(in srgb,var(--ag) 20%,#fff); border-color:color-mix(in srgb,var(--ag) 45%,transparent); color:var(--ag-ink); font-weight:600; }
.rec-note{ margin:0 1rem 1rem; padding:.8rem .95rem; border-radius:12px; background:var(--ag-ink); color:#e8ebf1; font-size:.8rem; line-height:1.5; }
.rec-note strong{ display:block; color:var(--ag-soft); margin-bottom:.2rem; }

/* staged entrance — replays every time a screen is rendered */
.scr .msg,.scr .facts>div,.scr .done,.scr .miles li,.scr .qt tbody tr,.scr .rec-note{ animation:pop .6s var(--ease) both; animation-delay:var(--d,0s); }
@keyframes pop{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes grow{ from{ transform:scaleX(0); } }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Outcomes band ---------- */
.re-outc{ border-block:1px solid var(--line); }
.outc{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); }
.outc li{ padding:2rem 1.5rem 1.5rem 0; border-right:1px solid var(--line); }
.outc li+li{ padding-left:1.5rem; }
.outc li:last-child{ border-right:0; }
.outc .oi{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; color:var(--agc); }
.outc b{ display:block; font-family:var(--f-display); font-size:clamp(1.1rem,1.6vw,1.35rem); font-weight:600; letter-spacing:-.03em; margin:.6rem 0 .35rem; line-height:1.15; }
.outc p{ color:var(--muted); font-size:.9rem; line-height:1.5; }
.outc-note{ padding:0 0 1.75rem; font-size:.8rem; color:var(--muted-2); font-family:var(--f-mono); letter-spacing:.02em; }

/* ---------- Lifecycle ---------- */
.life{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; position:relative; }
.life::before{ content:""; position:absolute; left:2rem; right:2rem; top:22px; height:1px; background:var(--line-strong); }
.lc{ position:relative; padding-top:3.4rem; }
.lc::before{ content:""; position:absolute; top:14px; left:2rem; width:17px; height:17px; border-radius:50%; background:var(--bg); border:2px solid var(--ag); transition:background .4s, box-shadow .4s; }
.lc[data-active]::before{ background:var(--ag); box-shadow:0 0 0 6px color-mix(in srgb,var(--ag) 22%,transparent); }
.lc-card{ height:100%; display:flex; flex-direction:column; gap:.85rem; padding:2rem; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); position:relative; overflow:hidden;
  transition:transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.lc-card::after{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--ag); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-2) var(--ease); }
.lc:hover .lc-card{ transform:translateY(-4px); box-shadow:var(--shadow-2); }
.lc[data-active] .lc-card{ border-color:color-mix(in srgb,var(--ag) 60%,transparent); box-shadow:0 24px 60px rgba(10,11,15,.1); }
.lc[data-active] .lc-card::after{ transform:scaleX(1); }
.lc-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.lc-ic{ width:52px; height:52px; border-radius:15px; display:grid; place-items:center; background:color-mix(in srgb,var(--ag) 22%,#fff); color:var(--ag-ink); transition:transform var(--dur-2) var(--ease); }
.lc:hover .lc-ic{ transform:rotate(-6deg) scale(1.04); }
.lc-ic svg{ width:24px; height:24px; }
.lc-stage{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ag-ink); }
.lc h3{ font-size:1.55rem; letter-spacing:-.035em; margin-top:.75rem; }
.lc p{ color:var(--muted); line-height:1.6; flex:1; }
.lc-flow{ font-family:var(--f-mono); font-size:.72rem; color:var(--muted); padding-top:1rem; border-top:1px solid var(--line); }
.lc .link{ align-self:flex-start; color:var(--fg); }
.lc[data-active] .link{ color:var(--ag-ink); }

/* ---------- Workflow deep dive ---------- */
.wf-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.wf-step{ padding:2.25rem 2rem 2.25rem 0; border-right:1px solid var(--line); }
.wf-step+.wf-step{ padding-left:2rem; }
.wf-step:last-child{ border-right:0; }
.wf-i{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; color:var(--agc); }
.wf-verb{ display:block; font-family:var(--f-display); font-size:clamp(2.6rem,5.2vw,4.8rem); font-weight:600; letter-spacing:-.055em; line-height:1; margin:1rem 0 1.25rem; }
.wf-step:nth-child(3) .wf-verb{ font-family:var(--f-serif); font-style:italic; font-weight:400; letter-spacing:-.02em; color:var(--agc); }
.wf-step h3{ font-size:1.2rem; letter-spacing:-.025em; margin-bottom:.4rem; }
.wf-step p{ color:var(--muted); line-height:1.6; max-width:34ch; }
.wf-bottom{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(1.5rem,4vw,4rem); margin-top:clamp(2.5rem,5vw,4rem); padding:clamp(1.5rem,3vw,2.5rem); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); align-items:center; }
.wf-sub{ font-size:1.15rem; letter-spacing:-.02em; margin-bottom:1.1rem; }
.checks{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem 2rem; }
.checks li{ position:relative; padding-left:1.9rem; line-height:1.5; color:var(--fg); }
.checks li::before{ content:""; position:absolute; left:0; top:.1rem; width:20px; height:20px; border-radius:50%; background:color-mix(in srgb,var(--ag) 24%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat; }
.wf-cta{ display:grid; gap:1rem; justify-items:start; padding-left:clamp(0rem,3vw,2.5rem); border-left:1px solid var(--line); }
.wf-cta p{ color:var(--muted); line-height:1.55; }

/* ---------- Integrations map ---------- */
.sys-map{ --gap:clamp(1.5rem,5vw,5rem); position:relative; display:grid; grid-template-columns:1fr auto 1fr; gap:var(--gap); align-items:stretch; }
@keyframes flow{ to{ background-position:36px 0; } }
/* both columns share one height and split it into two equal boxes, so the gap between the boxes
   always sits at the exact vertical centre — level with the hub — whatever each agent's content is */
.sys-col{ position:relative; z-index:1; display:grid; grid-template-rows:1fr 1fr; gap:1rem; }
.sys-hub{ align-self:center; }
/* connectors live only in the empty gap between each column and the hub, so they look the same for every agent */
.sys-col::after{ content:""; position:absolute; top:50%; width:var(--gap); height:2px; transform:translateY(-50%); pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--ag-ink) 0 8px,transparent 8px 18px); background-size:36px 2px; opacity:.55; animation:flow 1.6s linear infinite; }
.sys-col:first-child::after{ left:100%; }  /* inputs flow into the hub */
.sys-col:last-child::after{ right:100%; }  /* actions flow out to your systems */
.sys-col::before{ content:""; position:absolute; top:50%; width:8px; height:8px; border-radius:50%; background:var(--ag-ink); transform:translate(-50%,-50%); opacity:.7; }
.sys-col:first-child::before{ left:100%; }
.sys-col:last-child::before{ left:0; }
.sys-box{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:1.4rem 1.5rem; transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2); }
.sys-box:hover{ transform:translateY(-3px); box-shadow:var(--shadow-1); border-color:color-mix(in srgb,var(--ag) 50%,transparent); }
.sys-box h3{ font-family:var(--f-mono); font-size:.66rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--agc); margin-bottom:.9rem; }
.sys-box ul{ display:flex; flex-wrap:wrap; gap:.4rem; }
.sys-box li{ font-size:.85rem; padding:.35rem .7rem; border-radius:var(--r-pill); background:var(--surface-2); color:var(--fg); }
.sys-hub{ position:relative; z-index:1; width:clamp(150px,16vw,190px); aspect-ratio:1; border-radius:50%; display:grid; place-content:center; justify-items:center; gap:.5rem; text-align:center; background:var(--ink); color:#f5f5f0; box-shadow:0 30px 70px rgba(10,11,15,.25),0 0 0 10px color-mix(in srgb,var(--ag) 14%,transparent); }
.sys-hub::before{ content:""; position:absolute; inset:-22px; border-radius:50%; border:1.5px dashed color-mix(in srgb,var(--ag) 60%,transparent); animation:spin 40s linear infinite; }
.sys-hub svg{ width:44px; height:44px; border-radius:12px; }
.sys-hub b{ font-family:var(--f-display); font-size:1.05rem; letter-spacing:-.04em; }
.sys-hub small{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ag-soft); max-width:12ch; line-height:1.4; }
.sys-note{ margin-top:2rem; font-size:.82rem; color:var(--muted-2); }

/* ---------- Voice demo ---------- */
.demo{ position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,5rem); align-items:center;
  padding:clamp(1.5rem,4.5vw,4rem); border-radius:var(--r-xl); border:1px solid color-mix(in srgb,var(--ag) 30%,transparent);
  background:radial-gradient(ellipse at 15% 50%,color-mix(in srgb,var(--ag) 16%,transparent),transparent 60%),linear-gradient(150deg,var(--ag-tint),var(--ink-2) 70%); }
.orb-wrap{ position:relative; width:100%; max-width:340px; aspect-ratio:1; margin-inline:auto; display:grid; place-items:center; }
.orb{ width:58%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.75),transparent 16%),radial-gradient(circle at 40% 36%,var(--ag-soft),var(--ag) 48%,var(--ag-tint) 86%);
  box-shadow:0 0 90px var(--ag-glow),inset -12px -18px 40px rgba(0,0,0,.25); animation:breathe 5.5s ease-in-out infinite; }
.orb-ring{ position:absolute; inset:8%; border-radius:50%; border:1.5px dashed color-mix(in srgb,var(--ag) 55%,transparent); animation:spin 46s linear infinite; }
.orb-ring--2{ inset:0; border-style:solid; border-color:color-mix(in srgb,var(--ag) 18%,transparent); animation:pulse-ring 5.5s ease-in-out infinite; }
@keyframes breathe{ 50%{ transform:scale(1.06); } }
@keyframes pulse-ring{ 50%{ transform:scale(.96); opacity:.5; } }
.demo h3{ font-size:clamp(1.6rem,3vw,2.5rem); letter-spacing:-.04em; line-height:1.08; }
.demo h3+p{ margin-top:.8rem; color:var(--muted); font-size:1.02rem; }
.transcript{ margin-top:1.75rem; display:grid; gap:.6rem; }
.transcript small{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.2rem; }
.transcript p{ margin:0; padding:.75rem 1rem; border-radius:16px 16px 16px 4px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); max-width:88%; line-height:1.5; }
.transcript--chat p:nth-of-type(even){ margin-left:auto; background:var(--ag-ink); border-color:transparent; border-radius:16px 16px 4px 16px; }
.transcript--flow p{ max-width:none; border-radius:12px; padding-left:2.4rem; position:relative; }
.transcript--flow p::before{ content:"→"; position:absolute; left:1rem; color:var(--ag-soft); }
.demo-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem; }
.demo-foot{ margin-top:1rem; font-size:.82rem; color:var(--muted); }
.mic{ width:10px; height:10px; border-radius:50%; background:var(--ink); box-shadow:0 0 0 0 rgba(10,11,15,.4); animation:mic 2s ease-out infinite; }
@keyframes mic{ 0%{ box-shadow:0 0 0 0 rgba(10,11,15,.45); } 100%{ box-shadow:0 0 0 9px rgba(10,11,15,0); } }

/* ---------- Meeting + memo ---------- */
.meet-cards{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.meet-cards li{ padding:1.75rem 0 0; border-top:2px solid var(--line-strong); position:relative; }
.meet-cards li::before{ content:""; position:absolute; left:0; top:-2px; height:2px; width:100%; background:var(--ag-ink); transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease); transition-delay:calc(var(--i,0)*.18s); }
.meet-cards.is-in li::before,.is-in .meet-cards li::before{ transform:scaleX(1); }
.mc-i{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--agc); }
.meet-cards h3{ font-size:1.35rem; letter-spacing:-.03em; margin:.75rem 0 .5rem; }
.meet-cards p{ color:var(--muted); line-height:1.6; }
.meet-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:1.25rem; margin-top:clamp(2.5rem,5vw,4rem); }
.invite{ border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.5rem); display:flex; flex-direction:column; gap:1rem; align-items:flex-start; }
.invite-who{ font-family:var(--f-display); font-size:clamp(1.4rem,2.4vw,1.9rem); font-weight:600; letter-spacing:-.035em; line-height:1.15; }
.invite .contact-lines{ margin-top:.5rem; width:100%; max-width:none; }
.invite .btn{ margin-top:.75rem; }
.memo{ border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.5rem); background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; gap:1rem; }
.memo h3{ font-size:clamp(1.3rem,2.2vw,1.7rem); letter-spacing:-.035em; }
.memo-note{ position:relative; padding:1.25rem 1.4rem; border-radius:var(--r-md); background:var(--surface-2); line-height:1.7; color:var(--fg); font-size:.98rem; border-left:3px solid var(--ag); }
.memo-actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.25rem; }

/* ---------- Pilot ---------- */
@media (min-width:1101px){ .re-page .proc-track{ grid-template-columns:repeat(4,1fr); } }
.re-page .proc .step .when{ color:var(--agc); }

/* ---------- Final CTA ---------- */
.re-page .cta h2 .serif{ display:block; color:var(--ag-soft); }
.re-page .cta .hero-cta{ margin-top:2rem; }

/* ---------- Voice dialog ---------- */
.vdlg{ width:min(620px,calc(100% - 2rem)); max-height:calc(100dvh - 2rem); padding:0; border:1px solid rgba(255,255,255,.12); border-radius:var(--r-lg); overflow:auto;
  box-shadow:0 40px 120px rgba(0,0,0,.6); }
.vdlg::backdrop{ background:rgba(6,7,10,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.vdlg[open]{ animation:dlg-in .45s var(--ease); }
@keyframes dlg-in{ from{ opacity:0; transform:translateY(16px) scale(.98); } }
.vdlg-top{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 1.25rem; border-bottom:1px solid var(--line); }
.vdlg-top b{ font-family:var(--f-display); font-weight:600; letter-spacing:-.02em; }
.vdlg-x{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong); font-size:1.3rem; line-height:1; color:var(--fg); transition:background .2s; }
.vdlg-x:hover{ background:rgba(255,255,255,.08); }
.vdlg-body{ padding:clamp(1.25rem,3vw,2rem); }
.vp{ text-align:center; display:grid; gap:1rem; justify-items:center; }
.vp .orb-wrap{ max-width:150px; }
.vp h4{ font-family:var(--f-display); font-size:1.5rem; letter-spacing:-.03em; margin:0; }
.vp p{ color:var(--muted); max-width:44ch; line-height:1.6; }
.vp details{ width:100%; margin-top:.75rem; text-align:left; border-top:1px solid var(--line); padding-top:1rem; }
.vp summary{ cursor:pointer; font-size:.82rem; color:var(--muted); }
.vp .field{ margin-top:1rem; }
.vp .setup-row{ display:flex; gap:.6rem; margin-top:.6rem; }
.vp .setup-row input{ flex:1; }
.vp .setup-err{ font-size:.82rem; color:#ff9b9b; margin-top:.6rem; }
.vp .setup-err:empty{ display:none; }
.vp input[aria-invalid="true"]{ border-color:#ff7a7a; }
.vp .setup-note{ font-size:.78rem; color:var(--muted-2); margin-top:.6rem; }

/* ---------- View transition on agent switch ---------- */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root),::view-transition-new(root){ animation-duration:.34s; animation-timing-function:var(--ease); }
}
.ag-switch{ view-transition-name:re-switch; }
.nav{ view-transition-name:site-nav; }

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .ag-txt small{ display:none; }
  .wf-bottom{ grid-template-columns:1fr; }
  .wf-cta{ border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:1.5rem; }
  .checks{ grid-template-columns:1fr; }
}
@media (max-width:1100px) and (min-width:641px){ .re-page .proc-track{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px){
  .ag-switch-label{ display:none; }
  .ag-switch .wrap{ min-height:64px; }
  .re-hero{ padding-top:2.5rem; }
  .re-hero-grid{ grid-template-columns:1fr; gap:3rem; }
  .outc{ grid-template-columns:1fr 1fr; }
  .outc li{ border-right:0; border-bottom:1px solid var(--line); padding:1.5rem 1rem 1.5rem 0!important; }
  .outc li:nth-child(odd){ border-right:1px solid var(--line); }
  .outc li:nth-child(even){ padding-left:1.25rem!important; }
  .outc li:nth-last-child(-n+2){ border-bottom:0; }
  .life{ grid-template-columns:1fr; gap:1rem; }
  .life::before{ left:calc(1rem + 8px); right:auto; top:1.5rem; bottom:1.5rem; width:1px; height:auto; }
  .lc{ padding:0 0 0 3rem; }
  .lc::before{ top:2.2rem; left:1rem; }
  .wf-steps{ grid-template-columns:1fr; }
  .wf-step,.wf-step+.wf-step{ padding:1.75rem 0; border-right:0; border-bottom:1px solid var(--line); }
  .wf-step:last-child{ border-bottom:0; }
  .wf-verb{ margin:.6rem 0 .9rem; }
  .sys-map{ grid-template-columns:1fr; justify-items:stretch; }
  .sys-col{ grid-template-rows:auto; }
  .sys-col::after{ top:auto; left:50%!important; right:auto!important; width:2px; height:calc(var(--gap) + 1rem); transform:translateX(-50%);
    background:repeating-linear-gradient(180deg,var(--ag-ink) 0 8px,transparent 8px 18px); background-size:2px 36px; animation-name:flow-v; }
  .sys-col:first-child::after{ top:100%; }
  .sys-col:last-child::after{ bottom:100%; }
  .sys-col::before{ left:50%!important; }
  .sys-col:first-child::before{ top:100%; }
  .sys-col:last-child::before{ top:0; }
  .sys-hub{ justify-self:center; margin-block:1rem; }
  .demo{ grid-template-columns:1fr; }
  .orb-wrap{ max-width:220px; }
  .meet-cards{ grid-template-columns:1fr; gap:0; }
  .meet-cards li{ padding:1.5rem 0; }
  .meet-grid{ grid-template-columns:1fr; }
}
@keyframes flow-v{ to{ background-position:0 36px; } }
@media (max-width:640px){
  .ag-switch .wrap{ width:calc(100% - 1.25rem); }
  .ag-seg button{ flex-direction:column; gap:.3rem; padding:.45rem .25rem; min-height:58px; border-radius:22px; }
  .ag-ind{ border-radius:22px; }
  .ag-seg{ border-radius:26px; }
  .ag-ic{ width:26px; height:26px; }
  .ag-txt{ text-align:center; }
  .ag-txt b{ font-size:.8rem; }
  .ag-txt b .ag-long{ display:none; }
  .re-hero h1{ font-size:clamp(2.6rem,12.5vw,3.6rem); }
  .re-hero .hero-cta .btn{ width:100%; justify-content:center; white-space:normal; text-align:center; }
  .win-bar span:last-child{ display:none; }
  .win-foot{ flex-direction:column; gap:.25rem; }
  .scr{ font-size:.82rem; }
  .qt{ font-size:.76rem; }
  .qt thead th,.qt tbody th,.qt tbody td{ padding-inline:.45rem; }
  .outc{ grid-template-columns:1fr; }
  .outc li{ border-right:0!important; padding:1.4rem 0!important; border-bottom:1px solid var(--line)!important; }
  .outc li:last-child{ border-bottom:0!important; }
  .demo-actions .btn,.invite .btn,.memo-actions .btn{ width:100%; justify-content:center; white-space:normal; text-align:center; }
  .vp .setup-row{ flex-direction:column; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .scr .msg,.scr .facts>div,.scr .done,.scr .miles li,.scr .qt tbody tr,.scr .rec-note,.miles .bar i{ animation:none!important; opacity:1!important; transform:none!important; }
  .orb,.orb-ring,.sys-hub::before,.sys-col::after,.mic,.done.wait span::before{ animation:none!important; }
  .meet-cards li::before{ transform:scaleX(1); }
}