/* Home phone frames (hero, languages, deep chart). Home-only: loaded by landing-new/index.html.
   One in-phone chat at the app type scale (user right, Vedika left), typed by grapheme so
   Hindi, Tamil and Bangla never split mid-glyph. Phones are sized to the viewport so the
   whole bezel stays below the nav and inside its section. */
.gg-chat{
  --gg-chat-ink:#25103f;--gg-chat-muted:#746487;--gg-chat-line:rgba(75,35,138,.14);
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;overflow:hidden;
  container-type:inline-size;border-radius:inherit;
  background:linear-gradient(180deg,#faf7ff 0%,#f3eefc 46%,#ede6fa 100%);
  color:var(--gg-chat-ink);
  font-family:PPNeue,"Noto Sans Devanagari","Noto Sans Tamil","Noto Sans Bengali","Kohinoor Devanagari","Tamil Sangam MN","Bangla Sangam MN",system-ui,sans-serif;
  font-size:clamp(10.5px,4.3cqi,14px);line-height:1.38;text-align:left;letter-spacing:0;
  -webkit-font-smoothing:antialiased
}
.gg-chat *{box-sizing:border-box}
.gg-chat-status{flex:none;display:flex;align-items:center;justify-content:space-between;height:11.5cqi;padding:3.2cqi 7.5cqi 0;font-size:3.6cqi;font-weight:600;color:var(--gg-chat-ink)}
.gg-chat-status svg{width:15cqi;height:3.4cqi;fill:currentColor}
.gg-chat-island{position:absolute;top:2.6cqi;left:50%;width:27cqi;height:7.6cqi;border-radius:99px;background:#0d0b10;transform:translateX(-50%)}
.gg-chat-head{flex:none;display:flex;align-items:center;gap:2.6cqi;padding:3.4cqi 5.2cqi 3cqi;border-bottom:1px solid var(--gg-chat-line)}
.gg-chat-head img{width:8.6cqi;height:8.6cqi;border-radius:50%;object-fit:cover;flex:none}
.gg-chat-head b{display:block;font-size:4cqi;font-weight:600;line-height:1.15}
.gg-chat-head small{display:block;font-size:3cqi;color:var(--gg-chat-muted);line-height:1.2}
.gg-chat-head small:before{content:"";display:inline-block;width:1.6cqi;height:1.6cqi;margin-right:1.2cqi;border-radius:50%;background:#3fb27f;vertical-align:.2cqi}
.gg-chat-thread{flex:1 1 auto;min-height:0;margin:0;padding:3.6cqi 4.4cqi 2cqi;list-style:none;display:flex;flex-direction:column;justify-content:flex-end;gap:2.4cqi;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6cqi);mask-image:linear-gradient(180deg,transparent 0,#000 6cqi)}
.gg-msg{max-width:82%;padding:2.4cqi 3.4cqi;border-radius:4.6cqi 4.6cqi 4.6cqi 1.4cqi;background:#fff;border:1px solid var(--gg-chat-line);box-shadow:0 .6cqi 2cqi rgba(46,16,101,.06);white-space:pre-line;overflow-wrap:break-word;transform-origin:0 100%}
.gg-msg[lang="hi"],.gg-msg[lang="ta"],.gg-msg[lang="bn"]{line-height:1.55}
.gg-msg--user{align-self:flex-end;background:#3e246f;border-color:transparent;color:#fff;border-radius:4.6cqi 4.6cqi 1.4cqi 4.6cqi;transform-origin:100% 100%}
.gg-msg--vedika{align-self:flex-start}
.gg-msg--note{align-self:center;max-width:none;padding:1cqi 3cqi;border:0;background:rgba(75,35,138,.08);box-shadow:none;border-radius:99px;font-size:3cqi;color:var(--gg-chat-muted)}
.gg-msg--chart{align-self:stretch;max-width:none;padding:3cqi 3.4cqi 3.4cqi;border-radius:4.6cqi}
.gg-msg--chart b{display:block;font-size:3.8cqi;font-weight:600;line-height:1.2}
.gg-msg--chart small{display:block;margin-bottom:2cqi;font-size:2.9cqi;color:var(--gg-chat-muted)}
.gg-kundli{display:block;width:100%;height:auto;aspect-ratio:1;overflow:visible}
.gg-kundli .k-line{fill:none;stroke:#4b238a;stroke-width:.55;stroke-linecap:square}
.gg-kundli .k-frame{fill:#fbf9ff;stroke:#4b238a;stroke-width:1;vector-effect:non-scaling-stroke}
.gg-kundli .k-num{font:500 4.6px/1 PPNeue,system-ui,sans-serif;fill:#9a8bb5;text-anchor:middle;dominant-baseline:central}
.gg-kundli .k-pl{font:600 5.4px/1 PPNeue,system-ui,sans-serif;fill:#25103f;text-anchor:middle;dominant-baseline:central}
.gg-kundli .k-pl.k-hl{fill:#7c3aed}
.gg-kundli .k-ring{fill:rgba(124,58,237,.12);stroke:#7c3aed;stroke-width:.5;vector-effect:non-scaling-stroke}
.gg-typing{align-self:flex-start;display:flex;gap:1.2cqi;padding:3cqi 3.6cqi;border-radius:4.6cqi 4.6cqi 4.6cqi 1.4cqi;background:#fff;border:1px solid var(--gg-chat-line)}
.gg-typing i{width:1.6cqi;height:1.6cqi;border-radius:50%;background:#9a8bb5;animation:gg-typing 1s infinite ease-in-out}
.gg-typing i:nth-child(2){animation-delay:.15s}.gg-typing i:nth-child(3){animation-delay:.3s}
@keyframes gg-typing{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-.8cqi)}}
.gg-chat-composer{flex:none;display:flex;align-items:center;gap:2cqi;margin:1.6cqi 4.4cqi 2.4cqi;padding:1.4cqi 1.4cqi 1.4cqi 4cqi;border-radius:99px;background:#fff;border:1px solid var(--gg-chat-line);font-size:3.4cqi;color:var(--gg-chat-muted)}
.gg-chat-composer span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gg-chat-composer i{flex:none;display:grid;place-items:center;width:8cqi;height:8cqi;border-radius:50%;background:#3e246f}
.gg-chat-composer i svg{width:4cqi;height:4cqi;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.gg-chat-tabs{flex:none;display:grid;grid-template-columns:repeat(4,1fr);padding:1.4cqi 3cqi 5.6cqi;border-top:1px solid var(--gg-chat-line);background:rgba(255,255,255,.62)}
.gg-chat-tabs span{display:grid;justify-items:center;gap:.8cqi;font-size:2.7cqi;color:var(--gg-chat-muted)}
.gg-chat-tabs span svg{width:5.4cqi;height:5.4cqi;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gg-chat-tabs span.is-active{color:var(--gg-chat-ink);font-weight:600}
.gg-chat-tabs span.is-active svg{stroke:#4b238a}
.gg-chat-tabs:after{content:"";position:absolute;left:50%;bottom:1.8cqi;width:34cqi;height:1.2cqi;border-radius:99px;background:#1b1324;transform:translateX(-50%)}
/* Sequencing states set by home-phones.js. Without JS every message stays visible. */
.gg-chat.is-live .gg-msg{transition:opacity .32s ease,transform .42s cubic-bezier(.16,1,.3,1)}
.gg-chat.is-live .gg-msg.is-pending{display:none}
.gg-chat.is-live .gg-msg.is-entering{opacity:0;transform:translateY(2cqi) scale(.94)}
.gg-chat .gg-chat-thread{transition:opacity .4s ease}
.gg-chat.is-resetting .gg-chat-thread{opacity:0}
.gg-chat.is-live .gg-msg--chart .k-line{stroke-dasharray:1;stroke-dashoffset:1}
.gg-chat.is-live .gg-msg--chart .k-pl,.gg-chat.is-live .gg-msg--chart .k-num,.gg-chat.is-live .gg-msg--chart .k-ring{opacity:0}
.gg-chat.is-live .gg-msg--chart.is-drawn .k-line{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1)}
.gg-chat.is-live .gg-msg--chart.is-drawn .k-num{opacity:1;transition:opacity .4s .8s ease}
.gg-chat.is-live .gg-msg--chart.is-drawn .k-pl,.gg-chat.is-live .gg-msg--chart.is-drawn .k-ring{opacity:1;transition:opacity .5s 1.05s ease}

/* 1 - hero phone: the stage scales it up to 1.16 while it settles, so cap the base size to
   keep the top bezel at least 96px below the viewport top (nav pill ends at about 80px). */
.hero .phone{width:min(304px,45vw,calc((100svh - 192px) / 1.17 * 443 / 960))!important;background:#f3eefc!important;container-type:inline-size}
.hero .phone .gg-chat{inset:0}
@media (max-width:760px){.hero .phone{width:min(258px,calc((100svh - 176px) / 1.17 * 443 / 960))!important}}

/* 2 - languages phone (#home-phone-preview): Cleo highlight-module = blurred hero landscape,
   centred phone, copy top-left. */
#home-phone-preview{overflow:hidden;background:#7f8e86!important}
#home-phone-preview>.gg-plate{position:absolute;inset:-6%;z-index:0;width:112%;height:112%;object-fit:cover;filter:blur(26px) saturate(1.08) brightness(.96);transform:scale(calc(1.04 + var(--gg-tilt,0) * .02))}
#home-phone-preview:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(20,28,24,.16))}
#home-phone-preview>.media-copy{position:absolute!important;z-index:4!important;top:55px!important;left:55px!important;max-width:min(36vw,520px)!important}
#home-phone-preview>.home-phone-preview-controls{z-index:5}
.gg-phone{
  --gg-ph:min(640px,calc(100% - 160px));
  position:absolute;z-index:3;left:50%;top:50%;height:var(--gg-ph);aspect-ratio:443/960;
  border-radius:17% / 7.9%;padding:0;overflow:hidden;background:#f3eefc;
  border:1px solid #9e8f8a;box-shadow:inset 0 0 0 5px #181719,0 44px 110px rgba(14,22,18,.38);
  container-type:inline-size;
  transform:translate(-50%,-50%) translateY(calc(var(--gg-tilt,0) * -28px)) perspective(1600px) rotateX(calc(var(--gg-tilt,0) * 9deg));
  will-change:transform
}
.gg-phone .gg-chat{inset:5px;border-radius:16% / 7.4%}
#home-phone-preview .gg-phone{height:min(640px,calc(100% - 180px))}
.smart .split-media .gg-phone{--gg-ph:min(600px,calc(100% - 120px))}
/* 3 - deep chart phone: Cleo split-module media = rounded panel with a filmed plate, not a flat fill. */
.smart .split-media{position:relative;overflow:hidden;background:#6f7a73!important;background-image:none!important}
.smart .split-media>.gg-plate{position:absolute;inset:-8%;z-index:0;width:116%;height:116%;object-fit:cover;filter:blur(30px) saturate(1.05) brightness(.92) sepia(.12);transform:scale(calc(1.05 + var(--gg-tilt,0) * .02))}
.smart .split-media:after{z-index:1!important}
.smart .split-media:hover .gg-phone{box-shadow:inset 0 0 0 5px #181719,0 52px 120px rgba(14,22,18,.44)}
@media (max-width:760px){
  #home-phone-preview{height:auto!important;min-height:0!important;padding:150px 0 40px!important}
  #home-phone-preview>.media-copy{top:34px!important;left:24px!important;max-width:calc(100% - 48px)!important}
  #home-phone-preview .gg-phone{position:relative;left:auto;top:auto;display:block;margin:0 auto;height:min(560px,calc(100svh - 230px));transform:translateY(calc(var(--gg-tilt,0) * -14px)) perspective(1400px) rotateX(calc(var(--gg-tilt,0) * 6deg))}
  #home-phone-preview>.home-phone-preview-controls{position:relative!important;left:auto!important;bottom:auto!important;margin:18px auto 0;width:max-content}
  .smart .split-media .gg-phone{--gg-ph:min(540px,calc(100% - 64px))}
  main .smart.split-section{height:auto!important;min-height:0!important}
  main .smart.split-section .split-media{height:560px!important;min-height:560px!important}
}
@media (min-width:761px) and (max-width:1100px){
  #home-phone-preview>.media-copy{max-width:min(30vw,300px)!important}
  #home-phone-preview>.media-copy h2{font-size:clamp(28px,3.4vw,40px)!important}
}
@media (prefers-reduced-motion:reduce){
  .gg-phone{transform:translate(-50%,-50%)}
  #home-phone-preview>.gg-plate,.smart .split-media>.gg-plate{transform:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:760px){#home-phone-preview .gg-phone{transform:none}}

/* Hero question card: one real question and Vedika's answer, Cleo caption placement
   (bottom-left of the media), Cleo mono eyebrow, system lavender palette. */
.home-cover-stage .home-cover-proof{left:55px;right:auto;bottom:55px;width:min(392px,calc(100vw - 110px));padding:18px 20px 20px;border:1px solid rgba(255,255,255,.26);border-radius:20px;background:rgba(37,16,63,.58);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);box-shadow:0 18px 50px rgba(10,6,24,.32)}
.home-cover-stage .home-cover-proof-label{margin:0 0 10px;color:#e6dcfa;font:400 11px/1.2 Simplon,ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.home-cover-stage .home-cover-proof-label:before{content:"";display:inline-block;width:6px;height:6px;margin-right:10px;background:currentColor;vertical-align:1px}
.home-cover-stage .home-cover-proof-question{margin:0;color:#fff;font-size:17px;line-height:1.35;font-weight:500}
.home-cover-stage .home-cover-proof-answer{margin:10px 0 0;color:rgba(255,255,255,.86);font-size:14.5px;line-height:1.45;opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.home-cover-stage .home-cover-proof.is-visible .home-cover-proof-answer{opacity:1;transform:none;transition-delay:1.5s}
@media (max-width:760px){
  .home-cover-stage .home-cover-proof{left:16px;right:16px;bottom:96px;width:auto;padding:14px 16px 16px;border-radius:16px}
  .home-cover-stage .home-cover-proof-question{font-size:15px}
  .home-cover-stage .home-cover-proof-answer{font-size:13.5px}
}
#home-phone-preview .home-phone-preview-controls{left:55px;bottom:55px;padding:0!important;border-radius:0!important;background:none!important;box-shadow:none!important}
#home-phone-preview [data-gg-chat-toggle]{min-height:44px;padding:10px 20px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(37,16,63,.42);color:#fff;font:inherit;font-size:14px;cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
#home-phone-preview [data-gg-chat-toggle]:focus-visible{outline:2px solid #fff;outline-offset:4px}
#home-phone-preview [data-gg-chat-toggle][hidden]{display:none}

/* 2026-10-08 L2 benchmark (home only): one sub-line under the hero h1 that names the category. */
.hero-copy .hero-sub{max-width:34ch;margin:14px auto 0;color:rgba(255,255,255,.92);font:400 clamp(16px,1.25vw,19px)/1.45 PPNeue,Arial,sans-serif;text-align:center;text-shadow:0 1px 18px rgba(14,10,30,.45)}
/* The compatibility card's metallic pill sizes from its padding only (the label is absolute), so it
   collapsed to a 48 px ring over "Compare". Give it the width of its label. */
.pair-card.image-card .card-copy .light-pill.metallic{min-width:252px}
@media (max-width:760px){.pair-card.image-card .card-copy .light-pill.metallic{min-width:236px}}
/* The sub-line moves the actions down; keep the scroll cue clear of them. */
.hero .home-cover-stage .scroll-cue{top:63%!important}
@media (max-width:760px){.hero .home-cover-stage .scroll-cue{top:64%!important}}
/* Eight FAQ entries: the section and its panel grow with the list instead of a fixed height. */
section.faq{height:auto!important;padding-bottom:96px!important}
section.faq .faq-list{height:auto!important;padding-bottom:64px!important}
@media (max-width:760px){section.faq{height:auto!important;min-height:0!important;padding-bottom:56px!important}}

/* L22 contrast (2026-10-10): white copy on the home page's three photo sections read 1.5-3.2:1 on the pale lilac sky
   (Meet Vedika), 3.2:1 on the sage plate (Vedika speaks your language) and about 2:1 on the tan wall (GrahaGuru for
   everyone); on phones the lower half of Meet Vedika (the "Made for" line, the voice card, the two pills) sat on pale
   water and read 1.3-3.5:1. A scrim on the copy side of each lifts the copy to 4.5:1 or better, measured by pixels with
   the video paused. The typed word is the lilac #e4d7ff of the page, a shade lighter. The active product tab (white on
   a 64% purple glass, 3.8:1) gets an 80% fill. Geometry, type and motion are untouched. */
.tabs button.is-active{background:rgba(72,57,81,.8)!important}
.typewriter-kicker [data-typewriter]{color:#fbf8ff}
.gg-msg--note{color:#5d4f73}
.community-reply{color:#fff}
@media (min-width:760px){
  .autopilot-shell::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:linear-gradient(90deg,rgba(31,13,52,.64) 0%,rgba(31,13,52,.46) 32%,rgba(31,13,52,0) 64%)}
  .media-shell:has(>.community-copy)::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:linear-gradient(90deg,rgba(31,13,52,.64) 0%,rgba(31,13,52,.46) 32%,rgba(31,13,52,0) 64%)}
  #home-phone-preview:after{background:linear-gradient(90deg,rgba(20,28,24,.5) 0%,rgba(20,28,24,.3) 30%,rgba(20,28,24,0) 58%),linear-gradient(180deg,rgba(255,255,255,.06),rgba(20,28,24,.16))}
}
@media (max-width:760px){
  .autopilot-shell::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:linear-gradient(to bottom,rgba(31,13,52,.46) 0%,rgba(31,13,52,0) 34%,rgba(31,13,52,0) 40%,rgba(31,13,52,.6) 56%,rgba(31,13,52,.66) 100%)}
  .media-shell:has(>.community-copy)::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:linear-gradient(to bottom,rgba(20,10,36,.5) 0%,rgba(20,10,36,0) 38%,rgba(20,10,36,0) 60%,rgba(20,10,36,.34) 100%)}
  #home-phone-preview:after{background:linear-gradient(180deg,rgba(20,28,24,.52) 0%,rgba(20,28,24,.3) 16%,rgba(20,28,24,0) 36%),linear-gradient(180deg,rgba(255,255,255,.06),rgba(20,28,24,.16))}
}