/* Shared pieces kept from home.css: the font, the eo logo animation and the interactive question card. */
@font-face{font-family:Manrope;src:url('assets/site-redesign/manrope-latin.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:12px;left:12px;transform:translateY(-160%);z-index:100;background:var(--ink);color:white;padding:12px 20px}
.skip-link:focus{transform:none}
.brand-mark{width:62px;height:37px}
.practice-demo{border:1px solid #dce1eb;border-radius:18px;box-shadow:0 7px 28px #15254909;overflow:hidden;background:#fff}
.demo-top{display:flex;justify-content:space-between;align-items:center;padding:21px 23px;border-bottom:1px solid #edf0f6;gap:16px}
.subject-title{display:flex;gap:10px;align-items:center;font-size:14px;font-weight:800}
.subject-orbit{font-size:25px;color:var(--indigo);line-height:1}
.demo-label{color:#79849a;font-size:11px}
.demo-body{display:grid;grid-template-columns:180px 1fr}
.topic-list{border-right:1px solid #edf0f6;padding:18px 10px}
.topic{width:100%;display:flex;gap:9px;align-items:center;background:none;border:0;padding:12px 10px;text-align:left;font-size:11px;color:#637089;border-radius:6px;margin-bottom:4px}
.topic:before{content:'';width:9px;height:9px;border:1px solid #adb6c6;border-radius:50%;flex:none}
.topic.active{background:#eef1ff;color:var(--indigo);font-weight:700}
.topic.active:before{background:var(--indigo);border-color:var(--indigo);box-shadow:inset 0 0 0 2px #eef1ff}
.topic-list>p{font-size:11px;line-height:1.6;color:#8992a3;margin:24px 10px}
.question-area{padding:21px 22px}
.question-meta{font-size:10px;color:#78849b;margin-bottom:14px}
.question{color:#27354e;line-height:1.7;font-size:13px;min-height:110px}
.answers{margin:20px 0 0;padding:0;border:0;display:grid;gap:8px}
.answers label{display:flex;align-items:center;position:relative;gap:11px;font-size:12px;border:1px solid #e5e9f1;border-radius:6px;padding:8px 10px;cursor:pointer;min-height:39px}
.answers label:has(input:checked){border-color:var(--teal);background:#effafa}
.answers label:has(input:focus-visible){outline:3px solid var(--teal);outline-offset:2px}
.answers input{position:absolute;opacity:0;width:100%;height:100%;inset:0;cursor:pointer;margin:0}
.answer-letter{display:grid;place-items:center;border:1px solid #c6cedc;border-radius:50%;width:19px;height:19px;font-size:10px;flex:none}
.answers input:checked+.answer-letter{background:var(--teal);color:white;border-color:var(--teal)}
.demo-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:19px}
.solution-button{border:0;background:#f3f2ff;color:var(--indigo);font-size:11px;font-weight:700;padding:10px;border-radius:6px;min-height:40px}
.demo-actions .button{font-size:11px;padding:9px 12px;min-height:40px}
.answer-feedback{font-size:12px;line-height:1.55;margin-top:12px}
.answer-feedback:empty{display:none}
.answer-feedback.correct{color:#00766a}
.answer-feedback.incorrect{color:#9e4c16}
.solution{background:#f3f8fa;border-radius:8px;padding:14px;margin-top:13px;font-size:12px;line-height:1.7}
.solution strong{color:var(--ink)}
.solution p{margin-top:7px}
.no-script{font-size:12px;margin-top:16px}
.solution strong{display:block}
.solution strong+p{margin-bottom:10px}
.solution .key-source{font-size:11px;color:#79849a;margin:0}
.eo-mark .s{stroke-dasharray:1 2;stroke-dashoffset:0}
.brand-mark-sm{width:54px;height:32px}
.brand-word,.eo-ed,.eo-loop{display:inline-block}
@keyframes eo-draw{from{stroke-dashoffset:1.02}to{stroke-dashoffset:0}}
@keyframes eo-rise{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}
.eo-anim .s1{animation:eo-draw .25s cubic-bezier(.4,0,.6,1) .05s both}
.eo-anim .s2{animation:eo-draw .55s cubic-bezier(.33,0,.2,1) .3s both}
.eo-anim .s3{animation:eo-draw .2s linear .95s both}
.eo-anim .s4{animation:eo-draw .62s cubic-bezier(.33,0,.2,1) 1.15s both}
.eo-anim .sx{animation:eo-draw .25s linear 1.52s both}
.eo-anim .eo-ed{animation:eo-rise .35s cubic-bezier(.2,.7,.2,1) .7s both}
.eo-anim .eo-loop{animation:eo-rise .35s cubic-bezier(.2,.7,.2,1) 1.55s both}
.js .eo-wait .s{stroke-dashoffset:1.02}
.js .eo-wait .eo-ed,.js .eo-wait .eo-loop{opacity:0}
.demo-label,.question-meta,.topic-list>p{font-size:12px;color:#5f6b80}
.topic{font-size:12px}
.question{font-size:14px}
.answers label{font-size:13px}
.answer-letter{font-size:11px;width:21px;height:21px}
.solution-button,.demo-actions .button{font-size:12px}
.solution,.answer-feedback{font-size:13px}
.solution .key-source{font-size:12px;color:#5f6b80}
@media (prefers-reduced-motion:reduce){
  .eo-anim .s,.eo-anim .eo-ed,.eo-anim .eo-loop{animation:none!important}
  .js .eo-wait .s{stroke-dashoffset:0}
  .js .eo-wait .eo-ed,.js .eo-wait .eo-loop{opacity:1}
}
/* ---------------------------------------------------------------------------------------------------------------
   EdLoop premium home (index.html only; the inner pages keep home.css).
   Concept: a showroom for twenty-five years of papers. Dark and light bands alternate like a car maker's site; type
   is one family (Manrope) set light (200-300) and large, so weight, not colour, carries emphasis. Buttons are thin
   rectangles. The one bold moment is the pinned "since 2002" sequence: a thin year counts up as the chapter grid
   lights year by year. The film opens out to full width once. Everything else stays still.
   Tokens: night #081028 and #0e1a3a are the eo tile's own navy; paper #f4f6fb; ink #142444; the eo gradient
   (#4a63f5 > #2f8af7 > #22d3ee) appears only in the mark, the grid and one progress line.
   --------------------------------------------------------------------------------------------------------------- */
:root{
  --night:#081028; --night2:#0e1a3a; --dline:#ffffff1c; --dtext:#eef2fb; --dmuted:#9eabc6;
  --paper:#f4f6fb; --white:#ffffff; --ink:#142444; --muted:#56637c; --line:#dde3ee;
  --blue:#2f8af7; --cyan:#22d3ee; --indigo:#4f46e5; --teal:#00858b;
  --font:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:max(20px,env(safe-area-inset-left,0px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--dtext);font-family:var(--font);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
h1,h2,h3,p,figure{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.wrap{width:min(1240px,100% - 2*var(--gut));margin-inline:auto}
.skip-link{background:#fff;color:var(--ink)}

/* type */
.h1{font-size:clamp(44px,6.4vw,92px);font-weight:300;line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.h2{font-size:clamp(34px,4.6vw,64px);font-weight:300;line-height:1.05;letter-spacing:-.035em;text-wrap:balance}
.lede{font-size:clamp(17px,1.4vw,20px);line-height:1.65;max-width:560px}
.dark{background:var(--night);color:var(--dtext)}
.dark .lede,.dark p{color:var(--dmuted)}
.light{background:var(--paper);color:var(--ink)}
.light p{color:var(--muted)}
.white{background:var(--white);color:var(--ink)}
.white p{color:var(--muted)}
.band{padding-block:clamp(80px,11vw,160px)}

/* buttons: thin rectangles */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 26px;border-radius:2px;border:1px solid transparent;font-weight:600;font-size:15px;letter-spacing:-.005em;transition:background .2s,color .2s,border-color .2s}
.btn svg{width:13px;height:13px;fill:currentColor}
.btn-solid{background:#fff;color:var(--night)}
.btn-solid:hover{background:#dfe8ff}
.light .btn-solid,.white .btn-solid{background:var(--ink);color:#fff}
.light .btn-solid:hover,.white .btn-solid:hover{background:#24386a}
.btn-line{border-color:#ffffff59;color:#fff}
.btn-line:hover{border-color:#fff;background:#ffffff12}
.link{font-weight:600;font-size:15px;border-bottom:1px solid currentColor;padding-bottom:2px}
.dark .link{color:#fff;border-color:#ffffff66}
.dark .link:hover{border-color:#fff}

/* header */
.site-header{position:fixed;inset:0 0 auto;z-index:40;padding-top:env(safe-area-inset-top,0px);background:#081028eb;-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid transparent;transition:border-color .3s}
.site-header.scrolled,.site-header.open{border-bottom-color:var(--dline)}
.header-inner{height:76px;display:flex;align-items:center;gap:32px}
.brand{display:inline-flex;align-items:center;gap:8px;font-size:26px;font-weight:800;letter-spacing:-1.1px;line-height:1;white-space:nowrap;color:#fff}
.brand-loop{color:#7ea6ff}
.desktop-nav{display:flex;gap:30px;margin-left:auto;font-size:14px;font-weight:500}
.desktop-nav a{color:#c8d2e6;transition:color .2s}
.desktop-nav a:hover{color:#fff}
.header-cta{min-height:40px;padding:0 18px;font-size:14px}
.menu-toggle{display:none;margin-left:auto;background:none;border:0;min-height:44px;font-weight:600;font-size:14px;gap:8px;align-items:center;cursor:pointer}
.mobile-nav{padding:6px 0 18px}
.mobile-nav a{display:block;padding:12px 0;font-size:18px;font-weight:300;border-bottom:1px solid var(--dline)}

/* hero */
.hero{position:relative;padding-top:calc(150px + env(safe-area-inset-top,0px));padding-bottom:56px;overflow:hidden}
.hero:before{content:"";position:absolute;inset:-30% -20% auto 30%;height:120%;background:radial-gradient(closest-side,#2f4ad433,transparent);pointer-events:none}
.hero-for{font-size:15px;color:var(--dmuted);margin-bottom:22px}
.hero .h1{max-width:1000px}
.hero .lede{margin-top:26px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:38px}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px 28px;margin:30px 0 0;padding:0;list-style:none;font-size:14px;color:var(--dmuted)}
.hero-facts li{display:flex;align-items:center;gap:10px}
.hero-facts li:before{content:"";width:14px;height:1px;background:#ffffff66}
@media(prefers-reduced-motion:no-preference){
  .js .hero-in{animation:rise .9s cubic-bezier(.2,.7,.1,1) both}
  .js .hero-in.d1{animation-delay:.08s}.js .hero-in.d2{animation-delay:.18s}.js .hero-in.d3{animation-delay:.28s}.js .hero-in.d4{animation-delay:.38s}
  @keyframes rise{from{transform:translateY(26px)}to{transform:none}}
}

/* the film */
.film{position:relative;background:var(--night)}
/* full width at the film's own shape: nothing is ever cropped; on short windows the film is taller than the screen and
   scrolls past, while its buttons ride along the bottom of the screen (sticky inside .film-ui) */
.film-frame{position:relative;width:100%;aspect-ratio:16/9;background:#050a18}
.film-frame video{width:100%;height:100%;object-fit:contain}
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .film-frame{animation:open linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    @keyframes open{from{clip-path:inset(0 max(20px,7vw) round 18px)}to{clip-path:inset(0 0 round 0)}}
  }
}
.film-ui{position:absolute;inset:0;display:flex;align-items:flex-end;padding:0 var(--gut) 20px;pointer-events:none;z-index:2}
.film-controls{position:sticky;bottom:20px;display:flex;gap:8px;pointer-events:auto}
.film-ctl{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:2px;border:1px solid #ffffff4d;background:#08102899;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-weight:600;font-size:13px;cursor:pointer}
.film-ctl:hover{background:#0e1a3acc}
.film-ctl svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.film-note{font-size:13px;color:var(--dmuted);padding-block:16px 0}

/* numbers */
.numbers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(56px,7vw,96px) 0 0;padding:0;list-style:none;border-top:1px solid var(--dline)}
.numbers li{padding:28px 24px 0 0;display:flex;flex-direction:column;gap:6px}
.numbers li+li{padding-left:24px;border-left:1px solid var(--dline)}
.numbers strong{font-size:clamp(40px,5.4vw,76px);font-weight:200;letter-spacing:-.04em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.numbers span{font-size:14px;color:var(--dmuted)}

/* since 2002: the pinned sequence */
.years{position:relative}
.motion .years{height:300vh}
.years-pin{min-height:100vh;display:flex;align-items:center;padding-block:96px 64px}
.motion .years-pin{position:sticky;top:0;height:100vh;height:100svh;min-height:0}
.years-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center}
.years-layout>div:first-child{container-type:inline-size;min-width:0}
.yr-num{font-size:clamp(96px,15vw,220px);font-size:clamp(96px,42cqi,300px);font-weight:200;line-height:.82;letter-spacing:-.06em;color:#fff;font-variant-numeric:tabular-nums;margin:28px 0 18px}
.yr-exam{font-size:18px;font-weight:500;color:#fff}
.yr-say{margin-top:6px;font-size:15px;color:var(--dmuted);min-height:2lh}
.years .lede{margin-top:20px}
.yr-grid{display:grid;gap:14px}
.yr-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center}
.yr-row b{font-weight:600;font-size:14px;color:#fff;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yr-row small{display:block;font-weight:400;font-size:12px;color:var(--dmuted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yr-cells{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:3px}
.yr-cells i{display:block;aspect-ratio:1;border-radius:2px;background:#16234c;transition:opacity .35s,transform .35s,background .35s}
.yr-cells i.l1{background:#23408f}.yr-cells i.l2{background:#2f62d6}.yr-cells i.l3{background:#2f8af7}.yr-cells i.l4{background:#22d3ee}
.yr-cells i.off{opacity:.12;transform:scale(.7)}
.yr-axis{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;margin-top:4px}
.yr-axis div{display:flex;justify-content:space-between;font-size:12px;color:var(--dmuted);font-variant-numeric:tabular-nums}
.yr-key{margin-top:18px;font-size:13px;color:var(--dmuted)}
.yr-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--dline)}
.yr-bar span{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,1));background:linear-gradient(90deg,#4a63f5,#2f8af7,#22d3ee)}

/* better with friends */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(48px,6vw,80px);padding:0;list-style:none}
.steps li{display:flex;flex-direction:column}
.shot{border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -30px #14244459,0 0 0 1px #14244414;aspect-ratio:1/2;max-width:300px}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.step-n{margin-top:28px;font-size:14px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.steps h3{font-size:22px;font-weight:500;letter-spacing:-.02em;margin-top:6px}
.steps p{margin-top:8px;font-size:16px;max-width:320px}

/* inside the app: a gallery */
.gallery-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.gallery-nav{display:flex;gap:8px}
.gallery-nav button{width:48px;height:48px;border-radius:2px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.gallery-nav button:hover{border-color:var(--ink)}
.gallery-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,300px);gap:clamp(20px,2.4vw,32px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding:clamp(40px,5vw,64px) var(--gut) 12px;margin-top:8px;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.track figure{scroll-snap-align:start}
.track figcaption{margin-top:22px}
.track figcaption strong{display:block;font-size:19px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.track figcaption span{display:block;margin-top:6px;font-size:15px;line-height:1.6;color:var(--muted)}

/* test drive */
.drive-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:center}
.drive .practice-demo{box-shadow:0 50px 120px -50px #2f8af788;border-color:#ffffff33}
.drive .practice-demo,.drive .practice-demo p{color:#27354e}
.drive .practice-demo .question-meta,.drive .practice-demo .demo-label,.drive .practice-demo .topic-list>p,.drive .practice-demo .solution .key-source{color:#5f6b80}
.drive .practice-demo .answer-feedback.correct{color:#00766a}
.drive .practice-demo .answer-feedback.incorrect{color:#9e4c16}
.drive .practice-demo .button{display:inline-flex;align-items:center;justify-content:center;background:var(--indigo);color:#fff;border:1px solid var(--indigo);border-radius:6px;font-weight:700;cursor:pointer}
.drive .practice-demo .button:hover{background:#3f35ce}
.drive .practice-demo .topic{color:#4a5870;cursor:pointer}
.drive .practice-demo .topic.active{color:var(--indigo)}
.drive-note{margin-top:22px;font-size:15px}

/* every answer has a source */
.sources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,80px);margin-top:clamp(40px,5vw,72px)}
.sources article{border-top:1px solid var(--line);padding:28px 0 36px}
.sources h3{font-size:22px;font-weight:500;letter-spacing:-.02em}
.sources p{margin-top:8px;font-size:16px;max-width:460px}
.sources a,.next a{color:var(--ink);border-bottom:1px solid #14244466}
.sources a:hover,.next a:hover{border-color:var(--ink)}
.next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,80px);padding-top:clamp(48px,6vw,80px);margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--line)}
.next h3{font-size:18px;font-weight:600}
.next p{margin-top:6px;font-size:15px;max-width:460px}

/* end */
.final{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(120px,16vw,220px)}
.final:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 65% at 50% 115%,#2f4ad470,transparent 72%),radial-gradient(35% 45% at 92% 0%,#0e86c038,transparent 70%),var(--night)}
.final .h1{font-size:clamp(56px,10vw,150px);font-weight:200;letter-spacing:-.05em}
.final p{margin-top:22px}
.final .hero-actions{margin-top:36px}
.company{margin-top:clamp(64px,8vw,112px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:32px;border-top:1px solid var(--dline);padding-top:32px}
.company p{font-size:15px;max-width:560px}
.company a{color:#fff;border-bottom:1px solid #ffffff66}

/* footer */
.site-footer{background:#050b1e;border-top:1px solid var(--dline);padding-block:36px 28px;color:var(--dmuted);font-size:13px}
.footer-top{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.footer-top .brand{font-size:21px;gap:4px}
.footer-top p{font-size:13px;color:var(--dmuted)}
.footer-top nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px 22px}
.footer-top nav a,.footer-social a{color:var(--dmuted);transition:color .2s}
.footer-top nav a:hover,.footer-social a:hover{color:#fff}
.footer-social{display:flex;gap:18px;margin-top:24px;padding-top:24px;border-top:1px solid var(--dline)}
.footer-social svg{width:18px;height:18px}
.footer-bottom{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:22px;font-size:12px}

/* phones: a sticky install bar once the hero button has scrolled away (home.js) */
.install-bar{display:none}

@media(max-width:1000px){
  .years-layout,.drive-layout{grid-template-columns:1fr}
  .yr-num{margin-top:12px;font-size:clamp(96px,26cqi,200px)}
  .company{grid-template-columns:1fr}
}
@media(max-width:820px){
  .desktop-nav,.header-cta{display:none}
  .menu-toggle{display:inline-flex}
  .steps{grid-template-columns:1fr;gap:56px}
  .steps .shot{max-width:280px}
  .sources,.next{grid-template-columns:1fr}
  .numbers{grid-template-columns:1fr}
  .numbers li,.numbers li+li{padding:20px 0;border-left:0;border-bottom:1px solid var(--dline);flex-direction:row;align-items:baseline;gap:16px}
  .gallery-nav{display:none}
}
@media(max-width:700px){
  .film-frame{aspect-ratio:9/16}
  .film-controls{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .yr-row,.yr-axis{grid-template-columns:1fr;gap:6px}
  .yr-axis>span{display:none}
  .yr-grid{gap:12px}
  .years-pin{padding-block:80px 48px}
  .motion .years-pin{padding-block:72px 28px}
  .yr-num{font-size:clamp(96px,30vw,150px)}
  .demo-body{grid-template-columns:1fr}
  .topic-list{display:flex;gap:5px;border-right:0;border-bottom:1px solid #edf0f6;padding:10px;overflow-x:auto}
  .topic{flex:1;justify-content:center;white-space:nowrap;padding:10px 6px;margin:0;min-height:44px}
  .topic-list>p{display:none}
  .question{min-height:0}
  .answers label{min-height:44px}
  .footer-top nav{margin-left:0;flex-basis:100%}
  .install-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;align-items:center;gap:12px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px));background:#081028f0;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--dline);transform:translateY(110%);transition:transform .25s}
  .install-bar.show{transform:none}
  .install-bar div{display:flex;flex-direction:column;line-height:1.25;min-width:0}
  .install-bar strong{font-size:14px;color:#fff}
  .install-bar span{font-size:12px;color:var(--dmuted)}
  .install-bar .btn{margin-left:auto;min-height:44px;padding:0 16px;font-size:14px}
  body.has-install-bar{padding-bottom:72px}
}
/* phones: the pinned year sequence must fit one screen between the header and the install bar */
@media(max-width:700px){
  .motion .years-pin{padding-block:calc(84px + env(safe-area-inset-top,0px)) 84px;align-items:flex-start}
  .motion .years .h2{font-size:30px}
  .motion .years .lede{display:none}
  .motion .yr-num{font-size:clamp(76px,24vw,104px);margin:14px 0 8px}
  .motion .yr-exam{font-size:16px}
  .motion .yr-say{font-size:14px;margin-top:2px}
  .motion .years-layout{gap:18px}
  .motion .yr-grid{gap:8px}
  .motion .yr-row small{display:none}
  .motion .yr-row b{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .yr-cells i,.install-bar{transition:none}
}

/* better with friends, desktop: an Apple-style sticky phone whose screen follows the step in view (premium.js);
   phones, and pages without JavaScript, show each step with its own screen */
.together-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);margin-top:clamp(40px,5vw,72px)}
.stage{display:none}
.js .stage{display:block;position:sticky;top:max(96px,12vh);align-self:start;height:min(76vh,640px)}
.stage .shot{position:absolute;inset:0;margin-inline:auto;width:auto;height:100%;max-width:none;opacity:0;transform:translateY(18px) scale(.98);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.1,1)}
.stage .shot.active{opacity:1;transform:none}
.js .together-layout .steps{grid-template-columns:1fr;gap:0;margin-top:0}
.js .together-layout .steps li{min-height:72vh;justify-content:center}
.js .together-layout .steps .shot{display:none}
.together-layout .steps li{transition:opacity .4s}
.js .together-layout .steps li:not(.active){opacity:.35}
@media(max-width:820px){
  .together-layout{grid-template-columns:1fr}
  .js .stage{display:none}
  .js .together-layout .steps{gap:56px}
  .js .together-layout .steps li{min-height:0;opacity:1}
  .js .together-layout .steps .shot{display:block}
}
@media(prefers-reduced-motion:reduce){.stage .shot,.together-layout .steps li{transition:none}}

/* ---- Two apps on one site (2026-10-26): the EdLoop home (the apps and EdLoop Campus) and the per-app pages /jee and /eapcet.
   Each app keeps its own colour from its launcher icon: EdLoop JEE blue (the eo gradient), EdLoop EAPCET teal. */
:root{--jee:#2f8af7;--eapcet:#14b8a6;--eapcet-deep:#0f766e}

/* ---- header: the apps are the main navigation ---- */
.desktop-nav a[aria-current="page"]{color:#fff;box-shadow:inset 0 -1px 0 #fff}
.mobile-nav a[aria-current="page"]{color:#fff}

/* ---- home hero: words left, the two apps' phones right ---- */
.home-hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center}
.home-hero .h1{font-size:clamp(44px,5.8vw,84px)}
.duo{position:relative;height:clamp(380px,40vw,560px)}
.duo .shot{position:absolute;width:clamp(170px,17vw,250px);max-width:none;top:0}
.duo .shot:nth-child(1){left:4%;transform:rotate(-4deg);z-index:1}
.duo .shot:nth-child(2){right:4%;top:12%;transform:rotate(4deg)}
.duo figcaption{position:absolute;bottom:-34px;font-size:13px;color:var(--dmuted);white-space:nowrap}
.duo .cap-jee{left:6%}
.duo .cap-eapcet{right:6%}

/* ---- the apps ---- */
.apps-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 40px}
.apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(40px,5vw,64px)}
.app-card{display:flex;flex-direction:column;gap:18px;background:#fff;border:1px solid var(--line);border-radius:4px;padding:clamp(24px,2.4vw,34px);min-width:0}
.app-card .who{display:flex;align-items:center;gap:16px}
.app-card .who img{width:64px;height:64px;border-radius:16px;flex:none}
.app-card h3{font-size:26px;font-weight:500;letter-spacing:-.025em;line-height:1.1}
.app-card .exam{font-size:15px;color:var(--muted);margin-top:4px}
.app-card .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;border-top:1px solid var(--line)}
.app-card .facts div{padding:16px 0 0}
.app-card .facts div+div{padding-left:18px;border-left:1px solid var(--line)}
.app-card .facts dt{font-size:13px;color:var(--muted)}
.app-card .facts dd{margin:2px 0 0;font-size:clamp(28px,2.6vw,38px);font-weight:200;letter-spacing:-.04em;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.app-card .what{font-size:15.5px;line-height:1.65;color:#3d4a63}
.app-card .mark{font-size:13.5px;color:var(--muted)}
.app-card .go{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;padding-top:6px}
.app-card .go .btn{min-height:48px}
.app-card .go a.plain{font-size:15px;font-weight:600;color:var(--ink);border-bottom:1px solid #14244466}
.app-card .go a.plain:hover{border-color:var(--ink)}
.app-card.soon{background:var(--paper);border-style:dashed}
.app-card.soon .who img,.app-card.soon .ph{width:64px;height:64px;border-radius:16px;flex:none}
.app-card.soon .ph{display:grid;place-items:center;border:1px dashed #14244440;color:var(--muted);font-size:13px;font-weight:600}
.soon-tag{display:inline-block;font-size:12.5px;font-weight:600;color:var(--ink);border:1px solid var(--ink);border-radius:2px;padding:2px 8px;margin-top:6px}

/* ---- one account ---- */
.account{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.account-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.account-split h3{font-size:15px;font-weight:600;color:var(--muted);border-bottom:1px solid var(--ink);padding-bottom:10px}
.account-split ul{list-style:none;margin:0;padding:0}
.account-split li{padding:12px 0;border-bottom:1px solid var(--line);font-size:17px;color:var(--ink)}

/* ---- cross-link from one app page to the other ---- */
.also{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px 24px;align-items:center;border-top:1px solid var(--line);padding-top:clamp(40px,5vw,64px);margin-top:clamp(48px,6vw,80px)}
.also img{width:56px;height:56px;border-radius:14px}
.also h3{font-size:19px;font-weight:600}
.also p{font-size:15px;margin-top:4px}

/* ---- EdLoop EAPCET's page: teal where JEE's is blue ---- */
.app-eapcet .hero:before{background:radial-gradient(60% 70% at 80% 10%,#14b8a62e,transparent 70%),radial-gradient(40% 50% at 10% 100%,#0f766e33,transparent 70%)}
.app-eapcet .yr-cells i.l1{background:#11504f}
.app-eapcet .yr-cells i.l2{background:#0f766e}
.app-eapcet .yr-cells i.l3{background:#14b8a6}
.app-eapcet .yr-cells i.l4{background:#5eead4}
.app-eapcet .final:before{background:radial-gradient(55% 65% at 50% 115%,#14b8a666,transparent 72%),radial-gradient(35% 45% at 92% 0%,#0f766e40,transparent 70%),var(--night)}
.screens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,48px);justify-items:center;margin-top:clamp(48px,6vw,88px)}
.screens .shot{width:100%;max-width:280px}
.screens .shot:nth-child(2){transform:translateY(-28px)}
.pattern-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(40px,5vw,64px)}
.pattern-grid article{border-top:1px solid var(--line);padding-top:22px}
.pattern-grid h3{font-size:21px;font-weight:500;letter-spacing:-.02em}
.pattern-grid p{font-size:16px;margin-top:8px}
.paper-split{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:14px;font-size:15px;color:var(--ink)}
.paper-split b{font-weight:600;font-variant-numeric:tabular-nums}

@media(max-width:980px){
  .apps{grid-template-columns:1fr}
  .account{grid-template-columns:1fr}
}
@media(max-width:820px){
  .home-hero .wrap{grid-template-columns:1fr}
  .duo{height:clamp(340px,90vw,460px);margin-top:12px}
  .duo .shot{width:clamp(150px,42vw,210px)}
  .pattern-grid{grid-template-columns:1fr}
  .screens{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .screens .shot{border-radius:16px}
  .screens .shot:nth-child(2){transform:none}
  .also{grid-template-columns:auto minmax(0,1fr)}
  .also .btn{grid-column:1/-1;justify-self:start}
}
@media(max-width:520px){
  .account-split{grid-template-columns:1fr}
  .app-card .facts dd{font-size:30px}
}