PageSourceSearch

https://www.studyladder.co.uk/account/parent-pricing

html studyladder.co.uk collected 2026-09-24 11:30:33 UTC 128,596 bytes, 2,976 lines download raw bytes

1<!doctype html>
2<html lang="en">
3 <head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6  <link rel="apple-touch-icon" sizes="76x76" href="https://static.studyladder.co.uk/cdn/site/2e/fb7b4b5af2aa.png" />
7  <link rel="apple-touch-icon" sizes="120x120" href="https://static.studyladder.co.uk/cdn/site/c5/21378bb6616f.png" />
8  <link rel="apple-touch-icon" sizes="152x152" href="https://static.studyladder.co.uk/cdn/site/67/2d9c8f4113ad.png" />
9  <link rel="apple-touch-icon" sizes="180x180" href="https://static.studyladder.co.uk/cdn/site/f0/67c0f8d932e1.png" />
10  <link rel="shortcut icon" sizes="192x192" href="https://static.studyladder.co.uk/cdn/site/d5/5ccd0010bcfa.png">
11  <meta name="description" content="Home Plus pricing &mdash; Monthly, Quarterly and Annual options. Single-student and family (up to 4 kids) plans. 7-day free trial on every plan." />
12  <meta name="keywords" content="studyladder, smartkiddies, study ladder, english, literacy, maths, mathematics, kids games, worksheets, lesson plans, kids activities, algebra, multiplication, geometry, comprehension, United Kingdom." />
13  <meta name="rating" content="General" />
14  <meta name="robots" content="all" />
15  <meta name="google-site-verification" content="D8IxNaFFb30mlpk1W9ckC7yBm3szytFOoXiHyo2Cpm8" />
16  <meta name="author" content="Studyladder" />
17  <meta name="geo.position" content="51;-0">
18  <meta name="geo.country" content="GB">
19  <meta name="geo.placename" content="Studyladder UK">
20  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
21  <meta http-equiv="X-UA-Compatible" content="IE=edge; text/html; charset=utf-8" />
22  <meta charset="utf-8">
23            <!-- Google Tag Manager -->
24        
24<script>
vendor: 387 bytes, lines 24-28
24
25            (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
26                var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
27                j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl; f.parentNode.insertBefore(j,f);
28            })(window,document,'script','dataLayer','
28GTM-MRVSQXKH
vendor: 12 bytes, lines 28-29
28');
29        
29</script>
29
30
31    
32    
32<script>
33        window.dataLayer = window.dataLayer || [];
34        function gtag(){dataLayer.push(arguments);}
35        gtag('config', 'AW-1071699385');
36    </script>
36
37
38    <!-- End Google Tag Manager -->
39
40        <title>Studyladder Home Plus | Pricing &amp; family plans</title>
41  
42      
42<script type="text/javascript" src="/cdn/lib/vendor/jquery/jquery-3.7.1-v1.min.js"></script>
42
43    
43<script type="text/javascript" src="/cdn/lib/vendor/bootstrap/4.6.2/js/bootstrap.bundle.min.js"></script>
43
44     
44<script type="module">
45         import { DotLottie } from "https://static.studyladder.co.uk/cdn/site/d7/d82cd2118b99.js";//"https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web/+esm";
46         window.DotLottie = DotLottie; // Attach DotLottie to the window object for global access
47     </script>
47
48     
48<script type="text/javascript" src="https://static.studyladder.co.uk/cdn/site/1c/6548deb1bcf7.js"></script>
48
49
50  
50<script type="text/javascript" src="https://static.studyladder.co.uk/cdn/site/30/152a03965f6d.js"></script>
50
51  
51<script type="text/javascript" src="https://static.studyladder.co.uk/cdn/site/6b/6f6a16f17ffa.js"></script>
51
52  
52<script type="text/javascript" src="https://static.studyladder.co.uk/cdn/site/85/8149e1190b9d.js"></script>
52
53 <link rel="preconnect" href="https://fonts.gstatic.com">
54 <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@800&display=swap" rel="stylesheet">
55 <link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
56 <link href='https://fonts.googleapis.com/css?family=ABeeZee:400,400italic' rel='stylesheet' type='text/css'>
57  <link href="https://fonts.googleapis.com/css?family=Muli|Quicksand:400,500,700" rel="stylesheet">
58     <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
59  <link rel="stylesheet" type="text/css" href="/cdn/lib/vendor/font-awesome/pro-5.5.00-web/css/fontawesome-solid-regular.min.css"/>
60  <link rel="stylesheet" href="https://static.studyladder.co.uk/cdn/dist/scss/ad0326d857b829a3/scss/bootstrap.min.css"/>
61    
62    <link rel="stylesheet" type="text/css" href="https://static.studyladder.co.uk/cdn/dist/scss/b0d969d290c3b536/global.min.css"/>
63        <link rel="stylesheet" type="text/css" href="https://static.studyladder.co.uk/cdn/dist/scss/47bf43b33f3c98b5/scss/sl-marketing.min.css"/>
64      <link rel="stylesheet" type="text/css" href="https://static.studyladder.co.uk/cdn/dist/scss/f803f3dedb7b631b/account/parent-pricing.min.css"/>
65          
66                      
66<script> gtag('event', 'conversion', {'send_to': 'AW-1071699385/DQ0SCL-pjO0ZELmrg_8D'}); </script>
66
67     
67<script>
68         window.MathJax = {
69             loader: {
70                 paths: {
71                     mathjax: "\/lib\/vendor\/mathjax\/3.2.2\/es5"                 }
72             },
73             tex: {
74                 inlineMath: [['\\(', '\\)']],
75             },
76             svg: {
77                 fontCache: 'global'
78             }
79         };
80     </script>
80
81
82     
82<script src="https://static.studyladder.co.uk/cdn/site/cf/b8e18acf40a7.js" async></script>
82
83
84 </head>
85 <body style="" class=" sl-marketing">
86        
86<script>var animation; var swalAnimation; var cacheVersion = 0.01</script>
86
87
88         <!-- Google Tag Manager (noscript) -->
vendor: 89 bytes, lines 88-90
88
89        <noscript>
90            <iframe src="https://www.googletagmanager.com/ns.html?id=
90GTM-MRVSQXKH
vendor: 92 bytes, lines 90-91
90" height="0" width="0" style="display:none;visibility:hidden"></iframe>
91        </noscript> 
91<!-- End Google Tag Manager (noscript) --> 
92    <header id="site-header" class="site-header-container public ">
93   <nav class="site-header">
94    <div class="">
95<script>
96  // Set data-locale on <html> as early as possible so .au-only / .intl-only
97  // spans render correctly without a flash of wrong content.
98  (function(){
99    try { document.documentElement.setAttribute('data-locale', "intl"); } catch(e){}
100  })();
101</script>
101
102
103<style>
104/* ─── Country bar (top strip) ────────────────────────────────────── */
105.country-bar {
106  background: #F8FAFC;
107  border-bottom: 1px solid #E2E8F0;
108  padding: 2px 0;
109  font-size: 12px;
110  color: #475569;
111  line-height: 1.2;
112}
113.country-bar-inner {
114  max-width: 1280px;
115  margin: 0 auto;
116  padding: 0 20px;
117  display: flex;
118  align-items: center;
119  justify-content: flex-end;
120  gap: 12px;
121}
122.country-selector {
123  display: inline-flex;
124  align-items: center;
125  gap: 6px;
126  position: relative;
127}
128.country-flag {
129  display: inline-flex;
130  align-items: center;
131  justify-content: center;
132  width: 18px;
133  height: 12px;
134  overflow: hidden;
135  border-radius: 2px;
136  flex: 0 0 auto;
137}
138.country-flag img {
139  width: 18px !important;
140  height: auto !important;
141  max-width: 18px !important;
142  display: block;
143}
144.country-select {
145  background: transparent;
146  border: 0;
147  padding: 2px 20px 2px 6px;
148  font: inherit;
149  font-size: 12px;
150  color: #0F172A;
151  cursor: pointer;
152  -webkit-appearance: none;
153  appearance: none;
154  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%2364748B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
155  background-repeat: no-repeat;
156  background-position: right 4px center;
157  line-height: 1.2;
158}
159.country-select:hover { color: #2D5BFF; }
160.country-caret { display: none; } /* selector renders its own arrow */
161
162/* ─── Main nav ───────────────────────────────────────────────────── */
163nav.top {
164  background: #FFFFFF;
165  border-bottom: 1px solid #E2E8F0;
166  position: relative;
167  z-index: 100;
168}
169nav.top .nav-inner {
170  max-width: 1280px;
171  margin: 0 auto;
172  padding: 8px 20px;
173  display: flex;
174  align-items: center;
175  gap: 24px;
176}
177nav.top .logo {
178  display: inline-flex;
179  align-items: center;
180  flex: 0 0 auto;
181}
182nav.top .logo img {
183  height: 36px;
184  width: auto;
185  display: block;
186}
187nav.top .nav-links {
188  list-style: none;
189  margin: 0;
190  padding: 0;
191  display: flex;
192  align-items: center;
193  gap: 4px;
194  flex: 1 1 auto;
195}
196nav.top .nav-links > li { position: relative; }
197nav.top .nav-links > li > a,
198nav.top .nav-links > li > .nav-dropdown-trigger {
199  display: inline-flex;
200  align-items: center;
201  gap: 4px;
202  padding: 10px 14px;
203  font-size: 14px;
204  font-weight: 500;
205  color: #475569;
206  text-decoration: none;
207  border-radius: 8px;
208  transition: background .15s ease, color .15s ease;
209  cursor: pointer;
210}
211nav.top .nav-links > li > a:hover,
212nav.top .nav-links > li > .nav-dropdown-trigger:hover {
213  color: #0F172A;
214  background: #F8FAFC;
215}
216nav.top .nav-caret {
217  font-size: 14px;
218  opacity: 0.8;
219  margin-left: 2px;
220  display: inline-block;
221  line-height: 1;
222  transition: transform .15s ease;
223}
224nav.top .nav-dropdown:hover .nav-caret { transform: rotate(180deg); }
225nav.top .nav-dropdown-menu {
226  display: none;
227  position: absolute !important;
228  top: 100% !important;
229  left: 50% !important;
230  transform: translateX(-50%) !important;
231  margin-top: 5px !important;
232  min-width: 220px;
233  background: #FFFFFF;
234  border: 1px solid #E2E8F0;
235  border-radius: 12px;
236  box-shadow: 0 12px 32px -8px rgba(15,23,42,0.18), 0 2px 6px rgba(15,23,42,0.06);
237  padding: 8px;
238  z-index: 200;
239}
240/* Hover-bridge so mouse can travel from trigger to dropdown without losing hover */
241nav.top .nav-dropdown::after {
242  content: "";
243  position: absolute;
244  top: 100%;
245  left: 0;
246  right: 0;
247  height: 8px;
248  pointer-events: auto;
249}
250nav.top .nav-dropdown:hover .nav-dropdown-menu,
251nav.top .nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
252nav.top .nav-dropdown-menu a {
253  display: flex;
254  align-items: center;
255  gap: 10px;
256  padding: 10px 12px;
257  border-radius: 8px;
258  font-size: 14px;
259  color: #0F172A;
260  text-decoration: none;
261  transition: background .15s ease;
262}
263nav.top .nav-dropdown-menu a:hover { background: #F1F5F9; }
264nav.top .nav-dropdown-icon {
265  display: inline-flex !important;
266  align-items: center !important;
267  justify-content: center !important;
268  width: 28px !important;
269  height: 28px !important;
270  min-width: 28px !important;
271  border-radius: 6px !important;
272  font-size: 14px !important;
273  font-weight: 700 !important;
274  flex: 0 0 28px !important;
275  line-height: 1 !important;
276  text-transform: none !important;
277  font-family: inherit !important;
278}
279/* Soft pastel backgrounds with deep coloured letters — matches subject-page topic-card-icon style */
280nav.top .nav-dropdown-icon.maths   { background: #DBE6FF !important; color: #2D5BFF !important; } /* blue */
281nav.top .nav-dropdown-icon.english { background: #D1FAE5 !important; color: #059669 !important; } /* green */
282nav.top .nav-dropdown-icon.science { background: #FED7AA !important; color: #EA580C !important; } /* orange */
283nav.top .nav-dropdown-icon.parent  { background: #FED7AA !important; color: #EA580C !important; } /* orange */
284nav.top .nav-dropdown-icon.teacher { background: #DBE6FF !important; color: #2D5BFF !important; } /* blue */
285nav.top .nav-dropdown-icon.school  { background: #D1FAE5 !important; color: #059669 !important; } /* green */
286
287nav.top .nav-cta {
288  display: flex;
289  align-items: center;
290  gap: 8px;
291  flex: 0 0 auto;
292}
293nav.top .nav-cta .btn {
294  font-size: 14px;
295  padding: 8px 16px;
296  border-radius: 999px;
297  font-weight: 600;
298  text-decoration: none;
299  display: inline-flex;
300  align-items: center;
301}
302nav.top .nav-cta .btn-ghost {
303  background: transparent;
304  color: #0F172A;
305  border: 1px solid transparent;
306}
307nav.top .nav-cta .btn-ghost:hover { background: #F1F5F9; }
308nav.top .nav-cta .btn-primary {
309  background: #2D5BFF;
310  color: #FFFFFF;
311  border: 1px solid #2D5BFF;
312}
313nav.top .nav-cta .btn-primary:hover { background: #1E40AF; border-color: #1E40AF; }
314
315nav.top .nav-menu-toggle {
316  display: none;
317  background: transparent;
318  border: 0;
319  width: 40px;
320  height: 40px;
321  padding: 8px;
322  cursor: pointer;
323  flex-direction: column;
324  justify-content: space-between;
325  align-items: stretch;
326}
327nav.top .nav-menu-toggle span {
328  display: block;
329  height: 2px;
330  width: 100%;
331  background: #0F172A;
332  border-radius: 2px;
333  transition: transform .2s ease, opacity .2s ease;
334}
335
336.nav-mobile-only { display: none; }
337
338/* Force white text on the mobile Join Now button, regardless of viewport width.
339   sl-marketing.scss's mobile nav kicks in at ≤1024px and its `.sl-marketing a { color: blue }`
340   base rule would otherwise leave the button reading blue-on-blue. */
341nav.top .nav-mobile-only .nav-mobile-join,
342nav.top .nav-mobile-only .nav-mobile-join:link,
343nav.top .nav-mobile-only .nav-mobile-join:visited,
344nav.top .nav-mobile-only .nav-mobile-join:hover,
345nav.top .nav-mobile-only .nav-mobile-join:focus,
346nav.top .nav-mobile-only .nav-mobile-join:active {
347  color: #FFFFFF !important;
348  background: #2D5BFF !important;
349}
350
351/* ─── Mobile breakpoint ──────────────────────────────────────────── */
352/* Aligned to sl-marketing.scss's own 1024px nav breakpoint so both stylesheets
353   flip to mobile at the same viewport width. Also toggles on `.open` (the
354   class name sl-marketing already targets) instead of a bespoke `.is-open`. */
355@media (max-width: 1024px) {
356  nav.top .nav-links {
357    display: none;
358    position: absolute;
359    top: 100%;
360    left: 0;
361    right: 0;
362    flex-direction: column;
363    align-items: stretch;
364    background: #FFFFFF;
365    border-bottom: 1px solid #E2E8F0;
366    padding: 12px 16px;
367    gap: 4px;
368    box-shadow: 0 12px 24px -10px rgba(15,23,42,0.15);
369    max-height: calc(100vh - 80px);
370    overflow-y: auto;
371  }
372  nav.top .nav-links.open,
373  nav.top .nav-links.is-open { display: flex; }
374  nav.top .nav-links > li > a,
375  nav.top .nav-links > li > .nav-dropdown-trigger { padding: 12px 10px; font-size: 16px; }
376  nav.top .nav-dropdown-menu {
377    display: none !important;
378    position: static !important;
379    top: auto !important;
380    left: auto !important;
381    right: auto !important;
382    transform: none !important;
383    margin: 0 !important;
384    box-shadow: none !important;
385    border: 0 !important;
386    border-radius: 0 !important;
387    padding: 4px 0 8px 24px !important;
388    background: transparent !important;
389    min-width: 0 !important;
390    width: 100% !important;
391  }
392  /* Kill desktop hover/focus reveal on mobile (touch devices shouldn't use hover) */
393  nav.top .nav-dropdown:hover > .nav-dropdown-menu,
394  nav.top .nav-dropdown:focus-within > .nav-dropdown-menu,
395  nav.top .nav-dropdown:hover .nav-dropdown-menu,
396  nav.top .nav-dropdown:focus-within .nav-dropdown-menu { display: none !important; }
397  /* .open wins via source order over the hover/focus block above */
398  nav.top .nav-dropdown.open > .nav-dropdown-menu,
399  nav.top .nav-dropdown.open:hover > .nav-dropdown-menu,
400  nav.top .nav-dropdown.open:focus-within > .nav-dropdown-menu { display: block !important; }
401  nav.top .nav-dropdown.open > .nav-dropdown-trigger .nav-caret { transform: rotate(180deg); }
402  nav.top .nav-dropdown::after { display: none; }
403  nav.top .nav-dropdown { position: static !important; }
404  .nav-mobile-only .nav-mobile-join,
405  .nav-mobile-only .nav-mobile-join:hover,
406  .nav-mobile-only .nav-mobile-join:focus,
407  .nav-mobile-only .nav-mobile-join:active { color: #FFFFFF !important; background: #2D5BFF !important; }
408  nav.top .nav-menu-toggle { display: flex; }
409  nav.top .nav-cta .btn-ghost,
410  nav.top .nav-cta .btn-primary { display: none; }
411  .nav-mobile-only { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid #E2E8F0; }
412  .nav-mobile-only .btn { display: block; width: 100%; text-align: center; margin: 6px 0; font-size: 15px; padding: 12px 16px; border-radius: 10px; text-decoration: none; }
413  .nav-mobile-only .nav-mobile-join { background: #2D5BFF; color: #FFFFFF; }
414  .nav-mobile-only .nav-mobile-login { background: #FFFFFF; color: #0F172A; border: 1px solid #E2E8F0; }
415  body.nav-open { overflow: hidden; }
416}
417
418/* ─── Short viewports — pin Join Now / Login to the top of the menu ────
419   On landscape phones / small laptops (Nest Hub etc.) the CTA row at the
420   bottom of the menu can fall below the fold. Flex `order` moves it to
421   the top of the column without touching the DOM. */
422@media (max-width: 1024px) and (max-height: 650px) {
423  nav.top .nav-links .nav-mobile-cta {
424    order: -1;
425    margin-top: 0;
426    padding-top: 0;
427    border-top: 0;
428    margin-bottom: 10px;
429    padding-bottom: 10px;
430    border-bottom: 1px solid #E2E8F0;
431  }
432}
433</style>
434
435<!-- COUNTRY BAR — thin strip at the top, replaces the old dark navbar -->
436<div class="country-bar">
437  <div class="country-bar-inner">
438    <form class="country-selector" id="lcForm">
439            <span class="country-flag" aria-hidden="true">
440              <img src="https://static.studyladder.co.uk/cdn/site/66/a8cfb86cfc1b.png" alt="">
441            </span>
442      <select id="lc_select" name="lc_set" class="country-select" aria-label="Change country">
443                  <option value="https://www.studyladder.com.au/account/parent-pricing">Australia</option>
444                  <option value="https://www.studyladder.ca/account/parent-pricing">Canada</option>
445                  <option value="https://www.studyladder.co.nz/account/parent-pricing">New Zealand</option>
446                  <option value="https://www.studyladder.co.uk/account/parent-pricing" selected="selected">United Kingdom</option>
447                  <option value="https://www.studyladder.com/account/parent-pricing">United States</option>
448              </select>
449      <span class="country-caret" aria-hidden="true">&#9662;</span>
450    </form>
451  </div>
452</div>
453
454<script>
455  // Locale switcher — submit to the selected URL
456  document.getElementById('lc_select').addEventListener('change', function(){
457    var u = this.value;
458    var f = document.getElementById('lcForm');
459    f.setAttribute('action', u);
460    f.submit();
461  });
462</script>
462
463
464<!-- MAIN NAV — new marketing design -->
465<nav class="top">
466  <div class="nav-inner">
467    <a href="/" class="logo">
468      <img src="https://static.studyladder.co.uk/cdn/site/13/6f597fea9532.png" alt="Studyladder">
469    </a>
470
471    <ul class="nav-links" id="primaryNav">
472      <li><a href="/about/parent">Parents</a></li>
473      <li><a href="/about/teacher">Teachers</a></li>
474      <li><a href="/about/schools">Schools</a></li>
475
476      <li class="nav-dropdown">
477        <a href="/about/subjects" class="nav-dropdown-trigger">Subjects <span class="nav-caret">&#9662;</span></a>
478        <div class="nav-dropdown-menu">
479          <a href="/about/subjects-mathematics"><span class="nav-dropdown-icon maths">M</span>Mathematics</a>
480          <a href="/about/subjects-english"><span class="nav-dropdown-icon english">E</span>English</a>
481          <a href="/about/subjects-science"><span class="nav-dropdown-icon science">S</span>Science</a>
482        </div>
483      </li>
484
485              <li><a href="/info/curriculum-aligned?jurisdiction=gb">Curriculum</a></li>
486      
487      <li class="nav-dropdown">
488        <a href="#pricing" class="nav-dropdown-trigger">Pricing <span class="nav-caret">&#9662;</span></a>
489        <div class="nav-dropdown-menu">
490          <a href="/account/parent-pricing"><span class="nav-dropdown-icon parent">P</span>For parents</a>
491          <a href="/about/teacher-school-pricing?t=t"><span class="nav-dropdown-icon teacher">T</span>For teachers</a>
492          <a href="/about/teacher-school-pricing?t=s"><span class="nav-dropdown-icon school">S</span>For schools</a>
493        </div>
494      </li>
495
496      <li><a href="/about/contact-us">Support</a></li>
497
498      <!-- Mobile-only CTAs (collapse into the menu when open on small screens) -->
499      <li class="nav-mobile-only nav-mobile-cta">
500        <a href="#joinNow" data-toggle="modal" class="btn btn-primary nav-mobile-join">Join Now</a>
501        <a href="/login/account" class="btn btn-secondary nav-mobile-login">Login</a>
502      </li>
503    </ul>
504
505    <div class="nav-cta">
506      <a href="/login/account" class="btn btn-ghost">Login</a>
507      <a href="#joinNow" data-toggle="modal" class="btn btn-primary nav-join-btn">Join Now</a>
508      <button type="button" class="nav-menu-toggle" aria-label="Open menu" aria-expanded="false" aria-controls="primaryNav">
509        <span></span>
510        <span></span>
511        <span></span>
512      </button>
513    </div>
514  </div>
515</nav>
516
517<script>
518  // Mobile menu toggle — opens / closes the primary nav on small screens
519  (function(){
520    var toggle = document.querySelector('.nav-menu-toggle');
521    var nav    = document.getElementById('primaryNav');
522    if (!toggle || !nav) return;
523    toggle.addEventListener('click', function(){
524      var open = nav.classList.toggle('is-open');
525      nav.classList.toggle('open', open); // matches sl-marketing.scss's `.nav-links.open` rule
526      toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
527      document.body.classList.toggle('nav-open', open);
528    });
529
530    // Mobile = the burger button is currently rendered
531    function isMobileNav(){
532      return toggle && toggle.offsetParent !== null;
533    }
534
535    // Bind tap-to-toggle directly on each dropdown trigger so it runs before any
536    // delegated handlers and we can stopPropagation reliably.
537    nav.querySelectorAll('.nav-dropdown-trigger').forEach(function(trig){
538      trig.addEventListener('click', function(e){
539        if (!isMobileNav()) return; // desktop: link navigates as normal
540        e.preventDefault();
541        e.stopPropagation();
542        var parent = trig.parentElement;
543        if (!parent || !parent.classList.contains('nav-dropdown')) return;
544        // Close other open dropdowns (accordion behaviour)
545        nav.querySelectorAll('.nav-dropdown.open').forEach(function(d){
546          if (d !== parent) d.classList.remove('open');
547        });
548        parent.classList.toggle('open');
549      });
550    });
551
552    // Close burger menu when a child link inside a submenu is clicked
553    nav.addEventListener('click', function(e){
554      var t = e.target;
555      if (!t || !t.closest) return;
556      if (t.closest('.nav-dropdown-trigger')) return; // handled above
557      var link = t.closest('a');
558      if (!link) return;
559      nav.classList.remove('is-open');
560      nav.classList.remove('open');
561      toggle.setAttribute('aria-expanded', 'false');
562      document.body.classList.remove('nav-open');
563      nav.querySelectorAll('.nav-dropdown.open').forEach(function(d){ d.classList.remove('open'); });
564    });
565  })();
566
567  // Clear stale dashboard localStorage flags (preserved from original)
568  try {
569    localStorage.removeItem('liveClassroomOpen');
570    localStorage.removeItem('teacherDashboardOpen');
571  } catch (e) {}
572</script>
572
573	<style>
574	main p,
575	main b,
576	main span,
577	main label,
578	main li,
579	main h1,
580	main h2,
581	main h3,
582	main h4,
583	main h5,
584	main h6,
585	main small {
586	  opacity: 0;
587	  transition: opacity 0.2s ease-in;
588	}
589	</style>
590
591
592
593<script>
594document.addEventListener("DOMContentLoaded", function () {
595  // Idempotency guard — the copy-localisation partial can end up rendered twice
596  // via the header include chain, which would swap the same text twice
597  // (e.g. "English" → "English Language Arts" → "English Language Arts Language Arts").
598  if (window.__slLocalisationRan) return;
599  window.__slLocalisationRan = true;
600
601  const country = "GB"; // AU, US, GB, NZ, CA
602//if(country=="GB"){country="UK";}
603
604console.log("country="+country);
605 if (country !== "AU") {
606const terms = {
607  "Foundation / Prep":     { US: "Kindergarten",         GB: "Reception",          CA: "Kindergarten",         NZ: "Year 1"               },
608  "Foundation":            { US: "Kindergarten",         GB: "Reception",          CA: "Kindergarten",         NZ: "Year 1"               },
609  "Year":                  { US: "Grade",                GB: "Year",               CA: "Grade",                NZ: "Year"                 },
610  "Kindergarten – Year 6": { US: "Kindergarten – Grade 6",GB: "Reception – Year 6",CA: "Kindergarten – Grade 6",NZ: "Year 1 – Year 6"                 },
611  "K-6":                   { US: "K–6",GB: "R–6",CA: "K–6",NZ: "1–6"                 },
612  "F–Yr 6":                   { US: "K–6",GB: "R–6",CA: "K–6",NZ: "Yr1–Yr6"                 },
613  "Primary School":        { US: "Elementary School",    GB: "Primary School",     CA: "Elementary School",    NZ: "Primary School"       },
614  "High School":           { US: "High School",          GB: "Secondary School",   CA: "High School",          NZ: "Secondary School"     },
615  //"Year 12":               { US: "Grade 12",             GB: "Year 13 / Sixth Form", CA: "Grade 12",            NZ: "Year 13"              },
616  "Principal":             { US: "Principal",            GB: "Headteacher",        CA: "Principal",            NZ: "Principal"            },
617  "Deputy Principal":      { US: "Vice Principal",       GB: "Deputy Headteacher", CA: "Vice Principal",       NZ: "Deputy Principal"     },
618  "Student":               { US: "Student",              GB: "Student",    			CA: "Student",              NZ: "Student"      },
619  //"Class":                 { US: "Class",     			GB: "Class",       			CA: "Homeroom",             NZ: "Class"                },
620  "Class Teacher":         { US: "Homeroom Teacher",     GB: "Form Tutor",         CA: "Homeroom Teacher",     NZ: "Class Teacher"        },
621  "Marking":               { US: "Grading",              GB: "Marking",            CA: "Grading",              NZ: "Marking"              },
622  "Mark":                  { US: "Grade",                GB: "Mark",               CA: "Grade",                NZ: "Mark"                 },
623  "School Report":         { US: "Report Card",          GB: "School Report",      CA: "Report Card",          NZ: "School Report"        },
624  "Revision":              { US: "Review",    GB: "Revision",           CA: "Studying",             NZ: "Revision"             },
625 // "Exam":                  { US: "Test / Exam",          GB: "Exam",               CA: "Exam",                 NZ: "Exam"                 },
626  "Maths":                 { US: "Math",                 GB: "Maths",              CA: "Math",                 NZ: "Maths"                },
627  "Digital Technologies":  { US: "Computer Class",       GB: "ICT",                CA: "Tech Ed / ICT",        NZ: "Digital Technologies" },
628  "English":               { US: "English Language Arts",  GB: "English",            CA: "English",        NZ: "English"              },
629  "History":               { US: "Social Studies",       GB: "History",            CA: "Social Studies",       NZ: "Social Studies"       },
630  "School Holidays":       { US: "Vacation",             GB: "School Holidays",    CA: "School Holidays",      NZ: "School Holidays"      },
631
632  "Programme":             { US: "Program",              GB: "Programme",          CA: "Programme",            NZ: "Programme"            },
633  "Centre":                { US: "Center",               GB: "Centre",             CA: "Centre",               NZ: "Centre"               },
634  "Practice":              { US: "Practice",             GB: "Practice",           CA: "Practice",             NZ: "Practice"             },
635  "practising":              { US: "practicing",             GB: "practising",           CA: "practicing",             NZ: "practising"             },
636  "Honours":               { US: "Honors",               GB: "Honours",            CA: "Honours",              NZ: "Honours"              },
637  "Colour":                { US: "Color",                GB: "Colour",             CA: "Colour",               NZ: "Colour"               },
638  "Judgement":             { US: "Judgment",             GB: "Judgement",          CA: "Judgement",            NZ: "Judgement"            },
639  "Learnt":                { US: "Learned",              GB: "Learnt",             CA: "Learnt",               NZ: "Learnt"               },
640
641  "Customise":             { US: "Customize",            GB: "Customise",          CA: "Customise",               NZ: "Customise"            },
642  "Personalise":           { US: "Personalize",          GB: "Personalise",        CA: "Personalise",               NZ: "Personalise"          },
643  "Personalised":          { US: "Personalized",         GB: "Personalised",       CA: "Personalised",         NZ: "Personalised"          },  
644  "Behaviour":             { US: "Behavior",             GB: "Behaviour",          CA: "Behaviour",            NZ: "Behaviour"            },
645  "Organisation":          { US: "Organization",         GB: "Organisation",       CA: "Organisation",         NZ: "Organisation"         },
646  "Analyse":               { US: "Analyze",              GB: "Analyse",            CA: "Analyse",              NZ: "Analyse"              },
647  "Specialisation":        { US: "Specialization",       GB: "Specialisation",     CA: "Specialisation",       NZ: "Specialisation"       },
648  "Recognise":             { US: "Recognize",            GB: "Recognise",          CA: "Recognise",            NZ: "Recognise"            },
649  "Utilise":               { US: "Utilize",              GB: "Utilise",            CA: "Utilise",              NZ: "Utilise"              },
650  "Utilising":             { US: "Utilizing",            GB: "Utilising",          CA: "Utilising",              NZ: "Utilising"              },
651  "Authorisation":         { US: "Authorization",        GB: "Authorisation",      CA: "Authorisation",            NZ: "Authorisation"            },
652  "Authorise":             { US: "Authorize",            GB: "Authorise",          CA: "Authorise",            NZ: "Authorise"            },
653  "Memorise":              { US: "Memorize",             GB: "Memorise",           CA: "Memorise",             NZ: "Memorise"             },
654  "Optimise":              { US: "Optimize",             GB: "Optimise",           CA: "Optimise",             NZ: "Optimise"             },
655  "Realise":               { US: "Realize",              GB: "Realise",            CA: "Realise",              NZ: "Realise"              },
656  "Initialise":            { US: "Initialize",           GB: "Initialise",         CA: "Initialise",           NZ: "Initialise"           },
657
658  "Defence":        { US: "Defense",       GB: "Defence",       CA: "Defence",       NZ: "Defence" },
659  "Organising":     { US: "Organizing",    GB: "Organising",    CA: "Organizing",    NZ: "Organising" },
660  "Organisational": { US: "Organizational",GB: "Organisational",CA: "Organizational",NZ: "Organisational" },
661  "Analysed":       { US: "Analyzed",      GB: "Analysed",      CA: "Analyzed",      NZ: "Analysed" },
662  "Apologise":      { US: "Apologize",     GB: "Apologise",     CA: "Apologize",     NZ: "Apologise" },
663  "Dialogue":       { US: "Dialog",        GB: "Dialogue",      CA: "Dialogue",      NZ: "Dialogue" },
664  "Catalogue":      { US: "Catalog",       GB: "Catalogue",     CA: "Catalogue",     NZ: "Catalogue" },
665  "Aluminium":      { US: "Aluminum",      GB: "Aluminium",     CA: "Aluminium",     NZ: "Aluminium" },
666  "Traveller":      { US: "Traveler",      GB: "Traveller",     CA: "Traveller",     NZ: "Traveller" },
667  "Travelling":     { US: "Traveling",     GB: "Travelling",    CA: "Travelling",    NZ: "Travelling" },
668  "Cancelled":      { US: "Canceled",      GB: "Cancelled",     CA: "Cancelled",     NZ: "Cancelled" },
669  "Cancelling":     { US: "Canceling",     GB: "Cancelling",    CA: "Cancelling",    NZ: "Cancelling" },
670  "Fuelled":        { US: "Fueled",        GB: "Fuelled",       CA: "Fuelled",       NZ: "Fuelled" },
671  "Enrol":          { US: "Enroll",        GB: "Enrol",         CA: "Enrol",         NZ: "Enrol" },
672  "Fulfil":         { US: "Fulfill",       GB: "Fulfil",        CA: "Fulfill",       NZ: "Fulfil" },
673  "Instalment":     { US: "Installment",   GB: "Instalment",    CA: "Instalment",    NZ: "Instalment" },
674  "Practise":       { US: "Practice",      GB: "Practise",      CA: "Practise",      NZ: "Practise" },
675  "Acknowledgement":{ US: "Acknowledgment",GB: "Acknowledgement",CA: "Acknowledgment",NZ: "Acknowledgement" },
676  "Manoeuvre":      { US: "Maneuver",      GB: "Manoeuvre",     CA: "Manoeuvre",     NZ: "Manoeuvre" },
677  "Paediatric":     { US: "Pediatric",     GB: "Paediatric",    CA: "Paediatric",    NZ: "Paediatric" }
678  
679/*
680  "Recess / Break":        { US: "Recess",               GB: "Break Time",         CA: "Recess",               NZ: "Morning Tea / 
680Lunch"  },
681  "Relief Teacher":        { US: "Substitute Teacher",   GB: "Supply Teacher",     CA: "Substitute Teacher",   NZ: "Relief Teacher"       },
682  "PE":                    { US: "PE / Gym",             GB: "PE",                 CA: "PE",                   NZ: "PE"                   },
683  "Timetable":             { US: "Schedule",             GB: "Timetable",          CA: "Schedule",             NZ: "Timetable"            },  
684  "Learning Support":      { US: "SPED",                 GB: "SEN",                CA: "Special Education",    NZ: "SEN / Learning Support"},
685  "Gifted & Talented":     { US: "Gifted and Talented",  GB: "More Able / G&T",    CA: "Gifted",               NZ: "Extension / Gifted"   },  
686  "Enrolment":             { US: "Enrollment",           GB: "Enrolment",          CA: "Enrolment",            NZ: "Enrolment"            },
687  "Labour":                { US: "Labor",                GB: "Labour",             CA: "Labour",               NZ: "Labour"               },
688  "Licence":               { US: "License",              GB: "Licence",            CA: "Licence",              NZ: "Licence"              },
689  "Ageing":                { US: "Aging",                GB: "Ageing",             CA: "Ageing",               NZ: "Ageing"               },
690  "Tonne":                 { US: "Ton",                  GB: "Tonne",              CA: "Tonne",                NZ: "Tonne"                },  
691  "Modelled":              { US: "Modeled",              GB: "Modelled",           CA: "Modelled",             NZ: "Modelled"             },
692  "Fulfil":                { US: "Fulfill",              GB: "Fulfil",             CA: "Fulfil",               NZ: "Fulfil"               },
693  "Counsellor":            { US: "Counselor",            GB: "Counsellor",         CA: "Counsellor",           NZ: "Counsellor"           },
694  "Dialogue":              { US: "Dialog",               GB: "Dialogue",           CA: "Dialogue",             NZ: "Dialogue"             }
695  */
696  
697};
698
699
700
701  function preserveCase(from, to) {
702    if (from === from.toUpperCase()) return to.toUpperCase();
703    if (from === from.toLowerCase()) return to.toLowerCase();
704    if (from[0] === from[0].toUpperCase()) return to[0].toUpperCase() + to.slice(1);
705    return to;
706  }
707
708  function replaceTerms(countryCode) {
709    // Walk every text node in the document body once. Skip nodes inside site chrome
710    // (nav/header/footer/country-bar/modals/dropdowns), script/style/noscript, and anything opted out via .no-change.
711    // This captures text directly inside any element — including <div> wrappers that don't use <p>/<span>.
712    const EXCLUDE_SEL = "nav, header, footer, script, style, noscript, .no-change, .country-bar, .modal, .nav-dropdown-menu, .nav-links";
713
714    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, {
715      acceptNode: (node) => {
716        if (!node.parentElement) return NodeFilter.FILTER_REJECT;
717        if (!node.nodeValue || !node.nodeValue.trim()) return NodeFilter.FILTER_REJECT;
718        if (node.parentElement.closest(EXCLUDE_SEL)) return NodeFilter.FILTER_REJECT;
719        return NodeFilter.FILTER_ACCEPT;
720      }
721    });
722
723    const textNodes = [];
724    while (walker.nextNode()) {
725      textNodes.push(walker.currentNode);
726    }
727
728    textNodes.forEach(node => {
729      let text = node.nodeValue;
730      const originalText = text;
731
732      Object.entries(terms).forEach(([key, translations]) => {
733        const target = translations[countryCode];
734        if (!target || target === "Either") return;
735
736        // Escape regex metacharacters in the key (handles dots, parens, etc.)
737        const safeKey = key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
738        const pattern = new RegExp(`\\b(${safeKey})(s?)\\b`, "gi");
739
740        text = text.replace(pattern, (match, word, plural) => {
741          let replaced = preserveCase(word, target);
742          if (plural && !replaced.endsWith('s')) replaced += 's';
743          return replaced;
744        });
745      });
746
747      if (text !== originalText) {
748        node.nodeValue = text;
749        const el = node.parentElement;
750        if (el) {
751          el.style.visibility = "visible";
752          el.style.transition = "opacity 0.4s ease";
753          el.style.opacity = 1;
754        }
755      }
756    });
757
758
759    
760  }
761
762  replaceTerms(country);
763
764    document.querySelectorAll("p, b, span, label, li, h1, h2, h3, h4, h5, h6")
765      .forEach(el => {
766        el.style.opacity = "1";
767
768      });
769   }
770if (country !== "AU") {
771$('<style>')
772  .prop('type', 'text/css')
773  .html('p, b, span, label, li, h1, h2, h3, h4, h5, h6 { opacity: 1!important; }')
774  .appendTo('head');
775}
776});
777
778</script>
778
779    </div>
780   </nav>
781  </header>
782  <main>
783
784<!-- SALE BANNER (only when a sale is live; the 7-days-free banner has been removed) -->
785
786<!-- HERO -->
787<section class="hero hero-stacked">
788  <div class="container">
789    <div class="hero-grid">
790      <div>
791        <div class="eyebrow"><span class="dot"></span> Try Home Plus free for 7 days</div>
792        <h1 class="hero-title">Home Plus pricing.<br><span class="accent">Pick what works.</span></h1>
793        <p class="hero-sub">
794          One <strong>Home Plus</strong> subscription unlocks everything Studyladder offers. Unlimited activities, a built-in tutor, goal setting, detailed results and rewards.
795        </p>
796      </div>
797    </div>
798  </div>
799</section>
800
801<!-- PRICING — dynamic tiers + 3 price cards per tier -->
802<section class="pricing" id="pricing" style="padding-top:32px;">
803  <div class="container">
804
805    <!-- TIER TOGGLE -->
806    <div class="pricing-toggle" role="tablist" aria-label="Plan size">
807              <button type="button"
808                class="pricing-toggle-btn active"
809                data-tier-target="schoolTier1"
810                role="tab"
811                aria-selected="true">
812                      1 student
813                  </button>
814              <button type="button"
815                class="pricing-toggle-btn"
816                data-tier-target="schoolTier6"
817                role="tab"
818                aria-selected="false">
819                      Family <span class="pricing-toggle-meta">up to 4 children</span>
820                  </button>
821          </div>
822
823    <!-- TIER PANELS — one per tier, each with 3 price cards -->
824    
824<script>
825      var tiers = [
826                  {'max_students': 6,
827            'yearlyProduct':    98,
828            'quarterlyProduct': 36,
829            'monthlyProduct':   15},
830                  {'max_students': 1,
831            'yearlyProduct':    68,
832            'quarterlyProduct': 24,
833            'monthlyProduct':   10},
834              ]
835    </script>
835
836
837          <div class="pricing-tier-panel active"
838           id="schoolTier1"
839           data-max="1"
840           data-index="1">
841        <div class="pricing-grid">
842
843                      <!-- MONTHLY -->
844            <div class="price-card parents" data-plan-tier="monthly">
845              <h3>Monthly</h3>
846              <p class="for-who">Most flexibility</p>
847              <div class="price-amount">
848                <span class="price-container-2">10</span><span style="font-size: 14px;font-weight: 500;color: #64748B;"> GBP / month</span>
849              </div>
850              <p class="price-detail">Pay month to month. Cancel anytime.</p>
851              <ul>
852                <li>Full Home Plus access</li>
853                <li data-feature="profiles">
854                  One student account                </li>
855                <li>7-day free trial</li>
856              </ul>
857                              <a href="/account/parent-signup?t=parent&r=&premium=1&source=parent&interval=MONTHLY&type=PARENT&limit=1" class="btn btn-primary subscribe-btn">Start free trial</a>
858              
859            </div>
860            
860<script>
861              $(document).ready(function(){
862                $('.price-container-2').html(new Intl.NumberFormat('en-GB', {style: 'currency', currency: 'GBP', minimumFractionDigits:0, maximumFractionDigits:0}).format(10));
863              })
864            </script>
864
865          
866                      <!-- QUARTERLY -->
867            <div class="price-card parents" data-plan-tier="quarterly">
868              <span class="price-card-badge price-card-badge-soft">A little saving</span>
869              <h3>Quarterly</h3>
870              <p class="for-who">A little saving, more flexibility</p>
871              <div class="price-amount">
872                <span class="quarterly-price-container-2">24</span><span style="font-size: 14px;font-weight: 500;color: #64748B;"> GBP / quarter</span>
873              </div>
874              <p class="price-detail">Only <span class="updateCurrency" style="display:inline">$</span>8/month effective. Billed every 3 months.</p>
875              <ul>
876                <li>Full Home Plus access</li>
877                <li data-feature="profiles">
878                  One student account                </li>
879                <li>7-day free trial</li>
880              </ul>
881                              <a href="/account/parent-signup?t=parent&r=&premium=1&source=parent&interval=QUARTERLY&type=PARENT&limit=1" class="btn btn-primary subscribe-btn">Start free trial</a>
882                          </div>
883            
883<script>
884              $(document).ready(function(){
885                $('.quarterly-price-container-2').html(new Intl.NumberFormat('en-GB', {style: 'currency', currency: 'GBP', minimumFractionDigits:0, maximumFractionDigits:0}).format(24));
886              })
887            </script>
887
888          
889                      <!-- YEARLY -->
890            <div class="price-card parents featured" data-plan-tier="annual">
891                              <span class="price-card-badge price-card-badge-bold">Best value</span>
892                            <h3>Annual</h3>
893              <p class="for-who">Best value, save the most</p>
894              <div class="price-amount">
895                                <span class="yearly-price-container-2">68</span><span style="font-size: 14px;font-weight: 500;color: #64748B;"> GBP / <span class="no-change">year</span></span>
896              </div>
897              <p class="price-detail">Only <span class="updateCurrency" style="display:inline">$</span>6/month effective. Billed once a year.</p>
898              <ul>
899                <li>Full Home Plus access</li>
900                <li data-feature="profiles">
901                  One student account                </li>
902                <li>7-day free trial</li>
903              </ul>
904                              <a href="/account/parent-signup?t=parent&r=&premium=1&source=parent&interval=YEARLY&type=PARENT&limit=1" class="btn btn-primary subscribe-btn">Start free trial</a>
905                          </div>
906            
906<script>
907              $(document).ready(function(){
908                var _fmt = new Intl.NumberFormat('en-GB', {style: 'currency', currency: 'GBP', minimumFractionDigits:0, maximumFractionDigits:0});
909                $('.yearly-price-container-2').html(_fmt.format(68));
910                                if("GB"=="GB") {
911                  $('.updateCurrency').html("&pound;");
912                }
913              })
914            </script>
914
915          
916        </div>
917      </div>
918          <div class="pricing-tier-panel"
919           id="schoolTier6"
920           data-max="6"
921           data-index="0">
922        <div class="pricing-grid">
923
924                      <!-- MONTHLY -->
925            <div class="price-card parents" data-plan-tier="monthly">
926              <h3>Monthly</h3>
927              <p class="for-who">Most flexibility</p>
928              <div class="price-amount">
929                <span class="price-container-1">15</span><span style="font-size: 14px;font-weight: 500;color: #64748B;"> GBP / month</span>
930              </div>
931              <p class="price-detail">Pay month to month. Cancel anytime.</p>
932              <ul>
933                <li>Full Home Plus access</li>
934                <li data-feature="profiles">
935                  Up to 4 student accounts                </li>
936                <li>7-day free trial</li>
937              </ul>
938                              <a href="/account/parent-signup?t=parent&r=&premium=1&source=parent&interval=MONTHLY&type=PARENT&limit=6" class="btn btn-primary subscribe-btn">Start free trial</a>
939              
940            </div>
941            
941<script>
942              $(document).ready(function(){
943                $('.price-container-1').html(new Intl.NumberFormat('en-GB', {style: 'currency', currency: 'GBP', minimumFractionDigits:0, maximumFractionDigits:0}).format(15));
944              })
945            </script>
945
946          
947                      <!-- QUARTERLY -->
948            <div class="price-card parents" data-plan-tier="quarterly">
949              <span class="price-card-badge price-card-badge-soft">A little saving</span>
950              <h3>Quarterly</h3>
951              <p class="for-who">A little saving, more flexibility</p>
952              <div class="price-amount">
953                <span class="quarterly-price-container-1">36</span><span style="font-size: 14px;font-weight: 500;color: #64748B;"> GBP / quarter</span>
954              </div>
955              <p class="price-detail">Only <span class="updateCurrency" style="display:inline">$</span>12/month effective. Billed every 3 months.</p>
956              <ul>
957                <li>Full Home Plus access</li>
958                <li data-feature="profiles">
959                  Up to 4 student accounts                </li>
960                <li>7-day free trial</li>
961              </ul>
962                              <a href="/account/parent-signup?t=parent&r=&premium=1&source=parent&interval=QUARTERLY&type=PARENT&limit=6" class="btn btn-primary subscribe-btn">Start free trial</a>
963                          </div>
964            
964<script>
965              $(document).ready(function(){
966                $('.quarterly-price-container-1').html(new Intl.NumberFormat('en-GB', {style: 'currency', currency: 'GBP', minimumFractionDigits:0, maximumFractionDigits:0}).format(36));
967              })
968            </script>
968
969          
970                      <!-- YEARLY -->
971            <div class="price-card parents featured" data-plan-tier="annual">
972                              <span class="price-card-badge price-card-badge-bold">Best value</span>
973                            <h3>Annual</h3>
974              <p class="for-who">Best value, save the most</p>
975              <div class="price-amount">
976                                <span class="yearly-price-container-1">98</span><span style="font-size: 14px;font-weight: 500;color: #64748B;"> GBP / <span class="no-change">year</span></span>
977              </div>
978              <p class="price-detail">Only <span class="updateCurrency" style="display:inline">$</span>9/month effective. Billed once a year.</p>
979              <ul>
980                <li>Full Home Plus access</li>
981                <li data-feature="profiles">
982                  Up to 4 student accounts                </li>
983                <li>7-day free trial</li>
984              </ul>
985                              <a href="/account/parent-signup?t=parent&r=&premium=1&source=parent&interval=YEARLY&type=PARENT&limit=6" class="btn btn-primary subscribe-btn">Start free trial</a>
986                          </div>
987            
987<script>
988              $(document).ready(function(){
989                var _fmt = new Intl.NumberFormat('en-GB', {style: 'currency', currency: 'GBP', minimumFractionDigits:0, maximumFractionDigits:0});
990                $('.yearly-price-container-1').html(_fmt.format(98));
991                                if("GB"=="GB") {
992                  $('.updateCurrency').html("&pound;");
993                }
994              })
995            </script>
995
996          
997        </div>
998      </div>
999    
1000    <p class="pricing-footnote" style="text-align:center; color:#64748B; margin: 28px auto 0; font-size: 14px; max-width: 620px; line-height: 1.5;">All subscriptions automatically renew. Cancel anytime. You can link your child's school account to a parent subscription &mdash; supervision only <a href="/account/parent-signup?t=parent&amp;r=">click here</a>.</p>
1001  </div>
1002</section>
1003
1004<!-- THE MATHS MAKES SENSE — value comparison vs private tutor -->
1005<section class="value">
1006  <div class="container">
1007    <div class="section-eyebrow">The maths makes sense</div>
1008    <h2 class="section-title">Less than one tutor session, for a whole year</h2>
1009    <p class="section-sub">Private tutoring works, but it costs hundreds per term and books out fast. Home Plus gives you a tutor that's always on, for a fraction of the price.</p>
1010
1011    <div class="compare-table value-compare">
1012      <div class="compare-row compare-row-head">
1013        <div class="compare-cell compare-cell-label"></div>
1014        <div class="compare-cell compare-cell-other">
1015          <div class="compare-col-tag">Private tutor</div>
1016          <div class="compare-col-rate">&pound;60&ndash;&pound;100<span> / hour</span></div>
1017        </div>
1018        <div class="compare-cell compare-cell-us">
1019          <div class="compare-col-tag">Home Plus annual</div>
1020          <div class="compare-col-rate">&pound;1.31<span> / week</span></div>
1021        </div>
1022      </div>
1023
1024      <div class="compare-row">
1025        <div class="compare-cell compare-cell-label">Time</div>
1026        <div class="compare-cell compare-cell-other">1 hour a week</div>
1027        <div class="compare-cell compare-cell-us">Unlimited, every day</div>
1028      </div>
1029
1030      <div class="compare-row">
1031        <div class="compare-cell compare-cell-label">Subjects</div>
1032        <div class="compare-cell compare-cell-other">One subject</div>
1033        <div class="compare-cell compare-cell-us">Mathematics, English and Science</div>
1034      </div>
1035
1036      <div class="compare-row">
1037        <div class="compare-cell compare-cell-label">Children</div>
1038        <div class="compare-cell compare-cell-other">One child</div>
1039        <div class="compare-cell compare-cell-us">Add siblings on the family plan</div>
1040      </div>
1041
1042      <div class="compare-row">
1043        <div class="compare-cell compare-cell-label">Schedule</div>
1044        <div class="compare-cell compare-cell-other">Bound to a fixed weekly time</div>
1045        <div class="compare-cell compare-cell-us">Use it whenever, no booking</div>
1046      </div>
1047
1048      <div class="compare-row compare-row-total">
1049        <div class="compare-cell compare-cell-label">Cost per year</div>
1050        <div class="compare-cell compare-cell-other"><strong>&pound;3,000+</strong></div>
1051        <div class="compare-cell compare-cell-us"><strong>&pound;68</strong> GBP</div>
1052      </div>
1053    </div>
1054
1055    <p class="value-note">Tutor pricing based on <span class="au-only">typical Australian rates</span><span class="intl-only">typical hourly rates</span>. Home Plus pricing is the single-student annual plan at &pound;68/year GBP. Family plan available from &pound;98/year for up to 4 children.</p>
1056  </div>
1057</section>
1058
1059<!-- STAT STRIP -->
1060<section class="stat-strip">
1061  <div class="container">
1062    <div class="stat-strip-grid">
1063      <div class="stat-strip-item">
1064        <div class="stat-strip-num">15+</div>
1065        <div class="stat-strip-label"><span class="au-only">Years building Studyladder for Aussie kids</span><span class="intl-only">Years building Studyladder for primary kids</span></div>
1066      </div>
1067      <div class="stat-strip-item">
1068        <div class="stat-strip-num">17k+</div>
1069        <div class="stat-strip-label">Curriculum-aligned activities included</div>
1070      </div>
1071      <div class="stat-strip-item">
1072        <div class="stat-strip-num">4</div>
1073        <div class="stat-strip-label">Children covered on one Home Plus account</div>
1074      </div>
1075      <div class="stat-strip-item">
1076        <div class="stat-strip-num">7</div>
1077        <div class="stat-strip-label">Days free trial on every plan</div>
1078      </div>
1079    </div>
1080  </div>
1081</section>
1082
1083<!-- VIDEO TOUR -->
1084<section class="tour" id="tour">
1085  <div class="container">
1086    <div class="section-eyebrow">See it in action</div>
1087    <h2 class="section-title">A quick tour of Home Plus</h2>
1088    <p class="section-sub">90 seconds of what your child sees, what you see, and why kids actually keep coming back.</p>
1089
1090    <div class="video-frame">
1091      <div class="video-player" id="videoPlayer" data-video-id="H6YiUu3dYUc" data-video-label="Home Plus tour">
1092        <picture>
1093          <source type="image/webp" srcset="https://static.studyladder.co.uk/cdn/site/fa/4dcff220af61.webp">
1094          <img src="https://static.studyladder.co.uk/cdn/site/80/e8a8e8f1b253.png" alt="Studyladder Home Plus, preview of the tour video" class="video-poster-img">
1095        </picture>
1096        <div class="video-poster-overlay"></div>
1097        <button class="video-play-btn" aria-label="Play tour video" type="button">
1098          <svg viewBox="0 0 24 24" fill="white" width="32" height="32">
1098<path d="M8 5v14l11-7z"/></svg>
1099        </button>
1100        <div class="video-meta">
1101          <div class="video-title">Studyladder Home Plus, a 90-second tour</div>
1102          <div class="video-duration">1:28</div>
1103        </div>
1104      </div>
1105    </div>
1106  </div>
1107</section>
1108
1109<!-- PARENT TESTIMONIALS -->
1110<section class="testimonials testimonials-cream">
1111  <div class="container">
1112    <div class="section-eyebrow">What parents say</div>
1113    <h2 class="section-title">Real reviews from real Studyladder parents</h2>
1114    <p class="section-sub"><span class="au-only">Australian families</span><span class="intl-only">Families worldwide</span> have been subscribing to Studyladder since 2009. Here's what some of them say.</p>
1115    <div class="test-grid">
1116
1117      <div class="test-card">
1118        <div class="test-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
1119        <p class="test-quote">"My children love it and it's very user-friendly. It makes learning fun and keeps them motivated at school and at home."</p>
1120        <div class="test-author">
1121          <div class="test-avatar">S</div>
1122          <div>
1123            <div class="test-name">Swendhi David</div>
1124            <div class="test-role">Parent &middot; AU</div>
1125          </div>
1126        </div>
1127      </div>
1128
1129      <div class="test-card">
1130        <div class="test-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
1131        <p class="test-quote">"Studyladder has provided great learning activities for my child for years. It reinforces both numeracy and literacy skills perfectly."</p>
1132        <div class="test-author">
1133          <div class="test-avatar b">N</div>
1134          <div>
1135            <div class="test-name">Nick Wills</div>
1136            <div class="test-role">Parent &middot; AU</div>
1137          </div>
1138        </div>
1139      </div>
1140
1141      <div class="test-card">
1142        <div class="test-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
1143        <p class="test-quote">"My son has recently started using Studyladder and absolutely loves doing his homework through it. I've never seen him so motivated."</p>
1144        <div class="test-author">
1145          <div class="test-avatar c">M</div>
1146          <div>
1147            <div class="test-name">Maree</div>
1148            <div class="test-role">Parent</div>
1149          </div>
1150        </div>
1151      </div>
1152
1153    </div>
1154  </div>
1155</section>
1156
1157<!-- WHAT YOU GET (tabbed benefits) -->
1158<section class="benefits">
1159  <div class="container">
1160    <div class="section-eyebrow">What's inside Home Plus</div>
1161    <h2 class="section-title">Everything your child needs in one subscription</h2>
1162    <p class="section-sub">From step-by-step tutorials to printable certificates, here's what your Home Plus subscription unlocks.</p>
1163
1164    <div class="benefits-tabs" role="tablist" aria-label="Home Plus benefits">
1165      <button type="button" class="benefits-tab active" role="tab" aria-selected="true" aria-controls="benefit-panel-unlimited" id="benef
1165its-tab-unlimited" data-tab="unlimited">
1166        <span class="benefits-tab-icon" style="background:var(--blue-soft);color:var(--blue);">
1167          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 1-6 6 6 6 0 0 1-6-6"/><path d="M12 14v4"/><path d="M8 18h8"/><path d="M12 2v4"/></svg>
1168        </span>
1169        <span class="benefits-tab-label">Unlimited learning</span>
1170      </button>
1171      <button type="button" class="benefits-tab" role="tab" aria-selected="false" aria-controls="benefit-panel-tutor" id="benefits-tab-tutor" data-tab="tutor">
1172        <span class="benefits-tab-icon" style="background:var(--orange);color:var(--orange-deep);">
1173          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg>
1174        </span>
1175        <span class="benefits-tab-label">Home Tutor</span>
1176      </button>
1177      <button type="button" class="benefits-tab" role="tab" aria-selected="false" aria-controls="benefit-panel-track" id="benef
1177its-tab-track" data-tab="track">
1178        <span class="benefits-tab-icon" style="background:var(--purple);color:var(--purple-deep);">
1179          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
1180        </span>
1181        <span class="benefits-tab-label">Assign &amp; track</span>
1182      </button>
1183      <button type="button" class="benefits-tab" role="tab" aria-selected="false" aria-controls="benefit-panel-rewards" id="benefits-tab-rewards" data-tab="rewards">
1184        <span class="benefits-tab-icon" style="background:var(--green);color:var(--green-deep);">
1185          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2h-4v-7H10v7H6a2 2 0 0 1-2-2V9z"/></svg>
1186        </span>
1187        <span class="benefits-tab-label">Treehouse &amp; avatars</span>
1188      </button>
1189    </div>
1190
1191    <div class="benefits-panels">
1192
1193      <div class="benefits-panel active" role="tabpanel" id="benefit-panel-unlimited" aria-labelledby="benefits-tab-unlimited">
1194        <div class="benefits-panel-content">
1195          <span class="benefits-panel-tag" style="background:var(--blue-soft);color:var(--blue);">Unlimited learning</span>
1196          <h3>No daily limits, just learning</h3>
1197          <p>Free accounts cap each child at three activities a day. Home Plus removes the cap so your child can practise as much as they want, across Mathematics, English and Science.</p>
1198          <ul class="benefits-list">
1199            <li>Full access to 17k+ curriculum-aligned activities</li>
1200            <li>Premium activities, games and videos unlocked</li>
1201            <li>Each child works at their own pace, in their own year level</li>
1202          </ul>
1203        </div>
1204        <div class="benefits-panel-visual benefits-visual-blue has-screen">
1205          <div class="subject-screen-card">
1206            <picture>
1207              <source type="image/webp" srcset="https://static.studyladder.co.uk/cdn/site/c3/8a02edbeff4e.webp">
1208              <img src="https://static.studyladder.co.uk/cdn/site/18/7d862bfe9b4d.png" alt="Studyladder monthly parent report showing each child's progress across subjects">
1209            </picture>
1210          </div>
1211        </div>
1212      </div>
1213
1214      <div class="benefits-panel" role="tabpanel" id="benefit-panel-tutor" aria-labelledby="benefits-tab-tutor" hidden>
1215        <div class="benefits-panel-content">
1216          <span class="benefits-panel-tag" style="background:var(--orange);color:var(--orange-deep);">Home Tutor</span>
1217          <h3>A built-in tutor at a fraction of the cost</h3>
1218          <p>Step-by-step tutorials, animations and worked examples walk your child through every topic, so you don't need to remember Year 4 long division to help them through it.</p>
1219          <ul class="benefits-list">
1220            <li>Tutorials covering Mathematics F to Year 6</li>
1221            <li>Learning to Read and Early Literacy modules</li>
1222            <li>Watch, then practise, then test, in one place</li>
1223          </ul>
1224        </div>
1225        <div class="benefits-panel-visual benefits-visual-orange has-screen">
1226          <div class="subject-screen-card">
1227            <picture>
1228              <source type="image/webp" srcset="https://static.studyladder.co.uk/cdn/site/49/cb975670b584.webp">
1229              <img src="https://static.studyladder.co.uk/cdn/site/86/6d3b3f02846b.png" alt="Studyladder Home Tutor lessons, organised so kids can watch, practise and test in one place">
1230            </picture>
1231          </div>
1232        </div>
1233      </div>
1234
1235      <div class="benefits-panel" role="tabpanel" id="benefit-panel-track" aria-labelledby="benefits-tab-track" hidden>
1236        <div class="benefits-panel-content">
1237          <span class="benefits-panel-tag" style="background:var(--purple);color:var(--purple-deep);">Assign &amp; track</span>
1238          <h3>Set the direction. See every result.</h3>
1239          <p>You drive what your child works on. Set learning goals, assign specific topics or activities, and see detailed reports of every result they've ever logged.</p>
1240          <ul class="benefits-list">
1241            <li>Set daily or weekly goals per child</li>
1242            <li>Assign specific tasks, topics or skills</li>
1243            <li>See every result, in full detail</li>
1244          </ul>
1245        </div>
1246        <div class="benefits-panel-visual benefits-visual-purple has-screen">
1247          <div class="subject-screen-card">
1248            <picture>
1249              <source type="image/webp" srcset="https://static.studyladder.co.uk/cdn/site/3b/542d0eec7f20.webp">
1250              <img src="https://static.studyladder.co.uk/cdn/site/8a/8b163c5d5053.png" alt="Studyladder detailed results view showing every activity, score and skill mastery for a child">
1251            </picture>
1252          </div>
1253        </div>
1254      </div>
1255
1256      <div class="benefits-panel" role="tabpanel" id="benefit-panel-rewards" aria-labelledby="benefits-tab-rewards" hidden>
1257        <div class="benefits-panel-content">
1258          <span class="benefits-panel-tag" style="background:var(--green);color:var(--green-deep);">Treehouse &amp; avatars</span>
1259          <h3>A reason to keep going</h3>
1260          <p>Kids earn points as they learn and spend them in a personal treehouse: decorate the rooms, unlock outfits, and look forward to coming back tomorrow.</p>
1261          <ul class="benefits-list">
1262            <li>Treehouse extension to decorate and customise</li>
1263            <li>Full avatar outfit collection unlocked</li>
1264            <li>New costumes added over time</li>
1265          </ul>
1266        </div>
1267        <div class="benefits-panel-visual benefits-visual-green has-screen">
1268          <div class="subject-screen-card">
1269            <picture>
1270              <source type="image/webp" srcset="https://static.studyladder.co.uk/cdn/site/20/f55fa97f402a.webp">
1271              <img src="https://static.studyladder.co.uk/cdn/site/51/58a4e018e488.png" alt="Studyladder avatar and treehouse collection that kids unlock as they learn">
1272            </picture>
1273          </div>
1274        </div>
1275      </div>
1276
1277    </div>
1278  </div>
1279</section>
1280
1281<!-- FAQ -->
1282<section class="faq faq-on-white" id="faq">
1283  <div class="container">
1284    <div class="faq-grid">
1285      <div class="faq-intro">
1286        <div class="section-eyebrow" style="text-align:left;">Pricing questions</div>
1287        <h2 class="faq-title">Quick answers about Home Plus</h2>
1288        <p>Still wondering something? <a href="/about/contact-us">Contact our support team &rarr;</a></p>
1289      </div>
1290      <div class="faq-list">
1291
1292        <details class="faq-item" open>
1293          <summary>What does the 7-day free trial include?</summary>
1294          <div class="faq-body">
1295            <p>Full Home Plus access for every feature on your chosen plan. Unlimited activities, the Home Tutor program, premium games, certificates, all of it. Cancel anytime during the trial, no questions asked.</p>
1296          </div>
1297        </details>
1298
1299        <details class="faq-item">
1300          <summary>How does the family plan work?</summary>
1301          <div class="faq-body">
1302            <p>One Home Plus subscription covers up to four children on a single parent account. Each child gets their own profile, year level, progress and rewards. You see a combined dashboard so you can check on all your kids in one place.</p>
1303          </div>
1304        </details>
1305
1306        <details class="faq-item">
1307          <summary>What's the difference between Monthly, Quarterly and Annual?</summary>
1308          <div class="faq-body">
1309            <p>Same Home Plus access, different billing frequency. Monthly is the most flexible (cancel any time). Quarterly is billed every 3 months. Annual is billed once a year and is the best value of the three.</p>
1310          </div>
1311        </details>
1312
1313        <details class="faq-item">
1314          <summary>Can I cancel anytime?</summary>
1315          <div class="faq-body">
1316            <p>Yes. Cancel from your account dashboard at any time during the trial or after. If you cancel during a billing period, you keep access until the end of that period. No phone calls, no retention scripts.</p>
1317          </div>
1318        </details>
1319
1320        <details class="faq-item">
1321          <summary>Can I link Home Plus to my child's school account?</summary>
1322          <div class="faq-body">
1323            <p>Yes. If your child already uses Studyladder at school, a school parent supervision account lets you view their school progress. Home Plus adds full home learning on top. Same login, same dashboard, just way more unlocked.</p>
1324          </div>
1325        </details>
1326
1327      </div>
1328    </div>
1329  </div>
1330</section>
1331
1332<!-- FINAL CTA -->
1333<section class="final-cta">
1334  <div class="container">
1335    <div class="final-cta-inner">
1336      <h2>Ready to build brighter learners?</h2>
1337      <p>Join 30,000+ teachers, 10,000+ schools and <span class="au-only">thousands of Australian families</span><span class="intl-only">thousands of families</span> already learning with Studyladder across 50+ countries.</p>
1338      <div class="final-cta-btns">
1339        <a href="#pricing" class="btn btn-primary btn-lg">View plans</a>
1340        <a href="/about/teacher-school-pricing?t=t" class="btn btn-primary btn-lg">Teacher plans</a>
1341        <a href="/about/teacher-school-pricing?t=s" class="btn btn-primary btn-lg">School plans</a>
1342      </div>
1343    </div>
1344  </div>
1345</section>
1346
1347<!-- STICKY CTA -->
1348<div class="sticky-cta" id="stickyCta" data-sticky-trigger="pricing" aria-hidden="true">
1349  <div class="sticky-cta-inner">
1350    <div class="sticky-cta-text">
1351      <strong>Ready to start?</strong>
1352      <span>7-day free trial &middot; Cancel anytime</span>
1353    </div>
1354    <a href="#pricing" class="btn btn-primary sticky-cta-btn">Start free trial &rarr;</a>
1355  </div>
1356</div>
1357
1358<!-- PRICING TIER TOGGLE JS -->
1359<script>
1360(function(){
1361  var buttons = document.querySelectorAll('.pricing-toggle .pricing-toggle-btn');
1362  var panels  = document.querySelectorAll('.pricing-tier-panel');
1363  if (!buttons.length || !panels.length) return;
1364
1365  buttons.forEach(function(btn){
1366    btn.addEventListener('click', function(){
1367      var target = btn.getAttribute('data-tier-target');
1368
1369      buttons.forEach(function(b){
1370        b.classList.remove('active');
1371        b.setAttribute('aria-selected','false');
1372      });
1373      btn.classList.add('active');
1374      btn.setAttribute('aria-selected','true');
1375
1376      panels.forEach(function(p){
1377        if (p.id === target) {
1378          p.classList.add('active');
1379        } else {
1380          p.classList.remove('active');
1381        }
1382      });
1383    });
1384  });
1385})();
1386</script>
1386
1387
1388<!-- PRICING PAGE STYLE OVERRIDES (cosmetic — no impact on Stripe URLs or form fields) -->
1389<style>
1390/* Tier toggle — fully rounded pill */
1391.sl-marketing .pricing-toggle {
1392  display: inline-flex;
1393  background: #F1F5F9;
1394  padding: 5px;
1395  border-radius: 999px;
1396  margin: 0 auto 28px;
1397  gap: 4px;
1398}
1399.sl-marketing .pricing .pricing-toggle {
1400  display: flex;
1401  max-width: 460px;
1402  margin: 0 auto 28px;
1403  border-radius: 999px;
1404}
1405.sl-marketing .pricing-toggle-btn {
1406  flex: 1;
1407  border: 0;
1408  background: transparent;
1409  padding: 10px 18px;
1410  border-radius: 999px;
1411  font-size: 14px;
1412  font-weight: 600;
1413  color: #475569;
1414  cursor: pointer;
1415  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
1416  letter-spacing: -0.01em;
1417  line-height: 1.3;
1418}
1419.sl-marketing .pricing-toggle-btn:hover { color: #0F172A; }
1420.sl-marketing .pricing-toggle-btn.active {
1421  background: #2D5BFF !important;
1422  color: #FFFFFF !important;
1423  box-shadow: 0 1px 3px rgba(45,91,255,0.30), 0 1px 2px rgba(15,23,42,0.06) !important;
1424}
1425.sl-marketing .pricing-toggle-btn.active .pricing-toggle-meta { color: #FFFFFF !important; opacity: 0.85; }
1426.sl-marketing .pricing-toggle-meta {
1427  display: block;
1428  font-size: 11px;
1429  font-weight: 500;
1430  opacity: 0.7;
1431  margin-top: 1px;
1432}
1433
1434/* Tier panel show/hide */
1435.sl-marketing .pricing-tier-panel { display: none; }
1436.sl-marketing .pricing-tier-panel.active { display: block; }
1437
1438/* Orange CTA buttons on price cards (override parent-pricing.scss blue) */
1439.sl-marketing .pricing .price-card .btn,
1440.sl-marketing .pricing .price-card a.btn-primary,
1441.sl-marketing .pricing .price-card .subscribe-btn {
1442  background-color: #EA580C !important;
1443  border-color: #EA580C !important;
1444  color: #FFFFFF !important;
1445}
1446.sl-marketing .pricing .price-card .btn:hover,
1447.sl-marketing .pricing .price-card a.btn-primary:hover,
1448.sl-marketing .pricing .price-card .subscribe-btn:hover {
1449  background-color: #C2410C !important;
1450  border-color: #C2410C !important;
1451}
1452.sl-marketing .pricing .price-card .btn:active,
1453.sl-marketing .pricing .price-card a.btn-primary:active,
1454.sl-marketing .pricing .price-card .subscribe-btn:active {
1455  background-color: #FFFFFF !important;
1456  color: #EA580C !important;
1457  border: 1px solid #EA580C !important;
1458  box-shadow: 0 0 0 4px rgba(234,88,12,0.12) !important;
1459  transform: translateY(1px);
1460}
1461
1462/* ─── Sale styling on the annual card ─────────────────────────────── */
1463.sl-marketing .price-card.parents.on-sale {
1464  border: 2px solid #DC2626;
1465  box-shadow: 0 12px 32px -12px rgba(220, 38, 38, 0.35);
1466}
1467.sl-marketing .price-card-badge.price-card-badge-sale {
1468  background: #DC2626;
1469  color: #FFFFFF;
1470  font-weight: 700;
1471  letter-spacing: 0.04em;
1472  padding: 5px 12px;
1473  border-radius: 999px;
1474  font-size: 12px;
1475  box-shadow: 0 4px 12px -4px rgba(220, 38, 38, 0.5);
1476}
1477.sl-marketing .price-card .price-amount .price-strike {
1478  display: inline-block;
1479  color: #94A3B8;
1480  text-decoration: line-through;
1481  text-decoration-thickness: 2px;
1482  font-size: 22px;
1483  font-weight: 500;
1484  margin-right: 10px;
1485  vertical-align: middle;
1486}
1487</style>
1488
1489  
1490  <style>
1491    /* ------ Footer styling — targets the BS4 markup below ------ */
1492    /* Force NO margin above the footer at any viewport. Beats the 5em
1493       margin-top in public.css and any other inherited rule. */
1494    footer.footer,
1495    footer.footer.bg-dark,
1496    .footer.bg-dark {
1497      margin-top: 0 !important;
1498      margin-bottom: 0 !important;
1499    }
1500    @media (min-width: 0) {
1501      footer.footer,
1502      footer.footer.bg-dark,
1503      .footer.bg-dark { margin-top: 0 !important; }
1504    }
1505    @media (min-width: 992px) {
1506      footer.footer,
1507      footer.footer.bg-dark,
1508      .footer.bg-dark { margin-top: 0 !important; }
1509    }
1510    .footer.bg-dark {
1511      background: #0F172A !important;
1512      padding: 56px 0 24px;
1513      color: rgba(255, 255, 255, 0.72);
1514      font-size: 14px;
1515    }
1516    .footer.bg-dark .container { color: rgba(255, 255, 255, 0.72); }
1517    .footer.bg-dark a { transition: color .15s ease, background .15s ease; }
1518    .footer.bg-dark a.text-light { color: rgba(255, 255, 255, 0.65) !important; }
1519    .footer.bg-dark a.text-light:hover { color: #ffffff !important; text-decoration: none; }
1520
1521    /* Link lists — force size + weight + colour against public.css */
1522    .footer.bg-dark ul.list-unstyled li a,
1523    .footer.bg-dark ul.list-unstyled li a.text-light {
1524      font-size: 14px !important;
1525      font-weight: 400 !important;
1526      color: rgba(255, 255, 255, 0.65) !important;
1527      line-height: 1.5 !important;
1528      letter-spacing: 0 !important;
1529      text-transform: none !important;
1530    }
1531    .footer.bg-dark ul.list-unstyled li a:hover,
1532    .footer.bg-dark ul.list-unstyled li a.text-light:hover {
1533      color: #ffffff !important;
1534      text-decoration: none !important;
1535    }
1536    .footer.bg-dark .logo { display: inline-block; }
1537    .footer.bg-dark .logo img { max-width: 160px; max-height: 36px; width: auto; height: auto; }
1538    .footer.bg-dark p { color: rgba(255, 255, 255, 0.65); font-size: 14px; line-height: 1.55; }
1539
1540    /* Column headers — !important needed because public.css sets h4 font-size !important globally */
1541    .footer.bg-dark h4,
1542    .footer.bg-dark .sl-footer-heading {
1543      font-size: 12px !important;
1544      font-weight: 700 !important;
1545      text-transform: uppercase !important;
1546      letter-spacing: 0.08em !important;
1547      color: #ffffff !important;
1548      margin-bottom: 14px !important;
1549      padding-bottom: 0 !important;
1550      line-height: 1.4 !important;
1551    }
1552    .footer.bg-dark ul.list-unstyled { padding: 0; margin: 0; }
1553    .footer.bg-dark ul.list-unstyled li { margin-bottom: 10px; line-height: 1.5; }
1554
1555    /* Social icons — soft circular pill on hover */
1556    .sl-footer-social { display: inline-flex; align-items: center; margin-top: 4px; }
1557    .sl-footer-social a {
1558      display: inline-flex;
1559      align-items: center;
1560      justify-content: center;
1561      width: 36px;
1562      height: 36px;
1563      border-radius: 50%;
1564      background: rgba(255, 255, 255, 0.08);
1565      margin-left: 0 !important;
1566    }
1567    .sl-footer-social a + a { margin-left: 8px !important; }
1568    .sl-footer-social a:hover { background: rgba(255, 255, 255, 0.18); }
1569    .sl-footer-social svg { width: 18px !important; height: 18px !important; display: block; }
1570    .sl-footer-social a.text-light { color: #ffffff !important; }
1571
1572    /* Bottom row */
1573    .footer.bg-dark .row.no-gutters {
1574      border-top: 1px solid rgba(255, 255, 255, 0.08);
1575      padding-top: 18px;
1576      margin-top: 28px !important;
1577      font-size: 12px;
1578      color: rgba(255, 255, 255, 0.5);
1579      align-items: center;
1580      line-height: 1.6;
1581    }
1582    .footer.bg-dark .copyright { color: rgba(255, 255, 255, 0.5); font-size: 12px; }
1583
1584    /* Legal links list (bottom-right) */
1585    .sl-footer-legal {
1586      list-style: none;
1587      padding: 0;
1588      margin: 0;
1589      display: flex;
1590      gap: 22px;
1591      justify-content: flex-end;
1592    }
1593    .sl-footer-legal li { margin: 0; padding: 0; }
1594    .footer.bg-dark .sl-footer-legal a,
1595    .footer.bg-dark .sl-footer-legal a.text-light {
1596      color: rgba(255, 255, 255, 0.5) !important;
1597      font-size: 12px !important;
1598      font-weight: 400 !important;
1599      line-height: 1.6 !important;
1600    }
1601    .footer.bg-dark .sl-footer-legal a:hover,
1602    .footer.bg-dark .sl-footer-legal a.text-light:hover {
1603      color: #ffffff !important;
1604      text-decoration: none !important;
1605    }
1606    @media (max-width: 767.98px) {
1607      .sl-footer-legal { justify-content: center; gap: 18px; margin-bottom: 8px; }
1608    }
1609
1610    /* Country switcher (student-only) inherits theme */
1611    .footer.bg-dark #lc_select {
1612      background-color: rgba(255, 255, 255, 0.08);
1613      border-color: rgba(255, 255, 255, 0.15);
1614      color: #ffffff;
1615    }
1616
1617    /* Tighten typography on small screens */
1618    @media (max-width: 991.98px) {
1619      .footer.bg-dark { padding: 36px 0 20px; text-align: center; }
1620      .footer.bg-dark h4 { margin-top: 12px; }
1621      .sl-footer-social { justify-content: center; display: flex; }
1622    }
1623  </style>
1624
1625  </main>
1626  <div class="d-none d-print-block text-center">
1627    <a href="https://studyladder.com.au" title="Studyladder - Home" class="text-center mt-4"><img style="width: 150px !important;" src="https://static.studyladder.co.uk/cdn/site/13/6f597fea9532.png"></a>
1628  </div>
1629
1630  <footer class="footer bg-dark text-light  d-print-none">
1631    <div class="container">
1632
1633      
1634      <div class="row text-center text-lg-left pb-3">
1635
1636        <!-- Brand column -->
1637        <div class="col-lg-4 col-md-12 py-4 py-lg-0">
1638          <a class="logo d-inline-block mb-3" href="/"><img src="https://static.studyladder.co.uk/cdn/site/c7/cbe28b2ff048.png" alt="Studyladder"></a>
1639          <p class="mb-3">Helping teachers, parents and schools inspire confident learners, one activity at a time.</p>
1640          <div class="sl-footer-social">
1641            <a class="text-light" aria-label="Studyladder on Facebook" href="https://www.facebook.com/Studyladder/" target="_blank" rel="noopener">
1642              <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M9.198 21.5h4v-8.01h3.604l.396-3.98h-4V7.5c0-1.103.897-2 2-2h2v-4h-2c-3.309 0-6 2.691-6 6v2.01H7.198l-.396 3.98h2.396v8.01z"/></svg>
1643            </a>
1644            <a class="text-light" aria-label="Studyladder on Instagram" href="https://www.instagram.com/studyladder/" target="_blank" rel="noopener">
1645              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>
1646            </a>
1647            <a class="text-light" aria-label="Studyladder on X / Twitter" href="https://twitter.com/studyladder" target="_blank" rel="noopener">
1648              <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
1649            </a>
1650            <a class="text-light" aria-label="Studyladder on YouTube" href="https://www.youtube.com/user/StudyLadder" target="_blank" rel="noopener">
1651              <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
1652            </a>
1653          </div>
1654
1655                  </div>
1656
1657        <!-- Who we help -->
1658        <div class="col-lg-2 col-md-6 py-4 py-lg-0">
1659          <h4 class="sl-footer-heading">Who we help</h4>
1660          <ul class="list-unstyled">
1661            <li><a class="text-light" href="/about/parent">For parents</a></li>
1662            <li><a class="text-light" href="/about/teacher">For teachers</a></li>
1663            <li><a class="text-light" href="/about/teacher-school-pricing?t=s">For schools</a></li>
1664            <li><a class="text-light" href="/about/tutor">For tutors</a></li>
1665          </ul>
1666        </div>
1667
1668        <!-- Subjects -->
1669        <div class="col-lg-2 col-md-6 py-4 py-lg-0">
1670          <h4 class="sl-footer-heading">Subjects</h4>
1671          <ul class="list-unstyled">
1672            <li><a class="text-light" href="/about/subjects-mathematics">Mathematics</a></li>
1673            <li><a class="text-light" href="/about/subjects-english">English</a></li>
1674            <li><a class="text-light" href="/about/subjects-science">Science</a></li>
1675          </ul>
1676        </div>
1677
1678        <!-- Learn more -->
1679        <div class="col-lg-2 col-md-6 py-4 py-lg-0">
1680          <h4 class="sl-footer-heading">Learn more</h4>
1681          <ul class="list-unstyled">
1682            <li><a class="text-light" href="/about">About us</a></li>
1683            <li><a class="text-light" href="/about/features">Features</a></li>
1684            <li><a class="text-light" href="/info/upgrade-benefits">Home Plus benefits</a></li>
1685            <li><a class="text-light" href="#" data-toggle="modal" data-target="#pricingModal">Pricing</a></li>
1686            <li><a class="text-light" href="/about/testimonials">Testimonials</a></li>
1687            <li><a class="text-light" href="/blog">Blog</a></li>
1688          </ul>
1689        </div>
1690
1691        <!-- Support -->
1692        <div class="col-lg-2 col-md-6 py-4 py-lg-0">
1693          <h4 class="sl-footer-heading">Support</h4>
1694          <ul class="list-unstyled">
1695            <li><a class="text-light" href="/about/faqs">FAQs</a></li>
1696            <li><a class="text-light" href="/about/contact-us">Contact us</a></li>
1697          </ul>
1698        </div>
1699
1700      </div>
1701
1702      <div class="row no-gutters small d-flex justify-content-between mt-lg-5 mb-2">
1703        <div class="copyright text-center text-md-left order-2 order-md-1 pt-1 pt-lg-0">&copy; 2026 Studyladder Pty Ltd</div>
1704        <ul class="sl-footer-legal text-center text-lg-left order-1 order-md-2">
1705          <li><a class="text-light" href="/about/privacy">Privacy</a></li>
1706          <li><a class="text-light" href="/about/terms">Terms</a></li>
1707          <li><a class="text-light" href="/info/gdpr">GDPR</a></li>
1708        </ul>
1709      </div>
1710    </div>
1711  </footer>
1712
1713  
1713<script>
1714      $(function(){
1715          $.ajax({
1716              url: "/secure/check-subscription-cancelled",
1717              method: "POST",
1718              dataType: "json",
1719              success: function(r){
1720                  if (r.found){
1721                      /*dataLayer.push({
1722                          event: r.event ?? "cancelled",
1723                          reason: r.reason ?? "not given",
1724                          feedback: r.feedback ?? "not given",
1725                          comment: r.comment ?? "not given",
1726                          user: r.user ?? "",
1727                          user_type: r.type ?? "",
1728                          plan_type: r.plan ?? "",
1729                          domain_region: "GB"
1730                      })*/
1731                  }
1732              }
1733          })
1734      })
1735  </script>
1735
1736
1737  <!-- PRICING MODAL — opened by any [data-toggle="modal" data-target="#pricingModal"] trigger.
1738     Loaded site-wide from footer-bs4.phtml so it works for student, teacher, parent and public users. -->
1739<div id="pricingModal" class="modal fade sl-pricing-modal" role="dialog" aria-hidden="true" tabindex="-1" aria-labelledby="pricingModalTitle">
1740  <div class="modal-dialog modal-dialog-centered" role="document">
1741    <div class="modal-content sl-pricing-modal-content">
1742
1743      <button type="button" class="sl-pricing-modal-close" data-dismiss="modal" aria-label="Close">
1744        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
1745      </button>
1746
1747      <div class="sl-pricing-modal-header">
1748        <div class="sl-pricing-modal-eyebrow">Pricing</div>
1749        <h2 class="sl-pricing-modal-title" id="pricingModalTitle">See pricing for&hellip;</h2>
1750        <p class="sl-pricing-modal-sub">Pick the option that describes you, we'll show the right plans.</p>
1751      </div>
1752
1753      <div class="sl-pricing-modal-options">
1754        <a href="https://www.studyladder.co.uk/account/parent-pricing" class="sl-pricing-option">
1755          <span class="sl-pricing-option-icon sl-pricing-icon-parent">
1756            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21v-2a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v2"/><circle cx="10" cy="7" r="4"/><path d="M19 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
1757          </span>
1758          <span class="sl-pricing-option-body">
1759            <strong>Parents &amp; homeschoolers</strong>
1760            <small>Home Plus plans for up to 4 children</small>
1761          </span>
1762          <span class="sl-pricing-option-arrow">&rarr;</span>
1763        </a>
1764
1765        <a href="https://www.studyladder.co.uk/about/teacher-school-pricing?t=t" class="sl-pricing-option">
1766          <span class="sl-pricing-option-icon sl-pricing-icon-teacher">
1767            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg>
1768          </span>
1769          <span class="sl-pricing-option-body">
1770            <strong>Teachers</strong>
1771            <small>For one classroom &middot; up to 35 students</small>
1772          </span>
1773          <span class="sl-pricing-option-arrow">&rarr;</span>
1774        </a>
1775
1776        <a href="https://www.studyladder.co.uk/about/teacher-school-pricing?t=s" class="sl-pricing-option">
1777          <span class="sl-pricing-option-icon sl-pricing-icon-school">
1778            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21h18"/><path d="M5 21V7l7-4 7 4v14"/><path d="M9 9h1M9 13h1M9 17h1M14 9h1M14 13h1M14 17h1"/></svg>
1779          </span>
1780          <span class="sl-pricing-option-body">
1781            <strong>Schools</strong>
1782            <small>Whole-school plans &middot; admin tools included</small>
1783          </span>
1784          <span class="sl-pricing-option-arrow">&rarr;</span>
1785        </a>
1786      </div>
1787
1788    </div>
1789  </div>
1790</div>
1791
1792<style>
1793/* Force-correct modal overlay behaviour (sl-marketing.scss styles .modal differently) */
1794body.sl-marketing #pricingModal,
1795body #pricingModal.sl-pricing-modal {
1796  position: fixed !important;
1797  top: 0 !important;
1798  left: 0 !important;
1799  right: 0 !important;
1800  bottom: 0 !important;
1801  width: 100vw !important;
1802  height: 100vh !important;
1803  max-width: 100vw !important;
1804  max-height: 100vh !important;
1805  margin: 0 !important;
1806  padding: 0 !important;
1807  background: rgba(15, 23, 42, 0) !important;
1808  border: 0 !important;
1809  border-radius: 0 !important;
1810  box-shadow: none !important;
1811  transform: none !important;
1812  overflow-x: hidden !important;
1813  overflow-y: auto !important;
1814  outline: 0 !important;
1815  z-index: 2050 !important;
1816  /* Animation: fade overlay + dialog */
1817  display: block !important;
1818  opacity: 0;
1819  visibility: hidden;
1820  pointer-events: none;
1821  transition: opacity .22s ease, visibility 0s linear .22s, background-color .22s ease, -webkit-backdrop-filter .22s ease, backdrop-filter .22s ease !important;
1822  -webkit-backdrop-filter: blur(0px);
1823  backdrop-filter: blur(0px);
1824}
1825body.sl-marketing #pricingModal.show,
1826body #pricingModal.sl-pricing-modal.show {
1827  display: block !important;
1828  opacity: 1;
1829  visibility: visible;
1830  pointer-events: auto;
1831  background: rgba(15, 23, 42, 0.78) !important;
1832  -webkit-backdrop-filter: blur(8px) !important;
1833  backdrop-filter: blur(8px) !important;
1834  transition: opacity .22s ease, visibility 0s linear 0s, background-color .22s ease, -webkit-backdrop-filter .22s ease, backdrop-filter .22s ease !important;
1835}
1836body.sl-marketing #pricingModal .modal-dialog,
1837body #pricingModal.sl-pricing-modal .modal-dialog,
1838body.sl-marketing #pricingModal .modal-dialog.modal-dialog-centered,
1839body #pricingModal.sl-pricing-modal .modal-dialog.modal-dialog-centered {
1840  position: fixed !important;
1841  top: 50% !important;
1842  left: 50% !important;
1843  right: auto !important;
1844  bottom: auto !important;
1845  -webkit-transform: translate(-50%, -50%) scale(0.96) !important;
1846  transform: translate(-50%, -50%) scale(0.96) !important;
1847  margin: 0 !important;
1848  padding: 0 !important;
1849  max-width: 520px !important;
1850  width: calc(100vw - 32px) !important;
1851  height: auto !important;
1852  max-height: calc(100vh - 32px) !important;
1853  min-height: 0 !important;
1854  display: block !important;
1855  background: transparent !important;
1856  border: 0 !important;
1857  box-shadow: none !important;
1858  transition: -webkit-transform .25s cubic-bezier(0.4, 0, 0.2, 1), transform .25s cubic-bezier(0.4, 0, 0.2, 1) !important;
1859  z-index: 2060 !important;
1860  flex: none !important;
1861  align-self: auto !important;
1862}
1863body.sl-marketing #pricingModal.show .modal-dialog,
1864body #pricingModal.sl-pricing-modal.show .modal-dialog,
1865body.sl-marketing #pricingModal.show .modal-dialog.modal-dialog-centered,
1866body #pricingModal.sl-pricing-modal.show .modal-dialog.modal-dialog-centered {
1867  -webkit-transform: translate(-50%, -50%) scale(1) !important;
1868  transform: translate(-50%, -50%) scale(1) !important;
1869}
1870body.sl-marketing #pricingModal .modal-dialog-centered::before,
1871body #pricingModal.sl-pricing-modal .modal-dialog-centered::before {
1872  content: none !important;
1873  display: none !important;
1874  height: 0 !important;
1875}
1876body.sl-marketing #pricingModal .sl-pricing-modal-content,
1877body #pricingModal .sl-pricing-modal-content {
1878  position: relative;
1879  background: #FFFFFF !important;
1880  border-radius: 18px !important;
1881  padding: 28px 28px 28px !important;
1882  box-shadow: 0 24px 80px -16px rgba(15, 23, 42, 0.30), 0 4px 12px rgba(15, 23, 42, 0.06) !important;
1883  pointer-events: auto;
1884  width: 100% !important;
1885  max-width: none !important;
1886  border: 0 !important;
1887  transform: none !important;
1888  transition: none !important;
1889  max-height: calc(100vh - 48px);
1890  overflow-y: auto;
1891}
1892
1893/* Close button */
1894#pricingModal .sl-pricing-modal-close {
1895  position: absolute;
1896  top: 14px;
1897  right: 14px;
1898  width: 32px;
1899  height: 32px;
1900  border-radius: 50%;
1901  border: 0;
1902  background: #F1F5F9;
1903  color: #475569;
1904  display: inline-flex;
1905  align-items: center;
1906  justify-content: center;
1907  cursor: pointer;
1908  padding: 0;
1909  transition: background .15s ease;
1910}
1911#pricingModal .sl-pricing-modal-close:hover { background: #E2E8F0; color: #0F172A; }
1912#pricingModal .sl-pricing-modal-close svg { width: 18px; height: 18px; }
1913
1914/* Header */
1915#pricingModal .sl-pricing-modal-header { padding: 0 0 18px; }
1916#pricingModal .sl-pricing-modal-eyebrow {
1917  font-size: 13px;
1918  font-weight: 600;
1919  letter-spacing: 0.08em;
1920  text-transform: uppercase;
1921  color: #2D5BFF;
1922  margin: 0 0 8px;
1923}
1924#pricingModal .sl-pricing-modal-title {
1925  font-size: 28px;
1926  font-weight: 700;
1927  color: #0F172A;
1928  margin: 0 0 8px;
1929  letter-spacing: -0.02em;
1930  line-height: 1.2;
1931}
1932#pricingModal .sl-pricing-modal-sub {
1933  font-size: 15px;
1934  color: #64748B;
1935  margin: 4px 0 0;
1936  line-height: 1.45;
1937}
1938
1939/* Options */
1940#pricingModal .sl-pricing-modal-options {
1941  display: flex;
1942  flex-direction: column;
1943  gap: 10px;
1944  margin: 0;
1945}
1946
1947/* Option cards — with hover slide animation matching the join modal */
1948#pricingModal .sl-pricing-option {
1949  position: relative;
1950  display: flex;
1951  align-items: center;
1952  gap: 14px;
1953  padding: 16px 18px;
1954  border: 1px solid #E2E8F0;
1955  border-radius: 12px;
1956  text-decoration: none;
1957  color: #0F172A;
1958  background: #FFFFFF;
1959  overflow: hidden;
1960  transition: border-color .25s ease, transform .25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .25s ease;
1961  z-index: 0;
1962}
1963#pricingModal .sl-pricing-option::before {
1964  content: "";
1965  position: absolute;
1966  top: 0;
1967  left: 0;
1968  bottom: 0;
1969  width: 100%;
1970  background: linear-gradient(90deg, #F8FAFC 0%, #EFF6FF 100%);
1971  transform: translateX(-100%);
1972  transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1);
1973  z-index: -1;
1974}
1975#pricingModal .sl-pricing-option:hover {
1976  border-color: #2D5BFF;
1977  color: #0F172A;
1978  text-decoration: none;
1979  transform: translateX(4px);
1980  box-shadow: 0 4px 12px -4px rgba(45, 91, 255, 0.18);
1981}
1982#pricingModal .sl-pricing-option:hover::before { transform: translateX(0); }
1983#pricingModal .sl-pricing-option:active { transform: translateX(4px) translateY(1px); }
1984
1985#pricingModal .sl-pricing-option-icon {
1986  flex: 0 0 44px;
1987  width: 44px;
1988  height: 44px;
1989  border-radius: 10px;
1990  display: inline-flex;
1991  align-items: center;
1992  justify-content: center;
1993  transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1);
1994}
1995#pricingModal .sl-pricing-option:hover .sl-pricing-option-icon { transform: scale(1.06); }
1996#pricingModal .sl-pricing-option-icon svg { width: 22px; height: 22px; }
1997#pricingModal .sl-pricing-icon-parent  { background: #FED7AA; color: #EA580C; } /* orange */
1998#pricingModal .sl-pricing-icon-teacher { background: #DBE6FF; color: #2D5BFF; } /* blue */
1999#pricingModal .sl-pricing-icon-school  { background: #D1FAE5; color: #059669; } /* green */
2000
2001#pricingModal .sl-pricing-option-body {
2002  flex: 1 1 auto;
2003  display: flex;
2004  flex-direction: column;
2005  gap: 3px;
2006}
2007#pricingModal .sl-pricing-option-body strong {
2008  font-size: 16px;
2009  font-weight: 600;
2010  color: #0F172A;
2011  letter-spacing: -0.01em;
2012}
2013#pricingModal .sl-pricing-option-body small {
2014  font-size: 14px;
2015  color: #64748B;
2016  font-weight: 400;
2017  line-height: 1.4;
2018}
2019#pricingModal .sl-pricing-option-arrow {
2020  flex: 0 0 auto;
2021  font-size: 20px;
2022  color: #94A3B8;
2023  transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1), color .25s ease;
2024}
2025#pricingModal .sl-pricing-option:hover .sl-pricing-option-arrow {
2026  transform: translateX(6px);
2027  color: #2D5BFF;
2028}
2029</style>
2030
2031<script>
2032$('#pricingModal').on('show.bs.modal', function (e) {
2033  window.dataLayer = window.dataLayer || [];
2034  window.dataLayer.push({
2035    'event': 'Pricing Modal',
2036    'Action': 'Open',
2037    'Step': '1',
2038    'Step Name': 'Choose Audience'
2039  });
2040});
2041</script>
2041
2042<div id="joinNow" class="modal fade sl-join-modal" role="dialog" aria-hidden="true" tabindex="-1" aria-labelledby="joinNowTitle">
2043  <div class="modal-dialog modal-dialog-centered" role="document">
2044    <div class="modal-content sl-join-modal-content">
2045
2046      <button type="button" class="sl-join-modal-close" data-dismiss="modal" aria-label="Close">
2047        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
2048      </button>
2049
2050      <div class="sl-join-modal-header">
2051        <div class="sl-join-modal-eyebrow">Sign up</div>
2052        <h2 class="sl-join-modal-title" id="joinNowTitle">Join Studyladder</h2>
2053        <p class="sl-join-modal-sub">I would like to register for a:</p>
2054      </div>
2055
2056      <div class="sl-join-modal-options">
2057        <a href="https://www.studyladder.co.uk/account/parent-pricing" class="sl-join-option">
2058          <span class="sl-join-option-icon sl-join-icon-parent">
2059            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21v-2a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v2"/><circle cx="10" cy="7" r="4"/><path d="M19 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
2060          </span>
2061          <span class="sl-join-option-body">
2062            <strong>Parent account</strong>
2063            <small>For families and homeschoolers, up to 4 children at home</small>
2064          </span>
2065          <span class="sl-join-option-arrow">&rarr;</span>
2066        </a>
2067
2068        <a href="/account/teacher?t=teacher" class="sl-join-option">
2069          <span class="sl-join-option-icon sl-join-icon-teacher">
2070            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg>
2071          </span>
2072          <span class="sl-join-option-body">
2073            <strong>School teacher account</strong>
2074            <small>For one classroom or your whole school</small>
2075          </span>
2076          <span class="sl-join-option-arrow">&rarr;</span>
2077        </a>
2078      </div>
2079
2080      <div class="sl-join-modal-section-label">I would like to:</div>
2081
2082      <div class="sl-join-modal-options">
2083        <a href="/login/account?backUrl=%2Faccount%2Fupgrade" class="sl-join-option">
2084          <span class="sl-join-option-icon sl-join-icon-upgrade">
2085            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
2086          </span>
2087          <span class="sl-join-option-body">
2088            <strong>Upgrade an existing account</strong>
2089            <small>See what's included in Home Plus</small>
2090          </span>
2091          <span class="sl-join-option-arrow">&rarr;</span>
2092        </a>
2093
2094        <a href="/account/school-admin" class="sl-join-option">
2095          <span class="sl-join-option-icon sl-join-icon-school">
2096            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="20" height="12" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/><line x1="6" y1="15" x2="10" y2="15"/></svg>
2097          </span>
2098          <span class="sl-join-option-body">
2099            <strong>Pay a school administration fee</strong>
2100            <small>Pay by invoice or credit card</small>
2101          </span>
2102          <span class="sl-join-option-arrow">&rarr;</span>
2103        </a>
2104      </div>
2105
2106      <div class="sl-join-modal-footer-note">
2107        Already have an account? <a href="/login/account">Log in &rarr;</a>
2108      </div>
2109
2110    </div>
2111  </div>
2112</div>
2113
2114<style>
2115/* Force-correct modal overlay behaviour. sl-marketing.scss has its own `.modal`
2116   rules (intended as a card inside `.modal-backdrop`) that clash with Bootstrap's
2117   modal/overlay pattern. We override with very high specificity + !important. */
2118body.sl-marketing #joinNow,
2119body #joinNow.sl-join-modal {
2120  position: fixed !important;
2121  top: 0 !important;
2122  left: 0 !important;
2123  right: 0 !important;
2124  bottom: 0 !important;
2125  width: 100vw !important;
2126  height: 100vh !important;
2127  max-width: 100vw !important;
2128  max-height: 100vh !important;
2129  margin: 0 !important;
2130  padding: 0 !important;
2131  background: rgba(15, 23, 42, 0) !important;
2132  border: 0 !important;
2133  border-radius: 0 !important;
2134  box-shadow: none !important;
2135  transform: none !important;
2136  overflow-x: hidden !important;
2137  overflow-y: auto !important;
2138  outline: 0 !important;
2139  z-index: 2050 !important;
2140  /* Animation: fade overlay + dialog */
2141  display: block !important;
2142  opacity: 0;
2143  visibility: hidden;
2144  pointer-events: none;
2145  transition: opacity .22s ease, visibility 0s linear .22s, background-color .22s ease, -webkit-backdrop-filter .22s ease, backdrop-filter .22s ease !important;
2146  -webkit-backdrop-filter: blur(0px);
2147  backdrop-filter: blur(0px);
2148}
2149body.sl-marketing #joinNow.show,
2150body #joinNow.sl-join-modal.show {
2151  display: block !important;
2152  opacity: 1;
2153  visibility: visible;
2154  pointer-events: auto;
2155  background: rgba(15, 23, 42, 0.78) !important;
2156  -webkit-backdrop-filter: blur(8px) !important;
2157  backdrop-filter: blur(8px) !important;
2158  transition: opacity .22s ease, visibility 0s linear 0s, background-color .22s ease, -webkit-backdrop-filter .22s ease, backdrop-filter .22s ease !important;
2159}
2160body.sl-marketing #joinNow .modal-dialog,
2161body #joinNow.sl-join-modal .modal-dialog,
2162body.sl-marketing #joinNow .modal-dialog.modal-dialog-centered,
2163body #joinNow.sl-join-modal .modal-dialog.modal-dialog-centered {
2164  position: fixed !important;
2165  top: 50% !important;
2166  left: 50% !important;
2167  right: auto !important;
2168  bottom: auto !important;
2169  -webkit-transform: translate(-50%, -50%) scale(0.96) !important;
2170  transform: translate(-50%, -50%) scale(0.96) !important;
2171  margin: 0 !important;
2172  padding: 0 !important;
2173  max-width: 520px !important;
2174  width: calc(100vw - 32px) !important;
2175  height: auto !important;
2176  max-height: calc(100vh - 32px) !important;
2177  min-height: 0 !important;
2178  display: block !important;
2179  background: transparent !important;
2180  border: 0 !important;
2181  box-shadow: none !important;
2182  transition: -webkit-transform .25s cubic-bezier(0.4, 0, 0.2, 1), transform .25s cubic-bezier(0.4, 0, 0.2, 1) !important;
2183  z-index: 2060 !important;
2184  flex: none !important;
2185  align-self: auto !important;
2186}
2187body.sl-marketing #joinNow.show .modal-dialog,
2188body #joinNow.sl-join-modal.show .modal-dialog,
2189body.sl-marketing #joinNow.show .modal-dialog.modal-dialog-centered,
2190body #joinNow.sl-join-modal.show .modal-dialog.modal-dialog-centered {
2191  -webkit-transform: translate(-50%, -50%) scale(1) !important;
2192  transform: translate(-50%, -50%) scale(1) !important;
2193}
2194/* Bootstrap inserts a ::before pseudo for centered modals — neutralise it */
2195body.sl-marketing #joinNow .modal-dialog-centered::before,
2196body #joinNow.sl-join-modal .modal-dialog-centered::before {
2197  content: none !important;
2198  display: none !important;
2199  height: 0 !important;
2200}
2201body.sl-marketing #joinNow .sl-join-modal-content,
2202body #joinNow .sl-join-modal-content {
2203  position: relative;
2204  background: #FFFFFF !important;
2205  border-radius: 18px !important;
2206  padding: 28px 28px 22px !important;
2207  box-shadow: 0 24px 80px -16px rgba(15, 23, 42, 0.30), 0 4px 12px rgba(15, 23, 42, 0.06) !important;
2208  pointer-events: auto;
2209  width: 100% !important;
2210  max-width: none !important;
2211  border: 0 !important;
2212  transform: none !important;
2213  transition: none !important;
2214  max-height: calc(100vh - 48px);
2215  overflow-y: auto;
2216}
2217#joinNow .sl-join-modal-close {
2218  position: absolute;
2219  top: 14px;
2220  right: 14px;
2221  width: 32px;
2222  height: 32px;
2223  border-radius: 50%;
2224  border: 0;
2225  background: #F1F5F9;
2226  color: #475569;
2227  display: inline-flex;
2228  align-items: center;
2229  justify-content: center;
2230  cursor: pointer;
2231  padding: 0;
2232  transition: background .15s ease;
2233}
2234#joinNow .sl-join-modal-close:hover { background: #E2E8F0; color: #0F172A; }
2235#joinNow .sl-join-modal-close svg { width: 18px; height: 18px; }
2236#joinNow .sl-join-modal-header { padding: 0 0 14px; }
2237#joinNow .sl-join-modal-eyebrow {
2238  font-size: 13px;
2239  font-weight: 600;
2240  letter-spacing: 0.08em;
2241  text-transform: uppercase;
2242  color: #2D5BFF;
2243  margin: 0 0 8px;
2244}
2245#joinNow .sl-join-modal-title {
2246  font-size: 28px;
2247  font-weight: 700;
2248  color: #0F172A;
2249  margin: 0 0 8px;
2250  letter-spacing: -0.02em;
2251  line-height: 1.2;
2252}
2253#joinNow .sl-join-modal-sub {
2254  font-size: 15px;
2255  color: #64748B;
2256  margin: 4px 0 0;
2257}
2258#joinNow .sl-join-modal-options {
2259  display: flex;
2260  flex-direction: column;
2261  gap: 10px;
2262  margin: 0 0 12px;
2263}
2264#joinNow .sl-join-modal-section-label {
2265  font-size: 15px;
2266  color: #64748B;
2267  margin: 18px 0 10px;
2268}
2269
2270/* Option cards — with hover slide animation */
2271#joinNow .sl-join-option {
2272  position: relative;
2273  display: flex;
2274  align-items: center;
2275  gap: 14px;
2276  padding: 16px 18px;
2277  border: 1px solid #E2E8F0;
2278  border-radius: 12px;
2279  text-decoration: none;
2280  color: #0F172A;
2281  background: #FFFFFF;
2282  overflow: hidden;
2283  transition: border-color .25s ease, transform .25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .25s ease;
2284  z-index: 0;
2285}
2286/* Sliding tinted backdrop revealed on hover (left→right wipe) */
2287#joinNow .sl-join-option::before {
2288  content: "";
2289  position: absolute;
2290  top: 0;
2291  left: 0;
2292  bottom: 0;
2293  width: 100%;
2294  background: linear-gradient(90deg, #F8FAFC 0%, #EFF6FF 100%);
2295  transform: translateX(-100%);
2296  transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1);
2297  z-index: -1;
2298}
2299#joinNow .sl-join-option:hover {
2300  border-color: #2D5BFF;
2301  color: #0F172A;
2302  text-decoration: none;
2303  transform: translateX(4px);
2304  box-shadow: 0 4px 12px -4px rgba(45, 91, 255, 0.18);
2305}
2306#joinNow .sl-join-option:hover::before { transform: translateX(0); }
2307#joinNow .sl-join-option:active { transform: translateX(4px) translateY(1px); }
2308
2309#joinNow .sl-join-option-icon {
2310  flex: 0 0 44px;
2311  width: 44px;
2312  height: 44px;
2313  border-radius: 10px;
2314  display: inline-flex;
2315  align-items: center;
2316  justify-content: center;
2317  transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1);
2318}
2319#joinNow .sl-join-option:hover .sl-join-option-icon { transform: scale(1.06); }
2320#joinNow .sl-join-option-icon svg { width: 22px; height: 22px; }
2321#joinNow .sl-join-icon-parent  { background: #FED7AA; color: #EA580C; }
2322#joinNow .sl-join-icon-teacher { background: #DBE6FF; color: #2D5BFF; }
2323#joinNow .sl-join-icon-upgrade { background: #D1FAE5; color: #059669; }
2324#joinNow .sl-join-icon-school  { background: #E9D5FF; color: #7C3AED; }
2325#joinNow .sl-join-option-body {
2326  flex: 1 1 auto;
2327  display: flex;
2328  flex-direction: column;
2329  gap: 3px;
2330}
2331#joinNow .sl-join-option-body strong {
2332  font-size: 16px;
2333  font-weight: 600;
2334  color: #0F172A;
2335  letter-spacing: -0.01em;
2336}
2337#joinNow .sl-join-option-body small {
2338  font-size: 14px;
2339  color: #64748B;
2340  font-weight: 400;
2341  line-height: 1.4;
2342}
2343#joinNow .sl-join-option-arrow {
2344  flex: 0 0 auto;
2345  font-size: 20px;
2346  color: #94A3B8;
2347  transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1), color .25s ease;
2348}
2349#joinNow .sl-join-option:hover .sl-join-option-arrow {
2350  transform: translateX(6px);
2351  color: #2D5BFF;
2352}
2353#joinNow .sl-join-modal-footer-note {
2354  margin: 16px 0 0;
2355  padding-top: 16px;
2356  border-top: 1px solid #E2E8F0;
2357  text-align: center;
2358  font-size: 15px;
2359  color: #64748B;
2360}
2361#joinNow .sl-join-modal-footer-note a {
2362  color: #2D5BFF;
2363  font-weight: 600;
2364  text-decoration: none;
2365}
2366#joinNow .sl-join-modal-footer-note a:hover { text-decoration: underline; }
2367</style>
2368
2369<script>
2370$('#joinNow').on('show.bs.modal', function (e) {
2371  window.dataLayer = window.dataLayer || [];
2372  window.dataLayer.push({
2373    'event': 'User Account',
2374    'Action': 'Creation',
2375    'Step': '1',
2376    'Step Name': 'Choose Account'
2377  });
2378});
2379
2380</script>
2380
2381<div id="publicMenuModal" class="modal site-menu" tabindex="-1" role="dialog">
2382 <div class="modal-dialog modal-xl" role="document">
2383  <div class="modal-content">
2384   <div class="modal-header">
2385
2386    <h4 class="modal-title">Menu</h4>
2387    <button aria-hidden="true" data-dismiss="modal" class="close" type="button"><i class="far fa-times"></i></button>
2388
2389   </div>
2390   <div class="modal-body">
2391    <div class="row text-dark">
2392
2393     <div class="col-md">
2394           <h3 style="color:#e3813b;border-color:#e3813b">
2395       <i class="fas fa-book float-right"></i>
2396       Resources
2397      </h3>
2398
2399      <ul class="list-group list-group-flush">
2400       <li class="list-group-item"><a href="/games">Browse All / Search</a></li>
2401       <li class="list-group-item"><a href="/games/mathematics/au-year-three/mathematics-addition-430">Mathematics</a></li>
2402       <li class="list-group-item"><a href="/games/literacy/au-year-three/english-spelling-and-vocabulary-185">Literacy</a></li>
2403       <li class="list-group-item"><a href="/games/science/au-year-three/science-biology-764">Science</a></li>
2404       <li class="list-group-item"><a href="/games/visual-arts-music/au-mixed-years/art-paint-and-draw-962">Visual Arts and Music</a></li>
2405       <li class="list-group-item"><a href="/games/health-safety-citizenship/au-mixed-years/health-safety-and-citizenship-citizenship-1547">Health, Safety &amp; Citizenship</a></li>
2406       <li class="list-group-item"><a href="/games/language-culture/au-mixed-years/language-and-culture-languages-1022">Language &amp; Culture</a></li>
2407       <li class="list-group-item"><a href="/games/information-communication-technology/au-mixed-years/information-communication-and-technology-social-and-ethical-practices-with-ict-1056">Information Communication Technology</a></li>
2408       <li class="list-group-item"><a href="/games/studysheets/au-year-three/theme-based-learning-rocks-erosion-and-changing-landscapes-1675">Theme Based Learning</a></li>
2409             </ul>
2410     </div>
2411     <div class="col-md">
2412           <h3 style="color:#87b53e;border-color:#87b53e">
2413       <i class="fas fa-star float-right"></i>
2414       My Account
2415      </h3>
2416
2417      <ul class="list-group list-group-flush">
2418       <li class="list-group-item"><a href="#" data-toggle="modal" data-target="#joinNow" onclick="$('#publicMenuModal').modal('hide')">Join now</a></li>
2419       <li class="list-group-item"><a href="/login/account">Log in</a></li>
2420       <li class="list-group-item"><a href="/login/forgot">Forgot password</a></li>
2421       <li class="list-group-item"><a href="/about/pricing">Pricing</a></li>
2422      </ul>
2423     </div>
2424     <div class="col-md">
2425           <h3 style="color:#9767b6;border-color:#9767b6">
2426       <i class="fas fa-star float-right"></i>
2427       Other
2428      </h3>
2429
2430      <ul class="list-group list-group-flush">
2431       <li class="list-group-item"><a href="/about/contact-us">Contact Us</a></li>
2432       <li class="list-group-item"><a href="/help/faq">Help / FAQ</a></li>
2433       <li class="list-group-item"><a href="/about/about-us">About us</a></li>
2434       <li class="list-group-item"><a href="/about/privacy">Privacy</a></li>
2435       <li class="list-group-item"><a href="/about/disclaimer">Disclaimer</a></li>
2436       <li class="list-group-item"><a href="/about/terms">Terms</a></li>
2437      </ul>
2438
2439     </div>
2440
2441    </div><!-- .row -->
2442   </div><!-- .modal-body -->
2443  </div><!-- .modal-content -->
2444 </div><!-- .modal-dialog -->
2445</div><!-- .modal -->
2446
2447</body>
2448
2449<style>
2450	
2451    #SLWorldTeaserModal .modal-dialog, #HomeTutorVideoModal .modal-dialog {max-width: 1200px;}
2452    #SLWorldTeaserModal .modal-body, #HomeTutorVideoModal .modal-body {padding-left: 3rem;padding-right: 3rem;}   
2453    #SLWorldTeaserModal .modal-header, #HomeTutorVideoModal .modal-header {height:1px; border:none;}
2454	
2455	@media only screen and (max-width: 767px) {
2456	    #SLWorldTeaserModal .modal-body, #HomeTutorVideoModal .modal-body {padding-left: 1rem;padding-right: 1rem;}   
2457	    #SLWorldTeaserModal .modal-header, #HomeTutorVideoModal .modal-header {height:1px; border:none;}
2458		#SLWorldTeaserModal .modal-header, #HomeTutorVideoModal .modal-header {height: 20px;padding-top:30px;} 
2459	    .site-menu .modal-header .close {
2460		    margin-top:-45px!important;
2461		   }
2462	}	  
2463	
2464</style>
2465
2466
2467  
2467<script type="text/javascript">
2468
2469
2470    $( document ).ready(function(){
2471	    
2472		$('#SLWorldTeaserModal').on('hidden.bs.modal', function () {
2473		    document.getElementById('slWorldVideo').pause();
2474		})
2475
2476		$('#HomeTutorVideoModal').on('hidden.bs.modal', function () {
2477		    document.getElementById('htVideo').pause();
2478		})
2479		
2480		$('#SLWorldTeaserModal').on('shown.bs.modal', function () {
2481		   // document.getElementById('slWorldVideo').src();
2482		   videoString = $('#slWorldVideo  source').data("videourl");
2483		    $('#slWorldVideo  source').attr('src', videoString);
2484		    $("#slWorldVideo ")[0].load();
2485		    $("#slWorldVideo ")[0].play();
2486		})
2487
2488		$('#HomeTutorVideoModal').on('shown.bs.modal', function () {
2489		   // document.getElementById('htVideo').pause();
2490		   videoString = $('#htVideo  source').data("videourl");
2491		    $('#htVideo  source').attr('src', videoString);
2492		    $("#htVideo ")[0].load();
2493		     $("#htVideo ")[0].play();
2494		})
2495		
2496    });    
2497    
2498    //  document.getElementById('videoId').play();
2499    //jQuery("#video").trigger('pause');
2500    
2501    
2502  </script>
2502
2503
2504  <div class="modal fade newPopUpDesign site-menu" id="SLWorldTeaserModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
2505    <div class="modal-dialog modalBox">
2506      <div class="modal-content">
2507        <div class="modal-header " style="background-color:#000!important;">
2508          <h4 class="modal-title text-center w-100 d-none" style="background-color:#000;text-shadow: none;color:#fff">Studyladder <span style="color:#3fa9f5;">World</span> Teaser<span class="sprite iconCorner3"></span></h4>
2509          <button aria-hidden="true" data-dismiss="modal" class="close" type="button"><i class="fa fa-times"></i></button>
2510        </div>
2511        <div class="modal-body pt-4" style="background-color:#000;">
2512
2513		  <video id="slWorldVideo" class="w-100 " style="border:1px solid #ccc; " controls="" poster="/images/world/sl-world-vid-thumb-1.png">  <source src="" data-videourl="https://static.studyladder.co.uk/cdn/site/3a/2161260c8cd1.mp4" type="video/mp4"></video>
2514        </div>
2515      </div>
2516    </div>
2517  </div>
2518  
2519     <div class="modal fade newPopUpDesign site-menu" id="HomeTutorVideoModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
2520    <div class="modal-dialog modalBox">
2521      <div class="modal-content">
2522        <div class="modal-header " style="background-color:#000!important;">
2523          <h4 class="modal-title text-center w-100 d-none" style="background-color:#000;text-shadow: none;color:#fff">Studyladder Home Tutor Trailer<span class="sprite iconCorner3"></span></h4>
2524          <button aria-hidden="true" data-dismiss="modal" class="close" type="button"><i class="fa fa-times"></i></button>
2525        </div>
2526        <div class="modal-body pt-4" style="background-color:#000;">
2527		  <video id="htVideo" class="w-100 " style="border:1px solid #ccc; " controls="" poster="/images/home-tutor/ht-vid-thumb-1.png">  <source src="" data-videourl="https://static.studyladder.co.uk/cdn/site/92/e94af3cc87a8.mp4" type="video/mp4"></video>
2528		 
2529        </div>
2530      </div>
2531    </div>
2532  </div>   <!DOCTYPE html>
2533<html lang="en">
2534<head>
2535    <meta charset="UTF-8">
2536    <meta name="viewport" content="width=device-width, initial-scale=1.0">
2537    <title>Cookie Consent</title>
2538    <style>
2539        #cookie-banner {
2540            position: fixed;
2541            bottom: 20px;
2542            right: 20px;
2543            width: 320px;
2544            background: #212529;
2545            color: #f8f9fa;
2546            padding: 20px;
2547            border-radius: 8px;
2548            box-shadow: 0 0px 12px -1px white;
2549            z-index: 9999;
2550            font-family: 'Quicksand', 'Helvetica Neue', sans-serif;
2551            display: none;
2552            gap: 15px;
2553            align-items: flex-start;
2554        }
2555
2556        #cookie-banner-icon,
2557        #cookie-preferences-icon {
2558            flex-shrink: 0;
2559            filter: drop-shadow(0 0 6px rgba(255,255,255,0.5));
2560        }
2561
2562        #cookie-banner-icon img,
2563        #cookie-preferences-icon img {
2564            width: 40px;
2565            height: 40px;
2566        }
2567
2568        #cookie-banner-content {
2569            flex: 1;
2570        }
2571
2572        #cookie-preferences {
2573            position: fixed;
2574            bottom: 20px;
2575            right: 20px;
2576            width: 320px;
2577            background: #212529;
2578            color: #f8f9fa;
2579            padding: 20px;
2580            border-radius: 8px;
2581            box-shadow: 0 0px 12px -1px white;
2582            z-index: 9999;
2583            font-family: 'Quicksand', 'Helvetica Neue', sans-serif;
2584            display: none;
2585            gap: 15px;
2586        }
2587
2588        #cookie-preferences-content {
2589            flex: 1;
2590        }
2591
2592        #cookie-banner-content p,
2593        #cookie-preferences-content p {
2594            margin-bottom: 1em;
2595            line-height: 1.4em;
2596        }
2597
2598        #cookie-banner-content a {
2599            color: #ffc107;
2600            text-decoration: underline;
2601        }
2602
2603        .cookie-buttons {
2604            display: flex;
2605            flex-wrap: wrap;
2606            gap: 8px;
2607        }
2608
2609        .cookie-buttons button,
2610        .save-btn {
2611            padding: 8px 12px;
2612            border: none;
2613            border-radius: 6px;
2614            cursor: pointer;
2615            font-weight: 600;
2616            font-family: 'Quicksand', sans-serif;
2617            letter-spacing: 0.5px;
2618        }
2619
2620        .accept-btn { background: #198754; color: #fff; }
2621        .reject-btn { background: #dc3545; color: #fff; }
2622        .customize-btn { background: #ffc107; color: #000; }
2623        .save-btn { background: #0d6efd; color: #fff; width: 100%; margin-top: 10px; }
2624
2625        .toggle-wrapper {
2626            display: flex;
2627            justify-content: space-between;
2628            align-items: center;
2629            margin-bottom: 10px;
2630        }
2631
2632        .toggle-switch {
2633            position: relative;
2634            display: inline-block;
2635            width: 36px;
2636            height: 20px;
2637        }
2638
2639        .toggle-switch input {
2640            opacity: 0;
2641            width: 0;
2642            height: 0;
2643        }
2644
2645        .slider {
2646            position: absolute;
2647            cursor: pointer;
2648            top: 0;
2649            left: 0;
2650            right: 0;
2651            bottom: 0;
2652            background-color: #ccc;
2653            transition: 0.2s;
2654            border-radius: 34px;
2655        }
2656
2657        .slider:before {
2658            position: absolute;
2659            content: "";
2660            height: 14px;
2661            width: 14px;
2662            left: 3px;
2663            bottom: 3px;
2664            background-color: white;
2665            transition: 0.2s;
2666            border-radius: 50%;
2667        }
2668
2669        .toggle-switch input:checked + .slider {
2670            background-color: #0d6efd;
2671        }
2672
2673        .toggle-switch input:checked + .slider:before {
2674            transform: translateX(16px);
2675        }
2676    </style>
2677    
2677<script>
2678        window.dataLayer = window.dataLayer || [];
2679        function gtag() { dataLayer.push(arguments); }
2680
2681        const siteCountryId = "GB";
2682        const unrestricted = ["AU", "NZ"].includes(siteCountryId);
2683        let isStudent = false;
2684
2685        if (unrestricted) {
2686            localStorage.setItem('cookie_consent', JSON.stringify({analytics: true, marketing: true}));
2687        } else if (isStudent) {
2688            localStorage.setItem('cookie_consent', JSON.stringify({analytics: false, marketing: false}));
2689        } else {
2690            gtag('consent', 'default', {
2691                'ad_storage': 'denied',
2692                'analytics_storage': 'denied',
2693                'ad_user_data': 'denied',
2694                'ad_personalization': 'denied',
2695                'functionality_storage': 'granted',
2696                'security_storage': 'granted'
2697            });
2698        }
2699
2700        document.addEventListener('DOMContentLoaded', () => {
2701            const prefs = JSON.parse(localStorage.getItem('cookie_consent') || '{}');
2702
2703            if (unrestricted) {
2704                // No banner, full access
2705                gtag('consent', 'update', {
2706                    'ad_storage': 'granted',
2707                    'ad_user_data': 'granted',
2708                    'ad_personalization': 'granted',
2709                    'analytics_storage': 'granted',
2710                    'functionality_storage': 'granted',
2711                    'security_storage': 'granted'
2712                });
2713                return;
2714            }
2715
2716            if (!('analytics' in prefs) && !('marketing' in prefs)) {
2717                document.getElementById('cookie-banner').style.display = 'block';
2718                document.getElementById('cookie-preferences').style.display = 'none';
2719            } else {
2720                applyConsent(prefs);
2721            }
2722        });
2723
2724        function applyConsent(prefs) {
2725            gtag('consent', 'update', {
2726                'ad_storage': prefs.marketing ? 'granted' : 'denied',
2727                'ad_user_data': prefs.marketing ? 'granted' : 'denied',
2728                'ad_personalization': prefs.marketing ? 'granted' : 'denied',
2729                'analytics_storage': prefs.analytics ? 'granted' : 'denied',
2730                'functionality_storage': 'granted',
2731                'security_storage': 'granted'
2732            });
2733        }
2734    </script>
2734
2735</head>
2736<body>
2737<!-- body content remains unchanged -->
2738
2739<div id="cookie-banner">
2740    <div class="d-flex align-items-start" style="gap:15px">
2741        <div id="cookie-banner-icon">
2742            <img src="https://static.studyladder.co.uk/cdn/site/71/25a349e3aa67.png" alt="Cookie Icon">
2743        </div>
2744        <div id="cookie-banner-content">
2745            <p>We use cookies to help tailor your educational experience. <a href="/about/privacy">Learn more</a></p>
2746        </div>
2747    </div>
2748
2749    <div class="cookie-buttons mt-3">
2750        <button class="accept-btn" onclick="acceptAllCookies()">Accept</button>
2751        <button class="reject-btn" onclick="rejectAllCookies()">Reject</button>
2752        <button class="customize-btn" onclick="openPreferences()">Customize</button>
2753    </div>
2754</div>
2755
2756<div id="cookie-preferences">
2757    <div id="cookie-preferences-icon">
2758        <img src="https://static.studyladder.co.uk/cdn/site/71/25a349e3aa67.png" alt="Cookie Icon">
2759    </div>
2760    <div id="cookie-preferences-content">
2761        <p>Cookie Preferences:</p>
2762        <div class="toggle-wrapper">
2763            <span>Essential (always on)</span>
2764            <div class="toggle-switch"><label><input type="checkbox" disabled checked><span class="slider"></span></label></div>
2765        </div>
2766        <div class="toggle-wrapper">
2767            <span>Analytics</span>
2768            <div class="toggle-switch"><label><input type="checkbox" id="toggle-analytics" checked><span class="slider"></span></label></div>
2769        </div>
2770        <div class="toggle-wrapper">
2771            <span>Marketing</span>
2772            <div class="toggle-switch"><label><input type="checkbox" id="toggle-marketing" checked><span class="slider"></span></label></div>
2773        </div>
2774        <button class="save-btn" onclick="savePreferences()">Save Preferences</button>
2775    </div>
2776</div>
2777
2778<script>
2779    function saveConsent(prefs) {
2780        localStorage.setItem('cookie_consent', JSON.stringify(prefs));
2781        applyConsent(prefs);
2782    }
2783
2784    function getConsent() {
2785        return JSON.parse(localStorage.getItem('cookie_consent') || '{}');
2786    }
2787
2788    function applyConsent(prefs) {
2789        if (prefs.analytics) {
2790            loadGoogleAnalytics();
2791        }
2792
2793        gtag('consent', 'update', {
2794            'ad_storage': prefs.marketing ? 'granted' : 'denied',
2795            'ad_user_data': prefs.marketing ? 'granted' : 'denied',
2796            'ad_personalization': prefs.marketing ? 'granted' : 'denied',
2797            'analytics_storage': prefs.analytics ? 'granted' : 'denied',
2798            'functionality_storage': 'granted',
2799            'security_storage': 'granted'
2800        });
2801    }
2802
2803    function loadGoogleAnalytics() {
2804        if (!window.gtag){
2805            window.dataLayer = window.dataLayer || [];
2806            function gtag() { dataLayer.push(arguments); }
2807        }
2808
2809    }
2810
2811    function acceptAllCookies() {
2812        saveConsent({ analytics: true, marketing: true });
2813        document.getElementById('cookie-banner').style.display = 'none';
2814    }
2815
2816    function rejectAllCookies() {
2817        saveConsent({ analytics: false, marketing: false });
2818        document.getElementById('cookie-banner').style.display = 'none';
2819    }
2820
2821    function openPreferences() {
2822        document.getElementById('cookie-banner').style.display = 'none';
2823        document.getElementById('cookie-preferences').style.display = 'flex';
2824    }
2825
2826    function savePreferences() {
2827        const prefs = {
2828            analytics: document.getElementById('toggle-analytics').checked,
2829            marketing: document.getElementById('toggle-marketing').checked
2830        };
2831        saveConsent(prefs);
2832        document.getElementById('cookie-preferences').style.display = 'none';
2833    }
2834
2835    document.addEventListener('DOMContentLoaded', () => {
2836        const prefs = getConsent();
2837        if (!('analytics' in prefs) && !('marketing' in prefs)) {
2838            document.getElementById('cookie-banner').style.display = 'block';
2839            document.getElementById('cookie-preferences').style.display = 'none';
2840        } else {
2841            document.getElementById('cookie-banner').style.display = 'none';
2842            document.getElementById('cookie-preferences').style.display = 'none';
2843            applyConsent(prefs);
2844        }
2845    });
2846</script>
2846
2847</body>
2848</html>
2849
2850  
2851  <!-- SL marketing reveal-on-scroll — only runs when <body> has .sl-marketing class -->
2852  
2852<script>
2853    (function () {
2854      if (!document.body.classList.contains('sl-marketing')) return;
2855      if (!('IntersectionObserver' in window)) return;
2856
2857      // Selectors that fade-up when scrolled into view
2858      var fadeUp = [
2859        '.section-eyebrow', '.section-title', '.section-sub',
2860        '.video-frame', '.year-progression', '.stats-note', '.tour-cta-row',
2861        '.curr-header', '.safety-header', '.safety-cta',
2862        '.faq-intro', '.final-cta-inner > *'
2863      ].join(',');
2864
2865      // Stagger groups — same animation but delayed in sequence for grids
2866      var staggerGroups = [
2867        '.audience-grid > .audience-card',
2868        '.subjects-grid > .subject-card',
2869        '.why-grid > .why-item',
2870        '.stats-grid > .stat-card',
2871        '.test-grid > .test-card',
2872        '.pricing-grid > .price-card',
2873        '.safety-grid > .safety-item',
2874        '.faq-list > .faq-item',
2875        '.video-chapters > .chapter',
2876        '.platform-grid > .feature-tile',
2877        '.story-stat-stack > .story-stat',
2878        '.test-grid > .test-card',
2879        '.results-list > li'
2880      ];
2881
2882      document.querySelectorAll(fadeUp).forEach(function (el) {
2883        el.classList.add('reveal');
2884      });
2885
2886      staggerGroups.forEach(function (sel) {
2887        document.querySelectorAll(sel).forEach(function (el, idx) {
2888          el.classList.add('reveal');
2889          el.style.animationDelay = Math.min(idx * 0.05, 0.3) + 's';
2890        });
2891      });
2892
2893      var obs = new IntersectionObserver(function (entries) {
2894        entries.forEach(function (entry) {
2895          if (entry.isIntersecting) {
2896            entry.target.classList.add('is-visible');
2897            obs.unobserve(entry.target);
2898          }
2899        });
2900      }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
2901
2902      document.querySelectorAll('.reveal').forEach(function (el) {
2903        obs.observe(el);
2904      });
2905
2906      // ---- Video player: swap poster for YouTube iframe on click ----
2907      document.querySelectorAll('.video-player[data-video-id]').forEach(function (player) {
2908        var btn = player.querySelector('.video-play-btn');
2909        if (!btn) return;
2910        btn.addEventListener('click', function (e) {
2911          e.preventDefault();
2912          var id = player.getAttribute('data-video-id');
2913          var label = player.getAttribute('data-video-label') || '';
2914          var frame = document.createElement('iframe');
2915          frame.src = 'https://www.youtube-nocookie.com/embed/' + id + '?autoplay=1&rel=0';
2916          frame.title = label;
2917          frame.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';
2918          frame.setAttribute('allowfullscreen', '');
2919          frame.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;border:0;border-radius:inherit;';
2920          player.appendChild(frame);
2921          // Hide the poster and overlay so iframe shows through
2922          player.querySelectorAll('.video-poster-img, .video-poster-overlay, .video-play-btn, .video-meta').forEach(function (el) {
2923            el.style.display = 'none';
2924          });
2925        });
2926      });
2927
2928      // ---- Sticky CTA — fades in after the trigger element scrolls past ----
2929      // Bar reads data-sticky-trigger="<elementId>" off itself. If omitted,
2930      // defaults to #pricing. The bar gets .visible once the trigger has
2931      // fully scrolled above the viewport.
2932      var stickyBar = document.getElementById('stickyCta');
2933      if (stickyBar) {
2934        var triggerId = stickyBar.getAttribute('data-sticky-trigger') || 'pricing';
2935        var trigger = document.getElementById(triggerId);
2936        if (trigger) {
2937          var stickyObs = new IntersectionObserver(function (entries) {
2938            entries.forEach(function (entry) {
2939              var aboveViewport = !entry.isIntersecting && entry.boundingClientRect.bottom < 0;
2940              stickyBar.classList.toggle('visible', aboveViewport);
2941              stickyBar.setAttribute('aria-hidden', aboveViewport ? 'false' : 'true');
2942            });
2943          }, { threshold: 0, rootMargin: '0px' });
2944          stickyObs.observe(trigger);
2945        }
2946      }
2947
2948      // ---- Home Plus benefits tabs (parent / parent-pricing / etc.) ----
2949      document.querySelectorAll('.benefits-tabs').forEach(function (tablist) {
2950        var tabs = tablist.querySelectorAll('.benefits-tab');
2951        tabs.forEach(function (tab) {
2952          tab.addEventListener('click', function () {
2953            var key = tab.getAttribute('data-tab');
2954            tabs.forEach(function (t) {
2955              var isActive = t === tab;
2956              t.classList.toggle('active', isActive);
2957              t.setAttribute('aria-selected', isActive ? 'true' : 'false');
2958            });
2959            document.querySelectorAll('.benefits-panel').forEach(function (p) {
2960              var isMatch = p.getAttribute('id') === 'benefit-panel-' + key;
2961              p.classList.toggle('active', isMatch);
2962              if (isMatch) {
2963                p.removeAttribute('hidden');
2964              } else {
2965                p.setAttribute('hidden', '');
2966              }
2967            });
2968          });
2969        });
2970      });
2971    })();
2972  </script>
2972
2973
2974  <!-- HEALTH CHECK 0049835 -->
2975</body>
2976</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.