/* GarudaScholar public landing ("editorial dossier").
   Type: Fredoka (display) + Inter (text).
   Space: 8pt scale. Color: warm paper, ink, one brand blue, Garu gold. */

html:has(#gate.gate),
body:has(#gate.gate){height:auto;min-height:100%;overflow-x:clip;overflow-y:auto}

.gate{
  --paper:#F6F3EC; --paper-2:#EEE8DC; --card:#FFFFFF;
  --ink:#12192B; --ink-2:#3E4658; --ink-3:#5E6678;
  --line:#E0D8C8; --line-2:#EAE4D8;
  --brand:#2456E0; --brand-d:#1A40B8; --brand-soft:#E6ECFC;
  --garu:#F5B63F; --garu-soft:#FCEFD3;
  --ok:#1D7F55; --ok-soft:#E1F2E9; --warn:#9A5B0A; --warn-soft:#FBEBD2;
  --night:#0E1730; --night-2:#16224A;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Fredoka","Inter",system-ui,sans-serif;
  --rail:1200px; --gutter:clamp(20px,4vw,48px);
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --r-sm:10px; --r:16px; --r-lg:24px;
  --shadow:0 1px 0 rgba(18,25,43,.04),0 12px 32px -12px rgba(18,25,43,.18);
  min-height:100vh;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;
}
.gate *{box-sizing:border-box}
:where(.gate) a{color:inherit;text-decoration:none}
:where(.gate) button{font:inherit;color:inherit}
:where(.gate) :is(h1,h2,h3,p){margin:0}
:where(.gate) :is(ul,ol){margin:0;padding:0;list-style:none}
.gate em{font-style:normal}
.gate :is(h1,h2,h3){font-family:var(--display);font-weight:600;letter-spacing:0}
.gate :focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:8px}

/* loading state before runtime renders */
.gate-card{min-height:100vh;display:grid;place-items:center}
.gate-spin{width:28px;height:28px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--brand);animation:lp-spin .8s linear infinite}
@keyframes lp-spin{to{transform:rotate(360deg)}}

.lp-rail{width:min(var(--rail),100%);margin-inline:auto;padding-inline:var(--gutter)}
.lp-skip{position:absolute;left:-9999px}
.lp-skip:focus{left:var(--s2);top:var(--s2);z-index:50;padding:10px 14px;background:var(--card);border-radius:var(--r-sm);font-weight:700}

/* ---------- type ---------- */
.lp-kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink-3);margin-bottom:var(--s3)}
.lp-h1{font-size:clamp(42px,5vw,72px);line-height:1.02;text-wrap:balance}
.lp-h1 em{display:block;color:var(--brand)}
.lp-h2{font-size:clamp(30px,3.8vw,48px);line-height:1.08;text-wrap:balance}
.lp-h2 em{color:var(--brand)}
.lp-h2-xl{font-size:clamp(36px,5vw,64px)}
.lp-h2-center{text-align:center}
.lp-lead{font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:var(--ink-2);max-width:34em;margin-top:var(--s3)}
.lp-sub{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:36em;margin-top:var(--s2)}
.lp-fine{font-size:14px;color:var(--ink-3);margin-top:var(--s3)}

/* ---------- buttons ---------- */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;border-radius:999px;font-weight:650;font-size:15px;line-height:1;padding:15px 22px;cursor:pointer;transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
.lp-btn:disabled{opacity:.55;cursor:not-allowed}
.lp-btn:not(:disabled):active{transform:translateY(1px)}
.lp-btn-google{background:var(--ink);color:#fff;box-shadow:0 8px 20px -10px rgba(18,25,43,.6)}
.lp-btn-google svg{background:#fff;border-radius:50%;padding:3px;width:24px;height:24px;flex:none}
.lp-btn-google:not(:disabled):hover{background:#000;box-shadow:0 12px 28px -12px rgba(18,25,43,.7)}
.lp-btn-ink{background:transparent;border-color:var(--ink);color:var(--ink)}
.lp-btn-ink:not(:disabled):hover{background:var(--ink);color:#fff}
.lp-btn-sm{padding:10px 16px;font-size:14px}
.lp-btn-lg{padding:18px 28px;font-size:16px}
.lp-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--ink);padding:12px 4px;border-bottom:1px solid var(--line)}
.lp-link svg{transition:transform .2s ease}
.lp-link:hover svg{transform:translateX(3px)}
.lp-err{margin-top:var(--s2);padding:12px 14px;border-radius:var(--r-sm);background:#FDECEC;color:#9B1C1C;font-size:14px;font-weight:600}

/* ---------- nav ---------- */
.lp-nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.28);border-bottom:1px solid rgba(255,255,255,.35);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
.lp-nav-row{display:flex;align-items:center;gap:var(--s4);min-height:68px}
.lp-brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:16px;letter-spacing:-.015em}
.lp-brand img{border-radius:8px}
.lp-nav-links{display:flex;gap:var(--s4);margin-inline:auto;font-size:14px;font-weight:550;color:var(--ink-2)}
.lp-nav-links a:hover{color:var(--ink)}
.lp-nav-end{display:flex;align-items:center;gap:var(--s2)}
.lp-lang{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:999px}
.lp-lang button{border:0;background:none;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--ink-3);cursor:pointer}
.lp-lang button[aria-pressed="true"]{background:var(--ink);color:#fff}

/* ---------- hero ---------- */
.lp-hero{position:relative;isolation:isolate;margin-top:-68px;padding-block:calc(68px + clamp(48px,8vw,112px)) clamp(64px,9vw,128px)}
.lp-sky{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 82% 8%,rgba(255,255,255,.55) 0%,transparent 60%),
    radial-gradient(ellipse 80% 30% at 50% 100%,rgba(245,182,63,.22) 0%,transparent 70%),
    linear-gradient(180deg,#8DB8FF 0%,#B5D1FF 38%,#DCE8FB 72%,var(--paper) 100%)}
.lp-cloud{position:absolute;height:var(--h);width:calc(var(--h) * 3.4);border-radius:999px;background:#fff;opacity:var(--o,.85);animation:lp-drift var(--d,60s) linear infinite alternate}
.lp-cloud::before,.lp-cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}
.lp-cloud::before{width:calc(var(--h) * 1.5);height:calc(var(--h) * 1.5);left:18%;bottom:30%}
.lp-cloud::after{width:calc(var(--h) * 1.1);height:calc(var(--h) * 1.1);left:52%;bottom:38%}
.lp-c1{--h:44px;top:16%;left:4%;--d:70s}
.lp-c2{--h:30px;top:9%;left:46%;--o:.7;--d:90s;animation-direction:alternate-reverse}
.lp-c3{--h:56px;top:22%;right:-4%;--o:.9;--d:80s}
.lp-c4{--h:26px;top:58%;left:-2%;--o:.6;--d:100s;animation-direction:alternate-reverse}
@keyframes lp-drift{from{translate:-3vw 0}to{translate:5vw 0}}
.lp-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(40px,6vw,96px);align-items:center}
.lp-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s5)}
.lp-trust{margin-top:var(--s3);font-size:14px;color:var(--ink-3)}

/* product preview: a stack of real app surfaces */
.lp-desk{position:relative;min-height:560px}
.lp-sheet{position:absolute;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:var(--s3)}
.lp-sheet-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);font-size:13px;font-weight:700;margin-bottom:var(--s2)}
.lp-sheet-head em{font-size:13px;color:var(--ink-3)}
.lp-sheet-a{top:0;left:0;width:78%;rotate:-2deg;animation:lp-float 9s ease-in-out infinite}
.lp-sheet-b{top:212px;right:0;width:84%;rotate:1.5deg;z-index:2;animation:lp-float 11s ease-in-out -3s infinite}
.lp-sheet-c{bottom:8px;left:6%;display:flex;gap:var(--s2);align-items:center;padding:var(--s2) var(--s3) var(--s2) var(--s2);z-index:3;rotate:-1deg;background:var(--night);color:#fff;border-color:var(--night)}
.lp-pv-list li{display:grid;grid-template-columns:24px 64px 1fr;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line-2);font-size:14px}
.lp-pv-ico{display:grid;place-items:center;width:24px;height:24px;border-radius:50%}
.lp-pv-list .ok .lp-pv-ico{background:var(--ok-soft);color:var(--ok)}
.lp-pv-list .warn .lp-pv-ico{background:var(--warn-soft);color:var(--warn)}
.lp-pv-k{font-weight:650}
.lp-pv-v{color:var(--ink-2);text-align:right}
.lp-pv-list .warn .lp-pv-v{color:var(--warn);font-weight:650}
.lp-score{font-size:13px;font-weight:700;color:var(--ok);background:var(--ok-soft);padding:4px 10px;border-radius:999px}
.lp-pv-essay{font-size:16px;line-height:1.7;color:var(--ink)}
.lp-pv-essay mark{background:linear-gradient(transparent 55%,var(--garu-soft) 55%);color:inherit;padding:0 2px}
.lp-pv-note{display:flex;gap:10px;align-items:flex-start;margin-top:var(--s2);padding:12px 14px;background:var(--brand-soft);border-radius:var(--r-sm);font-size:13.5px;line-height:1.5;color:var(--brand-d);font-weight:550}
.lp-pv-dot{flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--brand)}
.lp-pv-cal{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.1);color:var(--garu)}
.lp-sheet-c small{display:block;font-size:12px;color:rgba(255,255,255,.6);font-weight:600}
.lp-sheet-c strong{display:block;font-size:15px;font-weight:700}
.lp-sheet-c span:last-child{font-size:13px;color:rgba(255,255,255,.75)}
.lp-desk-garu{position:absolute;right:-12px;bottom:-24px;z-index:4;filter:drop-shadow(0 16px 24px rgba(18,25,43,.18))}
@keyframes lp-float{50%{translate:0 -8px}}

/* ---------- sections ---------- */
.lp-section{padding-block:clamp(72px,10vw,144px)}
.lp-section-tight{padding-block:clamp(64px,8vw,112px)}
.lp-paper-2{background:var(--paper-2)}
.lp-section-head{max-width:720px;margin-bottom:var(--s6)}
.lp-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.lp-split-head{position:sticky;top:112px}

/* journey */
.lp-steps{border-top:1px solid var(--line)}
.lp-step{display:grid;grid-template-columns:72px 1fr auto;gap:var(--s3);align-items:baseline;padding-block:var(--s4);border-bottom:1px solid var(--line)}
.lp-step-n{font-family:var(--display);font-weight:600;font-size:32px;line-height:1;color:var(--brand)}
.lp-step h3{font-size:21px}
.lp-step p{margin-top:var(--s1);color:var(--ink-2);max-width:32em}
.lp-step-tag{font-size:12px;font-weight:650;color:var(--ink-2);border:1px solid var(--line);padding:6px 10px;border-radius:999px;white-space:nowrap}

/* Garu panel */
.lp-ink{background:var(--night);color:#fff;padding-block:clamp(72px,10vw,144px);position:relative;overflow:hidden}
.lp-ink::before{content:"";position:absolute;inset:auto -20% -60% auto;width:70vw;height:70vw;border-radius:50%;background:radial-gradient(circle,rgba(245,182,63,.16),transparent 60%);pointer-events:none}
.lp-ink .lp-h2 em{color:var(--garu)}
.lp-ink .lp-sub{color:rgba(255,255,255,.75)}
.lp-ink .lp-fine{color:rgba(255,255,255,.6)}
.lp-kicker-inv{color:rgba(255,255,255,.65)}
.lp-garu-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center;position:relative}
.lp-chat{display:flex;flex-direction:column;gap:var(--s2)}
.lp-msg{max-width:88%;padding:14px 18px;border-radius:20px;font-size:15px;line-height:1.55}
.lp-msg-me{align-self:flex-end;background:var(--brand);border-bottom-right-radius:6px;font-weight:550}
.lp-msg-garu{display:flex;gap:12px;align-items:flex-start;background:var(--night-2);border:1px solid rgba(255,255,255,.08);border-bottom-left-radius:6px}
.lp-msg-av{flex:none;width:40px;height:40px;border-radius:50%;background:var(--garu-soft);display:grid;place-items:center;overflow:hidden}
.lp-src{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;font-weight:650;color:var(--garu);background:rgba(245,182,63,.1);padding:4px 10px;border-radius:999px}

/* honesty */
.lp-honest{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--s6);border-top:1px solid var(--line)}
.lp-honest li{padding:var(--s4) var(--s4) 0 0}
.lp-honest li + li{padding-left:var(--s4);border-left:1px solid var(--line)}
.lp-honest h3{font-size:19px}
.lp-honest p{margin-top:var(--s1);color:var(--ink-2);font-size:15px}

/* guides */
.lp-guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.lp-guide-col h3{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-bottom:var(--s2);border-bottom:1px solid var(--ink)}
.lp-guide-col a{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);padding:14px 0;border-bottom:1px solid var(--line);font-weight:550;font-size:15px}
.lp-guide-col a svg{flex:none;color:var(--ink-3);transition:transform .2s ease,color .2s ease}
.lp-guide-col a:hover{color:var(--brand)}
.lp-guide-col a:hover svg{transform:translateX(3px);color:var(--brand)}

/* faq */
.lp-faq{border-top:1px solid var(--line)}
.lp-faq-item{border-bottom:1px solid var(--line)}
.gate .lp-faq-item > summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s3) 0;cursor:pointer;list-style:none;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.gate .lp-faq-item > summary:hover{color:var(--brand)}
.lp-faq-item summary::-webkit-details-marker{display:none}
.lp-faq-item p{padding:0 var(--s6) var(--s3) 0;color:var(--ink-2);max-width:40em}

/* final */
.lp-final{padding-block:clamp(80px,11vw,160px);text-align:center;border-top:1px solid var(--line)}
.lp-final-inner{display:flex;flex-direction:column;align-items:center}
.lp-final-garu{margin-bottom:var(--s3)}
.lp-final .lp-sub{margin:var(--s3) auto var(--s5)}

/* footer */
.lp-foot{background:var(--paper-2);padding-top:var(--s7);font-size:14px}
.lp-foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s5)}
.lp-foot-brand p{margin-top:var(--s2);color:var(--ink-2);max-width:26em}
.lp-foot h3{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink-3);margin-bottom:var(--s2)}
.lp-foot li + li{margin-top:10px}
.lp-foot li a{color:var(--ink-2)}
.lp-foot li a:hover{color:var(--ink)}
.lp-foot-base{display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s7);padding-block:var(--s3);border-top:1px solid var(--line);color:var(--ink-3);font-size:13px}

/* fallback when landing.js fails */
.lp-fallback{max-width:28rem;margin:20vh auto;padding:0 var(--s3);display:grid;gap:var(--s3);text-align:center}

/* scroll reveal (progressive) */
@supports (animation-timeline:view()){
  .lp-step,.lp-honest li,.lp-guide-col,.lp-msg{animation:lp-rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
}
@keyframes lp-rise{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .lp-nav-links{display:none}
  .lp-nav-end{margin-left:auto}
  .lp-hero-grid,.lp-split,.lp-garu-grid{grid-template-columns:1fr}
  .lp-split-head{position:static}
  .lp-desk{max-width:560px;width:100%;margin-inline:auto}
}
@media (max-width:720px){
  .lp-desk{min-height:0;display:grid;padding-bottom:var(--s5)}
  .lp-sheet{position:relative;inset:auto;width:100%}
  .lp-sheet-a{width:94%}
  .lp-sheet-b{width:96%;margin:-8px 0 0 auto}
  .lp-sheet-c{margin-top:-8px;justify-self:start}
  .lp-desk-garu{scale:.72;transform-origin:bottom right;right:-8px}
  .lp-c3,.lp-c4{display:none}
  .lp-step{grid-template-columns:48px 1fr}
  .lp-step-tag{grid-column:2;justify-self:start}
  .lp-step-n{font-size:26px}
  .lp-honest,.lp-guides,.lp-foot-grid{grid-template-columns:1fr}
  .lp-honest li,.lp-honest li + li{padding:var(--s3) 0;border-left:0}
  .lp-honest li + li{border-top:1px solid var(--line)}
  .lp-cta-row{flex-direction:column;align-items:stretch}
  .lp-cta-row .lp-link{justify-content:center;border-bottom:0}
  .lp-faq-item p{padding-right:0}
}
@media (max-width:420px){
  .lp-lang{display:none}
}
@media (prefers-reduced-motion:reduce){
  .gate *,.gate *::before,.gate *::after{animation:none!important;transition:none!important}
}
