PageSourceSearch

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

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