:root{--ink:#12263a;--muted:#5a6b7a;--blue:#0176d0;--blue-deep:#0a5b9e;--orange:#fd6d13;--orange-deep:#e35d05;--orange-text:#e96411;--orange-ink:#be520e;--ielts-red:#E31837;--line:#dbe4ec;--pale:#f1f6fa}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;color:var(--ink);background:#fff;font:19px/1.65 'DM Sans','Hind Siliguri',sans-serif}body[data-lang=bn]{font-family:'Hind Siliguri','DM Sans',sans-serif}body[data-lang=bn] .en,body[data-lang=en] .bn,[hidden]{display:none!important}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer;color:inherit}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--blue);outline-offset:4px}img{display:block;max-width:100%}h1,h2,h3,p,figure{margin:0}h1,h2,h3{line-height:1.25;font-weight:600}h1{font-size:clamp(46px,4.8vw,74px);letter-spacing:-2px;line-height:1.14}h2{font-size:clamp(36px,3.6vw,54px);letter-spacing:-1.3px}h3{font-size:25px}em{font-style:normal;color:var(--blue)}body[data-lang=bn] h1{line-height:1.35;letter-spacing:-1px}body[data-lang=bn] h2{line-height:1.4;letter-spacing:-.5px}p{color:var(--muted)}.wrap{width:min(1320px,calc(100% - 80px));margin-inline:auto}.section{padding-block:64px}.eyebrow{font-size:15px;font-weight:600;letter-spacing:.04em;color:var(--blue-deep);margin-bottom:18px}.header{display:flex;align-items:center;gap:32px;min-height:108px;border-bottom:1px solid var(--line)}/* The wordmark wears the logo's two colours. The vivid brand orange cannot be text anywhere: 2.85:1 on white, under even the 3:1 large-text floor. --orange-text is the same hue darkened to 4.77:1; the blue is 4.66:1. */ .brand{display:flex;align-items:center;gap:14px;white-space:nowrap;font:700 30px/1 'DM Sans',sans-serif;letter-spacing:-1.1px;color:var(--orange-text)}.brand-logo{width:96px;height:56px;object-fit:contain}.brand b{font-weight:700;color:var(--blue)}.header nav{display:flex;align-items:center;gap:26px;margin-left:auto;font-size:18px}.header nav a:hover,.text-link:hover{color:var(--blue-deep)}.languages{display:flex;border:1px solid var(--line);padding:3px;border-radius:6px}.languages button{border:0;background:transparent;padding:7px 12px;min-height:42px;font-size:15px;border-radius:3px}.languages button[aria-pressed=true]{background:var(--ink);color:white}.hero{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:start;padding-block:44px 48px}.hero-description{font-size:19px;line-height:1.7;margin:24px 0 28px;max-width:560px}.hero-actions{display:flex;flex-wrap:wrap;gap:22px;align-items:center}.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;border:1px solid var(--orange);border-radius:5px;background:var(--orange);color:var(--ink);min-height:54px;padding:13px 24px;font-weight:600;font-size:17px;transition:background .15s}.button:hover{background:var(--orange-deep);border-color:var(--orange-deep)}.button:active{transform:translateY(1px)}.text-link{display:inline-flex;gap:18px;align-items:center;min-height:44px;border-bottom:1px solid var(--line);font-weight:500}.hero-note{font-size:15px;margin-top:18px}.product-preview{min-width:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--pale)}.preview-label{display:flex;justify-content:space-between;gap:16px;padding:17px 20px;font-size:14px;font-weight:600}.preview-label>span:last-child{font:13px 'DM Sans',sans-serif;color:var(--blue-deep)}.product-preview img{width:100%;height:auto}.product-preview figcaption{padding:14px 20px;font-size:14px;background:white}.facts{display:grid;grid-template-columns:repeat(3,1fr) 1.25fr;border-block:1px solid var(--line);padding-block:24px}.facts p{display:flex;align-items:center;gap:15px;padding-inline:24px;border-right:1px solid var(--line);font-size:16px}.facts p:first-child{padding-left:0}.facts p:last-child{border:0}.facts b{font:500 32px 'DM Sans',sans-serif;color:var(--ink)}.section-intro{max-width:660px}.section-intro .muted{margin-top:20px}.experience .section-intro{max-width:none}.experience h2 br{display:block}.experience .muted{max-width:720px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;list-style:none;padding:0;margin:32px 0 0}.steps li{display:flex;gap:18px;border-top:1px solid var(--line);padding-top:24px}.step-number{font:500 15px 'DM Sans',sans-serif;color:var(--blue-deep);padding-top:4px}.steps h3{font-size:21px;margin-bottom:12px}.feedback-section{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:72px;border-top:1px solid var(--line)}.feedback-copy>p:not(.eyebrow){margin-top:22px}.feedback-copy .text-link{margin-top:20px}.scoring-note{padding-left:18px;border-left:3px solid var(--blue);font-size:16px}.small{font-size:15px!important}.sample-stage{min-width:0}.sample-caption{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;font-size:15px}.sample-tag{font-size:13px;border:1px solid var(--line);padding:2px 8px;border-radius:3px}.report{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:white}.report-top{padding:18px 24px;border-bottom:1px solid var(--line)}.report-brand{font:600 17px 'DM Sans',sans-serif;display:flex;justify-content:space-between;align-items:center;gap:16px}.report-brand span{font-size:13px;letter-spacing:.03em;color:var(--muted)}.report-dots,.review-icon{display:none}.report-tabs{display:flex;border-bottom:1px solid var(--line);padding-inline:24px;gap:20px}.report-tabs button{border:0;background:transparent;padding:15px 0;border-bottom:2px solid transparent;font-size:16px;min-height:48px}.report-tabs button[aria-selected=true]{border-color:var(--blue-deep);color:var(--blue-deep);font-weight:600}.report-tabs button span{font-size:13px;margin-left:8px}.report-body{padding:24px;font-family:'DM Sans',sans-serif}.report-heading h2{font-size:27px;line-height:1.4;letter-spacing:-.6px}.report-label{font-size:13px;letter-spacing:.05em;margin-top:22px;color:var(--muted)}blockquote{font-size:18px;line-height:1.65;border-left:2px solid var(--line);padding-left:14px;margin:10px 0 22px}mark{background:#fff1d9;color:var(--ink)}.feedback-line{display:flex;gap:14px;margin:18px 0}.feedback-line h3{font-size:16px;margin-bottom:5px}.feedback-line p,.next-step p{font-size:16px;line-height:1.6}.feedback-symbol{color:var(--blue-deep)}.next-step{background:var(--pale);padding:18px;border-radius:4px}.next-step .report-label{margin:0;display:block}.next-step p{margin-top:8px}.report-footer{padding:16px 24px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}.sample-footnote{font-size:15px;margin-top:12px;display:flex;gap:10px}.papers-section{background:var(--pale);border-block:1px solid var(--line)}.section-heading{display:flex;gap:48px;justify-content:space-between;align-items:end;margin-bottom:32px}.section-heading>p{max-width:350px}.papers{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}.papers article{display:grid;grid-template-columns:130px 1fr;gap:10px 24px;padding:26px 0;border-top:1px solid var(--line)}.paper-number{font-size:13px;color:var(--blue-deep);grid-column:1/-1;letter-spacing:.04em}.papers h3{font:500 21px 'DM Sans',sans-serif}.paper-detail{grid-column:2;font-size:15px;color:var(--blue-deep)}.estimate-note{display:flex;gap:12px;border-top:1px solid var(--line);padding-top:22px;margin-top:16px;font-size:16px}.pricing{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}.ebook-link{display:flex;gap:16px;border-top:1px solid var(--line);margin-top:28px;padding-top:24px}.ebook-link b{font-weight:500}.ebook-link small{display:block;font-size:15px;color:var(--muted)}.ebook-icon{font-size:24px;color:var(--blue-deep)}.main-plan{border:1px solid var(--blue);border-radius:6px;padding:32px;background:white}.plan-top{display:flex;align-items:center;justify-content:space-between;gap:15px}.plan-top h3{font-size:22px}.value-tag{font-size:13px;background:var(--pale);color:var(--blue-deep);padding:4px 8px;border-radius:3px}.price{display:flex;align-items:baseline;gap:15px;margin-top:24px}.price-amount{display:inline-flex;align-items:baseline;gap:8px}.currency{font-size:26px}.digits{font:600 58px/1.2 'DM Sans',sans-serif;letter-spacing:-2px}.price small{font-size:16px;color:var(--muted)}.plan-description{margin-top:12px}.main-plan ul{list-style:none;padding:22px 0 0;margin:24px 0;border-top:1px solid var(--line)}.main-plan li{margin:12px 0;display:flex;gap:12px}.main-plan li:before{content:'✓';color:var(--blue-deep)}.main-plan .button{width:100%}.payment-methods{text-align:center;margin-top:14px;font-size:15px}.small-plan{border-bottom:1px solid var(--line);padding:24px 0;display:flex;justify-content:space-between;gap:18px;align-items:center}.small-plan h3{font-size:19px}.small-plan p{margin-top:8px}.small-plan button{background:white;border:1px solid var(--line);border-radius:4px;min-height:46px;padding:9px 14px;white-space:nowrap;font-size:16px}.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;border-top:1px solid var(--line)}.faq .text-link{margin-top:24px;font-size:16px}.questions details{border-bottom:1px solid var(--line)}summary{padding:20px 28px 20px 0;cursor:pointer;font-size:19px;font-weight:500;position:relative;list-style:none}summary::-webkit-details-marker{display:none}summary:after{content:'+';position:absolute;right:0}details[open] summary:after{content:'−'}details p{padding-bottom:22px}.closing{display:flex;justify-content:space-between;align-items:center;gap:32px;background:var(--pale);padding:40px;margin-bottom:40px;border:1px solid var(--line);border-radius:6px}.closing h2{font-size:36px}.footer{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:24px 32px;font-size:15px}.footer .brand-logo{width:150px;height:104px}.footer .brand{font-size:22px}.skip{position:absolute;top:-100px;left:20px;z-index:100;padding:10px;background:white}.skip:focus{top:10px}body:has(dialog[open]){overflow:hidden}dialog{width:min(620px,calc(100% - 28px));max-height:calc(100dvh - 32px);padding:28px;border:1px solid var(--line);border-radius:8px;color:var(--ink)}dialog::backdrop{background:rgba(15,30,45,.6)}.checkout-header{display:flex;justify-content:space-between;align-items:center}.close-dialog{width:44px;height:44px;border:1px solid var(--line);border-radius:4px;background:white;font-size:28px}dialog h2{font-size:30px;margin:14px 0}.checkout-summary{font-size:18px}.payment-box{background:var(--pale);padding:20px;margin-block:24px}.payment-number{display:flex;gap:16px;align-items:center;margin-block:10px}.payment-number>span{font:500 25px 'DM Sans',sans-serif}.payment-number button{border:1px solid var(--line);background:white;padding:7px 12px;min-height:44px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-block:22px}.form-grid label{display:flex;flex-direction:column;gap:7px;font-size:16px}.form-grid .full{grid-column:1/-1}input,select{width:100%;min-height:48px;border:1px solid #a4b2bd;border-radius:4px;padding:10px;background:white;color:var(--ink)}#order>.button{width:100%}#order>.small{margin-top:16px}.honeypot{position:absolute;left:-9999px;width:1px;height:1px}#signup-status{padding:20px 0}#signup-status a{color:var(--blue-deep);text-decoration:underline}#signup-status button{min-height:44px;padding:8px 16px} @media(min-width:1500px){.hero{gap:64px}.wrap{width:min(1440px,calc(100% - 128px))}} @media(max-width:1050px){.wrap{width:calc(100% - 48px)}.header{gap:18px}.header nav{gap:18px;font-size:15px}.brand{gap:8px;font-size:21px}.brand-logo{width:86px;height:50px}.hero{gap:28px}h1{font-size:46px}.hero-description{font-size:18px}.feedback-section,.pricing,.faq{gap:36px}.facts p{padding-inline:16px}.facts{grid-template-columns:repeat(3,1fr)}.facts .fact-note{display:none}.papers article{grid-template-columns:1fr}.paper-detail{grid-column:auto}.steps{gap:24px}.section-heading{align-items:start}.section-heading>p{max-width:280px}.footer>p{display:none}} @media(max-width:800px){.wrap{width:calc(100% - 36px)}.header{flex-wrap:wrap;gap:0;min-height:0;padding-top:10px}.brand-logo{width:82px;height:48px}.brand{font-size:20px}.languages{margin-left:auto}.header nav{order:3;width:100%;justify-content:space-between;margin:10px 0 0;padding:12px 0;border-top:1px solid var(--line);gap:10px;font-size:15px}.hero{grid-template-columns:1fr;padding:36px 0;gap:30px}.hero-copy{max-width:640px}h1{font-size:46px;letter-spacing:-1.6px}.hero h1 br{display:none}.hero h1 em{display:block}.hero-description{margin:20px 0 24px;font-size:18px}.hero-actions{gap:15px}.hero-note{font-size:15px}.product-preview{width:100%}.facts{padding:8px 0;grid-template-columns:1fr}.facts p{border-right:0;border-bottom:1px solid var(--line);padding:14px 0;gap:20px}.facts p:nth-child(3){border:0}.facts b{min-width:75px;font-size:28px}.section{padding-block:44px}h2{font-size:35px}.steps{grid-template-columns:1fr;gap:24px;margin-top:26px}.steps li{padding-top:20px}.steps p{font-size:18px}.experience h2 br{display:block}.feedback-section{grid-template-columns:1fr;gap:28px}.feedback-copy>p{font-size:18px}.report-heading h2{font-size:25px}.sample-footnote{font-size:16px}.papers{grid-template-columns:1fr}.papers article{grid-template-columns:1fr;padding-block:24px;gap:10px}.papers p{font-size:18px}.papers h3{font-size:24px}.paper-number{font-size:14px}.paper-detail{font-size:16px}.section-heading{display:block;margin-bottom:26px}.section-heading>p{max-width:none;margin-top:18px}.pricing,.faq{grid-template-columns:1fr;gap:28px}.pricing .section-intro{max-width:none}.main-plan{padding:24px}.small-plan{align-items:start}.small-plan button{white-space:normal;min-width:100px}.faq h2 br{display:none}.closing{display:block;padding:26px;margin-bottom:20px}.closing h2{font-size:32px}.closing .button{margin-top:24px;width:100%}.footer{flex-wrap:wrap;padding-block:16px 24px;gap:12px}.footer .brand-logo{width:132px;height:92px}.footer>a:last-child{font-size:15px}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}dialog{padding:20px}dialog h2{font-size:26px}.product-preview img{height:auto}} @media(max-width:400px){h1{font-size:39px}.hero-actions{align-items:stretch;flex-direction:column}.hero-actions .text-link{align-self:flex-start}.header nav{font-size:14px}.header .brand{font-size:19px}.brand-logo{width:76px;height:44px}.languages button{padding-inline:10px}.report-body{padding:20px}.report-top,.report-footer{padding:16px 20px}.report-brand span{max-width:95px}.plan-top{align-items:start}.digits{font-size:52px}.small-plan{display:block}.small-plan button{margin-top:14px}.payment-number{gap:8px}.payment-number>span{font-size:23px}} /* A blanket animation:none!important here silently killed every animation on the page for anyone whose OS has animation effects switched off — which is a very common Windows setting. Scoped to decorative motion now; the pitch keeps a gentle staggered fade, defined further down. */ @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important} .caret,.mock-recdot,.rot-line.on::after{animation:none!important}} /* "Use my Google email" on the order form. The point is not convenience: it makes the address a buyer registers one they have PROVED they own, so a student cannot pay under a typed address and then sign in with a different Google account and find no pack. */ .gbtn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:50px;margin-top:6px;padding:12px 16px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);font-weight:500;text-decoration:none} .gbtn:hover{background:var(--pale)} .gbtn svg{flex:none} .gnote{font-size:14px;margin:8px 0 0} .gor{display:flex;align-items:center;gap:12px;margin:18px 0 4px;color:var(--muted);font-size:13px} .gor span{flex:1;height:1px;background:var(--line)} .gor b{font-weight:500;text-transform:uppercase;letter-spacing:.04em} .gverified{display:flex;align-items:center;gap:8px;font-size:14px;color:#0f7a4d;margin:6px 0 0} .gverified button{background:none;border:0;color:var(--blue-deep);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;padding:0} .form-grid input[readonly]{background:var(--pale);color:var(--muted)} /* Tap targets. Measured at 360px: nav links were 23px and the e-book link 28px, against the 44px a thumb needs. Padding only — nothing moves. */ .header nav a,.text-link,.footer a{display:inline-flex;align-items:center;min-height:44px} .ebook-link{align-items:center;min-height:44px} .languages button{min-height:44px} /* Bangla DISPLAY face. Headings only: Anek Bangla is contemporary and its Latin is clean, which matters because every headline here mixes scripts ("IELTS পরীক্ষার আগে", "৳1,000"). Body stays Hind Siliguri, which holds up better at 15-17px on a cheap phone. English headings keep DM Sans. */ body[data-lang=bn] p.pitch,body[data-lang=bn] h2,body[data-lang=bn] .price,body[data-lang=bn] dialog h2{font-family:'Anek Bangla','Hind Siliguri',sans-serif} body[data-lang=bn] p.pitch{letter-spacing:-.5px} /* ---- one panel, four papers ------------------------------------------ The hero preview and the separate feedback section showed the same idea twice. Now it is one component: tabs pick the paper, the panel shows that paper, and the line in the hero changes with it. */ .preview-label{flex-wrap:wrap;gap:12px} .paper-tabs{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap} .paper-tabs button{border:1px solid var(--line);background:#fff;color:var(--ink);font:600 15px/1 'DM Sans','Hind Siliguri',sans-serif; padding:9px 13px;min-height:44px;border-radius:5px;cursor:pointer;white-space:nowrap} .paper-tabs button:hover{color:var(--ink);background:#fff} .paper-tabs button[aria-selected=true]{background:var(--ink);color:#fff} .preview-panels{position:relative} .shot-panel img{width:100%;height:auto;display:block} /* The Listening panel is drawn, not screenshotted — its caption says so. */ .mock-panel{background:#fff} .mock-bar{display:flex;align-items:center;gap:14px;background:var(--ink);color:#fff;padding:14px 18px} .mock-bar b{display:block;font-size:17px} .mock-bar small{opacity:.7;font-size:13px} .mock-dot{width:34px;height:34px;border-radius:50%;background:var(--orange);color:var(--ink);display:grid;place-items:center;font-weight:700;flex:none} .mock-time{margin-left:auto;font:700 22px/1 'DM Sans',sans-serif;font-variant-numeric:tabular-nums} .mock-body{padding:22px 20px 26px} .mock-audio{display:flex;align-items:center;gap:14px;background:var(--pale);border:1px solid var(--line);border-radius:6px;padding:12px 16px} .mock-play{width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px;flex:none} .mock-track{flex:1;height:5px;border-radius:3px;background:var(--line);position:relative;overflow:hidden} .mock-track i{position:absolute;inset:0 62% 0 0;background:var(--orange);border-radius:3px} .mock-elapsed{font:600 15px/1 'DM Sans',sans-serif;color:var(--muted);font-variant-numeric:tabular-nums} .mock-instr{margin:20px 0 14px;font-size:16px;color:var(--ink)} .mock-qs{list-style:none;margin:0;padding:0} .mock-qs li{display:flex;gap:14px;padding:11px 0;border-top:1px solid var(--line)} .mock-qs li span{width:26px;height:26px;flex:none;border-radius:4px;background:var(--pale);color:var(--muted);display:grid;place-items:center;font:600 14px/1 'DM Sans',sans-serif} .mock-qs p{margin:0;color:var(--ink);font-size:16px} .mock-qs mark{background:var(--pale);border-bottom:2px solid var(--ink);border-radius:0} /* ---- the line that changes with the tab ------------------------------- Stacked in one grid cell so the tallest line reserves the height and nothing jumps when the text swaps. Revealed by a curtain that slides off to the right: left-to-right, first character to last. NOT letter-by-letter spans — splitting Bangla mid-cluster orphans matras and hasants and breaks conjunct shaping. */ .rotator{display:grid;overflow:hidden} .rot-line{grid-area:1/1;margin:0;opacity:0;visibility:hidden;position:relative} .rot-line.on{opacity:1;visibility:visible} .rot-line.on::after{content:'';position:absolute;inset:-2px -4px;background:#fff;animation:rotwipe .9s cubic-bezier(.22,.61,.36,1) forwards} @keyframes rotwipe{from{transform:translateX(0)}to{transform:translateX(102%)}} figcaption.rotator{min-height:1.7em} @media(prefers-reduced-motion:reduce){.rot-line.on::after{display:none}} @media(max-width:800px){ .paper-tabs{width:100%;margin-left:0;justify-content:space-between;gap:2px} .paper-tabs button{flex:1;padding:9px 6px;font-size:14px;text-align:center} .mock-time{font-size:19px} } /* Keep the proof points readable instead of treating them as fine print. */ .facts{padding-block:28px} .facts p{gap:18px;font-size:19px;font-weight:500;line-height:1.45} .facts b{font-size:42px;font-weight:600} .facts .fact-note{font-size:19px;font-weight:500} @media(max-width:1050px){.facts p{font-size:18px}.facts b{font-size:38px}} @media(max-width:800px){ .facts{padding-block:10px} .facts p{padding-block:17px;font-size:18px} .facts b{min-width:82px;font-size:36px} } /* The perk half of each rotating line, carried in the ink colour so the sales point separates from the description without a second element. */ .rot-line b{color:var(--ink);font-weight:600} /* WhatsApp sits with the nav, not buried at the bottom of the FAQ. */ .wa{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%; color:#128c7e;background:#e9f6f2;flex:none;margin-left:4px} .wa:hover{color:#fff;background:#128c7e} /* The panel no longer resizes when you change tab. Measured spread between the shortest and tallest paper was up to 371px, which threw the whole page around on every click. Fixed box; anything taller scrolls inside it. */ .preview-panels{height:540px;overflow:hidden} .preview-panels > *{height:100%;overflow:auto} .preview-panels > .mock-panel:not([hidden]){display:flex;flex-direction:column;overflow:hidden;background:#fff} .preview-panels > .mock-panel:not([hidden]) .mock-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;background:#fff} .shot-panel{display:flex;align-items:flex-start;justify-content:center;background:var(--pale)} /* Selling points pop in and out on their own clock — not tied to the tabs. */ .rot-line{transition:none} .rot-line.on::after{display:none} .rot-line.on{animation:perkIn .5s cubic-bezier(.2,.7,.3,1) both} p.pitch .rot-line.on,p.pitch .rot-line.leaving{animation:none} .rot-line.leaving{opacity:1;visibility:visible;animation:perkOut .32s ease both} @keyframes perkIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}} @keyframes perkOut{to{opacity:0;transform:translateY(-8px) scale(.99)}} /* Buying moved up beside the questions; the old full-width band below the FAQ was a screen of nearly nothing. */ .faq-buy{margin-top:36px;padding:24px;border:1px solid var(--line);border-radius:8px;background:var(--pale)} .faq-buy .eyebrow{margin-bottom:10px} .faq-price{font-size:22px;color:var(--ink);margin:0 0 16px} .faq-price b{font-weight:600} .faq-buy .button{width:100%} .faq-buy .small{margin-top:12px;color:var(--muted)} .questions summary{font-size:19px} @media(max-width:1100px){.preview-panels{height:545px}} @media(max-width:800px){ .preview-panels{height:668px} .wa{width:44px;height:44px} .header nav{font-size:16px} } /* The headline IS the pitch loop: one size, one element, cycling. Lines are stacked in a single grid cell so the tallest reserves the height and the CTA below never moves. */ p.pitch{font-size:clamp(44px,4.5vw,70px);letter-spacing:-1.6px;line-height:1.15;font-weight:600;color:var(--ink);margin:0} body[data-lang=bn] p.pitch{line-height:1.35;letter-spacing:-1px} p.pitch.rotator{display:grid} /* Each word rises and sharpens in turn. Words, not characters: a Bangla cluster split mid-word loses its matras and hasants and renders broken. */ p.pitch .w{display:inline-block;white-space:pre;font-style:normal} p.pitch .w+.w{margin-left:.26em} p.pitch .w.em{color:var(--blue)} p.pitch .w.emo{margin-right:.28em} p.pitch .rot-line.on .w{animation:wordIn .78s cubic-bezier(.18,1.24,.36,1) both;animation-delay:calc(var(--i) * 78ms)} p.pitch .rot-line.leaving .w{animation:wordOut .34s cubic-bezier(.5,0,.75,0) both;animation-delay:calc(var(--i) * 26ms)} @keyframes wordIn{ from{opacity:0;transform:translateY(.62em) scale(.92) rotate(-1.2deg);filter:blur(12px)} 55%{filter:blur(0)} to{opacity:1;transform:none;filter:blur(0)}} @keyframes wordOut{to{opacity:0;transform:translateY(-.34em) scale(.985);filter:blur(6px)}} /* "Reduce" means gentler, not dead. Windows with animation effects switched off reports reduce, and killing the animation outright made the pitch look like plain text swapping. Movement and blur go; a soft staggered fade stays, which is what the setting is actually asking for. */ @media(prefers-reduced-motion:reduce){ p.pitch .rot-line.on .w{animation:wordFade .45s ease both;animation-delay:calc(var(--i) * 55ms)} p.pitch .rot-line.leaving .w{animation:wordFadeOut .25s ease both;animation-delay:0s} } @keyframes wordFade{from{opacity:0}to{opacity:1}} @keyframes wordFadeOut{to{opacity:0}} p.pitch .rot-line{grid-area:1/1;display:block} p.pitch .rot-line:not(.on){opacity:0;visibility:hidden} .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} /* One line. The header already carries the logo, the wordmark and the login link; repeating all three at the bottom was a screen of nothing. What has to live here is the privacy policy, which nothing else on the site links. */ .footer{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;padding-block:26px; border-top:1px solid var(--line);color:var(--muted);font-size:16px} .footer p{margin:0;margin-right:auto} .footer a{color:var(--muted);display:inline-flex;align-items:center;min-height:44px} .footer a:hover{color:var(--blue-deep)} /* Every panel starts at the top of the box, so switching paper does not move the first line up or down. */ .preview-panels > *{align-content:start} /* ---- four papers, one chrome ----------------------------------------- Every tab now shows the same kind of thing drawn the same way: the test interface for that paper. Before, two tabs showed the interface and two showed a feedback card, and one of those was a photograph. */ .mock-bar{display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;padding:13px 16px} .mock-saved{margin-left:auto;font-size:13px;color:#8fd6b4;background:rgba(143,214,180,.12);padding:3px 9px;border-radius:4px} .mock-submit{background:var(--orange);color:var(--ink);font-weight:600;font-size:15px;padding:7px 14px;border-radius:5px} .mock-time{font:700 21px/1 'DM Sans',sans-serif;font-variant-numeric:tabular-nums;margin-left:0} .mock-body{padding:18px 18px 22px;display:flex;flex-direction:column;gap:14px} .mock-instr{margin:0;font-size:15px;color:var(--ink);font-weight:600} .mock-hint{font-weight:400;color:var(--muted)} .mock-passage{background:var(--pale);border:1px solid var(--line);border-radius:6px;padding:14px 16px;font-size:15px;line-height:1.6;color:var(--ink)} .mock-passage b{display:block;margin-bottom:6px} .mock-passage p{margin:0;color:var(--ink)} .mock-passage mark.hl{background:#ffeec2;border-radius:2px} .mock-qs.opts .opt{display:block;font-style:normal;margin-top:7px;padding:7px 10px;border:1px solid var(--line);border-radius:5px;font-size:14px;background:#fff} .mock-qs.opts .opt.on{border-color:var(--blue);background:#eaf4fd;font-weight:600} .mock-editor{border:1px solid var(--line);border-radius:6px;padding:14px 16px;background:#fff;font-size:15px;line-height:1.7;min-height:96px} .mock-editor p{margin:0;color:var(--ink)} .caret{display:inline-block;width:2px;height:1em;background:var(--ink);vertical-align:-2px;margin-left:2px;animation:blink 1.1s step-end infinite} @keyframes blink{50%{opacity:0}} .mock-count{margin:0;font-size:14px;color:var(--muted)} .mock-count b{color:var(--ink)} .mock-rec{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:6px;padding:12px 14px;background:#fff} .mock-recdot{width:12px;height:12px;border-radius:50%;background:#d1372b;flex:none;animation:blink 1.4s step-end infinite} .mock-wave{flex:1;display:flex;align-items:center;gap:3px;height:34px} .mock-wave i{flex:1;background:var(--blue);border-radius:2px;height:calc(var(--h) * 1%)} @media(prefers-reduced-motion:reduce){.caret,.mock-recdot{animation:none}} @media(max-width:800px){.mock-time{font-size:18px}.mock-submit{font-size:14px;padding:6px 11px}.mock-body{padding:14px 14px 18px}} /* Step through the points by hand. Quiet until you look for it. */ .pitch-nav{display:flex;align-items:center;gap:12px;margin:22px 0 0} .pitch-nav button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff; color:var(--muted);font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center} .pitch-nav button:hover{border-color:var(--ink);color:var(--ink)} .pitch-dots{display:flex;gap:6px} .pitch-dots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .3s,width .3s} .pitch-dots i.on{background:var(--orange);width:20px;border-radius:4px} @media(max-width:800px){.pitch-nav{margin-top:18px}.pitch-nav button{width:44px;height:44px}} /* A hint that the tabs do something, and audio you can actually play. */ .tab-cue{display:block;font-size:14px;font-weight:400;color:var(--muted);margin-top:4px} .mock-player{width:100%;height:38px;display:block;flex:0 0 38px;min-height:38px} .mock-done{margin-left:auto;font-size:14px;font-weight:600;color:#8fd6b4;background:rgba(143,214,180,.14);padding:6px 12px;border-radius:5px} .mock-passage.q p{font-size:17px;font-weight:500} .mock-qmark{color:var(--blue);font-size:24px;line-height:0;vertical-align:-4px;margin-right:2px} .mock-passage mark.err{background:#ffe6e2;border-bottom:2px solid #e0654f;border-radius:2px} .mock-reclabel{margin:0;font-size:14px;color:var(--muted);display:flex;justify-content:space-between} .mock-reclabel span{font-variant-numeric:tabular-nums} /* The band and the two or three things to fix — what a student actually gets back, in the space the interface panels leave empty. */ .mock-band{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:6px;padding:12px 16px;background:var(--pale)} .mock-bandnum{font:700 34px/1 'DM Sans',sans-serif;color:var(--ink)} .mock-band span{font-size:14px;color:var(--muted);line-height:1.35} .mock-band i{font-style:normal;font-size:13px} .mock-fb{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .mock-fb li{display:flex;gap:11px;font-size:15px;line-height:1.55;color:var(--ink)} .mock-fb b{flex:none;width:20px;color:#1f7a4d;font-size:15px} .mock-fb b.warn{color:var(--orange-ink)} .mock-fb i{font-style:normal;font-family:'DM Sans',sans-serif} .mock-fb u{text-decoration-color:#e0654f;text-underline-offset:3px} /* The free book, in the gap under the payment note. It is the lead magnet, so it should not be buried three screens down in the pricing section. */ .hero-ebook{display:flex;align-items:center;gap:14px;margin-top:22px;padding:14px 16px; border:1px solid var(--line);border-radius:8px;background:var(--pale);color:var(--ink);max-width:520px} .hero-ebook:hover{border-color:var(--blue);background:#eaf4fd} .hero-ebook-ic{font-size:24px;flex:none;line-height:1} .hero-ebook b{display:block;font-weight:600;font-size:16px} .hero-ebook small{display:block;font-size:14px;color:var(--muted);margin-top:2px} .hero-ebook-go{margin-left:auto;color:var(--blue-deep);font-size:20px;flex:none} /* Clicking "see a sample report" changes a panel on the other side of the screen; without a flash the eye does not follow it. */ .product-preview{position:relative} .product-preview.flash{animation:previewFlash 1.1s cubic-bezier(.2,.8,.3,1) 2} @keyframes previewFlash{ 0%{box-shadow:0 0 0 0 rgba(253,109,19,.5);border-color:var(--orange)} 55%{box-shadow:0 0 0 14px rgba(253,109,19,0);border-color:var(--orange)} 100%{box-shadow:0 0 0 0 rgba(253,109,19,0)}} /* A light sweeps across the panel so the change is impossible to miss from the other side of the screen. Sits above the content, takes no clicks. */ .product-preview.flash::after{ content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit; background:linear-gradient(105deg,transparent 34%,rgba(253,109,19,.26) 46%, rgba(255,255,255,.62) 51%,rgba(253,109,19,.26) 56%,transparent 68%); background-size:260% 100%; animation:previewSweep 1.1s cubic-bezier(.3,.6,.3,1) 2} @keyframes previewSweep{from{background-position:190% 0}to{background-position:-90% 0}} @media(prefers-reduced-motion:reduce){ .product-preview.flash{animation:previewTint 1.6s ease} .product-preview.flash::after{animation:none;background:rgba(253,109,19,.10);opacity:0; animation:previewSoft 1.6s ease} @keyframes previewTint{0%,70%{border-color:var(--orange)}100%{border-color:var(--line)}} @keyframes previewSoft{0%,70%{opacity:1}100%{opacity:0}}} @media(max-width:800px){.hero-ebook{max-width:none}} /* bKash transaction IDs are uppercase alphanumeric. Showing them any other way makes a student think they have mistyped it. The server already uppercases both sides when matching, so this is about the person, not the match. */ #order input[name=trx]{text-transform:uppercase;letter-spacing:.06em;font-variant-numeric:tabular-nums} #order input[name=trx]::placeholder{text-transform:none;letter-spacing:normal} /* The 700 tier existed only inside the pricing section, so anyone reading the hero or the FAQ saw a single price. It now sits beside every 1,000. */ .buy-alt{background:none;border:0;padding:8px 2px;min-height:44px;cursor:pointer; color:var(--blue-deep);font:600 16px/1 'DM Sans','Hind Siliguri',sans-serif; text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px} .buy-alt:hover{color:var(--ink)} .faq-buy .buy-alt{display:block;margin-top:10px;text-align:center;width:100%} /* Section emoji. Decorative only: aria-hidden, and never the sole carrier of meaning, so a screen reader loses nothing by skipping them. */ .e{margin-right:.45em;font-size:.88em;line-height:1} .questions summary .e{margin-right:.4em} .papers h3 .e{margin-right:.35em} /* ---- two packs, side by side ----------------------------------------- The left-hand column was restating what the cards already said. Both packs are now equal cards you can buy from directly. Green for the 10 because it has to read as a different choice next to an orange one, not a lesser one. */ :root{--green-pack:#1f7a4d;--green-pack-soft:#eaf6ef;--green-pack-line:#bfe3d0} .pricing{display:block} .pricing-head{max-width:640px;margin-bottom:26px} .plans{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start} .plan{border:2px solid var(--line);border-radius:10px;padding:26px;background:#fff;display:flex;flex-direction:column;gap:14px} .plan-50{border-color:var(--orange);background:linear-gradient(180deg,#fff7f0 0%,#fff 42%)} .plan-10{border-color:var(--green-pack-line);background:linear-gradient(180deg,var(--green-pack-soft) 0%,#fff 42%)} .plan-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .plan h3{font-size:21px;margin:0} .plan-tag{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:4px} .plan-50 .plan-tag{background:var(--orange);color:var(--ink)} .plan-10 .plan-tag{background:var(--green-pack);color:#fff} .plan-price{font:700 46px/1 'DM Sans',sans-serif;color:var(--ink);margin:0} .plan-price .cur{font-size:26px;font-weight:600;margin-right:4px;vertical-align:6px} .plan-per{margin:0;font-size:16px;color:var(--muted)} .plan ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:15px} .plan li{display:flex;gap:9px;color:var(--ink)} .plan li:before{content:'✓';flex:none} .plan-50 li:before{color:var(--orange-ink)} .plan-10 li:before{color:var(--green-pack)} .plan .button{margin-top:auto;width:100%} .plan-10 .button{background:var(--green-pack);border-color:var(--green-pack);color:#fff} .plan-10 .button:hover{background:#18603c;border-color:#18603c} .pricing .ebook-link{margin-top:26px} /* The same choice, small, beside the questions. */ .mini-plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px} .mini{border:2px solid var(--line);border-radius:8px;padding:13px 12px;background:#fff;cursor:pointer; display:flex;flex-direction:column;gap:2px;text-align:left;font:inherit;min-height:44px} .mini b{font:700 24px/1.1 'DM Sans',sans-serif;color:var(--ink)} .mini span{font-size:14px;color:var(--ink)} .mini i{font-style:normal;font-size:13px;color:var(--muted)} .mini-50{border-color:var(--orange);background:#fff7f0} .mini-50:hover{background:#ffedde} .mini-10{border-color:var(--green-pack-line);background:var(--green-pack-soft)} .mini-10:hover{background:#dcefe4} @media(max-width:800px){.plans{grid-template-columns:1fr}.plan{padding:22px}.plan-price{font-size:40px}} @media(max-width:420px){.mini-plans{grid-template-columns:1fr}} /* Finesse ------------------------------------------------------------- */ /* The emoji lands last and bounces once, so it reads as punctuation rather than another word. */ p.pitch .w.emo{animation-name:emojiIn!important;animation-duration:.7s!important; animation-timing-function:cubic-bezier(.22,1.5,.38,1)!important} @keyframes emojiIn{ from{opacity:0;transform:translateY(.5em) scale(.4) rotate(-14deg)} 70%{opacity:1;transform:translateY(0) scale(1.14) rotate(4deg)} to{opacity:1;transform:none}} /* Two lines of similar length rather than one long and one stubby. */ p.pitch .rot-line{text-wrap:balance} /* Changing paper should feel like a change, not a repaint. */ .preview-panels > *:not([hidden]){animation:panelIn .42s cubic-bezier(.2,.8,.3,1) both} @keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .paper-tabs button{transition:background .22s ease,color .22s ease,border-color .22s ease,transform .12s ease} .paper-tabs button:active{transform:translateY(1px)} /* Cards and buttons answer the pointer. */ .plan{transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s ease} .plan:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(18,38,58,.09)} .mini{transition:transform .18s ease,background .18s ease} .mini:hover{transform:translateY(-2px)} .button{transition:background .2s ease,border-color .2s ease,transform .12s ease,box-shadow .2s ease} .button:hover{box-shadow:0 8px 20px rgba(253,109,19,.28)} .plan-10 .button:hover{box-shadow:0 8px 20px rgba(31,122,77,.28)} .hero-ebook{transition:border-color .2s ease,background .2s ease,transform .2s ease} .hero-ebook:hover{transform:translateX(3px)} .pitch-nav button{transition:border-color .2s ease,color .2s ease,transform .15s ease} .pitch-nav button:hover{transform:scale(1.08)} .pitch-dots i{transition:background .35s ease,width .35s cubic-bezier(.2,.9,.3,1)} @media(prefers-reduced-motion:reduce){ .preview-panels > *:not([hidden]){animation:none} .plan:hover,.mini:hover,.hero-ebook:hover,.pitch-nav button:hover{transform:none} p.pitch .w.emo{animation-name:wordFade!important}} /* A ground rather than a blank page. Three deliberate choices here: 1. BLUE, because it is the brand's second colour and it is the one that does not fight the orange. A grey wash would read as unfinished; a warm wash would compete with the CTA. 2. ONE WARM GLOW low-left, at 3.5%. Everything else being cool made the page read as cold and technical, and the buy button had nothing behind it. A barely-there orange under the CTA warms the corner the eye buys from and puts both brand colours in the room. 3. A FINER, LIGHTER grid: 20px at 4.5%, down from 24px at 7%. At the coarser setting it read as dots; at this one it reads as paper texture, which is what it is for. Fixed, so it never costs a scroll repaint. */ body{background: radial-gradient(1150px 640px at 10% -8%, rgba(1,118,208,.085), transparent 62%), radial-gradient(880px 520px at 97% 2%, rgba(1,118,208,.06), transparent 60%), radial-gradient(720px 520px at 18% 62%, rgba(253,109,19,.035), transparent 64%), radial-gradient(900px 620px at 62% 106%, rgba(1,118,208,.055), transparent 62%), #fdfeff; background-attachment:fixed} body:before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background-image:radial-gradient(rgba(1,118,208,.045) 1px, transparent 1px); background-size:20px 20px} .papers-section{background:transparent} /* The 10 is a pack, not a footnote: same shape as the 50, in its own colour. */ .buy-10{display:inline-flex;align-items:center;justify-content:center;gap:18px; border:2px solid var(--green-pack);border-radius:5px;background:var(--green-pack-soft); color:#14513a;font:600 17px/1 'DM Sans','Hind Siliguri',sans-serif; padding:14px 22px;min-height:56px;cursor:pointer; transition:background .2s ease,transform .12s ease,box-shadow .2s ease} .buy-10:hover{background:#d9eee2;box-shadow:0 8px 20px rgba(31,122,77,.22)} .buy-10:active{transform:translateY(1px)} /* Arrows either side of the sentence, not stacked under it in a row that read as a widget bolted on. */ .pitch-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px} .pitch-arrow{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--line); background:rgba(255,255,255,.75);color:var(--muted);font-size:22px;line-height:1;cursor:pointer; display:grid;place-items:center;transition:border-color .2s ease,color .2s ease,transform .15s ease,background .2s ease} .pitch-arrow:hover{border-color:var(--ink);color:var(--ink);background:#fff;transform:scale(1.07)} .pitch-arrow:active{transform:scale(.96)} .pitch-dots{display:flex;gap:6px;margin:18px 0 0 60px} @media(max-width:800px){ .pitch-row{grid-template-columns:1fr;gap:0} .pitch-arrow{position:absolute;bottom:0} .pitch-row{position:relative;padding-bottom:58px} .pitch-arrow[data-pitch="-1"]{left:0} .pitch-arrow[data-pitch="1"]{left:54px} .pitch-dots{margin:-44px 0 0 116px} } /* The logo already says GNG, so the wordmark says IELTS and nothing else, in the red the exam is known by. #E31837 is 4.72:1 on white, so it passes at any size rather than only as large text. Sized up to sit level with the mark's cap height. */ .brand .wordmark{color:var(--ielts-red);font-size:1.32em;letter-spacing:-1.4px} .brand .wordmark b{color:var(--ielts-red);font-weight:700} .footer .brand .wordmark{font-size:1.2em} /* Hero readability and alignment pass. */ .header{min-height:92px} .brand{gap:8px} .brand-logo{width:116px;height:68px} .brand .wordmark{font-size:48px;line-height:1;font-weight:700;letter-spacing:-2.2px;display:flex;align-items:center;transform:translateY(1px)} .brand .wordmark b{font-weight:700} .header nav{font-size:20px} .hero{align-items:stretch;padding-block:26px 42px} .hero-copy{display:flex;flex-direction:column;justify-content:center;min-width:0} .hero .eyebrow{font-size:17px;margin-bottom:10px} p.pitch{font-size:clamp(54px,5.15vw,82px);line-height:1.12;min-height:390px;align-items:center} body[data-lang=bn] p.pitch{line-height:1.32} p.pitch .rot-line{align-self:center} .pitch-dots{display:none!important} .hero-actions{gap:16px 20px} .hero-actions .button,.hero-actions .buy-10{font-size:19px;min-height:60px;padding-inline:26px} .hero-actions .text-link{font-size:18px} .hero-note{font-size:17px;margin-top:14px} .hero-ebook{margin-top:16px;padding:13px 17px;max-width:none} .hero-ebook b{font-size:17px}.hero-ebook small{font-size:15px} @media(max-width:1050px){.brand-logo{width:104px;height:61px}.brand .wordmark{font-size:40px}.header nav{font-size:17px}p.pitch{font-size:clamp(48px,5.4vw,64px);min-height:350px}} @media(max-width:800px){.header{min-height:0;padding-top:6px}.brand{gap:5px}.brand-logo{width:82px;height:48px}.brand .wordmark{font-size:30px;letter-spacing:-1.3px}.hero{padding-block:24px 38px}.hero .eyebrow{font-size:16px}p.pitch{font-size:clamp(43px,12vw,58px);min-height:330px}.pitch-row{padding-bottom:56px}.hero-actions .button,.hero-actions .buy-10{font-size:18px;min-height:58px}.hero-actions .text-link{font-size:18px}.hero-note{font-size:16px}.hero-ebook b{font-size:19px}.hero-ebook small{font-size:16px}} @media(max-width:400px){.brand-logo{width:72px;height:42px}.brand .wordmark{font-size:27px}p.pitch{font-size:42px;min-height:315px}} @media(max-width:800px){p.pitch{min-height:270px}} @media(max-width:400px){p.pitch{min-height:260px}} /* Red is reserved for the literal IELTS name, matching the wordmark. */ .nav-ebook{color:var(--blue-deep);font-weight:600} .nav-ebook>span[aria-hidden]{color:var(--orange);font-size:.8em} p.pitch{font-size:clamp(58px,5.45vw,88px);font-weight:700} body[data-lang=bn] p.pitch{font-weight:700} @media(max-width:1050px){p.pitch{font-size:clamp(50px,5.7vw,68px)}} @media(max-width:800px){.header nav{display:grid;grid-template-columns:1fr 1fr;width:100%;column-gap:12px;row-gap:0;font-size:16px}.header nav a{justify-content:center}.header nav .nav-ebook{order:-1}p.pitch{font-size:clamp(45px,12.6vw,60px);font-weight:700}} @media(max-width:400px){.header nav{font-size:15px}p.pitch{font-size:45px}} /* Optical wordmark match: the cap adds height above the GNG letters, so box centring puts IELTS visibly too high. Align against the letter baseline and use a broad, heavy sans whose stroke weight matches the logo artwork. */ .brand .wordmark{font-family:'Arial Black','Arial Narrow','DM Sans',sans-serif;font-size:58px;font-weight:900;letter-spacing:-2.8px;transform:translateY(9px) scaleX(1.08);transform-origin:left center} .brand .wordmark b{font-weight:900} @media(max-width:1050px){.brand .wordmark{font-size:50px;transform:translateY(8px) scaleX(1.08)}} @media(max-width:800px){.brand .wordmark{font-size:38px;letter-spacing:-2px;transform:translateY(6px) scaleX(1.08)}} @media(max-width:400px){.brand .wordmark{font-size:35px;transform:translateY(6px) scaleX(1.08)}} /* Result previews fill the deliberately fixed product-panel height. */ .sample-result{flex:1;margin:22px -18px -22px;padding:18px;border-top:1px solid var(--line);background:linear-gradient(180deg,#f7fafc 0%,#eef5fa 100%)} .sample-result.compact{margin-top:16px;padding-top:14px} .sample-result-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:13px} .sample-result-head>b{font-size:16px;color:var(--ink)} .sample-result-head>span{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--blue-deep);background:#eaf4fd;padding:4px 8px;border-radius:3px} .answer-review{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px} .answer-review.one{grid-template-columns:1fr} .answer-review p{display:flex;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--line);border-radius:5px;background:#fff} .answer-review p>i{font-style:normal;width:25px;height:25px;display:grid;place-items:center;border-radius:4px;background:var(--pale);font:600 13px 'DM Sans',sans-serif} .answer-review p>span{display:flex;flex-direction:column;min-width:0}.answer-review b{font-size:14px}.answer-review small{font-size:12px;color:var(--muted)} .good{color:#167447}.bad{color:#bd4a38} .band-scale{display:grid;grid-template-columns:minmax(150px,1fr) repeat(4,54px);align-items:stretch;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:#fff} .band-scale>b{padding:9px 11px;font-size:13px;display:flex;align-items:center} .band-scale>span{display:flex;flex-direction:column;align-items:center;justify-content:center;border-left:1px solid var(--line);font:700 14px 'DM Sans',sans-serif;color:var(--blue-deep)} .band-scale i{font-style:normal;font-size:11px;font-weight:500;color:var(--muted)} .sample-caveat{font-size:12px;line-height:1.45;margin-top:9px;color:var(--muted)} .criteria{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px} .criteria>span{padding:8px 10px;border:1px solid var(--line);border-radius:4px;background:var(--pale);font:600 12px/1.35 'DM Sans',sans-serif;color:var(--ink)} .criteria small{font-size:10px;color:var(--muted)} .correction{padding:12px 14px;border-left:3px solid var(--orange);background:#fff8f2} .correction>b{font-size:13px;color:var(--ink)}.correction p{font:15px/1.5 'DM Sans',sans-serif;margin:6px 0;color:var(--ink)} .correction del{color:#a04435;text-decoration-color:#d36250}.correction strong{color:#126d46;font-weight:600}.correction small{font-size:12px;line-height:1.4;color:var(--muted)} @media(max-width:800px){.answer-review{grid-template-columns:1fr}.band-scale{grid-template-columns:1fr repeat(4,46px)}.band-scale>b{grid-column:1/-1;border-bottom:1px solid var(--line)}.band-scale>span:first-of-type{border-left:0}.criteria{grid-template-columns:1fr}.sample-result-head{align-items:flex-start}.sample-result-head>span{white-space:nowrap}} /* The free guide is a real third action, so give it a warm, distinct surface while keeping the paid pack as the strongest button. */ .hero-ebook{background:#fff3d6;border:2px solid #f0a128;box-shadow:0 8px 22px rgba(227,93,5,.12)} .hero-ebook:hover{background:#ffe9b4;border-color:var(--orange-deep);box-shadow:0 10px 26px rgba(227,93,5,.18)} .hero-ebook-ic{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--orange);font-size:23px} .hero-ebook b{color:var(--ink);font-weight:700} .hero-ebook small{color:#614d38;font-weight:500} .hero-ebook-go{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:#fff} /* Keep the changing promise centred in both directions without letting it push the product choices below the first desktop viewport. */ .pitch-row p.pitch{text-align:center;font-size:clamp(52px,4.25vw,70px);font-weight:600;min-height:310px} body[data-lang=bn] .pitch-row p.pitch{font-weight:600} .pitch-row p.pitch .rot-line{width:100%;align-self:center} @media(max-width:1050px){.pitch-row p.pitch{font-size:clamp(46px,5vw,60px);min-height:285px}} @media(max-width:800px){.pitch-row p.pitch{font-size:clamp(40px,11vw,52px);min-height:245px}} @media(max-width:400px){.pitch-row p.pitch{font-size:40px;min-height:230px}} .hero-report-link{align-self:flex-start;margin-top:8px} .pricing-head{max-width:none;display:flex;align-items:center;justify-content:space-between;gap:36px} .pricing-head>div{min-width:0} .pricing-head .pricing-ebook{width:min(520px,46%);margin:0;padding:15px 18px;flex:none} @media(max-width:800px){.pricing-head{display:block}.pricing-head .pricing-ebook{width:100%;margin-top:20px}} /* Larger package labels, with a softer orange that does not overpower the headline or the neighbouring green choice. */ .hero-actions .button,.hero-actions .buy-10{font-size:21px;font-weight:700} .hero-actions .button{background:rgba(253,109,19,.84);border-color:rgba(227,93,5,.72)} .hero-actions .button:hover{background:rgba(253,109,19,.96);border-color:var(--orange-deep)} @media(max-width:800px){.hero-actions .button,.hero-actions .buy-10{font-size:19px}} .speaking-cue p{margin-top:6px;color:var(--muted)} .sample-transcript{padding:12px 14px;border:1px solid var(--line);border-radius:5px;background:#fff} .sample-transcript>b{font-size:13px;color:var(--blue-deep)} .sample-transcript p{margin-top:6px;font:15px/1.55 'DM Sans',sans-serif;color:var(--ink)} .receipt-list{display:grid;gap:9px} .receipt-list article{display:grid;grid-template-columns:118px minmax(0,1fr) minmax(0,1fr);align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:5px;background:#fff} .receipt-list small{font:700 10px/1.3 'DM Sans',sans-serif;letter-spacing:.04em;color:var(--orange-ink)} .receipt-list p,.receipt-list strong{font:13px/1.4 'DM Sans',sans-serif;color:var(--ink)} .receipt-list strong{color:#126d46;font-weight:600} .receipt-list del{color:#a04435;text-decoration-color:#d36250} @media(max-width:800px){.receipt-list article{grid-template-columns:1fr}.receipt-list p,.receipt-list strong{font-size:14px}} .faq>div:first-child{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:28px} .faq>div:first-child>.eyebrow,.faq>div:first-child>.faq-buy{grid-column:1/-1} .faq>div:first-child>h2{grid-column:1} .faq-whatsapp{grid-column:2;margin:0!important;align-self:center;gap:11px;padding:10px 14px;border:1px solid #bfe5da!important;border-radius:7px;background:#eef9f5;color:#126b5d!important;font-size:16px!important;font-weight:600;white-space:nowrap} .faq-whatsapp:hover{background:#dff4ed;color:#0d594d!important} .faq-whatsapp-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#d8f2ea;color:#128c7e;flex:none} .faq-whatsapp-icon svg{width:20px;height:20px} .faq>div:first-child>.faq-buy{margin-top:26px} @media(max-width:800px){.faq>div:first-child{display:block}.faq-whatsapp{display:flex;margin-top:18px!important;width:max-content;max-width:100%;white-space:normal}.faq>div:first-child>.faq-buy{margin-top:24px}} /* Preserve the heading measure on ordinary laptops. The side-by-side use of its open right edge begins only when the FAQ column is wide enough. */ .faq>div:first-child{display:block} .faq-whatsapp{display:flex;width:max-content;max-width:100%;margin-top:18px!important} .faq>div:first-child>.faq-buy{margin-top:26px} @media(min-width:1500px){ .faq>div:first-child{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:24px} .faq>div:first-child>.eyebrow,.faq>div:first-child>.faq-buy{grid-column:1/-1} .faq>div:first-child>h2{grid-column:1} .faq-whatsapp{grid-column:2;margin:0!important} } /* Verified official-result highlight uses the open side of the process intro. */ .experience{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(330px,.55fr);column-gap:72px;align-items:end} .result-highlight{border:1px solid #b9d8ef;border-top:4px solid var(--blue);border-radius:7px;background:linear-gradient(135deg,#f3f9fd 0%,#e9f4fb 100%);padding:25px 28px 23px} .result-kicker{font-size:14px;font-weight:700;letter-spacing:.055em;color:var(--blue-deep)} .result-stat{display:flex;align-items:center;gap:22px;margin-top:12px} .result-stat strong{flex:none;font:700 48px/1 'DM Sans','Hind Siliguri',sans-serif;letter-spacing:-1.5px;color:var(--blue)} body[data-lang=bn] .result-stat strong{font-family:'Hind Siliguri','DM Sans',sans-serif} .result-stat>span{font-size:20px;font-weight:600;line-height:1.45} .result-detail{display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid #c9deed;font-size:16px;color:var(--ink)} .result-detail b{color:#168357;font-weight:700} .result-action{margin-top:17px} .result-action p{font-size:17px;font-weight:600;line-height:1.45;color:var(--ink)} .result-action a{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px;padding:11px 14px;border-radius:5px;background:var(--blue);color:#fff;font-size:16px;font-weight:700;line-height:1.35} .result-action a:hover{background:var(--blue-deep)} .result-source{margin-top:7px;font-size:13px;line-height:1.45} .experience>.steps{grid-column:1/-1} @media(max-width:800px){ .experience{grid-template-columns:1fr;gap:28px;align-items:start} .experience>.steps{grid-column:auto;margin-top:0} .result-highlight{padding:22px} .result-stat{gap:16px} .result-stat strong{font-size:42px} .result-stat>span{font-size:18px} .result-detail{font-size:17px} .result-action p{font-size:18px} .result-action a{font-size:17px;padding:13px 14px} .result-source{font-size:15px;margin-top:10px} } /* Let each wide package card use both halves: decision on the left, value on the right. */ .plan h3{font-size:25px} .plan-price{font-size:56px} .plan-price .cur{font-size:30px} .plan-per{font-size:18px;font-weight:500} .plan ul{font-size:18px;line-height:1.5;gap:12px} .plan .button{min-height:64px;font-size:20px} @media(min-width:1200px){ .plan{display:grid;grid-template-columns:minmax(190px,.78fr) minmax(250px,1.22fr);grid-template-rows:auto auto 1fr auto;column-gap:38px;row-gap:14px;align-items:start;padding:30px 32px} .plan-head,.plan-price,.plan-per{grid-column:1} .plan-head{grid-row:1} .plan-price{grid-row:2} .plan-per{grid-row:3} .plan ul{grid-column:2;grid-row:1/4;margin:2px 0 0;padding-left:28px;border-left:1px solid var(--line)} .plan .button{grid-column:1/-1;grid-row:4;margin-top:8px} } @media(max-width:800px){ .plan h3{font-size:24px} .plan-price{font-size:48px} .plan-per,.plan ul{font-size:18px} .plan .button{font-size:19px} } /* ---- fixes on top of the Codex layout -------------------------------- 1. The stat row was a flex pair sized for "৭ জন". Longer copy squeezed the description into a column two words wide. It stacks now: the number on its own line, the sentence under it at full width. */ .result-stat{display:block;margin-top:14px} .result-stat strong{display:block;font-size:44px;line-height:1.05;margin-bottom:6px} .result-stat>span{display:block;font-size:18px;font-weight:600;line-height:1.5} .result-detail{align-items:flex-start} .result-detail b{line-height:1.5} .result-source{color:var(--muted)} /* 2. Opening an answer must not move the column beside it. The grid was aligned to its ends, so every expand shunted the left side down. */ .faq{align-items:start} .experience{align-items:start} /* The aside was pinned to a narrow column while the copy beside it left half the row empty, so the sentence wrapped one or two words at a time. Give the box the width that was going spare and it reads as a line. */ .experience{grid-template-columns:minmax(0,1.1fr) minmax(430px,.9fr);column-gap:56px} .result-highlight{padding:26px 30px} .result-stat strong{font-size:46px} .result-stat>span{font-size:19px} @media(max-width:1100px){.experience{grid-template-columns:minmax(0,1fr) minmax(360px,.8fr);column-gap:36px}} @media(max-width:900px){.experience{grid-template-columns:1fr}.result-highlight{max-width:560px}} /* Wide and short, not tall and narrow: the claim and the call sit side by side so the card's height matches the heading block it stands next to. */ .result-highlight{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr); column-gap:28px;row-gap:0;align-content:start;padding:24px 28px} .result-kicker{grid-column:1/-1;margin:0 0 10px} .result-stat{grid-column:1;margin-top:0} .result-detail{grid-column:1;margin-top:14px;padding-top:14px} .result-action{grid-column:2;grid-row:2/4;margin-top:0;align-self:start} .result-source{grid-column:2;margin-top:8px} .result-stat strong{font-size:42px} .result-action p{font-size:16px} /* Codex's marking table and its labels ran to 10 and 11px. Nothing on a sales page should be under 12, least of all the part that proves the marking. */ /* The band scale and the criteria labels ran at 11px and 10px. Nothing on a page selling to students on cheap phones should sit under 12. */ .band-scale i{font-size:12px} .criteria small{font-size:12px;line-height:1.35} /* The real offender was .receipt-list small, not .criteria small. */ .receipt-list small{font-size:12px;line-height:1.35} /* The card's call belongs level with the number it answers, and the line under it was the smallest text in the block at 13px. */ .result-source{font-size:15px;line-height:1.5;margin-top:10px} /* The e-book row was made TALLER when it should have been made WIDER: at 20px in a 520px box the title wrapped to two lines and the sub-line to two more. Full column width plus the original type size puts it back to two lines. */ .hero-ebook{max-width:none} @media(min-width:801px) and (max-width:1050px){.hero-ebook b{font-size:16px}.hero-ebook small{font-size:14px}} /* The right-hand column is its own block, pinned to the top border of the card rather than to the row the number sits on. Everything on the left keeps column 1, so the two stacks no longer push each other down. */ .result-side{grid-column:2;grid-row:1/span 3;align-self:start;min-width:0} .result-kicker{grid-column:1} .result-action{grid-column:auto;grid-row:auto;margin:0} .result-source{grid-column:auto;margin-top:10px;font-size:17px;line-height:1.5} .result-detail{font-size:18px} @media(max-width:900px){.result-side{grid-column:1;grid-row:auto;margin-top:18px} .result-kicker{grid-column:1/-1}} /* Two sentences, two lines. .tab-cue was display:block but sat as a flex item beside the title, so it never stacked; the wrapper is what makes the column. The height that buys is spent on making both lines readable. */ .preview-label{align-items:center} .preview-label-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 200px} .preview-label-text>span:not(.tab-cue){font-size:18px;font-weight:600;line-height:1.4} .tab-cue{margin-top:0;font-size:15px;line-height:1.4} @media(max-width:800px){.preview-label-text>span:not(.tab-cue){font-size:17px}.tab-cue{font-size:14px}} /* The right column was 185px against the left's 274px, so the source note floated in the middle of a 113px void. Stretch the column to the card and pin the note to its foot: both columns now start at the top padding and end on the same line, and the card does not get any taller for it. */ .result-side{align-self:stretch;display:flex;flex-direction:column} .result-source{margin-top:auto;padding-top:14px} /* ---- the rotator, done properly -------------------------------------- The techniques that actually read as crafted, rather than translate and opacity seven ways: - a SHARED perspective on the line, so 3D words converge on one vanishing point (a per-word perspective() inside a transform gives every word its own, which is the tell of amateur 3D); - FEATHERED gradient masks instead of hard clip-path edges, so a reveal has a soft leading edge, like ink taking; - SHEAR that resolves to zero during travel, how motion blur is faked in title sequences; - SQUASH AND STRETCH on the vertical arrivals; - multi-stop SPRING curves rather than one cubic-bezier, so the settle carries a second, smaller bounce. Still strictly per WORD: splitting Bangla per character breaks conjuncts and matras. MASK GEOMETRY, because getting it wrong left words permanently half wiped: the gradient runs SOLID first, transparent after, at 250% of the box. The sweep must finish with the element sitting under the SOLID 0-40% band, not under the feather. Every mask animation therefore ends with the mask removed outright at 100% (the 99% stop carries the final gradient, so the discrete swap happens at 99.5% and cannot be seen) — belt and braces, so no rounding error can leave a hairline of missing text. */ p.pitch .rot-line>span{display:block;perspective:900px;perspective-origin:50% 58%} p.pitch .w{backface-visibility:hidden} p.pitch [data-anim="0"].on .w{animation-name:xMaskRise;animation-duration:.86s; animation-timing-function:linear;animation-delay:calc(var(--i) * 74ms)} p.pitch [data-anim="1"].on .w{animation-name:xShear;animation-duration:.72s; animation-timing-function:cubic-bezier(.16,.84,.24,1);animation-delay:calc(var(--i) * 54ms)} p.pitch [data-anim="2"].on .w{animation-name:xSpring;animation-duration:.78s; animation-timing-function:linear;animation-delay:calc(var(--i) * 40ms)} p.pitch [data-anim="3"].on .w{animation-name:xDepth;animation-duration:.9s; animation-timing-function:cubic-bezier(.14,.86,.2,1);transform-origin:50% 100%; animation-delay:calc(var(--i) * 88ms)} p.pitch [data-anim="4"].on .w{animation-name:xInk;animation-duration:.8s; animation-timing-function:cubic-bezier(.32,.76,.2,1);animation-delay:calc(var(--i) * 66ms)} p.pitch [data-anim="5"].on .w{animation-name:xSquash;animation-duration:.76s; animation-timing-function:linear;transform-origin:50% 100%; animation-delay:calc((var(--n) - var(--i)) * 60ms)} p.pitch [data-anim="6"].on .w{animation-name:xSwivel;animation-duration:.84s; animation-timing-function:cubic-bezier(.18,.9,.22,1);transform-origin:0% 50%; animation-delay:calc((var(--n) - var(--i)) * 46ms)} /* a feathered edge sweeping up, the word rising behind it, spring in the stops */ @keyframes xMaskRise{ 0%{opacity:0;transform:translateY(.38em); -webkit-mask-image:linear-gradient(0deg,#000 0 40%,transparent 62%); mask-image:linear-gradient(0deg,#000 0 40%,transparent 62%); -webkit-mask-size:100% 250%;mask-size:100% 250%; -webkit-mask-position:0 0;mask-position:0 0} 55%{opacity:1;transform:translateY(-.05em)} 78%{transform:translateY(.015em)} 99%{opacity:1;transform:none; -webkit-mask-image:linear-gradient(0deg,#000 0 40%,transparent 62%); mask-image:linear-gradient(0deg,#000 0 40%,transparent 62%); -webkit-mask-size:100% 250%;mask-size:100% 250%; -webkit-mask-position:0 100%;mask-position:0 100%} 100%{opacity:1;transform:none;-webkit-mask-image:none;mask-image:none}} /* shear that resolves: the fake motion blur of a title sequence */ @keyframes xShear{ 0%{opacity:0;transform:translateX(-.85em) skewX(-11deg) scaleX(1.06);filter:blur(7px)} 55%{opacity:1;filter:blur(0)} 80%{transform:translateX(.03em) skewX(1.4deg) scaleX(1)} 100%{opacity:1;transform:none;filter:blur(0)}} /* a spring with a second, smaller bounce, not one bezier */ @keyframes xSpring{ 0%{opacity:0;transform:scale(.46) rotate(-4deg)} 42%{opacity:1;transform:scale(1.1) rotate(1.6deg)} 62%{transform:scale(.955) rotate(-.7deg)} 80%{transform:scale(1.022) rotate(.25deg)} 92%{transform:scale(.993)} 100%{opacity:1;transform:none}} /* arrives out of depth on the LINE's vanishing point, not its own */ @keyframes xDepth{ 0%{opacity:0;transform:translateZ(-260px) rotateX(-62deg) translateY(.28em);filter:blur(5px)} 60%{opacity:1;filter:blur(0)} 82%{transform:translateZ(14px) rotateX(4deg)} 100%{opacity:1;transform:none;filter:blur(0)}} /* ink taking the paper: a soft leading edge, and nothing moves */ @keyframes xInk{ 0%{opacity:0; -webkit-mask-image:linear-gradient(90deg,#000 0 40%,transparent 62%); mask-image:linear-gradient(90deg,#000 0 40%,transparent 62%); -webkit-mask-size:250% 100%;mask-size:250% 100%; -webkit-mask-position:100% 0;mask-position:100% 0} 14%{opacity:1} 99%{opacity:1; -webkit-mask-image:linear-gradient(90deg,#000 0 40%,transparent 62%); mask-image:linear-gradient(90deg,#000 0 40%,transparent 62%); -webkit-mask-size:250% 100%;mask-size:250% 100%; -webkit-mask-position:0 0;mask-position:0 0} 100%{opacity:1;-webkit-mask-image:none;mask-image:none}} /* squash and stretch: stretched on the fall, compressed on the landing */ @keyframes xSquash{ 0%{opacity:0;transform:translateY(-.85em) scale(.94,1.24)} 46%{opacity:1;transform:translateY(0) scale(1.09,.84)} 66%{transform:translateY(-.16em) scale(.98,1.06)} 84%{transform:translateY(0) scale(1.03,.96)} 100%{opacity:1;transform:none}} /* swivels in on the shared vanishing point, hinged at its leading edge */ @keyframes xSwivel{ 0%{opacity:0;transform:rotateY(78deg) translateZ(-70px);filter:blur(4px)} 58%{opacity:1;filter:blur(0)} 84%{transform:rotateY(-7deg) translateZ(6px)} 100%{opacity:1;transform:none;filter:blur(0)}} /* exits answer their entrance rather than all leaving upward. These MAY end blurred and gone: the element is hidden a few ms later either way. */ p.pitch [data-anim="0"].leaving .w{animation-name:xOutSink;animation-duration:.34s; animation-delay:calc(var(--i) * 22ms)} p.pitch [data-anim="1"].leaving .w{animation-name:xOutShear;animation-duration:.32s; animation-delay:calc(var(--i) * 20ms)} p.pitch [data-anim="2"].leaving .w{animation-name:xOutShrink;animation-duration:.3s; animation-delay:calc(var(--i) * 16ms)} p.pitch [data-anim="3"].leaving .w{animation-name:xOutDepth;animation-duration:.34s; transform-origin:50% 0;animation-delay:calc(var(--i) * 22ms)} p.pitch [data-anim="4"].leaving .w{animation-name:xOutInk;animation-duration:.34s; animation-delay:calc(var(--i) * 18ms)} p.pitch [data-anim="5"].leaving .w{animation-name:xOutLift;animation-duration:.32s; animation-delay:calc((var(--n) - var(--i)) * 20ms)} p.pitch [data-anim="6"].leaving .w{animation-name:xOutSwivel;animation-duration:.34s; transform-origin:100% 50%;animation-delay:calc((var(--n) - var(--i)) * 18ms)} @keyframes xOutSink{to{opacity:0;transform:translateY(.4em);filter:blur(6px)}} @keyframes xOutShear{to{opacity:0;transform:translateX(.7em) skewX(9deg);filter:blur(7px)}} @keyframes xOutShrink{to{opacity:0;transform:scale(.66) rotate(3deg);filter:blur(4px)}} @keyframes xOutDepth{to{opacity:0;transform:translateZ(-180px) rotateX(46deg);filter:blur(5px)}} @keyframes xOutInk{to{opacity:0;filter:blur(9px);transform:scale(1.04)}} @keyframes xOutLift{to{opacity:0;transform:translateY(-.55em) scale(.96,1.12);filter:blur(6px)}} @keyframes xOutSwivel{to{opacity:0;transform:rotateY(-64deg) translateZ(-50px);filter:blur(5px)}} /* the emoji is punctuation and gets the showiest landing on the line */ p.pitch [data-anim="0"].on .w.emo{animation-name:xEmoDrop!important;animation-duration:.8s!important} p.pitch [data-anim="1"].on .w.emo{animation-name:xEmoOrbit!important;animation-duration:.86s!important} p.pitch [data-anim="2"].on .w.emo{animation-name:xEmoBurst!important;animation-duration:.8s!important} p.pitch [data-anim="3"].on .w.emo{animation-name:xEmoCoin!important;animation-duration:.94s!important} p.pitch [data-anim="4"].on .w.emo{animation-name:xEmoStamp!important;animation-duration:.62s!important} p.pitch [data-anim="5"].on .w.emo{animation-name:xEmoPendulum!important;animation-duration:.92s!important} p.pitch [data-anim="6"].on .w.emo{animation-name:xEmoRush!important;animation-duration:.72s!important} p.pitch .rot-line.on .w.emo{animation-timing-function:linear!important; -webkit-mask-image:none!important;mask-image:none!important} @keyframes xEmoDrop{ 0%{opacity:0;transform:translateY(-1.1em) scale(1.05)} 40%{opacity:1;transform:translateY(0) scale(1.16,.82)} 58%{transform:translateY(-.3em) scale(.94,1.1)} 76%{transform:translateY(0) scale(1.08,.94)} 100%{opacity:1;transform:none}} @keyframes xEmoOrbit{ 0%{opacity:0;transform:translate(.9em,.5em) rotate(-260deg) scale(.2)} 70%{opacity:1;transform:translate(0,-.08em) rotate(12deg) scale(1.12)} 100%{opacity:1;transform:none}} @keyframes xEmoBurst{ 0%{opacity:0;transform:scale(0) rotate(-40deg)} 38%{opacity:1;transform:scale(1.42) rotate(10deg)} 58%{transform:scale(.88) rotate(-6deg)} 76%{transform:scale(1.07) rotate(2deg)} 100%{opacity:1;transform:none}} @keyframes xEmoCoin{ 0%{opacity:0;transform:rotateY(-540deg) scale(.55)} 70%{opacity:1;transform:rotateY(24deg) scale(1.08)} 100%{opacity:1;transform:none}} @keyframes xEmoStamp{ 0%{opacity:0;transform:scale(2.6);filter:blur(10px)} 56%{opacity:1;transform:scale(.92);filter:blur(0)} 76%{transform:scale(1.05)} 100%{opacity:1;transform:none;filter:blur(0)}} @keyframes xEmoPendulum{ 0%{opacity:0;transform:rotate(42deg) translateX(.55em) scale(.6)} 46%{opacity:1;transform:rotate(-18deg) translateX(0) scale(1.1)} 68%{transform:rotate(9deg)} 84%{transform:rotate(-4deg)} 100%{opacity:1;transform:none}} @keyframes xEmoRush{ 0%{opacity:0;transform:translateX(1.4em) scaleX(1.5) scaleY(.8);filter:blur(8px)} 62%{opacity:1;transform:translateX(-.08em) scaleX(.94) scaleY(1.05);filter:blur(0)} 100%{opacity:1;transform:none;filter:blur(0)}} /* the emoji still lands last on the two reversed pitches */ p.pitch [data-anim="5"].on .w.emo{animation-delay:calc(var(--n) * 60ms + 70ms)!important} p.pitch [data-anim="6"].on .w.emo{animation-delay:calc(var(--n) * 46ms + 70ms)!important} /* ---- and the same craft under reduced motion -------------------------- This is the branch the owner's machine actually runs, so it is not the consolation prize. A feathered mask reveal MOVES NOTHING, which makes it both the safest technique for a vestibular trigger and the most expensive looking; blur-to-focus is not motion at all. Five reveal geometries plus focus pulls, each on its own rhythm. Dropped versus above: 3D, spring overshoot, squash, and any travel over 6px. */ @media(prefers-reduced-motion:reduce){ p.pitch [data-anim="0"].on .w{animation-name:rmMaskUp!important;animation-duration:.62s!important; animation-delay:calc(var(--i) * 70ms)!important} p.pitch [data-anim="1"].on .w{animation-name:rmMaskAcross!important;animation-duration:.6s!important; animation-delay:calc(var(--i) * 48ms)!important} p.pitch [data-anim="2"].on .w{animation-name:rmFocus!important;animation-duration:.46s!important; animation-delay:calc(var(--i) * 24ms)!important} p.pitch [data-anim="3"].on .w{animation-name:rmMaskDiag!important;animation-duration:.68s!important; animation-delay:calc(var(--i) * 84ms)!important} p.pitch [data-anim="4"].on .w{animation-name:rmMaskDown!important;animation-duration:.6s!important; animation-delay:calc(var(--i) * 62ms)!important} p.pitch [data-anim="5"].on .w{animation-name:rmSettle!important;animation-duration:.58s!important; animation-delay:calc((var(--n) - var(--i)) * 56ms)!important} p.pitch [data-anim="6"].on .w{animation-name:rmMaskBack!important;animation-duration:.6s!important; animation-delay:calc((var(--n) - var(--i)) * 44ms)!important} p.pitch [data-anim].on .w{animation-timing-function:cubic-bezier(.28,.72,.24,1)!important} p.pitch [data-anim="0"].on .w.emo{animation-name:rmFocus!important} p.pitch [data-anim="1"].on .w.emo{animation-name:rmFocus!important} p.pitch [data-anim="2"].on .w.emo{animation-name:rmSettle!important} p.pitch [data-anim="3"].on .w.emo{animation-name:rmFocus!important} p.pitch [data-anim="4"].on .w.emo{animation-name:rmSettle!important} p.pitch [data-anim="5"].on .w.emo{animation-name:rmFocus!important; animation-delay:calc(var(--n) * 56ms + 70ms)!important} p.pitch [data-anim="6"].on .w.emo{animation-name:rmSettle!important; animation-delay:calc(var(--n) * 44ms + 70ms)!important} p.pitch [data-anim].on .w.emo{animation-duration:.56s!important; animation-timing-function:cubic-bezier(.28,.72,.24,1)!important} p.pitch [data-anim].leaving .w{animation-name:rmOut!important; animation-duration:.26s!important;animation-delay:calc(var(--i) * 12ms)!important} @keyframes rmFocus{from{opacity:0;filter:blur(13px)}to{opacity:1;filter:blur(0)}} @keyframes rmSettle{from{opacity:0;filter:blur(8px);transform:translateY(5px)} to{opacity:1;filter:blur(0);transform:none}} @keyframes rmOut{to{opacity:0;filter:blur(7px)}} @keyframes rmMaskUp{ 0%{opacity:0; -webkit-mask-image:linear-gradient(0deg,#000 0 40%,transparent 62%); mask-image:linear-gradient(0deg,#000 0 40%,transparent 62%); -webkit-mask-size:100% 250%;mask-size:100% 250%; -webkit-mask-position:0 0;mask-position:0 0} 18%{opacity:1} 99%{opacity:1; -webkit-mask-image:linear-gradient(0deg,#000 0 40%,transparent 62%); mask-image:linear-gradient(0deg,#000 0 40%,transparent 62%); -webkit-mask-size:100% 250%;mask-size:100% 250%; -webkit-mask-position:0 100%;mask-position:0 100%} 100%{opacity:1;-webkit-mask-image:none;mask-image:none}} @keyframes rmMaskDown{ 0%{opacity:0; -webkit-mask-image:linear-gradient(180deg,#000 0 40%,transparent 62%); mask-image:linear-gradient(180deg,#000 0 40%,transparent 62%); -webkit-mask-size:100% 250%;mask-size:100% 250%; -webkit-mask-position:0 100%;mask-position:0 100%} 18%{opacity:1} 99%{opacity:1; -webkit-mask-image:linear-gradient(180deg,#000 0 40%,transparent 62%); mask-image:linear-gradient(180deg,#000 0 40%,transparent 62%); -webkit-mask-size:100% 250%;mask-size:100% 250%; -webkit-mask-position:0 0;mask-position:0 0} 100%{opacity:1;-webkit-mask-image:none;mask-image:none}} @keyframes rmMaskAcross{ 0%{opacity:0; -webkit-mask-image:linear-gradient(90deg,#000 0 40%,transparent 62%); mask-image:linear-gradient(90deg,#000 0 40%,transparent 62%); -webkit-mask-size:250% 100%;mask-size:250% 100%; -webkit-mask-position:100% 0;mask-position:100% 0} 16%{opacity:1} 99%{opacity:1; -webkit-mask-image:linear-gradient(90deg,#000 0 40%,transparent 62%); mask-image:linear-gradient(90deg,#000 0 40%,transparent 62%); -webkit-mask-size:250% 100%;mask-size:250% 100%; -webkit-mask-position:0 0;mask-position:0 0} 100%{opacity:1;-webkit-mask-image:none;mask-image:none}} @keyframes rmMaskBack{ 0%{opacity:0; -webkit-mask-image:linear-gradient(270deg,#000 0 40%,transparent 62%); mask-image:linear-gradient(270deg,#000 0 40%,transparent 62%); -webkit-mask-size:250% 100%;mask-size:250% 100%; -webkit-mask-position:0 0;mask-position:0 0} 16%{opacity:1} 99%{opacity:1; -webkit-mask-image:linear-gradient(270deg,#000 0 40%,transparent 62%); mask-image:linear-gradient(270deg,#000 0 40%,transparent 62%); -webkit-mask-size:250% 100%;mask-size:250% 100%; -webkit-mask-position:100% 0;mask-position:100% 0} 100%{opacity:1;-webkit-mask-image:none;mask-image:none}} @keyframes rmMaskDiag{ 0%{opacity:0; -webkit-mask-image:linear-gradient(125deg,#000 0 40%,transparent 62%); mask-image:linear-gradient(125deg,#000 0 40%,transparent 62%); -webkit-mask-size:250% 250%;mask-size:250% 250%; -webkit-mask-position:100% 100%;mask-position:100% 100%} 16%{opacity:1} 99%{opacity:1; -webkit-mask-image:linear-gradient(125deg,#000 0 40%,transparent 62%); mask-image:linear-gradient(125deg,#000 0 40%,transparent 62%); -webkit-mask-size:250% 250%;mask-size:250% 250%; -webkit-mask-position:0 0;mask-position:0 0} 100%{opacity:1;-webkit-mask-image:none;mask-image:none}}} /* ---- phone: the pitch is swiped, not clicked ------------------------- The two round arrows sat under the headline looking like a widget someone bolted on. page.js listens for a horizontal drag on the sentence instead. */ @media(max-width:800px){ .pitch-arrow{display:none} .pitch-row{padding-bottom:0} .pitch-row p.pitch{touch-action:pan-y} } /* ---- phone: the result card was still TWO columns -------------------- .result-highlight kept grid-template-columns:1fr .92fr at every width, so on a 354px card each column was about 150px and every line broke to three or four words. The card is one column on a phone. */ @media(max-width:900px){ .result-highlight{display:block;padding:22px 20px} .result-stat{display:block;margin-top:12px} .result-stat strong{display:block;font-size:40px;line-height:1.15;margin-bottom:8px} .result-stat>span{display:block;font-size:18px} .result-detail{margin-top:16px;padding-top:14px} .result-side{display:block;margin-top:18px;padding-top:16px;border-top:1px solid #c9deed} .result-action{margin:0} .result-action a{justify-content:space-between} .result-source{margin-top:10px;padding-top:0;font-size:15px} } /* The two packs sat at align-items:start, so each card was only as tall as its own content and the ৳1,000 one ran ~55px longer. Stretch makes them equal; the .plan grid's 1fr row absorbs the difference so both buttons still sit on the card's floor. The tag also gets its own line in BOTH cards — it wrapped in one and not the other, which is what made the heads look mismatched. */ .plans{align-items:stretch} .plan{height:100%} @media(min-width:901px){ .plan-head{flex-direction:column;align-items:flex-start;gap:9px} .plan-head .plan-tag{margin:0} } /* "কতগুলো টেস্ট দিতে চান?" ran 54px past the right edge of the ৳1,000 card at 1600 and 43px at 1440, so the heading and the box it sits over did not line up. The heading block is capped at the width of one card — the plans grid is 1fr 1fr with a 20px gap, so that is exactly calc(50% - 10px). */ @media(min-width:901px){.pricing-head-text{max-width:calc(50% - 10px);min-width:0}} .pricing-head-text{min-width:0} /* The whole row copies, not just the 44px button beside an 11-digit number. */ .payment-number{cursor:pointer;border-radius:6px;padding:6px;margin-inline:-6px} .payment-number:hover{background:#e7f0f7} @media(max-width:420px){.payment-number{flex-wrap:wrap;gap:10px}.payment-number>span{width:100%}} /* ---- English-mode layout repairs ------------------------------------- Found by running the same overflow/clip/collision probe in both languages at twelve widths and diffing, so a pre-existing quirk could not be mistaken for something the language switch caused. */ /* The brand was a shrinkable flex item with white-space:nowrap, so from 768px up the header squeezed its box while the wordmark kept its width and ran out over the nav — 68px of it at 820. It does not shrink now; the nav, whose text can wrap, absorbs the squeeze instead. */ .brand{flex:none} /* Two package cards needed 2 x (230 + 300 + 38 + 64) + 20 = 1284px of track, against a 1200px wrap at a 1280px viewport, so the row pushed 92px out of the page and took the whole document with it (52px of horizontal scroll). The floors above are 190/250, which needs 1104. */ /* The result card kept two columns down to 900px. At 1100 and 950 that left the right column 143-168px wide: "Start your mock tests" ran to three lines and "Thousands" — one unbreakable 212px word at 42px — pushed 56px out of its column. One column from 1150 down. */ @media(max-width:1150px){ .experience{grid-template-columns:1fr} .result-highlight{display:block;max-width:640px;padding:22px 24px} .result-stat{display:block;margin-top:12px} .result-stat strong{display:block;font-size:40px;line-height:1.15;margin-bottom:8px} .result-stat>span{display:block;font-size:18px} .result-detail{margin-top:16px;padding-top:14px} .result-side{display:block;margin-top:18px;padding-top:16px;border-top:1px solid #c9deed} .result-action{margin:0} .result-action a{justify-content:space-between} .result-source{margin-top:10px;padding-top:0;font-size:15px} } /* The sample paper's title bar is five fixed items: dot, title, Saved, timer, Submit. At 320px they wanted 423px. The title block shrinks, the rest step down a size, and the row may wrap as a last resort. */ @media(max-width:420px){ .mock-bar{gap:9px;padding:11px 12px;flex-wrap:wrap;row-gap:9px} .mock-bar>div{min-width:0;flex:0 1 auto} .mock-bar b{font-size:15px} /* "Practice · sample content" is the first thing to go: with it the five items want 423px of a 320px row and the bar grew to three lines. */ .mock-bar small{display:none} .mock-saved{font-size:12px;padding:3px 7px} .mock-time{font-size:18px} .mock-submit{font-size:14px;padding:6px 11px} } /* At 820px in English the nav is wider than in Bangla and, now that the brand will not be squeezed, the header ran 24px over. The wrapped header layout starts at 900 rather than 800. */ @media(min-width:801px) and (max-width:900px){ .header{flex-wrap:wrap;gap:0;min-height:0;padding-top:10px} .header nav{order:3;width:100%;justify-content:space-between;margin:10px 0 0; padding:12px 0;border-top:1px solid var(--line);gap:10px} .languages{margin-left:auto} } /* At 360px the WhatsApp bubble sat 4px INSIDE the S of IELTS: brand, bubble and the language switch wanted 330px of a 324px row. The wordmark's negative tracking also paints ~8px past its own box, so the clearance has to be real, not nominal. */ /* Root cause, not a per-breakpoint patch: the wordmark's -2.8px tracking makes the anchor's box measure ~14px narrower than the glyphs it paints, so whatever sits next to it was placed inside the S. A trailing pad in the wordmark's own em puts the box back around the ink at every size. */ .brand .wordmark{margin-right:.3em} @media(max-width:420px){ .brand{font-size:24px;gap:6px} .brand-logo{width:64px;height:37px} .header .wa{width:36px;height:36px;flex:none} .header .wa svg{width:19px;height:19px} .languages button{padding:6px 9px;font-size:14px;min-height:38px} } @media(max-width:900px){.header .wa{margin-left:8px}} /* The rotator clips so a leaving line cannot bleed over the arrows, but the grid row is sized to the line box and Bangla conjuncts plus the emoji paint up to 18px below it — the bottom of "পাবেন। 📅" was being shaved at 1600. overflow:clip lets a clip-margin through; hidden does not. Where the margin is unsupported this degrades to exactly the present behaviour. */ .rotator{overflow:clip;overflow-clip-margin:24px} /* In the 1200-1360 band the pack card's left column is at its 190px floor and "TK1,000" measured 193px, so the price pushed 3px out of its own track. */ @media(min-width:1200px) and (max-width:1360px){ .plan-price{font-size:50px} .plan-price .cur{font-size:27px} } /* Below 370 even the trimmed bar wants ~295px of a 284px row in English, so the "Saved" pill goes too. What is left is what carries meaning: the paper, the clock and Submit. */ @media(max-width:370px){.mock-saved{display:none}.mock-time{margin-left:auto}} /* ---- the ladder (2026-09-09): three packs, ascending, pay only the difference ---- */ .plans{grid-template-columns:repeat(3,1fr);gap:18px} .plan-2{border-color:var(--blue);background:linear-gradient(180deg,#eef5fc 0%,#fff 42%)} .plan-2 .plan-tag{background:var(--blue);color:#fff} .plan-2 li:before{color:var(--blue-deep)} .plan-2 .button{background:var(--orange);border-color:var(--orange);color:var(--ink)} .plan-50 .button{background:#fff;border-color:var(--orange);color:var(--ink)} .plan-50 .button:hover{background:var(--orange)} .ladder-note{margin:18px 0 0;padding:14px 16px;border:1px dashed var(--blue);border-radius:8px;background:#f7fafd;font-size:16px;line-height:1.6} .ladder-note b{color:var(--blue-deep)} .hero-ladder{margin:14px 0 0;font-size:16px;line-height:1.55;color:var(--ink);max-width:560px} .buy-50{background:#fff7f0;border-color:var(--orange)} .buy-50:hover{background:#ffedde} .mini-plans{grid-template-columns:repeat(3,1fr)} .mini-2{border-color:var(--blue);background:#eef5fc} .mini-2:hover{background:#e1eefa} @media(min-width:1200px){ .plan{display:flex;flex-direction:column;padding:26px 24px} .plan ul{padding-left:0;border-left:0;margin:6px 0 0} .plan .button{margin-top:auto} .plan h3{font-size:22px} .plan-price{font-size:48px} } @media(max-width:1000px){.plans{grid-template-columns:1fr}} @media(max-width:800px){.mini-plans{grid-template-columns:1fr}} /* ---- ladder colours (owner 2026-09-09): Starter blue, Prep green, Pro deep orange, everywhere ---- */ .plan-2 .button,.hero-actions .button[data-buy="2"]{background:var(--blue);border-color:var(--blue);color:#fff} .plan-2 .button:hover,.hero-actions .button[data-buy="2"]:hover{background:var(--blue-deep);border-color:var(--blue-deep)} .plan-50{border-color:var(--orange-deep);background:linear-gradient(180deg,#fff1e6 0%,#fff 42%)} .plan-50 .plan-tag{background:var(--orange-deep);color:#fff} .plan-50 .button{background:var(--orange-deep);border-color:var(--orange-deep);color:#fff} .plan-50 .button:hover{background:#c85104;border-color:#c85104} .buy-50{background:#fff1e6;border-color:var(--orange-deep);color:var(--ink)} .buy-50:hover{background:#ffe3cc;box-shadow:0 8px 20px rgba(227,93,5,.22)} .mini-50{border-color:var(--orange-deep);background:#fff1e6} .mini-50:hover{background:#ffe3cc} /* hero: Starter on its own row, Prep and Pro as an equal pair under it */ .hero-actions .button[data-buy="2"]{flex:1 1 100%;max-width:560px} .hero-actions .buy-10,.hero-actions .buy-50{flex:1 1 calc(50% - 11px);max-width:270px} @media(max-width:400px){.hero-actions .buy-10,.hero-actions .buy-50{max-width:none}} /* hero (owner 2026-09-09): Starter light blue like its card, Pro solid deep orange */ .hero-actions .button[data-buy="2"]{background:#eef5fc;border-color:var(--blue);color:var(--ink)} .hero-actions .button[data-buy="2"]:hover{background:#dcebfa;border-color:var(--blue-deep);color:var(--ink)} .hero-actions .buy-50{background:var(--orange-deep);border-color:var(--orange-deep);color:#fff} .hero-actions .buy-50:hover{background:#c85104;border-color:#c85104;box-shadow:0 8px 20px rgba(227,93,5,.28)} /* hero hierarchy: the entry pack is the loudest, the other two are outlined tints in their own colour */ .hero-actions .button[data-buy="2"]{background:#1f8ae6;border-color:#1f8ae6;color:#fff;font-weight:700} .hero-actions .button[data-buy="2"]:hover{background:var(--blue);border-color:var(--blue);color:#fff} .hero-actions .buy-50{background:#fff1e6;border:2px solid var(--orange-deep);color:var(--orange-ink);font-weight:700} .hero-actions .buy-50:hover{background:#ffe3cc;border-color:#c85104;color:var(--orange-ink);box-shadow:0 8px 20px rgba(227,93,5,.18)} .hero-actions .buy-10{border-width:2px;color:var(--green-pack);font-weight:700} /* hero column: buttons, e-book card and note share one width, centred under the headline */ .hero-copy{--hero-w:560px} .hero-actions{width:100%;max-width:var(--hero-w);margin-inline:auto;gap:14px} .hero-actions .button[data-buy="2"]{flex:1 1 100%;max-width:none} .hero-actions .buy-10,.hero-actions .buy-50{flex:1 1 0;max-width:none} .hero-copy .hero-ebook{width:100%;max-width:var(--hero-w);margin-inline:auto;box-sizing:border-box} .hero-copy .hero-report-link{display:flex;justify-content:center;width:max-content;margin-inline:auto} .hero-ladder{max-width:var(--hero-w);margin-inline:auto;text-align:center} @media(max-width:400px){.hero-actions .buy-10,.hero-actions .buy-50{flex-basis:100%}} /* the pair only sits side by side when both labels fit on one line */ @media(max-width:560px){.hero-actions .buy-10,.hero-actions .buy-50{flex-basis:100%}}