/*
 * GenUI guide demos (/resources/genui/). The device screens from the original
 * guide carve, UNCHANGED: every rule below is copied from exp.css as it was
 * and only scoped under .gg-demo, so none of it can reach the page around it.
 * The hero pair (static app beside GenUI), the static / chatbot / GenUI trio,
 * and the multi-device stage. Do not restyle the mocks here: the page chrome
 * around them lives in src/styles/genui-guide.css.
 */
/* The carve's .cx-root base, carried onto the demo roots. */
.gg-demo img{ max-width:100%; }
.gg-demo{font-family:'Host Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:rgba(255,255,255,0.94)}
:where(.gg-demo) *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:where(.gg-demo) button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
.gg-demo .kit{ --kit-scale: 1;

  
  --kit-accent:        #2E56FF;                    
  --kit-accent-ink:    #1b2f9e;                    
  --kit-accent-soft:   rgba(46, 86, 255,0.12);       
  --kit-on-accent:     #ffffff;
  --kit-pos:           #1FA567;                     
  --kit-neg:           #E0353B;                     
  --kit-bg:            #ffffff;
  --kit-bg-2:          #f5f4f2;                     
  --kit-fill:          rgba(128,126,125,0.12);      
  --kit-fill-strong:   rgba(128,126,125,0.20);
  --kit-ink:           #191817;                     
  --kit-ink-2:         rgba(67,66,66,0.78);         
  --kit-ink-3:         rgba(67,66,66,0.56);         
  --kit-line:          rgba(67,66,66,0.10);         
  --kit-glass:         rgba(255,255,255,0.60);      
  --kit-scrim:         linear-gradient(to top,rgba(6,12,26,.95) 2%,rgba(6,12,26,.82) 32%,rgba(6,12,26,.55) 56%,rgba(6,12,26,.28) 80%,rgba(6,12,26,.06) 100%);

  
  --kit-font:  'Host Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --kit-mono:  'Roboto Mono',ui-monospace,Menlo,Consolas,monospace;
  --kit-fs-display: calc(32px * var(--kit-scale));  
  --kit-fs-title:   calc(20px * var(--kit-scale));  
  --kit-fs-feature: calc(22px * var(--kit-scale));  
  --kit-fs-body:    calc(16px * var(--kit-scale));  
  --kit-fs-label:   calc(14px * var(--kit-scale));  
  --kit-fs-micro:   calc(12px * var(--kit-scale));  
  --kit-track:      -0.02em;                        
  --kit-w-light:    300;
  --kit-w-regular:  400;
  --kit-w-medium:   500;
  --kit-w-semibold: 600;

  
  --kit-s1: calc(4px  * var(--kit-scale));
  --kit-s2: calc(8px  * var(--kit-scale));
  --kit-s3: calc(12px * var(--kit-scale));
  --kit-s4: calc(16px * var(--kit-scale));
  --kit-s5: calc(20px * var(--kit-scale));
  --kit-s6: calc(24px * var(--kit-scale));
  --kit-s8: calc(32px * var(--kit-scale));

  
  --kit-r-card:  calc(28px * var(--kit-scale));
  --kit-r-chip:  calc(14px * var(--kit-scale));
  --kit-r-pill:  999px;

  
  --kit-shadow-sm:      0 1px 4px rgba(16,24,40,.10);                                          
  --kit-shadow-card:    0 1px 3px rgba(16,24,40,.05), 0 10px 26px -10px rgba(20,30,60,.16);    
  --kit-shadow-feature: 0 20px 44px -18px rgba(16,24,40,.34);                                  
  --kit-shadow-glass:   0 6px 40px rgba(0,0,0,0.14);                                           
  --kit-shadow:         0 4px 48px rgba(0,0,0,0.08);                                           

  font-family: var(--kit-font);
  color: var(--kit-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; }
.gg-demo .kit *{ box-sizing:border-box }
.gg-demo .kit-section{ display:flex;align-items:center;justify-content:space-between;gap:var(--kit-s3);min-height:calc(38px * var(--kit-scale));margin-bottom:var(--kit-s2) }
.gg-demo .kit-section-t h3{ margin:0;font-size:var(--kit-fs-title);line-height:1.2;letter-spacing:var(--kit-track);font-weight:var(--kit-w-medium) }
.gg-demo .kit-section-t s{ display:block;text-decoration:none;margin-top:calc(2px * var(--kit-scale));font-size:var(--kit-fs-label);line-height:1.3;letter-spacing:var(--kit-track);color:var(--kit-ink-2);font-weight:var(--kit-w-regular) }
.gg-demo .kit-chevron{ flex:none;width:calc(44px * var(--kit-scale));height:calc(44px * var(--kit-scale));border:0;cursor:pointer;border-radius:var(--kit-r-pill);background:var(--kit-fill);color:var(--kit-ink);display:flex;align-items:center;justify-content:center }
.gg-demo .kit-chevron svg{ width:calc(18px * var(--kit-scale));height:calc(18px * var(--kit-scale));fill:none;stroke:currentColor;stroke-width:2.2 }
.gg-demo .kit-h1{ margin:0;font-size:var(--kit-fs-display);line-height:1.12;letter-spacing:var(--kit-track);font-weight:var(--kit-w-light) }
.gg-demo .kit-h1 s{ display:block;text-decoration:none;margin-top:calc(7px * var(--kit-scale));font-size:var(--kit-fs-label);line-height:1.3;letter-spacing:var(--kit-track);color:var(--kit-ink-2);font-weight:var(--kit-w-regular) }
.gg-demo .kit-avatar{ flex:none;width:calc(46px * var(--kit-scale));height:calc(46px * var(--kit-scale));border-radius:var(--kit-r-pill);object-fit:cover;box-shadow:0 0 0 2.5px var(--kit-bg),0 0 0 4.5px var(--kit-accent),0 4px 14px -5px rgba(16,24,40,.3) }
.gg-demo .kit-card{ background:var(--kit-fill);border-radius:var(--kit-r-card);padding:var(--kit-s5);overflow:hidden;box-shadow:var(--kit-shadow-card) }
.gg-demo .kit-card.is-elevated{ background:var(--kit-bg);box-shadow:var(--kit-shadow) }
.gg-demo .kit-card.is-pad-0{ padding:0 }
.gg-demo .kit-row{ display:flex;align-items:center;gap:var(--kit-s4);min-height:calc(56px * var(--kit-scale));padding:calc(6px * var(--kit-scale)) 0 }
.gg-demo .kit-row + .kit-row{ border-top:1px solid var(--kit-line) }
.gg-demo .kit-row-lead{ flex:none;width:calc(46px * var(--kit-scale));height:calc(46px * var(--kit-scale));border-radius:var(--kit-r-chip);object-fit:cover;background:var(--kit-fill) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--kit-ink-2);box-shadow:0 2px 8px -3px rgba(16,24,40,.22) }
.gg-demo .kit-row-lead svg{ width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2 }
.gg-demo .kit-row-body{ flex:1;min-width:0 }
.gg-demo .kit-row-body b{ display:block;font-size:var(--kit-fs-body);line-height:1.25;letter-spacing:var(--kit-track);font-weight:var(--kit-w-medium);color:var(--kit-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.gg-demo .kit-row-body s{ display:block;text-decoration:none;margin-top:1px;font-size:var(--kit-fs-label);line-height:1.3;letter-spacing:var(--kit-track);color:var(--kit-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.gg-demo .kit-row-meta{ flex:none;font-family:var(--kit-mono);font-size:calc(13px * var(--kit-scale));font-weight:var(--kit-w-medium);letter-spacing:0;color:var(--kit-ink-2) }
.gg-demo .kit-chip{ display:inline-flex;align-items:center;gap:var(--kit-s2);background:var(--kit-fill);color:var(--kit-ink);border-radius:var(--kit-r-pill);padding:calc(7px * var(--kit-scale)) calc(14px * var(--kit-scale));font-size:var(--kit-fs-label);font-weight:var(--kit-w-medium);letter-spacing:var(--kit-track);white-space:nowrap }
.gg-demo .kit-chip.is-accent{ background:var(--kit-accent);color:var(--kit-on-accent) }
.gg-demo .kit-chip-dot{ width:calc(7px * var(--kit-scale));height:calc(7px * var(--kit-scale));border-radius:50%;background:var(--kit-accent) }
.gg-demo .kit-chip.is-accent .kit-chip-dot{ background:var(--kit-on-accent) }
.gg-demo .kit-metric{ flex:1;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:calc(3px * var(--kit-scale));background:var(--kit-fill);background:color-mix(in srgb, var(--kit-accent) 10%, var(--kit-bg));border-radius:var(--kit-r-chip);padding:var(--kit-s3) var(--kit-s4);min-width:0 }
.gg-demo .kit-metric b{ font-family:var(--kit-mono);font-size:var(--kit-fs-body);font-weight:var(--kit-w-medium);color:var(--kit-accent-ink) }
.gg-demo .kit-metric s{ text-decoration:none;font-family:var(--kit-mono);font-size:var(--kit-fs-micro);color:var(--kit-ink-2) }
.gg-demo .kit-stat{ flex:1;text-align:center }
.gg-demo .kit-stat b{ display:block;font-family:var(--kit-mono);font-size:calc(26px * var(--kit-scale));font-weight:var(--kit-w-medium);letter-spacing:0;color:var(--kit-accent) }
.gg-demo .kit-stat s{ text-decoration:none;font-size:var(--kit-fs-micro);letter-spacing:var(--kit-track);color:var(--kit-ink-2) }
.gg-demo .kit-feature{ position:relative;overflow:hidden;border-radius:var(--kit-r-card);background:var(--kit-fill) center/cover no-repeat }
.gg-demo .kit-feature::after{ content:"";position:absolute;inset:0;background:var(--kit-scrim) }
.gg-demo .kit-feature-ov{ position:absolute;left:0;right:0;bottom:0;z-index:2;padding:var(--kit-s4) var(--kit-s5) var(--kit-s5);color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6) }
.gg-demo .kit-feature-eyebrow{ font-family:var(--kit-mono);font-size:var(--kit-fs-micro);font-weight:var(--kit-w-medium);letter-spacing:.01em;color:rgba(255,255,255,.92);margin-bottom:calc(7px * var(--kit-scale)) }
.gg-demo .kit-feature-ov h3{ margin:0;font-size:var(--kit-fs-feature);line-height:1.15;letter-spacing:var(--kit-track);font-weight:var(--kit-w-semibold) }
.gg-demo .kit-feature-sub{ margin-top:calc(4px * var(--kit-scale));font-size:var(--kit-fs-label);line-height:1.3;letter-spacing:var(--kit-track);color:rgba(255,255,255,.82) }
.gg-demo .kit-timeline{ position:relative;height:calc(30px * var(--kit-scale));margin-bottom:var(--kit-s2) }
.gg-demo .kit-timeline-line{ position:absolute;top:calc(5px * var(--kit-scale));left:3px;right:3px;height:2px;border-radius:2px;background:rgba(255,255,255,.35) }
.gg-demo .kit-timeline-line i{ position:absolute;left:0;top:0;height:100%;border-radius:2px;background:var(--kit-accent) }
.gg-demo .kit-timeline-dot{ position:absolute;top:0;width:calc(12px * var(--kit-scale));height:calc(12px * var(--kit-scale));border-radius:50%;background:#fff;transform:translateX(-50%);box-shadow:0 0 0 3px rgba(6,12,26,.35) }
.gg-demo .kit-timeline-dot.is-on{ width:calc(16px * var(--kit-scale));height:calc(16px * var(--kit-scale));top:calc(-2px * var(--kit-scale));background:var(--kit-accent);box-shadow:0 0 0 4px rgba(46, 86, 255,.32) }
.gg-demo .kit-timeline-lab{ position:absolute;top:calc(16px * var(--kit-scale));transform:translateX(-50%);font-family:var(--kit-mono);font-size:calc(10.5px * var(--kit-scale));font-weight:var(--kit-w-medium);letter-spacing:.02em;color:rgba(255,255,255,.92) }
.gg-demo .kit-stack{ position:relative;flex:none;display:flex;align-items:center;height:calc(58px * var(--kit-scale)) }
.gg-demo .kit-stack img{ position:absolute;width:calc(48px * var(--kit-scale));height:calc(48px * var(--kit-scale));border-radius:var(--kit-r-chip);border:2px solid var(--kit-bg);box-shadow:var(--kit-shadow);object-fit:cover }
.gg-demo .kit-nav{ display:flex;gap:var(--kit-s2) }
.gg-demo .kit-nav-wrap{ flex:1;display:flex;align-items:center;padding:4px;background:var(--kit-glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:var(--kit-r-pill);box-shadow:var(--kit-shadow-glass) }
.gg-demo .kit-nav-item{ flex:1;display:flex;flex-direction:column;align-items:center;gap:calc(3px * var(--kit-scale));padding:calc(7px * var(--kit-scale)) 0;border-radius:var(--kit-r-pill);text-decoration:none;color:var(--kit-ink-2) }
.gg-demo .kit-nav-item.is-on{ background:var(--kit-fill);color:var(--kit-accent) }
.gg-demo .kit-nav-item svg{ width:calc(23px * var(--kit-scale));height:calc(23px * var(--kit-scale));fill:none;stroke:currentColor;stroke-width:2 }
.gg-demo .kit-nav-item span{ font-size:var(--kit-fs-micro);font-weight:var(--kit-w-medium);letter-spacing:var(--kit-track) }
.gg-demo .kit-nav-solo{ flex:none;width:calc(56px * var(--kit-scale));display:flex;align-items:center;justify-content:center;background:var(--kit-glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:var(--kit-r-pill);box-shadow:var(--kit-shadow-glass);color:var(--kit-ink) }
.gg-demo .kit-nav-solo svg{ width:calc(23px * var(--kit-scale));height:calc(23px * var(--kit-scale));fill:none;stroke:currentColor;stroke-width:2 }
.gg-demo .kit-phone{ width:min(402px,94vw);background:var(--kit-bg);border-radius:calc(51px * var(--kit-scale, 1));box-shadow:0 30px 80px -24px rgba(20,30,60,.4),0 0 0 10px #0c0e12,0 0 0 11px #2a2d34;overflow:hidden;position:relative;text-align:left }
.gg-demo .kit-phone-island{ position:absolute;top:calc(13px * var(--kit-scale, 1));left:50%;transform:translateX(-50%);width:calc(96px * var(--kit-scale, 1));height:calc(30px * var(--kit-scale, 1));background:#0c0e12;border-radius:calc(20px * var(--kit-scale, 1));z-index:5 }
.gg-demo .kit-statusbar{ display:flex;align-items:center;justify-content:space-between;padding:calc(16px * var(--kit-scale, 1)) calc(28px * var(--kit-scale, 1)) 0;color:var(--kit-ink) }
.gg-demo .kit-statusbar .time{ font-size:calc(16px * var(--kit-scale, 1));font-weight:var(--kit-w-semibold);letter-spacing:-.01em }
.gg-demo .kit-statusbar .sysicons{ display:flex;align-items:center;gap:calc(6px * var(--kit-scale, 1)) }
.gg-demo .kit-statusbar .sysicons svg{ display:block;fill:currentColor }
.gg-demo .kit-statusbar .sig{ width:calc(18px * var(--kit-scale, 1));height:calc(12px * var(--kit-scale, 1)) }
.gg-demo .kit-statusbar .wifi{ width:calc(16px * var(--kit-scale, 1));height:calc(12px * var(--kit-scale, 1)) }
.gg-demo .kit-statusbar .batt{ width:calc(25px * var(--kit-scale, 1));height:calc(12px * var(--kit-scale, 1)) }
.gg-demo .kit-screen{ padding:24px 16px 0 }
.gg-demo .kit-screen-in{ background:var(--kit-bg);overflow:hidden }
.gg-demo .kit-tablet{ position:relative;background:#0c0e12;border-radius:32px;padding:14px;box-shadow:0 30px 70px -30px rgba(20,30,60,.5),0 0 0 2px #2a2d34 }
.gg-demo .kit-tablet::before{ content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#2a2d34;z-index:2 }
.gg-demo .kit-tablet .kit-screen-in{ border-radius:19px }
.gg-demo .kit-laptop-lid{ background:#0c0e12;border-radius:14px 14px 3px 3px;padding:11px 11px 0;box-shadow:0 26px 60px -32px rgba(20,30,60,.55) }
.gg-demo .kit-laptop-lid .kit-screen-in{ border-radius:8px 8px 0 0 }
.gg-demo .kit-laptop-base{ position:relative;height:14px;width:116%;margin-left:-8%;background:linear-gradient(180deg,#dfe3eb,#b3b9c7);border-radius:0 0 14px 14px;box-shadow:inset 0 2px 2px rgba(255,255,255,.55) }
.gg-demo .kit-laptop-base::before{ content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:16%;height:6px;background:#9aa0b0;border-radius:0 0 8px 8px }
.gg-demo .kit-tv-set{ background:#0c0e12;border-radius:12px;padding:9px;box-shadow:0 30px 70px -30px rgba(20,30,60,.55),0 0 0 2px #2a2d34 }
.gg-demo .kit-tv-set .kit-screen-in{ border-radius:5px }
.gg-demo .kit-tv-stand{ width:14%;height:15px;margin:0 auto;background:linear-gradient(180deg,#2a2d34,#16181d);border-radius:0 0 3px 3px }
.gg-demo .kit-tv-foot{ width:40%;height:6px;margin:2px auto 0;background:#16181d;border-radius:5px }
.gg-demo .kit-car{ position:relative;background:#0a0c10;border-radius:calc(30px * var(--kit-scale,1));padding:calc(11px * var(--kit-scale,1));box-shadow:0 36px 90px -34px rgba(8,14,32,.62),0 0 0 2px #23262d }
.gg-demo .kit-car-screen{ position:relative;display:flex;overflow:hidden;border-radius:calc(20px * var(--kit-scale,1));background:#0b0d12;aspect-ratio:16/9 }
.gg-demo .kit-car-main{ position:relative;flex:1;min-width:0;overflow:hidden }
.gg-demo .kit-car-map{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block }
.gg-demo .kit-car-main::after{ content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,12,24,.28) 0%,transparent 24% 50%,rgba(8,12,24,.68) 100%) }
.gg-demo .kit-car-ai{ position:absolute;top:calc(15px * var(--kit-scale,1));left:calc(15px * var(--kit-scale,1));z-index:2;display:inline-flex;align-items:center;gap:calc(10px * var(--kit-scale,1));padding:calc(7px * var(--kit-scale,1)) calc(15px * var(--kit-scale,1)) calc(7px * var(--kit-scale,1)) calc(7px * var(--kit-scale,1));background:rgba(11,15,25,.6);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:var(--kit-r-pill);box-shadow:0 8px 24px -10px rgba(0,0,0,.55) }
.gg-demo .kit-car-orb{ width:calc(30px * var(--kit-scale,1));height:calc(30px * var(--kit-scale,1));border-radius:50%;flex:none;background:radial-gradient(circle at 32% 28%,#9fbcff,#2E56FF 62%,#16236F);box-shadow:0 0 14px rgba(94,134,255,.6) }
.gg-demo .kit-car-ai b{ display:block;font-size:calc(13px * var(--kit-scale,1));font-weight:var(--kit-w-semibold);letter-spacing:var(--kit-track);color:#fff;line-height:1.1 }
.gg-demo .kit-car-ai s{ display:block;text-decoration:none;font-family:var(--kit-mono);font-size:calc(9px * var(--kit-scale,1));letter-spacing:.07em;color:rgba(255,255,255,.6);margin-top:1px }
.gg-demo .kit-car-widgets{ position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;gap:calc(10px * var(--kit-scale,1));padding:calc(13px * var(--kit-scale,1));align-items:stretch }
.gg-demo .kit-car-widgets > *{ flex:1;min-width:0 }
.gg-demo .kit-car-widgets .kit-card{ background:rgba(16,20,30,.74);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:0 12px 30px -16px rgba(0,0,0,.6);color:#fff;padding:calc(13px * var(--kit-scale,1));display:flex;flex-direction:column;gap:calc(9px * var(--kit-scale,1)) }
.gg-demo .kit-car-widgets .kit-card .k{ font-family:var(--kit-mono);font-size:calc(9px * var(--kit-scale,1));letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.56) }
.gg-demo .kit-car-widgets .kit-card b{ font-size:calc(14px * var(--kit-scale,1));font-weight:var(--kit-w-semibold);letter-spacing:var(--kit-track);color:#fff }
.gg-demo .kit-car-widgets .kit-card s{ text-decoration:none;font-size:calc(11px * var(--kit-scale,1));color:rgba(255,255,255,.62) }
.gg-demo .kit-car-widgets .kit-progress{ background:rgba(255,255,255,.16) }
.gg-demo .kit-car-widgets .kit-map{ box-shadow:none;border-radius:calc(10px * var(--kit-scale,1)) }
.gg-demo .kit-car-rail{ flex:none;width:calc(94px * var(--kit-scale,1));background:#070809;display:flex;flex-direction:column;justify-content:center;gap:calc(2px * var(--kit-scale,1));padding:calc(10px * var(--kit-scale,1)) 0 }
.gg-demo .kit-car-nav-item{ display:flex;flex-direction:column;align-items:center;gap:calc(6px * var(--kit-scale,1));padding:calc(13px * var(--kit-scale,1)) 0;color:rgba(255,255,255,.5);cursor:pointer;position:relative }
.gg-demo .kit-car-nav-item .kit-ic{ font-size:calc(24px * var(--kit-scale,1)) }
.gg-demo .kit-car-nav-item span{ font-size:calc(10px * var(--kit-scale,1));font-weight:var(--kit-w-medium);letter-spacing:var(--kit-track) }
.gg-demo .kit-car-nav-item.is-on{ color:#fff }
.gg-demo .kit-car-nav-item.is-on::before{ content:"";position:absolute;left:0;top:calc(9px * var(--kit-scale,1));bottom:calc(9px * var(--kit-scale,1));width:calc(3px * var(--kit-scale,1));border-radius:0 3px 3px 0;background:var(--kit-accent) }
.gg-demo .kit-btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--kit-s2);border:0;cursor:pointer;font-family:var(--kit-font);font-size:var(--kit-fs-body);font-weight:var(--kit-w-medium);letter-spacing:var(--kit-track);padding:calc(11px * var(--kit-scale)) var(--kit-s6);min-height:calc(44px * var(--kit-scale));border-radius:var(--kit-r-pill);background:var(--kit-accent);color:var(--kit-on-accent);box-shadow:var(--kit-shadow-card);white-space:nowrap }
.gg-demo .kit-btn.is-light{ background:var(--kit-bg);color:var(--kit-accent) }
.gg-demo .kit-btn.is-ghost{ background:var(--kit-fill);color:var(--kit-ink);box-shadow:none }
.gg-demo .kit-field{ display:flex;align-items:center;gap:var(--kit-s3);background:var(--kit-fill);border-radius:var(--kit-r-pill);padding:calc(13px * var(--kit-scale)) var(--kit-s5);color:var(--kit-ink-3) }
.gg-demo .kit-field svg{ flex:none;width:calc(18px * var(--kit-scale));height:calc(18px * var(--kit-scale));fill:none;stroke:currentColor;stroke-width:2 }
.gg-demo .kit-field input, .gg-demo .kit-field .kit-field-ph{ flex:1;min-width:0;border:0;background:none;outline:none;font-family:var(--kit-font);font-size:var(--kit-fs-body);letter-spacing:var(--kit-track);color:var(--kit-ink-2) }
.gg-demo .kit-seg{ display:inline-flex;gap:2px;padding:4px;background:var(--kit-fill);border-radius:var(--kit-r-pill) }
.gg-demo .kit-seg button{ border:0;cursor:pointer;font-family:var(--kit-font);font-size:var(--kit-fs-label);font-weight:var(--kit-w-medium);letter-spacing:var(--kit-track);color:var(--kit-ink-2);padding:calc(8px * var(--kit-scale)) var(--kit-s5);border-radius:var(--kit-r-pill);background:none }
.gg-demo .kit-seg button.is-on{ background:var(--kit-bg);color:var(--kit-ink);box-shadow:var(--kit-shadow-card) }
.gg-demo .kit-tile-row{ display:flex;gap:var(--kit-s4);overflow-x:auto;scrollbar-width:none;padding:0 0 0 var(--kit-screen-pad,12px);margin:0 calc(-1 * var(--kit-screen-pad,12px));scroll-padding-left:var(--kit-screen-pad,12px) }
.gg-demo .kit-tile-row::-webkit-scrollbar{ display:none }
.gg-demo .kit-tile{ flex:0 0 calc(150px * var(--kit-scale));background:var(--kit-fill);background:color-mix(in srgb, var(--kit-accent) 10%, var(--kit-bg));border-radius:var(--kit-r-card);overflow:hidden }
.gg-demo .kit-tile-img{ aspect-ratio:1;background:var(--kit-fill) center/cover no-repeat }
.gg-demo .kit-tile-info{ padding:var(--kit-s4) }
.gg-demo .kit-tile-info b{ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.2;font-size:var(--kit-fs-label);font-weight:var(--kit-w-medium);letter-spacing:var(--kit-track);color:var(--kit-ink) }
.gg-demo .kit-tile-info s{ display:block;text-decoration:none;font-family:var(--kit-mono);font-size:var(--kit-fs-micro);color:var(--kit-accent-ink);margin-top:calc(3px * var(--kit-scale)) }
.gg-demo .kit-tier-row{ display:flex;gap:var(--kit-s3) }
.gg-demo .kit-tier{ flex:1;text-align:center;background:var(--kit-fill);border-radius:var(--kit-r-chip);padding:var(--kit-s4) var(--kit-s3) }
.gg-demo .kit-tier.is-on{ background:var(--kit-accent);color:var(--kit-on-accent);box-shadow:var(--kit-shadow-card) }
.gg-demo .kit-tier b{ display:block;font-size:var(--kit-fs-body);font-weight:var(--kit-w-semibold);letter-spacing:var(--kit-track) }
.gg-demo .kit-tier s{ display:block;text-decoration:none;font-family:var(--kit-mono);font-size:var(--kit-fs-label);margin-top:calc(4px * var(--kit-scale));opacity:.72 }
.gg-demo .kit-chat{ display:flex;flex-direction:column;gap:var(--kit-s2) }
.gg-demo .kit-bubble{ max-width:80%;padding:calc(10px * var(--kit-scale)) calc(15px * var(--kit-scale));font-size:var(--kit-fs-label);line-height:1.35;letter-spacing:var(--kit-track);border-radius:calc(20px * var(--kit-scale)) }
.gg-demo .kit-bubble.is-them{ align-self:flex-start;background:var(--kit-fill);color:var(--kit-ink);border-bottom-left-radius:calc(6px * var(--kit-scale)) }
.gg-demo .kit-bubble.is-me{ align-self:flex-end;background:var(--kit-accent);color:var(--kit-on-accent);border-bottom-right-radius:calc(6px * var(--kit-scale)) }
.gg-demo .kit-pass{ display:flex;align-items:stretch;background:var(--kit-accent);color:var(--kit-on-accent);border-radius:var(--kit-r-card);overflow:hidden;box-shadow:var(--kit-shadow-card) }
.gg-demo .kit-pass-main{ flex:1;padding:var(--kit-s5) }
.gg-demo .kit-pass-main .k{ font-family:var(--kit-mono);font-size:var(--kit-fs-micro);opacity:.72;letter-spacing:.04em }
.gg-demo .kit-pass-main b{ display:block;font-size:var(--kit-fs-title);font-weight:var(--kit-w-semibold);letter-spacing:var(--kit-track);margin-top:calc(4px * var(--kit-scale)) }
.gg-demo .kit-pass-stub{ display:flex;align-items:center;padding:0 var(--kit-s4);border-left:2px dashed rgba(255,255,255,.45) }
.gg-demo .kit-pass-bars{ width:calc(8px * var(--kit-scale));height:58%;background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px);opacity:.85 }
.gg-demo .kit-banner{ display:flex;align-items:center;justify-content:space-between;gap:var(--kit-s4);background:var(--kit-accent);color:var(--kit-on-accent);border-radius:var(--kit-r-card);padding:var(--kit-s6);box-shadow:var(--kit-shadow-card) }
.gg-demo .kit-banner b{ flex:1;min-width:0;font-size:var(--kit-fs-title);font-weight:var(--kit-w-semibold);letter-spacing:var(--kit-track);line-height:1.2;text-wrap:balance }
.gg-demo .kit-banner .kit-btn{ flex:none }
.gg-demo .kit-chip.is-ok{ background:var(--kit-accent-soft);color:var(--kit-accent-ink) }
.gg-demo .kit-chip.is-ok .kit-chip-dot{ background:var(--kit-accent) }
.gg-demo .kit-chip.is-warn{ background:rgba(176,113,12,.14);color:#8a5a0c }
.gg-demo .kit-chip.is-warn .kit-chip-dot{ background:#b0710c }
.gg-demo .kit-toast{ display:inline-flex;align-items:center;gap:var(--kit-s3);background:var(--kit-ink);color:#fff;border-radius:var(--kit-r-pill);padding:calc(10px * var(--kit-scale)) var(--kit-s5);font-size:var(--kit-fs-label);font-weight:var(--kit-w-medium);letter-spacing:var(--kit-track);box-shadow:var(--kit-shadow-card) }
.gg-demo .kit-toast .kit-chip-dot{ background:var(--kit-accent) }
.gg-demo .kit-map{ border-radius:var(--kit-r-chip);overflow:hidden;box-shadow:0 1px 3px rgba(16,24,40,.1) }
.gg-demo .kit-map svg{ display:block;width:100%;height:auto }
.gg-demo .kit-label{ border:1.5px dashed var(--kit-line);border-radius:calc(12px * var(--kit-scale));padding:var(--kit-s3);background:var(--kit-bg) }
.gg-demo .kit-label-h{ display:flex;justify-content:space-between;font-family:var(--kit-mono);font-size:calc(11px * var(--kit-scale));font-weight:var(--kit-w-semibold);letter-spacing:.12em;color:var(--kit-ink) }
.gg-demo .kit-barcode{ height:calc(40px * var(--kit-scale));margin:var(--kit-s2) 0;border-radius:2px;background:repeating-linear-gradient(90deg,#15151c 0 2px,#fff 2px 4px,#15151c 4px 7px,#fff 7px 9px,#15151c 9px 11px,#fff 11px 15px) }
.gg-demo .kit-label-tn{ font-family:var(--kit-mono);font-size:var(--kit-fs-micro);letter-spacing:.1em;color:var(--kit-ink);text-align:center }
.gg-demo .kit-label-a{ font-size:calc(10.5px * var(--kit-scale));color:var(--kit-ink-3);text-align:center;margin-top:calc(4px * var(--kit-scale)) }
.gg-demo .kit-balance{ position:relative;overflow:hidden;border-radius:var(--kit-r-card);padding:var(--kit-s6);color:#fff;background:linear-gradient(150deg,#2E56FF 0%,#16236F 62%,#0A1530 100%);box-shadow:var(--kit-shadow-feature) }
.gg-demo .kit-balance-lab{ font-family:var(--kit-mono);font-size:var(--kit-fs-micro);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.68) }
.gg-demo .kit-balance-amt{ font-family:var(--kit-mono);font-size:calc(34px * var(--kit-scale));font-weight:var(--kit-w-medium);letter-spacing:-.01em;margin-top:calc(4px * var(--kit-scale)) }
.gg-demo .kit-balance-delta{ display:inline-flex;align-items:center;gap:calc(5px * var(--kit-scale));margin-top:var(--kit-s3);font-family:var(--kit-mono);font-size:var(--kit-fs-label);color:#7BE6AE }
.gg-demo .kit-spark{ display:block;width:100%;height:calc(54px * var(--kit-scale)) }
.gg-demo .kit-spark .area{ stroke:none }
.gg-demo .kit-spark .line{ fill:none;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round }
.gg-demo .kit-spark.on-dark .area{ fill:rgba(255,255,255,.16) }
.gg-demo .kit-spark.on-dark .line{ stroke:#fff }
.gg-demo .kit-spark.on-light .area{ fill:var(--kit-accent-soft) }
.gg-demo .kit-spark.on-light .line{ stroke:var(--kit-accent) }
.gg-demo .kit-gauge{ position:relative;width:calc(116px * var(--kit-scale));height:calc(116px * var(--kit-scale));flex:none }
.gg-demo .kit-gauge svg{ width:100%;height:100%;transform:rotate(-90deg) }
.gg-demo .kit-gauge .track{ fill:none;stroke:var(--kit-fill-strong);stroke-width:11 }
.gg-demo .kit-gauge .val{ fill:none;stroke:var(--kit-accent);stroke-width:11;stroke-linecap:round }
.gg-demo .kit-gauge-ctr{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px }
.gg-demo .kit-gauge-ctr b{ font-family:var(--kit-mono);font-size:calc(24px * var(--kit-scale));font-weight:var(--kit-w-medium);color:var(--kit-ink);letter-spacing:0 }
.gg-demo .kit-gauge-ctr s{ text-decoration:none;font-size:var(--kit-fs-micro);color:var(--kit-ink-3) }
.gg-demo .kit-bars{ display:flex;align-items:flex-end;gap:var(--kit-s2);height:calc(76px * var(--kit-scale)) }
.gg-demo .kit-bar{ flex:1;min-height:4px;background:var(--kit-fill-strong);border-radius:calc(6px * var(--kit-scale)) calc(6px * var(--kit-scale)) 2px 2px }
.gg-demo .kit-bar.is-on{ background:var(--kit-accent) }
.gg-demo .kit-bars-x{ display:flex;gap:var(--kit-s2);margin-top:var(--kit-s2) }
.gg-demo .kit-bars-x span{ flex:1;text-align:center;font-family:var(--kit-mono);font-size:calc(10px * var(--kit-scale));color:var(--kit-ink-3) }
.gg-demo .kit-progress{ height:calc(8px * var(--kit-scale));background:var(--kit-fill-strong);border-radius:var(--kit-r-pill);overflow:hidden }
.gg-demo .kit-progress i{ display:block;height:100%;border-radius:var(--kit-r-pill);background:var(--kit-accent) }
.gg-demo .kit-amt{ font-family:var(--kit-mono);font-weight:var(--kit-w-medium);letter-spacing:0;color:var(--kit-ink) }
.gg-demo .kit-amt.is-neg{ color:var(--kit-neg) }
.gg-demo .kit-amt.is-pos{ color:var(--kit-pos) }
.gg-demo .kit-ic{ display:inline-flex;align-items:center;justify-content:center;flex:none;width:1em;height:1em;line-height:0 }
.gg-demo .kit-ic svg{ width:100%;height:100%;display:block;fill:currentColor;stroke:none }
.gg-demo .kit-nav-item .kit-ic, .gg-demo .kit-nav-solo .kit-ic{ font-size:calc(24px * var(--kit-scale)) }
.gg-demo .kit-chevron .kit-ic{ font-size:calc(19px * var(--kit-scale)) }
.gg-demo .kit-field .kit-ic{ font-size:calc(19px * var(--kit-scale)) }
.gg-demo .kit-row-lead .kit-ic{ font-size:calc(22px * var(--kit-scale));color:var(--kit-ink-2) }
@keyframes gtw1{ 0%,100%{ fill:#5E86FF } 50%{ fill:#9DB6F8 } }
@keyframes gtw2{ 0%,100%{ fill:#2E56FF } 50%{ fill:#5E86FF } }
@keyframes gtw3{ 0%,100%{ fill:#7FA8FF } 50%{ fill:#3E63F0 } }
.gg-demo .cl-hero2-vis{ position:relative; }
.gg-demo .cl-duo{ position:relative; width:100%; height:600px; }
.gg-demo .cl-duo-note{ text-align:center; font-size:12px; line-height:1.6; color:rgba(255,255,255,0.42); max-width:54ch; margin:76px auto 0; transition:opacity .3s ease; }
@media (max-width:900px){
  .gg-demo .cl-duo-note{ margin-top:58px; }
}
.gg-demo .cl-duo-note em{ font-style:normal; color:rgba(255,255,255,0.58); }
.gg-demo .cl-hero2.compare .cl-duo-note{ opacity:0; }
@media (max-width:900px){
  .gg-demo .cl-duo{ height:520px; }
}
.gg-demo .cl-duo-phone{ position:absolute; top:50%; left:50%; display:flex; flex-direction:column; align-items:flex-start; }
.gg-demo .cl-duo-back{ transform:translate(-62%,-46%) rotate(-8deg) scale(0.85); opacity:1; z-index:1; pointer-events:none; }
.gg-demo .cl-duo-front{ transform:translate(-4%,-52%) rotate(4deg) scale(0.92); z-index:2; }
.gg-demo .cl-duo-front::before{ content:''; position:absolute; z-index:-1; left:50%; top:54%; width:116%; height:86%; transform:translate(-50%,-50%); background:radial-gradient(closest-side, rgba(110,150,255,0.46), rgba(94,134,255,0) 100%); filter:blur(30px); opacity:0; transition:opacity .6s ease; pointer-events:none; }
.gg-demo .cl-duo-lab{ margin:0 0 13px 6px; font-family:'Host Grotesk',system-ui,sans-serif; font-size:12px; font-weight:600; letter-spacing:0.04em; padding:5px 13px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.gg-demo .cl-duo-lab-back{ color:rgba(255,255,255,0.62); background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.13); }
.gg-demo .cl-duo-lab-front{ color:#fff; background:linear-gradient(135deg,#5E86FF,#2E56FF); box-shadow:0 8px 22px -6px rgba(46, 86, 255,0.7); }
.gg-demo .cl-duo-lab-front svg{ width:12px; height:12px; }
.gg-demo .cl-duo-back, .gg-demo .cl-duo-front{ transition:transform .7s cubic-bezier(.2,.8,.3,1), filter .5s ease, opacity .5s ease; }
.gg-demo .cl-hero2.compare .cl-duo-back{ transform:translate(-150%,-50%) rotate(-6deg) scale(0.9); opacity:0; pointer-events:none; }
.gg-demo .cl-hero2.compare .cl-duo-front{ transform:translate(2%,-50%) rotate(0deg) scale(1); }
.gg-demo .cp-pic .kit-ic{ display:flex; }
.gg-demo .cl-hero2.compare .cl-duo-front .kit-nav{ position:relative; }
.gg-demo .cl-hero2.compare .cl-duo-front .kit-nav::after{ content:'The head · hand-built'; position:absolute; z-index:2; top:-10px; left:50%; transform:translateX(-50%); font-family:'Host Grotesk',system-ui,sans-serif; font-size:8.5px; font-weight:700; letter-spacing:0.06em; padding:3px 8px; border-radius:999px; background:#fff; border:1px solid rgba(12,20,48,0.22); color:rgba(12,20,48,0.6); box-shadow:0 4px 10px -4px rgba(12,20,48,0.25); white-space:nowrap; }
.gg-demo .cl-hero2.compare[data-cmp="genui"] .cl-duo-front::before{ opacity:1; }
@media (max-width:900px){
  .gg-demo .cl-hero2.compare .cl-duo-back{ transform:translate(-92%,-50%) rotate(0) scale(0.5); }
  .gg-demo .cl-hero2.compare .cl-duo-front{ transform:translate(-8%,-50%) rotate(0) scale(0.5); }
}
@media (max-width:900px){
  .gg-demo .cl-duo-back{ transform:translate(-66%,-46%) rotate(-8deg) scale(0.9); }
  .gg-demo .cl-duo-front{ transform:translate(-12%,-50%) rotate(3deg); }
}
@media (max-width:640px){
  .gg-demo .cl-duo{ height:430px; margin-top:18px; }
  .gg-demo .cl-duo-back{ transform:translate(-80%,-50%) rotate(-8deg) scale(0.6); }
  .gg-demo .cl-duo-front{ transform:translate(-22%,-50%) rotate(3deg) scale(0.72); }
}
.gg-demo .cl-duo .kit-phone{ width:290px; height:620px; --kit-scale:0.72; position:relative; overflow:hidden; display:flex; flex-direction:column; }
.gg-demo .cl-duo .kit-phone-island{ width:76px; height:24px; top:11px; }
.gg-demo .cl-duo .kit-statusbar{ flex:none; padding:13px 19px 0; }
.gg-demo .cl-duo .kit-statusbar .time{ font-size:13px; }
.gg-demo .cl-duo .kit-screen{ flex:1; min-height:0; display:flex; flex-direction:column; gap:calc(14px * var(--kit-scale)); padding:11px 12px 4px; overflow:hidden; position:relative; }
.gg-demo .cl-duo .kit-screen > *{ flex:none; }
.gg-demo .cl-duo .kit-nav{ position:absolute; left:0; right:0; bottom:0; z-index:5; padding:5px 11px 12px; }
.gg-demo .cl-duo-back .kit-phone{ box-shadow:0 18px 50px -20px rgba(8,14,32,.6),0 0 0 7px #0c0e12,0 0 0 8px #23262d; }
.gg-demo .cl-duo-front .kit-phone{ box-shadow:0 30px 70px -22px rgba(0,0,0,.62),0 0 60px rgba(94,134,255,.22),0 0 0 7px #0c0e12,0 0 0 8px #2a2d34; }
.gg-demo .hs-top{ display:flex; align-items:center; gap:10px; flex:none; }
.gg-demo .hs-top .kit-avatar{ width:calc(55px * var(--kit-scale)); height:calc(55px * var(--kit-scale)); }
.gg-demo .hs-top b{ font-size:calc(19.5px * var(--kit-scale)); font-weight:600; letter-spacing:-.01em; color:var(--kit-ink); display:block; line-height:1.2; }
.gg-demo .hs-top s{ display:block; text-decoration:none; font-family:var(--kit-mono); font-size:calc(14px * var(--kit-scale)); color:var(--kit-ink-2); margin-top:2px; }
.gg-demo .hs-gav{ width:40px; height:40px; border-radius:50%; background:var(--kit-fill-strong); display:grid; place-items:center; color:var(--kit-ink-3); flex:none; }
.gg-demo .hs-gav .kit-ic{ font-size:21px; }
.gg-demo .hs-lab{ font-family:var(--kit-mono); font-size:calc(14px * var(--kit-scale)); letter-spacing:.06em; text-transform:uppercase; color:var(--kit-ink-2); margin:calc(7px * var(--kit-scale)) 0 calc(-2px * var(--kit-scale)); flex:none; }
.gg-demo .hs-metrics{ display:flex; gap:calc(7px * var(--kit-scale)); }
.gg-demo .cl-duo .kit-feature{ height:124px; flex:none; }
.gg-demo .cl-duo .kit-feature.is-tall{ height:138px; }
.gg-demo .cl-duo .kit-tile{ flex-basis:calc(124px * var(--kit-scale)); }
.gg-demo .cl-duo .kit-tile-img{ aspect-ratio:1.35; }
.gg-demo #clChat{ position:relative; z-index:2; background:#eef3fc; color:#0c1430; font-family:'Host Grotesk',system-ui,sans-serif; }
.gg-demo #clChat .cl-wrap{ max-width:1180px; margin:0 auto; padding:80px 44px 152px; text-align:left; }
.gg-demo #clChat .cl-eyebrow{ color:#2E56FF; }
.gg-demo .ct-grid{ display:grid; grid-template-columns:1.02fr 1fr; gap:60px; align-items:stretch; }
@media (max-width:900px){
  .gg-demo .ct-grid{ grid-template-columns:1fr; gap:40px; }
}
.gg-demo .ct-copy{ display:flex; flex-direction:column; justify-content:center; }
.gg-demo .ct-copy .cl-eyebrow{ margin-bottom:16px; }
.gg-demo .ct-h{ font-size:clamp(27px,3vw,34px); font-weight:700; line-height:1.12; letter-spacing:-0.02em; color:#0c1430; margin:0 0 20px; text-wrap:balance; }
.gg-demo .ct-h .cl-hl{ color:#2E56FF; }
.gg-demo .ct-sub{ font-size:16.5px; line-height:1.7; color:rgba(12,20,48,0.64); margin:0; max-width:46ch; text-wrap:pretty; }
.gg-demo .ct-phones{ display:flex; gap:22px; justify-content:center; align-items:flex-end; }
@media (max-width:480px){
  .gg-demo .ct-phones{ gap:12px; }
}
@media (max-width:560px){
  .gg-demo .ct-phones{ flex-direction:column; align-items:center; gap:26px; }
  .gg-demo .ct-static-col{ display:none; }
}
.gg-demo .ct-phone-col{ display:flex; flex-direction:column; align-items:center; gap:16px; position:relative; z-index:1; }
.gg-demo .ct-lab{ font-family:'Host Grotesk',system-ui,sans-serif; font-weight:600; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(12,20,48,0.42); }
.gg-demo .ct-lab.ai{ color:#2E56FF; }
.gg-demo .ct-era{ font-size:12.5px; color:rgba(12,20,48,0.52); margin-top:-10px; }
.gg-demo .ct-static-col{ z-index:0; }
.gg-demo .ct-static{ position:relative; width:162px; height:338px; flex:none; border-radius:24px; padding:5px; background:linear-gradient(160deg,#7e8aa5,#525d75 62%); box-shadow:0 22px 44px -20px rgba(10,20,50,0.45), inset 0 0 0 1px rgba(255,255,255,0.2); }
.gg-demo .ct-st-screen{ height:100%; border-radius:19px; background:#f4f6fb; padding:8px 10px 8px; display:flex; flex-direction:column; gap:9px; overflow:hidden; }
.gg-demo .ct-st-bar{ display:flex; align-items:center; justify-content:space-between; padding:1px 3px 0; }
.gg-demo .ct-st-bar s{ width:16px; height:5px; border-radius:3px; background:#b9c2d4; text-decoration:none; }
.gg-demo .ct-st-bar b{ width:32px; height:10px; border-radius:999px; background:#0b1222; }
.gg-demo .ct-st-bar u{ width:15px; height:5px; border-radius:3px; background:#b9c2d4; text-decoration:none; }
.gg-demo .ct-st-title{ padding:1px 2px 0; font-size:10px; font-weight:700; letter-spacing:-0.01em; color:#3c465e; line-height:1.2; }
.gg-demo .ct-st-title span{ display:block; font-size:7.5px; font-weight:500; letter-spacing:0.02em; color:#8b94ab; margin-top:2px; }
.gg-demo .ct-st-table{ border:1px solid #e0e5f0; border-radius:9px; overflow:hidden; background:#fff; }
.gg-demo .ct-st-tr{ display:flex; justify-content:space-between; align-items:center; gap:6px; padding:5.5px 8px; font-size:8px; font-weight:500; color:#5d6780; }
.gg-demo .ct-st-tr + .ct-st-tr{ border-top:1px solid #edf0f7; }
.gg-demo .ct-st-tr b{ font-size:8px; font-weight:600; color:#3c465e; white-space:nowrap; }
.gg-demo .ct-st-promo{ border-radius:10px; background:linear-gradient(150deg,#39445e,#141b2c); padding:9px 10px; }
.gg-demo .ct-st-promo b{ display:block; font-size:8.5px; font-weight:600; color:rgba(255,255,255,0.9); }
.gg-demo .ct-st-promo s{ display:block; font-size:7.5px; font-weight:500; color:rgba(255,255,255,0.45); margin-top:3px; text-decoration:none; }
.gg-demo .ct-st-link{ padding:0 2px; font-size:8px; font-weight:500; color:#6b7590; text-decoration:underline; text-decoration-color:#c2cad9; text-underline-offset:2px; }
.gg-demo .ct-st-nav{ margin-top:auto; border-top:1px solid #e6eaf3; padding-top:8px; display:flex; justify-content:space-around; }
.gg-demo .ct-st-nav i{ width:14px; height:14px; border-radius:5px; background:#dde3ee; }
.gg-demo .ct-textphone{ position:relative; width:206px; height:424px; flex:none; border-radius:26px; padding:6px; overflow:hidden; background:linear-gradient(160deg,#1f2c40,#080e1c 62%); box-shadow:0 30px 64px -22px rgba(10,20,50,0.5), inset 0 0 0 1px rgba(255,255,255,0.1); }
.gg-demo .ct-tp-screen{ position:relative; height:100%; border-radius:20px; overflow:hidden; background:#0c1424; display:flex; flex-direction:column; }
.gg-demo .ct-tp-notch{ position:absolute; top:10px; left:50%; transform:translateX(-50%); width:58px; height:15px; border-radius:99px; background:#05080f; z-index:6; }
.gg-demo .ct-tp-head{ display:flex; align-items:center; gap:9px; padding:29px 17px 13px; font-size:12.5px; font-weight:600; color:rgba(255,255,255,0.66); border-bottom:1px solid rgba(255,255,255,0.06); }
.gg-demo .ct-tp-dot{ width:7px; height:7px; border-radius:50%; background:#5E86FF; box-shadow:0 0 8px #5E86FF; }
.gg-demo .ct-tp-body{ flex:1; min-height:0; overflow:hidden; padding:16px 15px 58px; display:flex; flex-direction:column; gap:13px; }
.gg-demo .ct-tp-user{ align-self:flex-end; max-width:82%; background:rgba(94,134,255,0.2); color:rgba(255,255,255,0.86); font-size:10.5px; padding:8px 11px; border-radius:14px 14px 4px 14px; }
.gg-demo .ct-tp-ai{ flex:1; min-height:0; overflow:hidden; font-size:10px; line-height:1.62; color:rgba(255,255,255,0.5); }
.gg-demo .ct-tp-fade{ position:absolute; left:0; right:0; bottom:50px; height:82px; background:linear-gradient(180deg, transparent, #0c1424 78%); pointer-events:none; }
.gg-demo .ct-tp-input{ position:absolute; left:12px; right:12px; bottom:13px; height:38px; border-radius:19px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; padding:0 15px; font-size:11px; color:rgba(255,255,255,0.32); }
.gg-demo .ct-genui .kit-phone{ width:206px; height:424px; --kit-scale:0.5; position:relative; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 64px -22px rgba(10,20,50,.5), 0 0 50px rgba(94,134,255,.2), 0 0 0 6px #0c0e12, 0 0 0 7px #2a2d34; }
.gg-demo .ct-genui .kit-phone-island{ width:54px; height:17px; top:8px; }
.gg-demo .ct-genui .kit-statusbar{ flex:none; padding:9px 14px 0; }
.gg-demo .ct-genui .kit-statusbar .time{ font-size:10px; }
.gg-demo .ct-genui .kit-screen{ flex:1; min-height:0; display:flex; flex-direction:column; gap:calc(14px * var(--kit-scale)); padding:8px 9px 4px; overflow:hidden; position:relative; }
.gg-demo .ct-genui .kit-screen > *{ flex:none; }
.gg-demo .ct-genui .kit-feature{ height:86px; }
.gg-demo .ct-genui .kit-feature.is-tall{ height:100px; }
.gg-demo .ct-genui .kit-nav{ position:absolute; left:0; right:0; bottom:0; z-index:5; padding:4px 8px 9px; }
@keyframes pkDrift{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(34px,22px,0) scale(1.07); } }
@keyframes sweepMove{ from{ transform:translateX(-115%); } to{ transform:translateX(215%); } }
.gg-demo .cl-phonewrap .kit-phone{ width:300px; height:624px; --kit-scale:0.74; position:relative; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 70px -22px rgba(0,0,0,.62),0 0 64px rgba(94,134,255,.24),0 0 0 7px #0c0e12,0 0 0 8px #2a2d34; }
.gg-demo .cl-phonewrap .kit-phone-island{ width:78px; height:24px; top:11px; }
.gg-demo .cl-phonewrap .kit-statusbar{ flex:none; padding:13px 19px 0; }
.gg-demo .cl-phonewrap .kit-statusbar .time{ font-size:13px; }
.gg-demo .cl-phonewrap .kit-screen{ flex:1; min-height:0; display:flex; flex-direction:column; gap:calc(14px * var(--kit-scale)); padding:11px 12px 4px; overflow:hidden; position:relative; }
.gg-demo .cl-phonewrap .kit-screen > *{ flex:none; }
.gg-demo .cl-phonewrap .kit-nav{ position:absolute; left:0; right:0; bottom:0; z-index:5; padding:5px 11px 12px; }
.gg-demo .cl-phonewrap .hs-top{ display:flex; align-items:center; gap:10px; }
.gg-demo .cl-phonewrap .hs-top .kit-avatar{ width:40px; height:40px; }
.gg-demo .cl-phonewrap .hs-top b{ font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--kit-ink); display:block; line-height:1.2; }
.gg-demo .cl-phonewrap .hs-top s{ display:block; text-decoration:none; font-family:var(--kit-mono); font-size:10px; color:var(--kit-ink-2); margin-top:2px; }
.gg-demo .cl-phonewrap .hs-gav{ width:40px; height:40px; border-radius:50%; background:var(--kit-fill-strong); display:grid; place-items:center; color:var(--kit-ink-3); flex:none; }
.gg-demo .cl-phonewrap .hs-gav .kit-ic{ font-size:21px; }
.gg-demo .cl-phonewrap .hs-lab{ font-family:var(--kit-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--kit-ink-2); margin:calc(7px * var(--kit-scale)) 0 calc(-2px * var(--kit-scale)); }
.gg-demo .cl-phonewrap .hs-metrics{ display:flex; gap:calc(7px * var(--kit-scale)); }
.gg-demo .cl-phonewrap .kit-feature{ height:124px; }
.gg-demo .cl-phonewrap .kit-feature.is-tall{ height:138px; }
.gg-demo .cl-phonewrap .kit-tile{ flex-basis:calc(124px * var(--kit-scale)); }
.gg-demo .cl-phonewrap .kit-tile-img{ aspect-ratio:1.35; }
.gg-demo #clShift{ position:relative; background:linear-gradient(180deg,#eef3fc 0%,#e2eaf8 100%); color:#0c1430; }
.gg-demo #clShift .cl-wrap{ position:relative; max-width:1180px; margin:0 auto; padding:96px 44px 88px; text-align:center; }
@media (max-width:600px){
  .gg-demo #clShift .cl-wrap{ padding:66px 18px 60px; }
}
.gg-demo #clShift .cl-eyebrow{ font-family:'Host Grotesk',system-ui,sans-serif; font-weight:600; font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:#2E56FF; }
.gg-demo .cd-devtoggle-wrap{ display:flex; justify-content:center; margin:38px auto 0; }
.gg-demo .cd-devtoggle{ position:relative; display:inline-flex; gap:4px; padding:5px; border-radius:999px; border:1px solid rgba(12,20,48,0.12); background:rgba(12,20,48,0.04); }
.gg-demo .cd-dev-thumb{ position:absolute; top:5px; bottom:5px; left:0; width:0; border-radius:999px; background:#0c1430; z-index:0; transition:left .42s cubic-bezier(.4,0,.2,1), width .42s cubic-bezier(.4,0,.2,1); }
.gg-demo .cd-devbtn{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:999px; border:none; background:transparent; cursor:pointer; color:rgba(12,20,48,0.6); font-family:inherit; font-size:13.5px; font-weight:600; transition:color .25s; }
.gg-demo .cd-devbtn svg{ width:17px; height:17px; }
.gg-demo .cd-devbtn:hover{ color:#0c1430; }
.gg-demo .cd-devbtn.on, .gg-demo .cd-devbtn.on:hover{ color:#fff; }
@media (max-width:520px){
  .gg-demo .cd-devbtn{ padding:9px 13px; font-size:12px; gap:6px; }
}
.gg-demo .cd-stage{ position:relative; margin:46px auto 0; min-height:640px; display:grid; grid-template-columns:100%; place-items:center; }
.gg-demo .cd-laptop{ --dev-h:700px; --dev-w:1000px; }
.gg-demo .cd-tablet{ --dev-h:740px; --dev-w:524px; }
.gg-demo .cd-phone-wrap{ --dev-h:640px; --dev-w:300px; }
.gg-demo .cd-tv{ --dev-w:min(400px,94vw); }
.gg-demo .cd-laptop, .gg-demo .cd-tablet, .gg-demo .cd-tv, .gg-demo .cd-phone-wrap{ justify-self:start; position:relative; left:calc(50% - var(--dev-w,0px)/2); transform:scale(var(--dev-s,1)); transform-origin:50% 42%; margin-bottom:calc((var(--dev-s,1) - 1) * var(--dev-h,0px)); }
@media (max-width:1040px){
  .gg-demo .cd-laptop{ --dev-s:0.62; }
  .gg-demo .cd-stage{ min-height:0; align-items:start; }
  .gg-demo .cd-laptop, .gg-demo .cd-tablet, .gg-demo .cd-tv, .gg-demo .cd-phone-wrap{ transform-origin:top center; }
}
@media (max-width:640px){
  .gg-demo .cd-laptop{ --dev-s:0.36; }
  .gg-demo .cd-tablet{ --dev-s:0.6; }
  .gg-demo .cd-phone-wrap{ --dev-s:0.7; }
  .gg-demo .cd-stage{ margin-top:30px; }
}
.gg-demo .cd-stage[data-dev="desktop"] .cd-tablet, .gg-demo .cd-stage[data-dev="desktop"] .cd-tv, .gg-demo .cd-stage[data-dev="desktop"] .cd-phone-wrap{ display:none; }
.gg-demo .cd-stage[data-dev="tablet"] .cd-laptop, .gg-demo .cd-stage[data-dev="tablet"] .cd-tv, .gg-demo .cd-stage[data-dev="tablet"] .cd-phone-wrap{ display:none; }
.gg-demo .cd-stage[data-dev="tv"] .cd-laptop, .gg-demo .cd-stage[data-dev="tv"] .cd-tablet, .gg-demo .cd-stage[data-dev="tv"] .cd-phone-wrap{ display:none; }
.gg-demo .cd-stage[data-dev="phone"] .cd-laptop, .gg-demo .cd-stage[data-dev="phone"] .cd-tablet, .gg-demo .cd-stage[data-dev="phone"] .cd-tv{ display:none; }
.gg-demo .cd-arrow{ position:absolute; z-index:7; width:46px; height:46px; border:0; border-radius:999px; background:#fff; color:#0c1430; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 14px 32px -12px rgba(12,20,48,0.4), 0 0 0 1px rgba(12,20,48,0.07); transform:translateY(-50%); transition:transform .22s ease, box-shadow .22s ease, opacity .22s ease; }
.gg-demo .cd-arrow svg{ width:20px; height:20px; }
.gg-demo .cd-arrow:hover{ transform:translateY(-50%) scale(1.1); box-shadow:0 18px 38px -12px rgba(12,20,48,0.5), 0 0 0 1px rgba(12,20,48,0.09); }
.gg-demo .cd-arrow.out{ transform:translateY(-50%) scale(0); opacity:0; pointer-events:none; }
.gg-demo .cd-arrow.pop{ animation:cdArrowPop .6s cubic-bezier(.2,.7,.3,1) both; }
@keyframes cdArrowPop{ 0%{ transform:translateY(-50%) scale(0); opacity:0; } 55%{ transform:translateY(-50%) scale(1.16); opacity:1; } 78%{ transform:translateY(-50%) scale(.94); } 100%{ transform:translateY(-50%) scale(1); opacity:1; } }
@media (max-width:1080px){
  .gg-demo .cd-arrow{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .gg-demo .cd-arrow.pop{ animation:none; }
}
.gg-demo .cl-vs-toggle{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:30px auto 0; max-width:800px; }
.gg-demo .cl-vsg{ display:flex; align-items:center; gap:10px; padding:7px 15px 7px 7px; border-radius:999px; border:1px solid rgba(12,20,48,.14); background:rgba(12,20,48,.03); cursor:pointer; transition:border-color .25s, background .25s, transform .2s, box-shadow .25s; }
.gg-demo .cl-vsg:hover{ transform:translateY(-1px); border-color:rgba(46, 86, 255,.4); }
.gg-demo .cl-vsg img{ width:34px; height:34px; border-radius:50%; object-fit:cover; object-position:50% 22%; filter:grayscale(1) brightness(.95); transition:filter .25s; flex:none; }
.gg-demo .cl-vsg span{ display:flex; flex-direction:column; line-height:1.15; text-align:left; min-width:0; }
.gg-demo .cl-vsg b{ font-size:13px; font-weight:600; color:rgba(12,20,48,.82); white-space:nowrap; }
.gg-demo .cl-vsg s{ font-family:var(--kit-mono); font-size:9.5px; letter-spacing:.02em; text-decoration:none; color:rgba(12,20,48,.5); white-space:nowrap; }
.gg-demo .cl-vsg.on{ border-color:transparent; }
.gg-demo .cl-vsg.on img{ filter:none; }
.gg-demo .cl-vsg.on b{ color:#fff; }
.gg-demo .cl-vsg.on s{ color:rgba(255,255,255,.85); }
@media (max-width:680px){
  .gg-demo .cl-vsg s{ display:none; }
}
.gg-demo .cd-feat > .cd-hero-pill{ position:absolute; top:15px; left:18px; z-index:2; display:inline-flex; align-items:center; gap:6px; margin:0; font-family:var(--kit-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--kit-accent); padding:5px 12px; border-radius:999px; box-shadow:0 6px 16px -8px rgba(0,0,0,.6); }
.gg-demo .cd-feat > .cd-hero-cta{ display:inline-flex; align-items:center; gap:7px; align-self:flex-start; margin-top:12px; padding:10px 18px; border:0; border-radius:999px; background:#fff; color:#0a1022; font-size:13px; font-weight:600; cursor:pointer; box-shadow:0 8px 22px -10px rgba(0,0,0,.5); }
.gg-demo .cd-badge{ position:absolute; top:16px; right:16px; z-index:6; display:inline-flex; align-items:center; gap:6px; font-family:var(--kit-mono); font-size:10px; letter-spacing:.03em; color:var(--kit-accent-ink); background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:6px 12px; border-radius:999px; box-shadow:var(--kit-shadow-card); opacity:0; transition:opacity .4s; }
.gg-demo .cd-badge.show{ opacity:1; }
.gg-demo .cd-badge svg{ width:12px; height:12px; fill:var(--kit-accent); }
.gg-demo .cd-card.live{ background:var(--kit-accent-soft); }
.gg-demo .cd-ctop{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.gg-demo .cd-row2{ display:flex; align-items:flex-start; gap:13px; }
.gg-demo .cd-thumb{ width:46px; height:46px; flex:none; border-radius:11px; background-size:cover; background-position:center; }
.gg-demo .cd-pill{ display:inline-flex; align-items:center; gap:5px; flex:none; font-family:var(--kit-mono); font-size:9.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; border-radius:999px; white-space:nowrap; }
.gg-demo .cd-pill-ok{ background:rgba(31,165,103,.15); color:#157a4a; }
.gg-demo .cd-pill-warn{ background:rgba(176,113,12,.16); color:#8a5a0c; }
.gg-demo .cd-pill-accent{ background:var(--kit-accent-soft); color:var(--kit-accent-ink); }
.gg-demo .cd-progress{ height:5px; border-radius:999px; background:var(--kit-fill-strong); overflow:hidden; margin:14px 0 9px; }
.gg-demo .cd-progress i{ display:block; height:100%; border-radius:999px; background:var(--kit-accent); }
.gg-demo .cd-cfoot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:12px; }
.gg-demo .cd-cta{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--kit-on-accent); background:var(--kit-accent); padding:7px 14px; border-radius:999px; cursor:pointer; white-space:nowrap; }
.gg-demo .cd-barcode{ height:42px; border-radius:8px; background:repeating-linear-gradient(90deg, var(--kit-ink) 0 2px, transparent 2px 4px, var(--kit-ink) 4px 5.5px, transparent 5.5px 8px); margin-top:auto; opacity:.82; }
.gg-demo .cd-tablet{ position:relative; width:524px; border-radius:34px; padding:14px; background:linear-gradient(155deg,#2b3850,#0b1120 62%); box-shadow:0 50px 100px -34px rgba(8,14,32,.55), inset 0 0 0 1px rgba(255,255,255,.05); }
.gg-demo .cd-tab-cam{ position:absolute; top:13px; left:50%; transform:translateX(-50%); width:7px; height:7px; border-radius:50%; background:#05080f; z-index:3; }
.gg-demo .cd-tab-screen{ position:relative; border-radius:22px; overflow:hidden; background:var(--kit-bg); height:692px; display:flex; flex-direction:column; text-align:left; }
.gg-demo .cd-tab-bar{ display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid var(--kit-line); }
.gg-demo .cd-tab-logo{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:var(--kit-ink); }
.gg-demo .cd-tab-user{ display:flex; align-items:center; gap:9px; }
.gg-demo .cd-tab-user img{ width:32px; height:32px; border-radius:50%; object-fit:cover; }
.gg-demo .cd-tab-user b{ font-size:12.5px; color:var(--kit-ink); font-weight:600; display:block; line-height:1.2; }
.gg-demo .cd-tab-user s{ text-decoration:none; font-size:9.5px; color:var(--kit-ink-3); font-family:var(--kit-mono); display:block; }
.gg-demo .cd-tab-canvas{ position:relative; flex:1; padding:18px 18px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.gg-demo .cd-tab-canvas .cd-feat{ min-height:178px; }
.gg-demo .cd-tab-canvas .cd-feat h3{ font-size:21px; }
.gg-demo .cd-tab-canvas .cd-feat p{ font-size:13px; }
.gg-demo .cd-tab-canvas .cd-grid{ grid-template-columns:1fr 1fr; grid-auto-flow:dense; }
.gg-demo .cd-tab-canvas .cd-card{ min-height:82px; padding:13px 14px; }
.gg-demo .cd-tab-canvas .cd-card.photo{ min-height:104px; }
.gg-demo .cd-tab-canvas .cd-thumb{ width:42px; height:42px; }
.gg-demo .cd-tab-canvas .cd-card b{ font-size:14.5px; }
.gg-demo .cd-tab-canvas .cd-row2{ gap:11px; }
.gg-demo .cd-tv{ width:min(400px,94vw); position:relative; }
.gg-demo .cd-tv-screen{ position:relative; aspect-ratio:10/16; border-radius:22px; overflow:hidden; background:#070b16; border:12px solid #0a0e1a; box-shadow:0 50px 110px -30px rgba(0,0,0,.85), 0 0 100px -24px rgba(46, 86, 255,.28); text-align:left; }
.gg-demo .cd-tv::after{ content:''; display:block; margin:16px auto 0; width:56%; height:14px; border-radius:8px; background:linear-gradient(180deg,#1a2030,#0b0f1c); box-shadow:inset 0 2px 3px rgba(255,255,255,.09), 0 12px 26px -12px rgba(0,0,0,.6); }
.gg-demo .cd-tv-img{ position:absolute; inset:0; background-size:cover; background-position:center; }
.gg-demo .cd-tv-screen::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,9,22,.5) 0%, rgba(5,9,22,.78) 55%, rgba(5,9,22,.94) 100%); }
.gg-demo .cd-tv-top{ position:absolute; top:0; left:0; right:0; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:20px 22px; }
.gg-demo .cd-tv-logo{ display:flex; align-items:center; gap:8px; color:#fff; font-weight:700; font-size:15px; }
.gg-demo .cd-tv-clock{ font-family:var(--kit-mono); font-size:13px; color:rgba(255,255,255,.8); }
.gg-demo .cd-tv-greet{ position:absolute; left:22px; right:22px; top:112px; z-index:2; }
.gg-demo .cd-tv-eyebrow{ font-family:var(--kit-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--kit-accent); margin-bottom:10px; }
.gg-demo .cd-tv-greet h3{ font-size:32px; font-weight:700; letter-spacing:-.02em; color:#fff; margin:0; line-height:1.05; }
.gg-demo .cd-tv-greet p{ font-size:14px; color:rgba(255,255,255,.72); margin:10px 0 0; max-width:32ch; }
.gg-demo .cd-tv-plan{ position:absolute; left:22px; right:22px; bottom:22px; z-index:2; display:flex; flex-direction:column; gap:9px; }
.gg-demo .cd-tv-acts{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:5px; }
.gg-demo .cd-tv-act{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px 12px; border:1px solid rgba(255,255,255,.18); border-radius:14px; background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); color:#fff; font:inherit; cursor:pointer; transition:background .2s, transform .2s; }
.gg-demo .cd-tv-act:hover{ background:rgba(255,255,255,.2); transform:translateY(-2px); }
.gg-demo .cd-tv-act .kit-ic{ font-size:22px; }
.gg-demo .cd-tv-act b{ font-size:12px; font-weight:600; text-align:center; line-height:1.2; letter-spacing:-.01em; }
.gg-demo .cd-tv-card{ background:rgba(255,255,255,.08); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.15); border-radius:14px; padding:13px 16px; display:flex; align-items:baseline; gap:12px; }
.gg-demo .cd-tv-time{ font-family:var(--kit-mono); font-size:12px; font-weight:700; color:var(--kit-accent); flex:none; min-width:52px; }
.gg-demo .cd-tv-card b{ display:block; font-size:15px; font-weight:700; color:#fff; letter-spacing:-.01em; line-height:1.2; }
.gg-demo .cd-tv-card s{ display:block; text-decoration:none; font-size:12px; color:rgba(255,255,255,.62); margin-top:3px; }
.gg-demo .cd-tv-screen .cd-badge{ top:56px; right:22px; }
.gg-demo .cd-laptop{ position:relative; width:1000px; }
.gg-demo .cd-screen{ position:relative; border-radius:14px 14px 4px 4px; background:#0a1022; overflow:hidden; box-shadow:0 40px 90px -30px rgba(8,14,32,.55), 0 0 0 2px #11192e, 0 0 0 11px #161d31; }
.gg-demo .cd-chrome{ display:flex; align-items:center; gap:14px; padding:0 16px; height:38px; background:#e9edf5; border-bottom:1px solid rgba(12,20,48,.08); }
.gg-demo .cd-dots{ display:flex; gap:7px; }
.gg-demo .cd-dots i{ width:11px; height:11px; border-radius:50%; background:rgba(12,20,48,.16); }
.gg-demo .cd-dots i:first-child{ background:#ff5f57; }
.gg-demo .cd-dots i:nth-child(2){ background:#febc2e; }
.gg-demo .cd-dots i:nth-child(3){ background:#28c840; }
.gg-demo .cd-url{ flex:1; max-width:320px; display:flex; align-items:center; justify-content:center; gap:8px; height:24px; padding:0 12px; border-radius:7px; background:#fff; font-family:'Host Grotesk',system-ui,sans-serif; font-size:11px; color:rgba(12,20,48,.55); }
.gg-demo .cd-url svg{ width:11px; height:11px; opacity:.5; }
.gg-demo .cd-base{ position:relative; width:118%; margin-left:-9%; height:14px; border-radius:0 0 13px 13px; background:linear-gradient(180deg,#c3cbdb,#9aa3bb); box-shadow:0 22px 40px -18px rgba(8,14,32,.5); }
.gg-demo .cd-base::after{ content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:130px; height:7px; border-radius:0 0 8px 8px; background:#828ca6; }
.gg-demo .cd-app{ display:grid; grid-template-columns:200px 1fr; height:600px; background:var(--kit-bg); color:var(--kit-ink); text-align:left; }
.gg-demo .cd-side{ border-right:1px solid var(--kit-line); padding:18px 14px; display:flex; flex-direction:column; gap:3px; background:var(--kit-bg-2); }
.gg-demo .cd-side-logo{ display:flex; align-items:center; gap:8px; height:30px; margin:2px 8px 16px; font-weight:700; font-size:15px; letter-spacing:-.01em; color:var(--kit-ink); }
.gg-demo .cd-logo-img{ display:block; width:auto; }
.gg-demo .cd-logo-img.inv{ filter:brightness(0) invert(1); }
.gg-demo .cd-nav{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:10px; font-size:13.5px; font-weight:500; color:var(--kit-ink-2); cursor:default; }
.gg-demo .cd-nav .kit-ic{ font-size:18px; }
.gg-demo .cd-nav.on{ color:var(--kit-accent); background:var(--kit-accent-soft); }
.gg-demo .cd-side-foot{ margin-top:auto; display:flex; align-items:center; gap:9px; padding:9px 7px; border-top:1px solid var(--kit-line); }
.gg-demo .cd-side-foot img{ width:30px; height:30px; border-radius:50%; object-fit:cover; }
.gg-demo .cd-side-foot b{ display:block; font-size:12.5px; color:var(--kit-ink); font-weight:600; line-height:1.2; }
.gg-demo .cd-side-foot s{ display:block; text-decoration:none; font-size:10px; color:var(--kit-ink-3); font-family:var(--kit-mono); }
.gg-demo .cd-main{ display:flex; flex-direction:column; min-width:0; overflow:hidden; }
.gg-demo .cd-top{ display:flex; align-items:flex-end; justify-content:space-between; padding:24px 28px 0; }
.gg-demo .cd-greet b{ display:block; font-size:22px; font-weight:600; letter-spacing:-.01em; color:var(--kit-ink); }
.gg-demo .cd-greet s{ display:block; text-decoration:none; font-family:var(--kit-mono); font-size:12px; color:var(--kit-ink-2); margin-top:3px; }
.gg-demo .cd-search{ display:flex; align-items:center; gap:8px; height:36px; padding:0 14px; border-radius:10px; background:var(--kit-fill); font-size:13px; color:var(--kit-ink-2); width:220px; }
.gg-demo .cd-search .kit-ic{ font-size:16px; }
.gg-demo .cd-canvas{ position:relative; flex:1; padding:18px 24px 24px; display:flex; flex-direction:column; gap:13px; overflow:hidden; }
.gg-demo .cd-feat{ position:relative; min-height:184px; border-radius:16px; overflow:hidden; background-size:cover; background-position:center; display:flex; flex-direction:column; justify-content:flex-end; padding:20px 24px; }
.gg-demo .cd-feat::after{ content:''; position:absolute; inset:0; background:var(--kit-scrim); }
.gg-demo .cd-feat > *{ position:relative; z-index:1; color:#fff; }
.gg-demo .cd-feat .k{ font-family:var(--kit-mono); font-size:11px; letter-spacing:.04em; color:rgba(255,255,255,.92); margin-bottom:8px; }
.gg-demo .cd-feat h3{ margin:0; font-size:24px; font-weight:600; letter-spacing:-.01em; }
.gg-demo .cd-feat p{ margin:6px 0 0; font-size:13px; color:rgba(255,255,255,.84); }
.gg-demo .cd-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.gg-demo .cd-card{ position:relative; overflow:hidden; border-radius:14px; background:var(--kit-fill); border:1px solid var(--kit-line); padding:13px 16px; display:flex; flex-direction:column; min-height:90px; }
.gg-demo .cd-card.sp2{ grid-column:span 2; }
.gg-demo .cd-card.is-accent{ background:var(--kit-accent); color:var(--kit-on-accent); border-color:transparent; }
.gg-demo .cd-card.live{ border-color:transparent; }
.gg-demo .cd-card.photo{ padding:0; justify-content:flex-end; min-height:108px; border:0; }
.gg-demo .cd-card.photo .cd-cimg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.gg-demo .cd-card.photo::after{ content:''; position:absolute; inset:0; background:var(--kit-scrim); }
.gg-demo .cd-card.photo > .cd-cbody{ position:relative; z-index:1; color:#fff; padding:14px 16px; }
.gg-demo .cd-card-k{ font-family:var(--kit-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--kit-accent); margin-bottom:7px; }
.gg-demo .cd-card.is-accent .cd-card-k, .gg-demo .cd-card.photo .cd-card-k{ color:rgba(255,255,255,.9); }
.gg-demo .cd-card b{ font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--kit-ink); line-height:1.25; }
.gg-demo .cd-card.is-accent b, .gg-demo .cd-card.photo b{ color:#fff; }
.gg-demo .cd-card s{ text-decoration:none; display:block; font-size:12px; color:var(--kit-ink-2); margin-top:5px; line-height:1.4; }
.gg-demo .cd-card.is-accent s, .gg-demo .cd-card.photo s{ color:rgba(255,255,255,.82); }
.gg-demo .cd-phone-wrap{ position:relative; }
.gg-demo .cd-phone-wrap .kit-phone{ width:300px; height:624px; --kit-scale:0.74; position:relative; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 70px -22px rgba(0,0,0,.5),0 0 0 7px #0c0e12,0 0 0 8px #2a2d34; }
.gg-demo .cd-phone-wrap .kit-phone-island{ width:78px; height:24px; top:11px; }
.gg-demo .cd-phone-wrap .kit-statusbar{ flex:none; padding:13px 19px 0; }
.gg-demo .cd-phone-wrap .kit-statusbar .time{ font-size:13px; }
.gg-demo .cd-phone-wrap .kit-screen{ flex:1; min-height:0; display:flex; flex-direction:column; gap:calc(14px * var(--kit-scale)); padding:11px 12px 4px; overflow:hidden; position:relative; }
.gg-demo .cd-phone-wrap .kit-screen > *{ flex:none; }
.gg-demo .cd-phone-wrap .kit-nav{ position:absolute; left:0; right:0; bottom:0; z-index:5; padding:5px 11px 12px; }
.gg-demo .cd-phone-wrap .hs-top{ display:flex; align-items:center; gap:10px; }
.gg-demo .cd-phone-wrap .hs-top .kit-avatar{ width:40px; height:40px; }
.gg-demo .cd-phone-wrap .hs-top b{ font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--kit-ink); display:block; line-height:1.2; }
.gg-demo .cd-phone-wrap .hs-top s{ display:block; text-decoration:none; font-family:var(--kit-mono); font-size:10px; color:var(--kit-ink-2); margin-top:2px; }
.gg-demo .cd-phone-wrap .hs-lab{ font-family:var(--kit-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--kit-ink-2); margin:calc(7px * var(--kit-scale)) 0 calc(-2px * var(--kit-scale)); }
.gg-demo .cd-phone-wrap .kit-feature{ height:124px; }
.gg-demo .cd-phone-wrap .kit-feature.is-tall{ height:138px; }
.gg-demo .cd-disclaimer{ max-width:760px; margin:34px auto 0; text-align:center; font-size:12.5px; line-height:1.55; color:rgba(12,20,48,0.5); text-wrap:balance; }
.gg-demo .cd-disclaimer em{ font-style:normal; font-weight:600; color:rgba(12,20,48,0.72); }
.gg-demo #clShift .cl-eyebrow, .gg-demo #clShift .cl-sec-h, .gg-demo #clShift .cl-sec-sub, .gg-demo #clShift .cd-devtoggle-wrap, .gg-demo #clShift .cd-stage{ opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.gg-demo #clShift.is-in .cl-eyebrow{ opacity:1; transform:none; }
.gg-demo #clShift.is-in .cl-sec-h{ opacity:1; transform:none; transition-delay:.06s; }
.gg-demo #clShift.is-in .cl-sec-sub{ opacity:1; transform:none; transition-delay:.12s; }
.gg-demo #clShift.is-in .cd-devtoggle-wrap{ opacity:1; transform:none; transition-delay:.18s; }
.gg-demo #clShift.is-in .cd-stage{ opacity:1; transform:none; transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){
  .gg-demo #clShift .cl-eyebrow, .gg-demo #clShift .cl-sec-h, .gg-demo #clShift .cl-sec-sub, .gg-demo #clShift .cd-devtoggle-wrap, .gg-demo #clShift .cd-stage{ opacity:1 !important; transform:none !important; }
}
.gg-demo .uc-body.uc-kit .kit-balance{ box-shadow:0 10px 24px -12px rgba(10,21,48,.45); margin-bottom:10px; padding:10px 12px; }
.gg-demo .uc-body.uc-kit .kit-balance-amt{ font-size:15px; margin-top:2px; }
.gg-demo .uc-body.uc-kit .kit-balance-delta{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; margin-top:4px; }
.gg-demo .uc-body.uc-kit .kit-balance-delta svg{ margin-right:3px; vertical-align:-1px; }
.gg-demo .uc-body.uc-kit .hs-metrics{ margin-bottom:12px; }
.gg-demo .uc-body.uc-kit .kit-metric{ padding:7px 5px 6px; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--kit-accent) 12%, transparent); }
.gg-demo .uc-body.uc-kit .kit-metric s{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.gg-demo .uc-body.uc-kit .kit-metric b, .gg-demo .uc-body.uc-kit .kit-metric s{ white-space:nowrap; text-align:center; align-self:center; }
.gg-demo .uc-body.uc-kit .kit-metric s{ text-transform:uppercase; letter-spacing:.04em; font-size:6.5px; margin-top:2px; }
.gg-demo .uc-body.uc-kit .kit-card{ padding:10px 12px 0; margin-bottom:12px; background:color-mix(in srgb, var(--kit-accent) 6%, var(--kit-bg)); }
.gg-demo .uc-body.uc-kit .kit-card .hs-lab{ display:flex; justify-content:space-between; align-items:baseline; }
.gg-demo .uc-body.uc-kit .kit-spark{ height:46px; margin:5px -12px 0; width:calc(100% + 24px); }
.gg-demo .uc-body.uc-kit .kit-row{ padding:5px 0; }
.gg-demo .uc-body.uc-kit .kit-row-lead{ background:color-mix(in srgb, var(--kit-accent) 8%, var(--kit-bg)); color:var(--kit-accent-ink); }
.gg-demo .uc-body.uc-kit .kit-row-lead .kit-ic{ font-size:12px; }
.gg-demo .uc-body.uc-kit .hs-lab{ font-size:7px; letter-spacing:.1em; }
@keyframes tmOrb{
    from{ transform:translate(0,0) scale(1); }
    to{ transform:translate(36%,32%) scale(1.18); }
  }
.gg-demo #clChat, .gg-demo #clPick, .gg-demo #clShift, .gg-demo #clUse, .gg-demo #clHow, .gg-demo #clTrust, .gg-demo #clProof, .gg-demo #clVision, .gg-demo #clTeam, .gg-demo #clStart{ scroll-margin-top:1px; }
@media (max-width:760px){
  .gg-demo #clShift{ background:#0A1530; }
  .gg-demo #clShift .cl-eyebrow{ color:#5E86FF; }
  .gg-demo #clShift .cl-sec-h{ color:#fff; }
  .gg-demo #clShift .cl-sec-h .cl-hl{ color:#5E86FF; }
  .gg-demo #clShift .cl-sec-sub{ color:rgba(255,255,255,.6); }
  .gg-demo .cd-devtoggle{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); }
  .gg-demo .cd-devbtn{ color:rgba(255,255,255,.66); }
  .gg-demo .cd-devbtn:hover{ color:#fff; }
  .gg-demo .cd-dev-thumb{ background:#2E56FF; }
  .gg-demo .cl-vsg{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16); }
  .gg-demo .cl-vsg b{ color:rgba(255,255,255,.85); }
  .gg-demo .cl-vsg s{ color:rgba(255,255,255,.5); }
  .gg-demo .cd-disclaimer{ color:rgba(255,255,255,.55); }
  .gg-demo .cd-disclaimer em{ color:#5E86FF; }
}