PageSourceSearch

https://sqetrack.co.uk/

html sqetrack.co.uk collected 2026-10-02 02:09:32 UTC 117,492 bytes, 2,817 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en-GB">
3<head>
4  <meta charset="UTF-8" />
5  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6  <meta name="theme-color" content="#faf8f3">
7  <title>SQETrack. SQE1 revision that doesn't expire.</title>
8  <meta name="description" content="4,000+ practice drills covering every FLK1 and FLK2 topic. No subscription, just a single £19 payment." />
9  <meta property="og:title" content="SQETrack. SQE1 revision that doesn't expire." />
10  <meta property="og:description" content="4,000+ practice drills covering every FLK1 and FLK2 topic. No subscription, just a single £19 payment." />
11  <meta property="og:url" content="https://sqetrack.co.uk" />
12  <meta property="og:type" content="website" />
13  <meta name="twitter:card" content="summary" />
14  <meta name="twitter:title" content="SQETrack. SQE1 revision that doesn't expire." />
15  <meta name="twitter:description" content="4,000+ practice drills covering every FLK1 and FLK2 topic. No subscription, just a single £19 payment." />
16  <link rel="canonical" href="https://sqetrack.co.uk/" />
17  <link rel="icon" type="image/svg+xml" href="/brand/logos/sqetrack-favicon.svg" />
18  <link rel="preconnect" href="https://fonts.googleapis.com" />
19  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
20  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Caveat:wght@600;700&display=swap" rel="stylesheet" />
21  
21<script data-goatcounter="https://sqetrack.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
21
22  
22<script type="application/ld+json">
23  {
24    "@context": "https://schema.org",
25    "@type": "Organization",
26    "name": "SQETrack",
27    "url": "https://sqetrack.co.uk",
28    "logo": "https://sqetrack.co.uk/brand/logos/sqetrack-favicon.svg",
29    "email": "[email protected]"
30  }
31  </script>
31
32  <style>
33    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
34
35    :root {
36      /* ── Blue palette (design system §3b) ───────── */
37      --blue: #3B82F6;
38      --blue-hover: #2563EB;
39      --blue-light: #DBEAFE;
40      --blue-lightest: #EFF6FF;
41      --navy: #0f172a;
42
43      /* ── Warm surface palette — page-scoped exception per design system §2c */
44      --cream: #faf8f3;
45      --cream-2: #f5f0e8;
46      --warm-border: #e8e2d4;
47      --warm-border-strong: #cfc7b5;
48
49      /* ── Text (design system §3c) ──────────────── */
50      --text: #1a1a1a;
51      --text-2: #4a4a4a;
52      --text-muted: #6b6b68;
53      --text-hint: #737370;
54
55      /* ── Editorial accent (design system §3f) ──── */
56      --accent-red: #E65F5C;
57      --accent-red-deep: #c04543;
58      --accent-red-soft: #fef2f2;
59
60      /* ── Signal palette (design system §3d) ────── */
61      --signal-success: #16a34a;
62      --signal-success-soft: #dcfce7;
63      --signal-success-text: #15803d;
64      --signal-success-text-deep: #14532d;
65      --signal-success-border: #86efac;
66      --signal-error: #dc2626;
67      --signal-error-soft: #fee2e2;
68      --signal-error-text: #b91c1c;
69      --signal-error-border: #fca5a5;
70      --signal-warning-soft: #fff7ed;
71      --signal-warning-text: #9a3412;
72
73      /* ── Postit yellow (decorative, page-scoped) ─ */
74      --postit: #fef3c7;
75      --postit-border: #fde68a;
76      --postit-deep: #fcd34d;
77      --postit-text: #92400e;
78      --postit-text-deep: #451a03;
79
80      /* ── Spacing scale (design system §5) ──────── */
81      --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
82      --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
83      --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
84
85      /* ── Radii (design system §6) ──────────────── */
86      --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
87
88      /* ── Motion (design system §10) ────────────── */
89      --ease: cubic-bezier(0.4, 0, 0.2, 1);
90
91      /* ── Type ──────────────────────────────────── */
92      --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
93      --font-hand: 'Caveat', cursive;
94    }
95
96    html, body { margin: 0; padding: 0; }
97    html { scroll-behavior: smooth; }
98    body {
99      font-family: var(--font);
100      background: var(--cream);
101      color: var(--text);
102      font-size: 16px;
103      line-height: 1.55;
104      -webkit-font-smoothing: antialiased;
105      overflow-x: hidden;
106    }
107    button { font-family: inherit; cursor: pointer; border: 0; background: none; }
108    a { color: inherit; text-decoration: none; }
109    a:hover { text-decoration: underline; }
110    svg { display: block; }
111    main { display: block; }
112
113    .container { max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-8); }
114    @media (max-width: 768px) { .container { padding: 0 var(--sp-5); } }
115
116    /* ─── Announcement bar ─────────────────────── */
117    .announce-bar {
118      display: none; /* JS sets to flex once countdown is computed */
119      background: var(--navy);
120      color: #ffffff;
121      height: 40px;
122      align-items: center;
123      font-size: 0.875rem;
124      font-weight: 500;
125      line-height: 1.4;
126    }
127    .announce-bar-inner {
128      width: 100%; max-width: 1280px;
129      margin: 0 auto; padding: 0 var(--sp-8);
130      display: flex; align-items: center; justify-content: center;
131      position: relative;
132      gap: var(--sp-5);
133    }
134    .announce-bar-text { text-align: center; }
135    .announce-bar-text strong { color: var(--blue-light); font-weight: 700; }
136    .announce-bar-text a {
137      color: #ffffff;
138      font-weight: 700;
139      margin-left: 0.4em;
140      border-bottom: 1px solid rgba(255,255,255,0.35);
141      padding-bottom: 1px;
142      transition: border-color .15s var(--ease);
143    }
144    .announce-bar-text a:hover {
145      border-bottom-color: #ffffff;
146      text-decoration: none;
147    }
148    .announce-bar-dismiss {
149      position: absolute; right: var(--sp-8); top: 50%;
150      transform: translateY(-50%);
151      color: rgba(255,255,255,0.7);
152      font-size: 1.1rem;
153      padding: 4px 8px;
154      background: none; border: none;
155      cursor: pointer;
156      transition: color .15s var(--ease);
157    }
158    .announce-bar-dismiss:hover { color: #ffffff; }
159    @media (max-width: 640px) {
160      .announce-bar { font-size: 13px; height: 36px; }
161      .announce-bar-inner { padding: 0 var(--sp-12) 0 var(--sp-5); }
162      .announce-bar-dismiss { right: var(--sp-3); }
163    }
164
165    /* ─── Nav ──────────────────────────────────── */
166    .nav {
167      background: var(--blue);
168      height: 64px;
169      display: flex; align-items: center;
170      position: sticky; top: 0; z-index: 50;
171      transition: box-shadow .15s var(--ease);
172    }
173    .nav.scrolled { box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
174    .nav-inner {
175      width: 100%; max-width: 1280px;
176      margin: 0 auto; padding: 0 var(--sp-8);
177      display: flex; align-items: center; gap: var(--sp-8);
178    }
179    .nav-logo {
180      display: inline-flex; align-items: center; gap: 7px;
181      color: #ffffff; text-decoration: none;
182      font-size: 1.1rem; letter-spacing: -0.5px;
183    }
184    .nav-logo-text { display: inline-flex; align-items: baseline; margin-top: 3px; }
185    .nav-logo-sqe { font-weight: 700; color: #ffffff; }
186    .nav-logo-track { font-weight: 500; color: rgba(255,255,255,0.75); }
187    .nav-links { display: flex; gap: var(--sp-6); align-items: center; flex: 1; }
188    .nav-dropdown { position: relative; }
189    .nav-dropdown-trigger {
190      color: rgba(255,255,255,0.88);
191      font-weight: 500; font-size: 0.95rem;
192      display: inline-flex; align-items: center; gap: 0.3em;
193      padding: 6px 0;
194      cursor: pointer;
195      user-select: none;
196      transition: color .15s var(--ease);
197    }
198    .nav-dropdown-trigger:hover { color: #ffffff; }
199    .nav-dropdown-trigger svg { transition: transform .2s var(--ease); }
200    .nav-dropdown:hover .nav-dropdown-trigger svg,
201    .nav-dropdown:focus-within .nav-dropdown-trigger svg { transform: rotate(180deg); }
202    .nav-dropdown-menu {
203      display: none; position: absolute; top: 100%; left: 50%; margin-top: 8px;
204      transform: translateX(-50%);
205      background: #ffffff;
206      border: 1px solid var(--warm-border);
207      border-radius: var(--r-md);
208      padding: 6px;
209      min-width: 230px;
210      box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
211      z-index: 20;
212    }
213    .nav-dropdown-menu::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
214    .nav-dropdown:hover .nav-dropdown-menu,
215    .nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
216    .nav-dropdown-menu a {
217      display: block; padding: 9px 12px;
218      font-size: 0.85rem; font-weight: 500;
219      color: var(--text-2);
220      border-radius: var(--r-sm);
221      transition: background .1s var(--ease);
222    }
223    .nav-dropdown-menu a:hover {
224      background: var(--cream-2);
225      color: var(--navy);
226      text-decoration: none;
227    }
228    .nav-right { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }
229    .nav-login {
230      color: #ffffff;
231      font-weight: 600; font-size: 0.9rem;
232      padding: 0.55em 1.2em;
233      border: 1.5px solid rgba(255,255,255,0.5);
234      border-radius: var(--r-pill);
235      transition: border-color .15s var(--ease), background .15s var(--ease);
236    }
237    .nav-login:hover {
238      border-color: rgba(255,255,255,0.85);
239      background: rgba(255,255,255,0.08);
240      text-decoration: none;
241    }
242    .nav-cta {
243      background: #ffffff;
244      color: var(--blue);
245      font-weight: 700; font-size: 0.9rem;
246      padding: 0.6em 1.25em;
247      border-radius: var(--r-pill);
248      cursor: pointer;
249      transition: background .15s var(--ease);
250    }
251    .nav-cta:hover { background: var(--blue-lightest); text-decoration: none; }
252    .nav-hamburger {
253      display: none;
254      color: #ffffff;
255      padding: 6px;
256    }
257    @media (max-width: 1024px) {
258      .nav-inner { padding: 0 var(--sp-5); gap: var(--sp-4); }
259      .nav-links { display: none; }
260      .nav-login { display: none; }
261      .nav-hamburger { display: inline-flex; }
262    }
263    @media (max-width: 640px) { .nav { height: 56px; } }
264
265    /* ─── Mobile menu drawer ───────────────────── */
266    .mobile-menu {
267      display: none; position: fixed;
268      top: 64px; left: 0; right: 0; bottom: 0;
269      background: #ffffff;
270      z-index: 9;
271      padding: var(--sp-5);
272      flex-direction: column;
273      overflow-y: auto;
274      border-top: 1px solid var(--warm-border);
275      box-shadow: 0 12px 32px rgba(0,0,0,0.08);
276    }
277    .mobile-menu.open { display: flex; }
278    .mm-label {
279      font-size: 0.75rem; font-weight: 600;
280      text-transform: uppercase; letter-spacing: 0.12em;
281      color: var(--text-hint);
282      margin: var(--sp-5) 0 var(--sp-2);
283    }
284    .mm-label:first-of-type { margin-top: 0; }
285    .mobile-menu a {
286      font-size: 1rem; font-weight: 500;
287      color: var(--navy);
288      padding: var(--sp-3) 0;
289      border-bottom: 1px solid var(--warm-border);
290      display: block;
291      transition: color .15s var(--ease);
292    }
293    .mobile-menu a:hover { color: var(--blue); text-decoration: none; }
294    .mobile-cta {
295      margin-top: var(--sp-5);
296      background: var(--blue);
297      color: #ffffff !important;
298      border-radius: var(--r-pill);
299      padding: var(--sp-4) var(--sp-6);
300      font-size: 1rem; font-weight: 700;
301      text-align: center;
302      display: block;
303      border: none;
304    }
305    @media (max-width: 640px) { .mobile-menu { top: 56px; } }
306
307    /* ─── Buttons (page-local) ─────────────────── */
308    .btn-primary {
309      display: inline-flex; align-items: center; justify-content: center;
310      gap: 0.4em;
311      background: var(--blue);
312      color: #ffffff;
313      border-radius: var(--r-pill);
314      padding: 0.95em 1.65em;
315      font-weight: 700; font-size: 0.98rem;
316      letter-spacing: -0.005em;
317      border: none;
318      cursor: pointer;
319      transition: background .15s var(--ease);
320    }
321    .btn-primary:hover { background: var(--blue-hover); text-decoration: none; }
322    .btn-link {
323      color: var(--blue);
324      font-weight: 700; font-size: 0.98rem;
325      display: inline-flex; align-items: center;
326      gap: 0.3em;
327      transition: color .15s var(--ease);
328    }
329    .btn-link:hover { color: var(--blue-hover); text-decoration: none; }
330
331    /* ─── Section spacing ──────────────────────────
332       Editorial-rhythm pattern. Deliberately tighter and tapered
333       than the design system §5 80/48 default — this page's
334       postit/Caveat aesthetic reads as disconnected at uniform 80/80.
335       Section bottoms taper top-to-bottom (56 → 56 → 48 → 48 → 48)
336       then explode at closing→footer (80 + 64 = 144) to land the
337       page firmly into the dark footer. Mobile uses a tighter
338       40/40 baseline.
339
340       Desktop gaps (prev-bottom + next-top):
341         hero→features  112    features→sample 112
342         sample→stats    96    stats→inside    96
343         inside→closing  96    closing→footer 144
344    */
345
346    /* ─── Hero ─────────────────────────────────── */
347    .hero {
348      background: var(--cream);
349      padding: 96px 0 56px;
350      position: relative;
351      overflow: hidden;
352    }
353    .hero-grid {
354      display: grid;
355      grid-template-columns: 1.05fr 1fr;
356      gap: 60px;
357      align-items: center;
358    }
359    .hero-title {
360      color: var(--navy);
361      font-size: clamp(2.75rem, 7vw, 5.5rem);
362      font-weight: 800;
363      line-height: 0.98;
364      letter-spacing: -0.035em;
365      margin: 0;
366    }
367    .hero-title-word {
368      position: relative;
369      display: inline-block;
370      white-space: nowrap;
371      color: var(--navy);
372      z-index: 1;
373    }
374    .hero-highlight {
375      position: absolute;
376      left: -2%; right: -2%;
377      bottom: 0.05em;
378      width: 104%; height: 0.55em;
379      pointer-events: none;
380      z-index: -1;
381    }
382    .hero-sub {
383      color: var(--text-2);
384      font-size: 1.15rem;
385      font-weight: 400;
386      line-height: 1.55;
387      max-width: 480px;
388      margin: var(--sp-6) 0 var(--sp-8);
389    }
390    .hero-ctas {
391      display: flex; gap: 22px;
392      align-items: center; flex-wrap: wrap;
393      margin-bottom: var(--sp-8);
394    }
395    .trust-row {
396      display: flex; gap: var(--sp-6);
397      flex-wrap: wrap;
398      color: var(--text-2);
399      font-size: 0.92rem; font-weight: 500;
400    }
401    .trust-row-item { display: inline-flex; align-items: center; gap: var(--sp-2); }
402    .trust-row .dot {
403      width: 8px; height: 8px;
404      background: var(--signal-success);
405      border-radius: 50%;
406      flex: none;
407    }
408
409    /* Hero collage */
410    .hero-right { position: relative; min-height: 540px; }
411    .collage { position: relative; width: 100%; height: 540px; }
412
413    .collage-window {
414      position: absolute;
415      top: 40px; right: -40px;
416      width: 560px;
417      background: #ffffff;
418      border: 1px solid var(--warm-border);
419      border-radius: var(--r-lg);
420      box-shadow:
421        0 1px 0 var(--warm-border),
422        -16px 18px 0 -2px var(--cream-2),
423        -16px 18px 0 -1px var(--warm-border);
424      overflow: hidden;
425      transform: rotate(1.5deg);
426      z-index: 2;
427    }
428    .window-chrome {
429      display: flex; align-items: center; gap: 14px;
430      padding: 11px 14px;
431      background: #f7f4ee;
432      border-bottom: 1px solid var(--warm-border);
433    }
434    .window-dots { display: flex; gap: 6px; }
435    .window-dots span { width: 11px; height: 11px; border-radius: 50%; }
436    .window-dots span:nth-child(1) { background: #ff5f56; }
437    .window-dots span:nth-child(2) { background: #ffbd2e; }
438    .window-dots span:nth-child(3) { background: #27c93f; }
439    .window-url {
440      flex: 1;
441      background: #ffffff;
442      border: 1px solid var(--warm-border);
443      border-radius: 6px;
444      padding: 5px 12px;
445      font-size: 0.78rem;
446      color: var(--text-muted);
447      font-weight: 500;
448    }
449    .window-body { padding: 24px 26px 28px; }
450    .drill-head {
451      display: flex; justify-content: space-between; align-items: center;
452      font-size: 0.8rem; color: var(--text-muted); font-weight: 600;
453      margin-bottom: 10px;
454    }
455    .drill-head-r { color: var(--signal-success); }
456    .drill-progress {
457      height: 5px;
458      background: var(--blue-lightest);
459      border-radius: var(--r-pill);
460      overflow: hidden;
461      margin-bottom: 18px;
462    }
463    .drill-progress-bar { height: 100%; width: 8%; background: var(--blue); border-radius: var(--r-pill); }
464    .chip {
465      display: inline-flex; align-items: center; gap: 6px;
466      background: var(--blue-lightest);
467      color: var(--blue-hover);
468      font-size: 0.74rem; font-weight: 700;
469      padding: 5px 11px;
470      border-radius: var(--r-pill);
471    }
472    .window-body .drill-stem {
473      font-size: 0.98rem; font-weight: 600;
474      line-height: 1.45;
475      color: var(--text);
476      margin: 14px 0 16px;
477    }
478    .window-body .opts { display: flex; flex-direction: column; gap: 7px; }
479    .window-body .opt {
480      display: flex; align-items: center; gap: 12px;
481      padding: 10px 14px;
482      border: 1px solid var(--warm-border);
483      border-radius: var(--r-md);
484      background: #ffffff;
485      font-size: 0.9rem; font-weight: 500;
486      color: var(--text);
487    }
488    .window-body .opt-letter {
489      width: 24px; height: 24px;
490      border-radius: 50%;
491      background: var(--cream-2);
492      display: inline-flex; align-items: center; justify-content: center;
493      font-weight: 700; font-size: 0.78rem;
494      color: var(--text-2);
495      flex-shrink: 0;
496    }
497    .window-body .opt-label { flex: 1; }
498    .window-body .opt-icon { width: 18px; height: 18px; opacity: 0; flex-shrink: 0; }
499    .window-body .opt.correct {
500      background: var(--signal-success-soft);
501      border-color: var(--signal-success-border);
502    }
503    .window-body .opt.correct .opt-letter {
504      background: var(--signal-success);
505      color: #ffffff;
506    }
507    .window-body .opt.correct .opt-icon { opacity: 1; color: var(--signal-success-text); }
508
509    /* Collage tiles */
510    .collage-tile {
511      position: absolute;
512      background: #ffffff;
513      border: 1px solid var(--warm-border);
514      border-radius: 14px;
515      z-index: 3;
516      box-shadow: 0 1px 0 var(--warm-border);
517    }
518    .collage-tile-note {
519      top: -10px; left: 30px;
520      background: var(--postit);
521      border-color: var(--postit-deep);
522      width: 200px;
523      transform: rotate(-4deg);
524      padding: 14px 16px 16px;
525    }
526    .note-label {
527      font-size: 0.7rem; font-weight: 700;
528      letter-spacing: 0.1em; text-transform: uppercase;
529      color: var(--postit-text);
530      margin-bottom: 6px;
531    }
532    .note-text {
533      font-family: var(--font-hand);
534      font-size: 1.55rem; font-weight: 600;
535      color: var(--postit-text-deep);
536      line-height: 1.05;
537    }
538    .collage-tile-badge {
539      top: 255px; left: 0;
540      background: var(--accent-red);
541      border: 0;
542      color: #ffffff;
543      width: 90px; height: 90px;
544      border-radius: 50%;
545      display: flex; flex-direction: column;
546      align-items: center; justify-content: center;
547      transform: rotate(-8deg);
548      padding: 0; z-index: 4;
549      box-shadow: 0 1px 0 var(--accent-red-deep);
550    }
551    .badge-eyebrow {
552      font-size: 0.62rem; font-weight: 700;
553      letter-spacing: 0.14em; text-transform: uppercase;
554      color: rgba(255,255,255,0.9);
555      margin-bottom: 1px;
556    }
557    .badge-price {
558      font-size: 1.95rem; font-weight: 800;
559      line-height: 1; letter-spacing: -0.04em;
560      color: #ffffff;
561    }
562    .collage-tile-score {
563      bottom: 0; right: 30px;
564      background: var(--signal-success-soft);
565      border-color: var(--signal-success-border);
566      width: 220px;
567      transform: rotate(3deg);
568      z-index: 4;
569      padding: 14px 16px;
570    }
571    .score-row {
572      display: flex; align-items: center; gap: 10px;
573      margin-bottom: 6px;
574    }
575    .score-icon {
576      width: 28px; height: 28px;
577      border-radius: 50%;
578      background: var(--signal-success);
579      color: #ffffff;
580      display: inline-flex; align-items: center; justify-content: center;
581      flex-shrink: 0;
582    }
583    .score-icon svg { width: 16px; height: 16px; }
584    .score-label {
585      font-size: 0.72rem; font-weight: 700;
586      letter-spacing: 0.08em; text-transform: uppercase;
587      color: var(--signal-success-text-deep);
588    }
589    .score-num {
590      font-size: 1.55rem; font-weight: 800;
591      color: var(--signal-success-text-deep);
592      line-height: 1;
593      letter-spacing: -0.02em;
594      margin-top: 4px;
595    }
596    .score-sub {
597      font-size: 0.78rem;
598      color: var(--signal-success-text);
599      font-weight: 600;
600      margin-top: 4px;
601    }
602
603    @media (max-width: 1100px) {
604      .collage { height: auto; min-height: 520px; }
605      .collage-window { width: 520px; right: -60px; }
606    }
607    @media (max-width: 900px) {
608      .hero { padding: 64px 0 40px; }
609      .hero-grid { grid-template-columns: 1fr; gap: 30px; }
610      .hero-sub { max-width: none; }
611      .hero-right { min-height: auto; }
612      .collage { height: 480px; }
613      .collage-window {
614        position: relative; top: auto; right: auto; width: 100%;
615        transform: rotate(0.5deg); box-shadow: none;
616      }
617      .collage-tile-note { top: -18px; left: 10px; width: 160px; }
618      .collage-tile-note .note-text { font-size: 1.3rem; }
619      .collage-tile-badge { top: auto; bottom: 60px; left: -10px; width: 68px; height: 68px; }
620      .collage-tile-badge .badge-eyebrow { font-size: 0.5rem; }
621      .collage-tile-badge .badge-price { font-size: 1.45rem; }
622      .collage-tile-score { bottom: -30px; right: 0; width: 180px; }
623    }
624    @media (max-width: 480px) {
625      .hero-ctas { flex-direction: column; align-items: stretch; }
626      .btn-primary, .btn-link { width: 100%; justify-content: center; }
627    }
628
629    /* ─── Features ─────────────────────────────── */
630    .features {
631      padding: 56px 0 56px;
632      background: var(--cream);
633      overflow: hidden;
634    }
635    .features-head {
636      max-width: 760px;
637      margin: 0 auto 64px;
638      text-align: center;
639    }
640    .features-title {
641      font-size: clamp(2.25rem, 4.5vw, 3.5rem);
642      font-weight: 800;
643      line-height: 1.02;
644      letter-spacing: -0.03em;
645      margin: 0;
646      color: var(--navy);
647    }
648    .features-title-word {
649      position: relative;
650      display: inline-block;
651      white-space: nowrap;
652      color: var(--navy);
653      z-index: 1;
654    }
655    .features-highlight {
656      position: absolute;
657      left: -2%; right: -2%;
658      bottom: 0.05em;
659      width: 104%; height: 0.55em;
660      pointer-events: none;
661      z-index: -1;
662    }
663    .features-list {
664      display: flex;
665      flex-direction: column;
666      gap: var(--sp-20);
667      max-width: 920px;
668      margin: 0 auto;
669    }
670    .feat-row {
671      display: grid;
672      grid-template-columns: 1fr 240px;
673      gap: 60px;
674      align-items: center;
675      position: relative;
676    }
677    .feat-row:nth-child(even) {
678      grid-template-columns: 240px 1fr;
679    }
680    .feat-row-main {
681      display: flex;
682      align-items: flex-start;
683      gap: var(--sp-6);
684    }
685    .feat-row-num {
686      font-family: var(--font-hand);
687      font-size: 3rem;
688      font-weight: 700;
689      color: var(--accent-red);
690      line-height: 1;
691      flex-shrink: 0;
692      transform: rotate(-4deg);
693      margin-top: -4px;
694    }
695    .feat-row-text h3 {
696      font-size: 1.6rem;
697      font-weight: 800;
698      line-height: 1.15;
699      letter-spacing: -0.02em;
700      margin: 0 0 var(--sp-3);
701      color: var(--navy);
702    }
703    .feat-row-text p {
704      color: var(--text-2);
705      font-size: 1.02rem;
706      line-height: 1.6;
707      margin: 0;
708      max-width: 500px;
709    }
710    .feat-note {
711      background: var(--postit);
712      border: 1px solid var(--postit-border);
713      border-radius: var(--r-md);
714      padding: var(--sp-4) 18px;
715      transform: rotate(-3deg);
716      box-shadow: 0 1px 0 var(--postit-deep);
717    }
718    .feat-row:nth-child(even) .feat-note { transform: rotate(2.5deg); }
719    .feat-note-label {
720      font-size: 0.65rem;
721      font-weight: 700;
722      letter-spacing: 0.12em;
723      text-transform: uppercase;
724      color: var(--postit-text);
725      margin-bottom: 6px;
726    }
727    .feat-note-text {
728      font-family: var(--font-hand);
729      font-size: 1.25rem;
730      font-weight: 600;
731      color: var(--postit-text-deep);
732      line-height: 1.15;
733    }
734    @media (max-width: 900px) {
735      .features { padding: 40px 0 40px; }
736      .features-list { gap: var(--sp-12); }
737      .feat-row, .feat-row:nth-child(even) {
738        grid-template-columns: 1fr;
739        gap: var(--sp-5);
740      }
741      .feat-note { max-width: 260px; }
742    }
743
744    /* ─── Sample drill ─────────────────────────── */
745    .sample {
746      background: var(--cream);
747      padding: 56px 0 48px;
748      scroll-margin-top: 120px;
749    }
750    .sample-head {
751      text-align: center;
752      max-width: 680px;
753      margin: 0 auto var(--sp-8);
754    }
755    .s-headline {
756      font-size: clamp(2.25rem, 4.5vw, 3.5rem);
757      font-weight: 800;
758      line-height: 1.02;
759      letter-spacing: -0.03em;
760      margin: 0;
761      color: var(--navy);
762    }
763    .s-sub {
764      color: var(--text-2);
765      font-size: 1.1rem;
766      line-height: 1.55;
767      margin: 18px auto 0;
768      max-width: 560px;
769    }
770    .stack {
771      max-width: 760px;
772      margin: 0 auto;
773      display: flex;
774      flex-direction: column;
775      gap: 14px;
776    }
777    .s-card {
778      background: #ffffff;
779      border: 1px solid var(--warm-border);
780      border-radius: var(--r-lg);
781      padding: 28px 32px;
782      transition: padding .25s var(--ease), opacity .25s var(--ease);
783    }
784    .s-card[data-state="hidden"] { display: none; }
785    .s-card[data-state="collapsed"] { padding: 14px 24px; }
786    .s-card[data-state="collapsed"] .s-card-body { display: none; }
787    .s-card[data-state="collapsed"] .s-card-summary { display: flex; }
788    .s-card-summary {
789      display: none;
790      align-items: center;
791      gap: 14px;
792      justify-content: space-between;
793    }
794    .s-card-summary-l {
795      display: flex;
796      align-items: center;
797      gap: 12px;
798      font-size: 0.92rem;
799      font-weight: 600;
800      color: var(--text);
801    }
802    .s-card-summary-r {
803      font-size: 0.82rem;
804      font-weight: 600;
805      color: var(--text-muted);
806    }
807    .s-card-summary-check {
808      width: 22px; height: 22px;
809      border-radius: 50%;
810      background: var(--signal-success);
811      color: #ffffff;
812      display: flex; align-items: center; justify-content: center;
813      flex-shrink: 0;
814    }
815    .s-card-summary-check.wrong { background: var(--signal-error); }
816    .s-card-summary-check svg { width: 14px; height: 14px; }
817    .s-card-head {
818      display: flex; justify-content: space-between; align-items: center;
819      margin-bottom: 14px;
820      font-size: 0.78rem; color: var(--text-muted); font-weight: 600;
821    }
822    .drill-stem {
823      font-size: 1.1rem; font-weight: 600;
824      line-height: 1.5;
825      color: var(--text);
826      margin: 16px 0 var(--sp-5);
827      letter-spacing: -0.005em;
828    }
829    .drill-opts { display: flex; flex-direction: column; gap: 10px; }
830    .opt-btn {
831      display: flex; align-items: center; gap: 14px;
832      width: 100%;
833      padding: 14px 18px;
834      border: 1px solid var(--warm-border);
835      border-radius: var(--r-md);
836      background: #ffffff;
837      font-size: 0.98rem; font-weight: 500;
838      color: var(--text);
839      text-align: left;
840      cursor: pointer;
841      font-family: inherit;
842      transition: border-color .15s var(--ease), background .15s var(--ease);
843    }
844    .opt-btn:hover { border-color: var(--warm-border-strong); background: #fbfaf6; }
845    .opt-letter {
846      width: 28px; height: 28px;
847      border-radius: 50%;
848      background: var(--cream-2);
849      display: inline-flex; align-items: center; justify-content: center;
850      font-weight: 700; font-size: 0.85rem;
851      color: var(--text-2);
852      flex-shrink: 0;
853    }
854    .opt-label-text { flex: 1; }
855    .opt-icon { width: 20px; height: 20px; opacity: 0; flex-shrink: 0; }
856    .opt-btn.correct { background: var(--signal-success-soft); border-color: var(--signal-success-border); }
857    .opt-btn.correct .opt-letter { background: var(--signal-success); color: #ffffff; }
858    .opt-btn.correct .opt-icon { opacity: 1; color: var(--signal-success-text); }
859    .opt-btn.wrong { background: var(--signal-error-soft); border-color: var(--signal-error-border); }
860    .opt-btn.wrong .opt-letter { background: var(--signal-error); color: #ffffff; }
861    .opt-btn.wrong .opt-icon { opacity: 1; color: var(--signal-error-text); }
862    .opt-btn.locked { cursor: default; }
863    .opt-btn.locked:hover { border-color: var(--warm-border); background: #ffffff; }
864    .opt-btn.correct.locked:hover { background: var(--signal-success-soft); border-color: var(--signal-success-border); }
865    .opt-btn.wrong.locked:hover { background: var(--signal-error-soft); border-color: var(--signal-error-border); }
866    .explain {
867      margin-top: 16px;
868      background: var(--signal-success-soft);
869      border: 1px solid var(--signal-success-border);
870      border-radius: var(--r-md);
871      padding: 18px 22px;
872      font-size: 0.95rem;
873      line-height: 1.55;
874      color: var(--signal-success-text-deep);
875      display: none;
876    }
877    .explain.show { display: block; }
878    .explain strong { font-weight: 800; }
879    /* Wrong-answer state. Tokens documented in
880       docs/brand/SQETRACK_DESIGN_SYSTEM.md §3d. */
881    .explain.error {
882      background: var(--signal-error-soft);
883      border-color: var(--signal-error-border);
884      color: var(--signal-error-text);
885    }
886    .next-row {
887      margin-top: 18px;
888      display: none;
889      justify-content: flex-end;
890    }
891    .next-row.show { display: flex; }
892    .next-btn {
893      background: var(--navy);
894      color: #ffffff;
895      border-radius: var(--r-pill);
896      padding: 0.7em 1.4em;
897      font-weight: 700;
898      font-size: 0.92rem;
899      border: none;
900      cursor: pointer;
901      transition: background .15s var(--ease);
902    }
903    .next-btn:hover { background: #1e293b; }
904
905    .wall {
906      display: none;
907      background: #ffffff;
908      border: 1px solid var(--warm-border);
909      border-radius: var(--r-lg);
910      padding: 48px 40px;
911      text-align: center;
912      position: relative;
913    }
914    .wall.show { display: block; }
915    .wall-stamp {
916      position: absolute;
917      top: -30px; right: 32px;
918      width: 88px; height: 88px;
919      background: var(--accent-red);
920      border-radius: 50%;
921      display: flex; flex-direction: column;
922      align-items: center; justify-content: center;
923      transform: rotate(-8deg);
924      box-shadow: 0 1px 0 var(--accent-red-deep);
925    }
926    .wall-stamp-eyebrow {
927      font-size: 0.6rem; font-weight: 700;
928      letter-spacing: 0.14em; text-transform: uppercase;
929      color: rgba(255,255,255,0.9);
930    }
931    .wall-stamp-price {
932      font-size: 1.9rem; font-weight: 800;
933      line-height: 1; letter-spacing: -0.04em;
934      color: #ffffff;
935    }
936    .wall-eyebrow {
937      font-size: 0.75rem; font-weight: 700;
938      letter-spacing: 0.14em; text-transform: uppercase;
939      color: var(--text-muted);
940      margin-bottom: 14px;
941    }
942    .wall-title {
943      font-size: clamp(1.75rem, 3vw, 2.5rem);
944      font-weight: 800;
945      line-height: 1.1;
946      letter-spacing: -0.025em;
947      color: var(--navy);
948      margin: 0 0 14px;
949    }
950    .wall-body {
951      color: var(--text-2);
952      font-size: 1.05rem;
953      margin: 0 auto var(--sp-8);
954      max-width: 480px;
955    }
956    .wall-ctas {
957      display: flex; gap: 16px;
958      justify-content: center;
959      align-items: center;
960      flex-wrap: wrap;
961    }
962    .wall-buy {
963      background: var(--blue);
964      color: #ffffff;
965      border-radius: var(--r-pill);
966      padding: 1em 1.8em;
967      font-weight: 700;
968      font-size: 1rem;
969      border: none;
970      cursor: pointer;
971      transition: background .15s var(--ease);
972      font-family: inherit;
973    }
974    .wall-buy:hover { background: var(--blue-hover); text-decoration: none; }
975    .wall-more {
976      color: var(--blue);
977      font-weight: 700;
978      font-size: 0.98rem;
979      display: inline-flex;
980      align-items: center;
981      gap: 0.3em;
982      padding: 1em 0.8em;
983      transition: color .15s var(--ease);
984    }
985    .wall-more:hover { color: var(--blue-hover); text-decoration: none; }
986    @media (max-width: 900px) { .sample { padding: 40px 0 40px; } }
987    @media (max-width: 768px) {
988      .s-card, .wall { padding: 24px; }
989      .wall-stamp { width: 70px; height: 70px; top: -22px; right: 18px; }
990      .wall-stamp-price { font-size: 1.5rem; }
991      .wall-ctas { flex-direction: column; align-items: stretch; }
992      .wall-buy, .wall-more { justify-content: center; }
993    }
994
995    /* ─── Stats / "Why drills work" ────────────── */
996    .stats-section {
997      background: var(--cream);
998      padding: 48px 0 48px;
999      overflow: hidden;
1000    }
1001    .stats-section-head {
1002      text-align: center;
1003      max-width: 720px;
1004      margin: 0 auto var(--sp-20);
1005    }
1006    .stats-title {
1007      font-size: clamp(2.25rem, 4.5vw, 3.5rem);
1008      font-weight: 800;
1009      line-height: 1.02;
1010      letter-spacing: -0.03em;
1011      margin: 0;
1012      color: var(--navy);
1013    }
1014    .stats-word {
1015      position: relative;
1016      display: inline-block;
1017      white-space: nowrap;
1018      color: var(--navy);
1019      z-index: 1;
1020    }
1021    .stats-hl {
1022      position: absolute;
1023      left: -2%; right: -2%;
1024      bottom: 0.05em;
1025      width: 104%; height: 0.55em;
1026      pointer-events: none;
1027      z-index: -1;
1028    }
1029    .stats-grid {
1030      display: grid;
1031      grid-template-columns: 1fr 1fr;
1032      gap: 48px;
1033      max-width: 1080px;
1034      margin: 0 auto;
1035    }
1036    .pcard {
1037      background: #ffffff;
1038      border: 1px solid var(--warm-border);
1039      border-radius: 18px;
1040      padding: 40px 36px 36px;
1041      position: relative;
1042      transition: transform .25s cubic-bezier(.4,1.4,.6,1);
1043    }
1044    .pcard:nth-child(1) { transform: rotate(-1deg); }
1045    .pcard:nth-child(2) { transform: rotate(1deg); }
1046    .pcard:nth-child(1):hover { animation: jiggle-left .5s ease-in-out; }
1047    .pcard:nth-child(2):hover { animation: jiggle-right .5s ease-in-out; }
1048    @keyframes jiggle-left {
1049      0%   { transform: rotate(-1deg); }
1050      20%  { transform: rotate(-3deg) translateY(-2px); }
1051      40%  { transform: rotate(1deg) translateY(-1px); }
1052      60%  { transform: rotate(-2deg); }
1053      80%  { transform: rotate(0deg); }
1054      100% { transform: rotate(-1deg); }
1055    }
1056    @keyframes jiggle-right {
1057      0%   { transform: rotate(1deg); }
1058      20%  { transform: rotate(3deg) translateY(-2px); }
1059      40%  { transform: rotate(-1deg) translateY(-1px); }
1060      60%  { transform: rotate(2deg); }
1061      80%  { transform: rotate(0deg); }
1062      100% { transform: rotate(1deg); }
1063    }
1064    .pcard-sticker {
1065      position: absolute;
1066      top: -18px; left: -14px;
1067      background: var(--accent-red);
1068      border: 1px solid var(--accent-red-deep);
1069      color: #ffffff;
1070      border-radius: var(--r-md);
1071      padding: 8px 14px;
1072      font-family: var(--font-hand);
1073      font-size: 1.4rem;
1074      font-weight: 600;
1075      transform: rotate(-6deg);
1076      box-shadow: 0 1px 0 var(--accent-red-deep);
1077    }
1078    .pcard:nth-child(2) .pcard-sticker {
1079      left: auto; right: -14px;
1080      transform: rotate(5deg);
1081    }
1082    .pcard-claim {
1083      font-size: 1.6rem;
1084      font-weight: 800;
1085      letter-spacing: -0.025em;
1086      margin: 0 0 16px;
1087      color: var(--navy);
1088      line-height: 1.15;
1089    }
1090    .pcard-body {
1091      color: var(--text-2);
1092      font-size: 1rem;
1093      line-height: 1.6;
1094      margin: 0;
1095    }
1096    @media (max-width: 900px) { .stats-section { padding: 40px 0 40px; } }
1097    @media (max-width: 780px) {
1098      .stats-grid { grid-template-columns: 1fr; gap: 40px; }
1099      .stats-section-head { margin-bottom: 56px; }
1100    }
1101
1102    /* ─── Inside SQETrack ──────────────────────── */
1103    .inside {
1104      background: var(--cream);
1105      padding: 48px 0 48px;
1106    }
1107    .inside-head {
1108      text-align: center;
1109      max-width: 680px;
1110      margin: 0 auto 40px;
1111    }
1112    .inside-title {
1113      font-size: clamp(2.25rem, 4.5vw, 3.5rem);
1114      font-weight: 800;
1115      line-height: 1.02;
1116      letter-spacing: -0.03em;
1117      margin: 0;
1118      color: var(--navy);
1119    }
1120    .tabs { max-width: 1180px; margin: 0 auto; }
1121    .tabs-row {
1122      display: flex;
1123      gap: 4px;
1124      margin-bottom: var(--sp-8);
1125      border-bottom: 1px solid var(--warm-border);
1126      justify-content: center;
1127    }
1128    .tab {
1129      background: transparent;
1130      padding: 16px 28px;
1131      font-size: 1rem; font-weight: 700;
1132      color: var(--text-muted);
1133      border-bottom: 3px solid transparent;
1134      margin-bottom: -1px;
1135      white-space: nowrap;
1136      display: inline-flex;
1137      align-items: center;
1138      gap: 10px;
1139      transition: color .15s var(--ease), border-color .15s var(--ease);
1140      cursor: pointer;
1141      border-left: 0; border-right: 0; border-top: 0;
1142      font-family: inherit;
1143    }
1144    .tab:hover { color: var(--text); }
1145    .tab.active { color: var(--navy); border-bottom-color: var(--accent-red); }
1146    .tab-num {
1147      font-family: var(--font-hand);
1148      font-size: 1.4rem;
1149      font-weight: 700;
1150      color: var(--accent-red);
1151      line-height: 1;
1152      transform: rotate(-4deg);
1153      display: inline-block;
1154    }
1155    .panel {
1156      display: none;
1157      grid-template-columns: 1fr 1.7fr;
1158      gap: 64px;
1159      align-items: stretch;
1160      padding: var(--sp-8) 0;
1161    }
1162    .panel.active { display: grid; }
1163    .panel-text {
1164      display: flex;
1165      flex-direction: column;
1166      gap: 16px;
1167      justify-content: center;
1168    }
1169    .panel-demo-wrap {
1170      display: flex;
1171      align-items: center;
1172      justify-content: center;
1173      min-height: 620px;
1174    }
1175    .panel-demo-wrap > .demo { width: 100%; }
1176    .panel-eyebrow {
1177      font-size: 0.72rem; font-weight: 700;
1178      letter-spacing: 0.14em; text-transform: uppercase;
1179      color: var(--accent-red);
1180    }
1181    .panel-title {
1182      font-size: 2rem;
1183      font-weight: 800;
1184      color: var(--navy);
1185      letter-spacing: -0.025em;
1186      margin: 0;
1187      line-height: 1.1;
1188    }
1189    .panel-body {
1190      color: var(--text-2);
1191      font-size: 1.05rem;
1192      line-height: 1.6;
1193      margin: 0;
1194    }
1195    .panel-note {
1196      background: var(--postit);
1197      border: 1px solid var(--postit-border);
1198      border-radius: var(--r-md);
1199      padding: 14px 16px;
1200      margin-top: 8px;
1201      transform: rotate(-1deg);
1202      box-shadow: 0 1px 0 var(--postit-deep);
1203      align-self: flex-start;
1204      max-width: 280px;
1205    }
1206    .panel-note-label {
1207      font-size: 0.65rem; font-weight: 700;
1208      letter-spacing: 0.12em; text-transform: uppercase;
1209      color: var(--postit-text);
1210      margin-bottom: 4px;
1211    }
1212    .panel-note-text {
1213      font-family: var(--font-hand);
1214      font-size: 1.2rem; font-weight: 600;
1215      color: var(--postit-text-deep);
1216      line-height: 1.15;
1217    }
1218    .demo {
1219      background: #ffffff;
1220      border: 1px solid var(--warm-border);
1221      border-radius: 14px;
1222      padding: 32px 36px;
1223      position: relative;
1224    }
1225    .demo--padded { padding: 40px 44px; }
1226
1227    /* Performance demo */
1228    .perf-h2 {
1229      font-size: 1.3rem; font-weight: 800;
1230      letter-spacing: -0.02em;
1231      margin: 0 0 16px;
1232      color: var(--navy);
1233    }
1234    .perf-controls {
1235      display: flex; align-items: center; gap: 12px;
1236      margin-bottom: 16px;
1237      font-size: 0.68rem; color: var(--text-muted);
1238      font-weight: 700; letter-spacing: 0.1em;
1239      text-transform: uppercase;
1240      flex-wrap: wrap;
1241    }
1242    .perf-pills { display: flex; gap: 5px; }
1243    .perf-pill {
1244      padding: 5px 11px;
1245      border: 1px solid var(--warm-border);
1246      border-radius: var(--r-pill);
1247      font-size: 0.74rem; font-weight: 600;
1248      letter-spacing: normal; text-transform: none;
1249      color: var(--text-2);
1250      background: #ffffff;
1251    }
1252    .perf-pill.active {
1253      background: var(--blue);
1254      color: #ffffff;
1255      border-color: var(--blue);
1256    }
1257    .perf-table {
1258      border: 1px solid var(--warm-border);
1259      border-radius: var(--r-md);
1260      overflow: hidden;
1261    }
1262    .perf-row {
1263      display: grid;
1264      grid-template-columns: 2.4fr repeat(6, 1fr);
1265      border-bottom: 1px solid var(--warm-border);
1266      font-size: 0.78rem;
1267    }
1268    .perf-row:last-child { border-bottom: 0; }
1269    .perf-row-head {
1270      background: var(--navy);
1271      color: #ffffff;
1272      font-weight: 600; font-size: 0.7rem;
1273    }
1274    .perf-row-head .perf-cell { padding: 9px 8px; color: #ffffff; }
1275    .perf-row-head .perf-cell-label { text-align: left; }
1276    .perf-cell {
1277      padding: 9px 8px;
1278      text-align: right;
1279      color: var(--text-muted);
1280      border-left: 1px solid var(--warm-border);
1281    }
1282    .perf-cell:first-child { border-left: 0; }
1283    .perf-cell-label {
1284      text-align: left;
1285      color: var(--text);
1286      font-weight: 500;
1287    }
1288    .perf-cell-nested { padding-left: 24px; }
1289    .perf-cell-bad {
1290      background: var(--accent-red-soft);
1291      color: #8a2a27;
1292      font-weight: 700;
1293    }
1294    .perf-cell-ok {
1295      background: var(--signal-warning-soft);
1296      color: var(--signal-warning-text);
1297      font-weight: 600;
1298    }
1299    .perf-cell-good {
1300      background: #f0fdf4;
1301      color: var(--signal-success);
1302      font-weight: 700;
1303    }
1304    .perf-row-strong { background: #fafaf7; }
1305    .perf-row-strong .perf-cell-label { font-weight: 700; color: var(--navy); }
1306
1307    /* Practice selector demo */
1308    .prac-panel {
1309      background: #ffffff;
1310      border: 1px solid var(--warm-border);
1311      border-radius: 12px;
1312      padding: 20px 22px;
1313    }
1314    .prac-label {
1315      font-size: 1rem; font-weight: 700;
1316      color: var(--navy);
1317      margin-bottom: 14px;
1318    }
1319    .prac-search {
1320      background: #ffffff;
1321      border: 1px solid var(--warm-border);
1322      border-radius: 8px;
1323      padding: 10px 14px;
1324      font-size: 0.85rem;
1325      color: var(--text-muted);
1326      margin-bottom: 16px;
1327    }
1328    .prac-tree {
1329      border: 1px solid var(--warm-border);
1330      border-radius: var(--r-md);
1331      overflow: hidden;
1332    }
1333    .prac-group {
1334      background: #fafaf7;
1335      border-bottom: 1px solid var(--warm-border);
1336      padding: 11px 16px;
1337      font-size: 0.92rem; font-weight: 600;
1338      color: var(--navy);
1339      display: flex; align-items: center; gap: 12px;
1340    }
1341    .prac-check {
1342      width: 18px; height: 18px;
1343      border: 1.5px solid var(--warm-border);
1344      border-radius: 5px;
1345      background: #ffffff;
1346      display: inline-flex; align-items: center; justify-content: center;
1347      flex-shrink: 0;
1348    }
1349    .prac-check--partial { background: var(--blue); border-color: var(--blue); }
1350    .prac-check--partial::after { content: ''; width: 9px; height: 2px; background: #ffffff; border-radius: 1px; }
1351    .prac-check--full { background: var(--blue); border-color: var(--blue); }
1352    .prac-check--full svg { width: 11px; height: 11px; color: #ffffff; }
1353    .prac-item {
1354      padding: 10px 16px 10px 46px;
1355      font-size: 0.88rem;
1356      color: var(--text);
1357      display: flex; align-items: center; gap: 12px;
1358      border-bottom: 1px solid #f0ece1;
1359    }
1360    .prac-item:last-child { border-bottom: 0; }
1361    .prac-footer {
1362      display: flex; justify-content: space-between; align-items: center;
1363      margin-top: 16px;
1364    }
1365    .prac-count { font-size: 0.85rem; color: var(--text-muted); }
1366    .prac-btn {
1367      background: var(--blue);
1368      color: #ffffff;
1369      font-weight: 700; font-size: 0.88rem;
1370      padding: 9px 18px;
1371      border-radius: 8px;
1372    }
1373
1374    /* Drill demo */
1375    .demo .drill-progress-row {
1376      display: flex; gap: 5px;
1377      margin-bottom: 14px;
1378    }
1379    .demo .drill-pbar {
1380      flex: 1; height: 4px;
1381      background: var(--warm-border);
1382      border-radius: 3px;
1383    }
1384    .demo .drill-pbar.wrong { background: var(--accent-red); }
1385    .demo .drill-pbar.right { background: var(--signal-success); }
1386    .demo .drill-pbar.active { background: var(--blue); }
1387    .demo .drill-counter {
1388      text-align: right;
1389      font-size: 0.78rem;
1390      color: var(--text-muted);
1391      font-weight: 600;
1392      margin-bottom: 12px;
1393    }
1394    .demo .drill-topic {
1395      font-size: 0.7rem; font-weight: 700;
1396      letter-spacing: 0.1em; text-transform: uppercase;
1397      color: var(--blue);
1398      padding-bottom: 14px;
1399      border-bottom: 1px solid var(--warm-border);
1400      margin-bottom: 16px;
1401    }
1402    .demo .drill-stem {
1403      font-size: 0.95rem; font-weight: 600;
1404      color: var(--text);
1405      margin: 0 0 16px;
1406      line-height: 1.4;
1407    }
1408    .demo .drill-opts { display: flex; flex-direction: column; gap: 8px; }
1409    .demo .drill-opt {
1410      display: flex; align-items: center; gap: 12px;
1411      padding: 11px 14px;
1412      border: 1px solid var(--warm-border);
1413      border-radius: 8px;
1414      background: #ffffff;
1415      font-size: 0.85rem;
1416    }
1417    .demo .drill-opt-letter {
1418      width: 24px; height: 24px;
1419      border-radius: 50%;
1420      background: var(--cream-2);
1421      color: var(--text-2);
1422      font-weight: 700; font-size: 0.75rem;
1423      display: flex; align-items: center; justify-content: center;
1424      flex-shrink: 0;
1425    }
1426    .demo .drill-opt--correct {
1427      border-color: var(--signal-success-border);
1428      border-width: 2px;
1429    }
1430    .demo .drill-opt--correct .drill-opt-letter {
1431      background: var(--signal-success);
1432      color: #ffffff;
1433    }
1434    .demo .drill-opt--correct .drill-opt-letter svg { width: 12px; height: 12px; }
1435    .demo .drill-explain {
1436      margin-left: 36px;
1437      margin-top: 5px;
1438      padding: 11px 14px;
1439      border-left: 3px solid;
1440      border-radius: 0 7px 7px 0;
1441      font-size: 0.78rem;
1442      line-height: 1.5;
1443      color: var(--text-2);
1444    }
1445    .demo .drill-explain--good {
1446      background: #f0fdf4;
1447      border-left-color: var(--signal-success);
1448    }
1449    .demo .drill-footer {
1450      display: flex; justify-content: space-between; align-items: center;
1451      margin-top: 14px;
1452    }
1453    .demo .drill-show-all {
1454      font-size: 0.85rem; font-weight: 700;
1455      color: var(--blue);
1456    }
1457    .demo .drill-next {
1458      background: var(--blue);
1459      color: #ffffff;
1460      font-weight: 700; font-size: 0.88rem;
1461      padding: 9px 18px;
1462      border-radius: 8px;
1463    }
1464
1465    @media (max-width: 900px) {
1466      .inside { padding: 40px 0 40px; }
1467      .panel { grid-template-columns: 1fr; gap: 24px; padding: 24px 0; }
1468      .panel-title { font-size: 1.6rem; }
1469      .panel-demo-wrap { min-height: 0; }
1470      .demo, .demo--padded { padding: 20px; }
1471      .perf-row { grid-template-columns: 2fr repeat(3, 1fr); }
1472      .perf-row .perf-cell:nth-child(n+5) { display: none; }
1473      .tabs-row { justify-content: flex-start; overflow-x: auto; }
1474      .tab { padding: 14px 18px; font-size: 0.92rem; }
1475    }
1476
1477    /* ─── Closing CTA ──────────────────────────── */
1478    .closing {
1479      background: var(--cream);
1480      padding: 48px 0 80px;
1481      text-align: left;
1482    }
1483    .closing-inner {
1484      max-width: 680px;
1485      margin: 0 auto;
1486      padding-top: var(--sp-8);
1487      border-top: 3px solid var(--navy);
1488    }
1489    .closing-eyebrow {
1490      font-family: var(--font-hand);
1491      font-size: 1.8rem;
1492      font-weight: 700;
1493      color: var(--accent-red);
1494      line-height: 1;
1495      transform: rotate(-4deg);
1496      display: inline-block;
1497      margin-bottom: var(--sp-6);
1498    }
1499    .closing-title {
1500      font-size: clamp(2.25rem, 4vw, 3.25rem);
1501      font-weight: 800;
1502      line-height: 1.05;
1503      letter-spacing: -0.025em;
1504      margin: 0 0 var(--sp-5);
1505      color: var(--navy);
1506    }
1507    .closing-body {
1508      color: var(--text-2);
1509      font-size: 1.1rem;
1510      line-height: 1.6;
1511      margin: 0 0 36px;
1512      max-width: 520px;
1513    }
1514    .closing-cta-row {
1515      display: flex;
1516      gap: var(--sp-6);
1517      align-items: center;
1518      flex-wrap: wrap;
1519    }
1520    .closing-cta {
1521      display: inline-flex;
1522      align-items: center;
1523      gap: 0.4em;
1524      background: var(--blue);
1525      color: #ffffff;
1526      border-radius: var(--r-pill);
1527      padding: 1.05em 1.9em;
1528      font-weight: 700;
1529      font-size: 1rem;
1530      cursor: pointer;
1531      border: none;
1532      font-family: inherit;
1533      transition: background .15s var(--ease);
1534    }
1535    .closing-cta:hover { background: var(--blue-hover); text-decoration: none; }
1536    .closing-caveat {
1537      color: var(--text-muted);
1538      font-size: 0.92rem;
1539      font-weight: 500;
1540    }
1541    @media (max-width: 900px) { .closing { padding: 40px 0 56px; } }
1542
1543    /* ─── Footer ───────────────────────────────── */
1544    .footer {
1545      background: var(--navy);
1546      color: #cbd5e1;
1547      padding: 64px 0 32px;
1548    }
1549    .footer-top {
1550      display: grid;
1551      grid-template-columns: 1.6fr 1fr 1fr 1fr;
1552      gap: 48px;
1553      padding-bottom: 48px;
1554      margin-bottom: var(--sp-6);
1555      border-bottom: 1px solid #1e293b;
1556    }
1557    .footer-brand-logo {
1558      display: inline-flex;
1559      align-items: center;
1560      gap: 8px;
1561      color: #ffffff;
1562      font-size: 1.4rem;
1563      letter-spacing: -0.02em;
1564      margin-bottom: 14px;
1565      text-decoration: none;
1566    }
1567    .footer-brand-logo .nav-logo-track { color: rgba(255,255,255,0.5); }
1568    .footer-brand-line {
1569      font-size: 0.95rem;
1570      color: #94a3b8;
1571      line-height: 1.55;
1572      margin: 0 0 16px;
1573      max-width: 340px;
1574    }
1575    .footer-brand-email {
1576      font-size: 0.92rem;
1577      color: #ffffff;
1578      font-weight: 600;
1579      text-decoration: none;
1580      border-bottom: 1px solid rgba(255,255,255,0.3);
1581      padding-bottom: 1px;
1582      transition: border-color .15s var(--ease);
1583    }
1584    .footer-brand-email:hover { border-bottom-color: #ffffff; text-decoration: none; }
1585    .footer-col-title {
1586      color: #ffffff;
1587      font-size: 0.78rem;
1588      font-weight: 700;
1589      letter-spacing: 0.14em;
1590      text-transform: uppercase;
1591      margin: 0 0 16px;
1592    }
1593    .footer-col ul {
1594      list-style: none;
1595      padding: 0; margin: 0;
1596      display: flex;
1597      flex-direction: column;
1598      gap: 10px;
1599    }
1600    .footer-col a {
1601      color: #cbd5e1;
1602      font-size: 0.95rem; font-weight: 500;
1603      transition: color .15s var(--ease);
1604    }
1605    .footer-col a:hover { color: #ffffff; text-decoration: none; }
1606    .footer-bottom {
1607      display: flex;
1608      justify-content: space-between;
1609      align-items: center;
1610      flex-wrap: wrap;
1611      gap: 16px;
1612      font-size: 0.82rem;
1613      color: #94a3b8;
1614    }
1615    .footer-bottom a {
1616      color: #94a3b8;
1617      transition: color .15s var(--ease);
1618    }
1619    .footer-bottom a:hover { color: #ffffff; text-decoration: none; }
1620    @media (max-width: 900px) {
1621      .footer { padding: 48px 0 24px; }
1622      .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
1623    }
1624    @media (max-width: 600px) { .footer-top { grid-template-columns: 1fr; } }
1625
1626    /* ─── Reduced motion ───────────────────────── */
1627    @media (prefers-reduced-motion: reduce) {
1628      *, *::before, *::after {
1629        animation-duration: 0.01ms !important;
1630        animation-iteration-count: 1 !important;
1631        transition-duration: 0.01ms !important;
1632        scroll-behavior: auto !important;
1633      }
1634      .pcard:hover { animation: none !important; }
1635    }
1636  </style>
1637</head>
1638<body>
1639
1640<!-- Announcement bar -->
1641<div class="announce-bar" id="announce-bar" role="region" aria-label="Announcement">
1642  <div class="announce-bar-inner">
1643    <span class="announce-bar-text"></span>
1644    <button type="button" class="announce-bar-dismiss" id="announce-bar-dismiss" aria-label="Dismiss announcement">×</button>
1645  </div>
1646</div>
1647
1648<!-- Nav -->
1649<nav class="nav" id="site-nav" aria-label="Primary">
1650  <div class="nav-inner">
1651    <a href="/" class="nav-logo" aria-label="SQETrack home">
1652      <svg viewBox="0 0 32 32" width="22" height="22" aria-hidden="true" style="flex-shrink:0">
1653        <polygon points="3,27 12,27 17,15 8,15" fill="rgba(255,255,255,0.3)"/>
1654        <polygon points="10,23 19,23 24,11 15,11" fill="rgba(255,255,255,0.65)"/>
1655        <polygon points="17,19 26,19 31,7 22,7" fill="rgba(255,255,255,0.95)"/>
1656      </svg>
1657      <span class="nav-logo-text"><span class="nav-logo-sqe">SQE</span><span class="nav-logo-track">Track</span></span>
1658    </a>
1659    <div class="nav-links">
1660      <div class="nav-dropdown">
1661        <span class="nav-dropdown-trigger" tabindex="0" role="button" aria-haspopup="true">
1662          Resources
1663          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
1664        </span>
1665        <div class="nav-dropdown-menu" role="menu">
1666          <a href="/sqe1-topics" role="menuitem">Complete topic list</a>
1667          <a href="/sqe1-exam-dates" role="menuitem">Exam dates</a>
1668          <a href="/free-sqe1-questions" role="menuitem">Free practice questions</a>
1669          <a href="/free-sqe1-drills/" role="menuitem">Free practice drills</a>
1670          <a href="/sqe1-revision-planner" role="menuitem">Revision planner template</a>
1671        </div>
1672      </div>
1673      <div class="nav-dropdown">
1674        <span class="nav-dropdown-trigger" tabindex="0" role="button" aria-haspopup="true">
1675          Guides
1676          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
1677        </span>
1678        <div class="nav-dropdown-menu" role="menu">
1679          <a href="/sqe1-flk-changes-september-2026" role="menuitem">FLK changes September 2026</a>
1680          <a href="/every-free-sqe1-question-2026" role="menuitem">Free SQE1 MCQ sources</a>
1681          <a href="/sqe1-january-2026-results" role="menuitem">January 2026 results</a>
1682          <a href="/sqe1-mock-score-comparison" role="menuitem">Mock score comparison</a>
1683          <a href="/sqe1-self-study" role="menuitem">Self-study guide</a>
1684          <a href="/sqe1-questions-per-topic" role="menuitem">Questions per topic</a>
1685          <a href="/sqe1-resit-guide" role="menuitem">Resit guide</a>
1686        </div>
1687      </div>
1688    </div>
1689    <div class="nav-right">
1690      <a href="https://app.sqetrack.co.uk/login" class="nav-login">Log in</a>
1691      <a href="#" class="nav-cta btn-buy" data-cta-event="nav-cta-buy">Get drills £19</a>
1692    </div>
1693    <button class="nav-hamburger" onclick="toggleMobileMenu()" aria-label="Open menu" aria-expanded="false">
1694      <svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true"><path d="M3 6h16M3 11h16M3 16h16" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/></svg>
1695    </button>
1696  </div>
1697</nav>
1698
1699<div class="mobile-menu" id="mobile-menu">
1700  <div class="mm-label">Resources</div>
1701  <a href="/sqe1-topics" onclick="closeMobileMenu()">Complete topic list</a>
1702  <a href="/sqe1-exam-dates" onclick="closeMobileMenu()">Exam dates</a>
1703  <a href="/free-sqe1-questions" onclick="closeMobileMenu()">Free practice questions</a>
1704  <a href="/free-sqe1-drills/" onclick="closeMobileMenu()">Free practice drills</a>
1705  <a href="/sqe1-revision-planner" onclick="closeMobileMenu()">Revision planner template</a>
1706  <div class="mm-label">Guides</div>
1707  <a href="/sqe1-flk-changes-september-2026" onclick="closeMobileMenu()">FLK changes September 2026</a>
1708  <a href="/every-free-sqe1-question-2026" onclick="closeMobileMenu()">Free SQE1 MCQ sources</a>
1709  <a href="/sqe1-january-2026-results" onclick="closeMobileMenu()">January 2026 results</a>
1710  <a href="/sqe1-mock-score-comparison" onclick="closeMobileMenu()">Mock score comparison</a>
1711  <a href="/sqe1-self-study" onclick="closeMobileMenu()">Self-study guide</a>
1712  <a href="/sqe1-resit-guide" onclick="closeMobileMenu()">Resit guide</a>
1713  <div class="mm-label">Account</div>
1714  <a href="https://app.sqetrack.co.uk/login" onclick="closeMobileMenu()">Log in</a>
1715  <a href="#" class="mobile-cta btn-buy" data-cta-event="mobile-cta-buy" onclick="closeMobileMenu()">Get drills £19</a>
1716</div>
1717
1718<main>
1719
1720<!-- ─────────────────── HERO ─────────────────── -->
1721<section class="hero">
1722  <div class="container">
1723    <div class="hero-grid">
1724      <div class="hero-left">
1725        <h1 class="hero-title">SQE1 <span class="hero-title-word">revision<svg class="hero-highlight" viewBox="0 0 220 24" preserveAspectRatio="none" aria-hidden="true"><path d="M3 6 L 218 4 L 216 21 L 5 22 Z" fill="var(--accent-red)" opacity="0.35"/></svg></span><br>that doesn't expire.</h1>
1726        <p class="hero-sub">4,000+ practice drills covering every FLK1 and FLK2 topic. No subscription, just a single £19 payment.</p>
1727        <div class="hero-ctas">
1728          <a href="#" class="btn-primary btn-buy" data-cta-event="hero-cta-buy">Get drills £19</a>
1729          <a href="#sample" class="btn-link">Try a sample drill →</a>
1730        </div>
1731        <div class="trust-row">
1732          <span class="trust-row-item"><span class="dot"></span> One payment</span>
1733          <span class="trust-row-item"><span class="dot"></span> No subscription</span>
1734          <span class="trust-row-item"><span class="dot"></span> Defer or resit, still yours</span>
1735        </div>
1736      </div>
1737
1738      <div class="hero-right">
1739        <div class="collage" aria-hidden="true">
1740          <div class="collage-tile collage-tile-note">
1741            <div class="note-label">Robinson v Harman</div>
1742            <div class="note-text">Damages → put C in position as if performed</div>
1743          </div>
1744          <div class="collage-tile collage-tile-badge">
1745            <div class="badge-eyebrow">Only</div>
1746            <div class="badge-price">£19</div>
1747          </div>
1748          <div class="collage-tile collage-tile-score">
1749            <div class="score-row">
1750              <span class="score-icon">
1751                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
1752              </span>
1753              <span class="score-label">Streak</span>
1754            </div>
1755            <div class="score-num">+4 correct</div>
1756            <div class="score-sub">Contract Law · FLK1</div>
1757          </div>
1758          <div class="collage-window">
1759            <div class="window-chrome">
1760              <div class="window-dots"><span></span><span></span><span></span></div>
1761              <div class="window-url">app.sqetrack.co.uk/practice</div>
1762            </div>
1763            <div class="window-body">
1764              <div class="drill-head">
1765                <span>Question 4 of 50</span>
1766                <span class="drill-head-r">4 of 4 correct</span>
1767              </div>
1768              <div class="drill-progress"><div class="drill-progress-bar"></div></div>
1769              <span class="chip">Contract Law · FLK1</span>
1770              <p class="drill-stem">A party fails to perform a contractual obligation. Which best describes the innocent party's primary remedy at common law?</p>
1771              <div class="opts">
1772                <div class="opt"><span class="opt-letter">A</span><span class="opt-label">Specific performance</span><svg class="opt-icon" viewBox="0 0 24 24"></svg></div>
1773                <div class="opt correct">
1774                  <span class="opt-letter">B</span>
1775                  <span class="opt-label">Damages</span>
1776                  <svg class="opt-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
1777                </div>
1778                <div class="opt"><span class="opt-letter">C</span><span class="opt-label">Rescission</span><svg class="opt-icon" viewBox="0 0 24 24"></svg></div>
1779                <div class="opt"><span class="opt-letter">D</span><span class="opt-label">Injunction</span><svg class="opt-icon" viewBox="0 0 24 24"></svg></div>
1780                <div class="opt"><span class="opt-letter">E</span><span class="opt-label">Restitution</span><svg class="opt-icon" viewBox="0 0 24 24"></svg></div>
1781              </div>
1782            </div>
1783          </div>
1784        </div>
1785      </div>
1786    </div>
1787  </div>
1788</section>
1789
1790<!-- ─────────── Features ─────────── -->
1791<section class="features">
1792  <div class="container">
1793    <div class="features-head">
1794      <h2 class="features-title">Pay once, <span class="features-title-word">not each month<svg class="features-highlight" viewBox="0 0 220 24" preserveAspectRatio="none" aria-hidden="true"><path d="M3 6 L 218 4 L 216 21 L 5 22 Z" fill="var(--accent-red)" opacity="0.35"/></svg></span>.</h2>
1795    </div>
1796
1797    <div class="features-list">
1798      <div class="feat-row">
1799        <div class="feat-row-main">
1800          <div class="feat-row-num">01</div>
1801          <div class="feat-row-text">
1802            <h3>4,000+ drills, covering every FLK1 and FLK2 topic</h3>
1803            <p>Full syllabus coverage across both assessments. Enough to practise every topic multiple times across weeks of revision.</p>
1804          </div>
1805        </div>
1806        <div class="feat-note">
1807          <div class="feat-note-label">Why this matters</div>
1808          <div class="feat-note-text">No gaps. No premium tier.</div>
1809        </div>
1810      </div>
1811
1812      <div class="feat-row">
1813        <div class="feat-note">
1814          <div class="feat-note-label">Why this matters</div>
1815          <div class="feat-note-text">Learn from your mistakes, not just memorise.</div>
1816        </div>
1817        <div class="feat-row-main">
1818          <div class="feat-row-num">02</div>
1819          <div class="feat-row-text">
1820            <h3>Reasoning with every answer</h3>
1821            <p>The correct answer plus a short explanation. You learn what's right and why the other four options are wrong.</p>
1822          </div>
1823        </div>
1824      </div>
1825
1826      <div class="feat-row">
1827        <div class="feat-row-main">
1828          <div class="feat-row-num">03</div>
1829          <div class="feat-row-text">
1830            <h3>Reviewed before publication</h3>
1831            <p>Every drill is checked for accuracy against the SRA's published syllabus before it goes live.</p>
1832          </div>
1833        </div>
1834        <div class="feat-note">
1835          <div class="feat-note-label">Why this matters</div>
1836          <div class="feat-note-text">Wrong answers waste your time.</div>
1837        </div>
1838      </div>
1839    </div>
1840  </div>
1841</section>
1842
1843<!-- ─────────── Sample drill ─────────── -->
1844<section class="sample" id="sample">
1845  <div class="container">
1846    <div class="sample-head">
1847      <h2 class="s-headline">Try before you buy.</h2>
1848      <p class="s-sub">Pick an answer below. These are real drills taken from the SQETrack question bank.</p>
1849    </div>
1850
1851    <div class="stack" data-stack>
1852      <!-- Drill 1 -->
1853      <div class="s-card" data-state="open" data-idx="1">
1854        <div class="s-card-summary">
1855          <div class="s-card-summary-l">
1856            <span class="s-card-summary-check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></span>
1857            <span>Drill 1 · Contract Law · Damages</span>
1858          </div>
1859          <span class="s-card-summary-r">Correct</span>
1860        </div>
1861        <div class="s-card-body">
1862          <div class="s-card-head">
1863            <span>Drill 1 of 3</span>
1864            <span class="chip">Contract Law · FLK1</span>
1865          </div>
1866          <p class="drill-stem">A party fails to perform a contractual obligation. Which best describes the innocent party's primary remedy at common law?</p>
1867          <div class="drill-opts" data-correct="B">
1868            <button type="button" class="opt-btn" data-letter="A"><span class="opt-letter">A</span><span class="opt-label-text">Specific performance</span><svg class="opt-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></svg></button>
1869            <button type="button" class="opt-btn" data-letter="B"><span class="opt-letter">B</span><span class="opt-label-text">Damages</span><svg class="opt-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></button>
1870            <button type="button" class="opt-btn" data-letter="C"><span class="opt-letter">C</span><span class="opt-label-text">Rescission</span><svg class="opt-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></svg></button>
1871            <button type="button" class="opt-btn" data-letter="D"><span class="opt-letter">D</span><span class="opt-label-text">Injunction</span><svg class="opt-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></svg></button>
1872            <button type="button" class="opt-btn" data-letter="E"><span class="opt-letter">E</span><span class="opt-label-text">Restitution</span><svg class="opt-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></svg></button>
1873          </div>
1874          <div class="explain"><strong>Correct.</strong> Damages are the primary remedy at common law for breach of contract (Robinson v Harman). Specific performance and injunctions are equitable. Rescission unmakes the contract. Restitution addresses unjust enrichment.</div>
1875          <div class="next-row"><button type="button" class="next-btn" data-next>Next drill →</button></div>
1876        </div>
1877      </div>
1878
1879      <!-- Drill 2 -->
1880      <div class="s-card" data-state="hidden" data-idx="2">
1881        <div class="s-card-summary">
1882          <div class="s-card-summary-l">
1883            <span class="s-card-summary-check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></span>
1884            <span>Drill 2 · Criminal Law · Murder mens rea</span>
1885          </div>
1886          <span class="s-card-summary-r">Correct</span>
1887        </div>
1888        <div class="s-card-body">
1889          <div class="s-card-head">
1890            <span>Drill 2 of 3</span>
1891            <span class="chip">Criminal Law · FLK1</span>
1892          </div>
1893          <p class="drill-stem">What is the mens rea required for murder under English common law?</p>
1894          <div class="drill-opts" data-correct="C">
1895            <button type="button" class="opt-btn" data-letter="A"><span class="opt-letter">A</span><span class="opt-label-text">Intention to cause minor injury</span>
1895<svg class="opt-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></svg></button>
1896            <button type="button" class="opt-btn" data-letter="B"><span class="opt-letter">B</span><span class="opt-label-text">Recklessness as to death</span><svg class="opt-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></svg></button>
1897            <button type="button" class="opt-btn" data-letter="C"><span class="opt-letter">C</span><span class="opt-label-text">Intention to kill or cause grievous bodily harm</span><svg class="opt-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></button>
1898            <button type="button" class="opt-btn" data-letter="D"><span class="opt-letter">D</span><span class="opt-label-text">Negligence as to harm</span><svg class="opt-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></svg></button>
1899            <button type="button" class="opt-btn" data-letter="E"><span class="opt-letter">E</span><span class="opt-label-text">Knowledge that death was possible</span><svg class="opt-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></svg></button>
1900          </div>
1901          <div class="explain"><strong>Correct.</strong> The mens rea for murder is intention to kill or cause grievous bodily harm (R v Cunningham). Recklessness, negligence, and mere knowledge of possibility are insufficient.</div>
1902          <div class="next-row"><button type="button" class="next-btn" data-next>Next drill →</button></div>
1903        </div>
1904      </div>
1905
1906      <!-- Drill 3 -->
1907      <div class="s-card" data-state="hidden" data-idx="3">
1908        <div class="s-card-summary">
1909          <div class="s-card-summary-l">
1910            <span class="s-card-summary-check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></span>
1911            <span>Drill 3 · Property Law · Legal easements</span>
1912          </div>
1913          <span class="s-card-summary-r">Correct</span>
1914        </div>
1915        <div class="s-card-body">
1916          <div class="s-card-head">
1917            <span>Drill 3 of 3</span>
1918            <span class="chip">Property Law · FLK2</span>
1919          </div>
1920          <p class="drill-stem">Which of the following is required for the formal creation of a legal easement by deed?</p>
1921          <div class="drill-opts" data-correct="A">
1922            <button type="button" class="opt-btn" data-letter="A"><span class="opt-letter">A</span><span class="opt-label-text">A signed deed by the grantor</span><svg class="opt-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></button>
1923            <button type="button" class="opt-btn" data-letter="B"><span class="opt-letter">B</span><span class="opt-label-text">A verbal agreement between parties</span><svg class="opt-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></svg></button>
1924            <button type="button" class="opt-btn" data-letter="C"><span class="opt-letter">C</span><span class="opt-label-text">Continuous use for 12 years</span><svg class="opt-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></svg></button>
1925            <button type="button" class="opt-btn" data-letter="D"><span class="opt-letter">D</span><span class="opt-label-text">Land Registry approval</span>
1925<svg class="opt-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></svg></button>
1926            <button type="button" class="opt-btn" data-letter="E"><span class="opt-letter">E</span><span class="opt-label-text">A written application to the court</span><svg class="opt-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></svg></button>
1927          </div>
1928          <div class="explain"><strong>Correct.</strong> Section 52 of the Law of Property Act 1925 requires a deed for the legal creation of an easement. Verbal agreements create equitable easements at best. Prescription requires 20 years' use, not 12. Land Registry registration is for protection, not creation.</div>
1929          <div class="next-row"><button type="button" class="next-btn" data-next>See what's next →</button></div>
1930        </div>
1931      </div>
1932
1933      <!-- Wall 1 — shown after drill 3. Two CTAs: buy, or try 10 more in-page. -->
1934      <div class="wall" data-wall>
1935        <div class="wall-stamp" aria-hidden="true">
1936          <div class="wall-stamp-eyebrow">Only</div>
1937          <div class="wall-stamp-price">£19</div>
1938        </div>
1939        <div class="wall-eyebrow">3 of 4,000+</div>
1940        <h3 class="wall-title">That's a taste.<br>The other 3,997 are waiting.</h3>
1941        <p class="wall-body">£19 once, full access — every FLK1 and FLK2 topic. No subscription. Or carry on for free with 10 more drills.</p>
1942        <div class="wall-ctas">
1943          <a href="#" class="wall-buy btn-buy" data-cta-event="wall-cta-buy">Get drills · £19</a>
1944          <button type="button" class="wall-more" data-more data-cta-event="wall-more-free">Try 10 more for free →</button>
1945        </div>
1946      </div>
1947
1948      <!-- Single-card flow for drills 4–13. Reuses .s-card visual styling
1949           but skips the collapse/summary state machine — content swaps in
1950           place, no scroll between drills.
1951           Hidden by default via data-state="hidden" (see .s-card rule). -->
1952      <div class="s-card single-card" data-single-card data-state="hidden">
1953        <div class="s-card-body">
1954          <div class="s-card-head">
1955            <span class="counter" data-single-counter>Drill 4 of 13</span>
1956            <span class="chip" data-single-chip>Contract Law · FLK1</span>
1957          </div>
1958          <p class="drill-stem" data-single-stem></p>
1959          <div class="drill-opts" data-single-opts></div>
1960          <div class="explain" data-single-explain></div>
1961          <div class="next-row" data-single-next-row>
1962            <button type="button" class="next-btn" data-single-next>Next drill →</button>
1963          </div>
1964        </div>
1965      </div>
1966
1967      <!-- Wall 2 — shown after drill 13. Single £19 CTA, no secondary. -->
1968      <div class="wall" data-wall-2>
1969        <div class="wall-stamp" aria-hidden="true">
1970          <div class="wall-stamp-eyebrow">Only</div>
1971          <div class="wall-stamp-price">£19</div>
1972        </div>
1973        <div class="wall-eyebrow">13 of 4,000+</div>
1974        <h3 class="wall-title">13 down, 3,987 to go.</h3>
1975        <p class="wall-body">£19 is the only thing standing between you and the rest.</p>
1976        <div class="wall-ctas">
1977          <a href="#" class="wall-buy btn-buy" data-cta-event="wall2-cta-buy">Get drills · £19 →</a>
1978        </div>
1979      </div>
1980    </div>
1981  </div>
1982</section>
1983
1984<!-- ─────────── Stats / Why drills work ─────────── -->
1985<section class="stats-section">
1986  <div class="container">
1987    <div class="stats-section-head">
1988      <h2 class="stats-title">Why drills <span class="stats-word">work<svg class="stats-hl" viewBox="0 0 220 24" preserveAspectRatio="none" aria-hidden="true"><path d="M3 6 L 218 4 L 216 21 L 5 22 Z" fill="var(--accent-red)" opacity="0.35"/></svg></span>.</h2>
1989    </div>
1990
1991    <div class="stats-grid">
1992      <article class="pcard">
1993        <div class="pcard-sticker">Reason 1</div>
1994        <h3 class="pcard-claim">Find your gaps before the exam does.</h3>
1995        <p class="pcard-body">Try this: close your eyes and state the rule against double jeopardy. If you couldn't, you didn't know it. You recognised it when you saw it. Drills test you the way the exam does.</p>
1996      </article>
1997      <article class="pcard">
1998        <div class="pcard-sticker">Reason 2</div>
1999        <h3 class="pcard-claim">Drilling is the exam, without the consequences.</h3>
2000        <p class="pcard-body">You won't have your notes in the exam. You'll have your memory. Drills are how you find out what's actually in there.</p>
2001      </article>
2002    </div>
2003  </div>
2004</section>
2005
2006<!-- ─────────── Inside SQETrack ─────────── -->
2007<section class="inside">
2008  <div class="container">
2009    <div class="inside-head">
2010      <h2 class="inside-title">Inside SQETrack.</h2>
2011    </div>
2012
2013    <div class="tabs">
2014      <div class="tabs-row" role="tablist">
2015        <button type="button" class="tab active" data-panel="perf"><span class="tab-num">01</span>Performance</button>
2016        <button type="button" class="tab" data-panel="practice"><span class="tab-num">02</span>Practice</button>
2017        <button type="button" class="tab" data-panel="drill"><span class="tab-num">03</span>Drill</button>
2018      </div>
2019
2020      <!-- Panel: Performance -->
2021      <div class="panel active" data-panel="perf">
2022        <div class="panel-text">
2023          <span class="panel-eyebrow">Performance</span>
2024          <h3 class="panel-title">See where you're weak. Week by week.</h3>
2025          <p class="panel-body">Every subject and study unit tracked over time. The red blocks tell you where to focus next. The green ones tell you what you've already got.</p>
2026          <div class="panel-note">
2027            <div class="panel-note-label">Why this matters</div>
2028            <div class="panel-note-text">Find your gaps before the exam does.</div>
2029          </div>
2030        </div>
2031        <div class="panel-demo-wrap">
2032          <div class="demo">
2033            <h4 class="perf-h2">Performance</h4>
2034            <div class="perf-controls">
2035              <span>Period</span>
2036              <div class="perf-pills">
2037                <span class="perf-pill">Day</span>
2038                <span class="perf-pill active">Week</span>
2039                <span class="perf-pill">Month</span>
2040              </div>
2041              <span style="margin-left:6px;">Paper</span>
2042              <div class="perf-pills">
2043                <span class="perf-pill">FLK 1</span>
2044                <span class="perf-pill">FLK 2</span>
2045                <span class="perf-pill active">Both</span>
2046              </div>
2047            </div>
2048            <div class="perf-table">
2049              <div class="perf-row perf-row-head">
2050                <div class="perf-cell perf-cell-label">SQE 1 — FLK 1 &amp; 2 · Week ending</div>
2051                <div class="perf-cell">12 Apr</div>
2052                <div class="perf-cell">19 Apr</div>
2053                <div class="perf-cell">26 Apr</div>
2054                <div class="perf-cell">3 May</div>
2055                <div class="perf-cell">10 May</div>
2056                <div class="perf-cell">17 May</div>
2057              </div>
2058              <div class="perf-row perf-row-strong">
2059                <div class="perf-cell perf-cell-label">Overall</div>
2060                <div class="perf-cell">—</div>
2061                <div class="perf-cell">—</div>
2062                <div class="perf-cell">—</div>
2063                <div class="perf-cell">—</div>
2064                <div class="perf-cell perf-cell-bad">17% (12)</div>
2065                <div class="perf-cell perf-cell-bad">25% (16)</div>
2066              </div>
2067              <div class="perf-row">
2068                <div class="perf-cell perf-cell-label">▾ Criminal Liability</div>
2069                <div class="perf-cell">—</div>
2070                <div class="perf-cell">—</div>
2071                <div class="perf-cell">—</div>
2072                <div class="perf-cell">—</div>
2073                <div class="perf-cell">(2)</div>
2074                <div class="perf-cell">—</div>
2075              </div>
2076              <div class="perf-row">
2077                <div class="perf-cell perf-cell-label perf-cell-nested">▸ Offences Against the Person</div>
2078                <div class="perf-cell">—</div>
2079                <div class="perf-cell">—</div>
2080                <div class="perf-cell">—</div>
2081                <div class="perf-cell">—</div>
2082                <div class="perf-cell">(2)</div>
2083                <div class="perf-cell">—</div>
2084              </div>
2085              <div class="perf-row">
2086                <div class="perf-cell perf-cell-label">▸ Property Law and Practice</div>
2087                <div class="perf-cell">—</div>
2088                <div class="perf-cell">—</div>
2089                <div class="perf-cell">—</div>
2090                <div class="perf-cell">—</div>
2091                <div class="perf-cell perf-cell-good">75% (4)</div>
2092                <div class="perf-cell perf-cell-good">80% (5)</div>
2093              </div>
2094              <div class="perf-row">
2095                <div class="perf-cell perf-cell-label">▸ Business Law and Practice</div>
2096                <div class="perf-cell">—</div>
2097                <div class="perf-cell">—</div>
2098                <div class="perf-cell">—</div>
2099                <div class="perf-cell">—</div>
2100                <div class="perf-cell">(4)</div>
2101                <div class="perf-cell perf-cell-ok">20% (10)</div>
2102              </div>
2103              <div class="perf-row">
2104                <div class="perf-cell perf-cell-label">▸ Contract Law</div>
2105                <div class="perf-cell">—</div>
2106                <div class="perf-cell">—</div>
2107                <div class="perf-cell">—</div>
2108                <div class="perf-cell">—</div>
2109                <div class="perf-cell">(2)</div>
2110                <div class="perf-cell perf-cell-bad">40% (5)</div>
2111              </div>
2112            </div>
2113          </div>
2114        </div>
2115      </div>
2116
2117      <!-- Panel: Practice -->
2118      <div class="panel" data-panel="practice">
2119        <div class="panel-text">
2120          <span class="panel-eyebrow">Practice</span>
2121          <h3 class="panel-title">Drill a single topic. Or a whole subject.</h3>
2122          <p class="panel-body">497 study units across FLK1 and FLK2. Search, click, start. Drill the one topic you keep getting wrong, or work through a subject end to end.</p>
2123          <div class="panel-note">
2124            <div class="panel-note-label">Why this matters</div>
2125            <div class="panel-note-text">No premium tier. No upsell.</div>
2126          </div>
2127        </div>
2128        <div class="panel-demo-wrap">
2129          <div class="demo demo--padded">
2130            <div class="prac-panel">
2131              <div class="prac-label">Choose a subject and study unit</div>
2132              <div class="prac-search">Search subjects…</div>
2133              <div class="prac-tree">
2134                <div class="prac-group">
2135                  <span class="prac-check prac-check--partial"></span>
2136                  Business Law and Practice
2137                </div>
2138                <div class="prac-item">
2139                  <span class="prac-check prac-check--full">
2140                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
2141                  </span>
2142                  Business Organisations, Rules and Procedures
2143                </div>
2144                <div class="prac-item">
2145                  <span class="prac-check"></span>
2146                  Corporate Governance and Compliance
2147                </div>
2148                <div class="prac-item">
2149                  <span class="prac-check"></span>
2150                  Finance
2151                </div>
2152                <div class="prac-item">
2153                  <span class="prac-check"></span>
2154                  Formation Procedures
2155                </div>
2156                <div class="prac-item">
2157                  <span class="prac-check"></span>
2158                  Insolvency (Corporate and Personal)
2159                </div>
2160                <div class="prac-item">
2161                  <span class="prac-check"></span>
2162                  Partnership Decision-Making and Authority of Partners
2163                </div>
2164                <div class="prac-item">
2165                  <span class="prac-check"></span>
2166                  Taxation - Business
2167                </div>
2168              </div>
2169              <div class="prac-footer">
2170                <span class="prac-count">1 study unit selected</span>
2171                <span class="prac-btn">Start session (1 study unit)</span>
2172              </div>
2173            </div>
2174          </div>
2175        </div>
2176      </div>
2177
2178      <!-- Panel: Drill -->
2179      <div class="panel" data-panel="drill">
2180        <div class="panel-text">
2181          <span class="panel-eyebrow">Drill</span>
2182          <h3 class="panel-title">A reason behind every answer.</h3>
2183          <p class="panel-body">Not just what's right. Why it's right, and why each wrong one is wrong. Open all explanations to see the reasoning side by side.</p>
2184          <div class="panel-note">
2185            <div class="panel-note-label">Why this matters</div>
2186            <div class="panel-note-text">Learn from the wrong ones too.</div>
2187          </div>
2188        </div>
2189        <div class="panel-demo-wrap">
2190          <div class="demo">
2191            <div class="drill-progress-row">
2192              <div class="drill-pbar wrong"></div>
2193              <div class="drill-pbar right"></div>
2194              <div class="drill-pbar active"></div>
2195              <div class="drill-pbar"></div>
2196              <div class="drill-pbar"></div>
2197              <div class="drill-pbar"></div>
2198              <div class="drill-pbar"></div>
2199              <div class="drill-pbar"></div>
2200              <div class="drill-pbar"></div>
2201              <div class="drill-pbar"></div>
2202            </div>
2203            <div class="drill-counter">2 / 10</div>
2204            <div class="drill-topic">Business Organisations, Rules and Procedures</div>
2205            <p class="drill-stem">What must a public company obtain before it can commence trading?</p>
2206            <div class="drill-opts">
2207              <div class="drill-opt">
2208                <span class="drill-opt-letter">A</span>
2209                A certificate of incorporation confirming the company has been properly formed
2210              </div>
2211              <div class="drill-opt drill-opt--correct">
2212                <span class="drill-opt-letter"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></span>
2213                A trading certificate confirming allotted share capital meets the authorised minimum
2214              </div>
2215              <div class="drill-explain drill-explain--good">
2216                A public company must obtain a trading certificate that confirms its allotted share capital meets the authorised minimum before it can commence trading. This requirement ensures the company has sufficient capital backing before it begins business operations.
2217              </div>
2218              <div class="drill-opt">
2219                <span class="drill-opt-letter">C</span>
2220                A trading certificate confirming issued share capital meets the authorised minimum
2221              </div>
2222              <div class="drill-opt">
2223                <span class="drill-opt-letter">D</span>
2224                A trading certificate confirming authorised share capital meets the statutory minimum
2225              </div>
2226              <div class="drill-opt">
2227                <span class="drill-opt-letter">E</span>
2228                A trading licence from Companies House confirming the company can conduct business
2229              </div>
2230            </div>
2231            <div class="drill-footer">
2232              <span class="drill-show-all">Show all explanations</span>
2233              <span class="drill-next">Next drill</span>
2234            </div>
2235          </div>
2236        </div>
2237      </div>
2238    </div>
2239  </div>
2240</section>
2241
2242<!-- ─────────── Closing CTA ─────────── -->
2243<section class="closing">
2244  <div class="container">
2245    <div class="closing-inner">
2246      <span class="closing-eyebrow">Last thing.</span>
2247      <h2 class="closing-title">£19 is one decent lunch. Or every drill you'll need.</h2>
2248      <p class="closing-body">4,000+ drills. Every FLK1 and FLK2 topic. Paid once. Yours forever, whether you defer, resit, or come back to it months later.</p>
2249      <div class="closing-cta-row">
2250        <a href="#" class="closing-cta btn-buy" data-cta-event="closing-cta-buy">Get drills · £19 →</a>
2251        <span class="closing-caveat">No subscription.</span>
2252      </div>
2253    </div>
2254  </div>
2255</section>
2256
2257</main>
2258
2259<!-- ─────────── Footer ─────────── -->
2260<footer class="footer">
2261  <div class="container">
2262    <div class="footer-top">
2263      <div class="footer-brand">
2264        <a href="/" class="footer-brand-logo" aria-label="SQETrack home">
2265          <svg viewBox="0 0 32 32" width="22" height="22" aria-hidden="true">
2266            <polygon points="3,27 12,27 17,15 8,15" fill="rgba(255,255,255,0.3)"/>
2267            <polygon points="10,23 19,23 24,11 15,11" fill="rgba(255,255,255,0.65)"/>
2268            <polygon points="17,19 26,19 31,7 22,7" fill="rgba(255,255,255,0.95)"/>
2269          </svg>
2270          <span class="nav-logo-text"><span class="nav-logo-sqe">SQE</span><span class="nav-logo-track">Track</span></span>
2271        </a>
2272        <p class="footer-brand-line">SQE1 revision drills. £19, paid once, yours forever.</p>
2273        <a href="mailto:[email protected]" class="footer-brand-email">[email protected]</a>
2274      </div>
2275      <div class="footer-col">
2276        <h4 class="footer-col-title">Product</h4>
2277        <ul>
2278          <li><a href="#sample">Try a sample</a></li>
2279          <li><a href="#" class="btn-buy" data-cta-event="footer-link-buy">Get drills</a></li>
2280          <li><a href="https://app.sqetrack.co.uk/login">Log in</a></li>
2281        </ul>
2282      </div>
2283      <div class="footer-col">
2284        <h4 class="footer-col-title">Resources</h4>
2285        <ul>
2286          <li><a href="/sqe1-topics">Complete topic list</a></li>
2287          <li><a href="/sqe1-exam-dates">Exam dates</a></li>
2288          <li><a href="/free-sqe1-questions">Free practice questions</a></li>
2289          <li><a href="/free-sqe1-drills/">Free practice drills</a></li>
2290          <li><a href="/sqe1-revision-planner">Revision planner template</a></li>
2291        </ul>
2292      </div>
2293      <div class="footer-col">
2294        <h4 class="footer-col-title">Legal</h4>
2295        <ul>
2296          <li><a href="/privacy">Privacy policy</a></li>
2297          <li><a href="/terms">Terms of use</a></li>
2298        </ul>
2299      </div>
2300    </div>
2301    <div class="footer-bottom">
2302      <span>© 2026 SQETrack. All rights reserved.</span>
2303      <span>Protected by reCAPTCHA. <a href="https://policies.google.com/privacy">Privacy</a> · <a href="https://policies.google.com/terms">Terms</a></span>
2304    </div>
2305  </div>
2306</footer>
2307
2308<script>
2309  /* ── Mobile menu ─────────────────────────────── */
2310  function toggleMobileMenu() {
2311    var menu = document.getElementById('mobile-menu');
2312    var btn = document.querySelector('.nav-hamburger');
2313    var open = menu.classList.toggle('open');
2314    if (btn) btn.setAttribute('aria-expanded', open ? 'true' : 'false');
2315  }
2316  function closeMobileMenu() {
2317    document.getElementById('mobile-menu').classList.remove('open');
2318    var btn = document.querySelector('.nav-hamburger');
2319    if (btn) btn.setAttribute('aria-expanded', 'false');
2320  }
2321
2322  /* ── GoatCounter event helper ────────────────── */
2323  function fireGCEvent(name) {
2324    if (!name) return;
2325    if (window.goatcounter && typeof window.goatcounter.count === 'function') {
2326      try { window.goatcounter.count({ path: name, event: true }); } catch (_) {}
2327    }
2328  }
2329
2330  /* ── Cookie helpers ──────────────────────────── */
2331  function getCookie(name) {
2332    var m = document.cookie.match(new RegExp('(^|; )' + name + '=([^;]+)'));
2333    return m ? decodeURIComponent(m[2]) : null;
2334  }
2335  function setCookie(name, value, days) {
2336    var maxAge = days * 24 * 60 * 60;
2337    document.cookie = name + '=' + encodeURIComponent(value) + '; max-age=' + maxAge + '; path=/; SameSite=Lax';
2338  }
2339
2340  /* ── Shared smooth-scroll helper ─────────────────
2341     Subtracts the announce bar (if visible) + sticky nav + 16px so the
2342     target lands clear of the sticky header. Used by the anchor-click
2343     handler below and the sample-drill flow's wall/single-card reveals. */
2344  function smoothScrollTo(target) {
2345    if (!target) return;
2346    var bar = document.getElementById('announce-bar');
2347    var nav = document.getElementById('site-nav');
2348    var offset = 16;
2349    if (bar && getComputedStyle(bar).display !== 'none') offset += bar.offsetHeight;
2350    if (nav) offset += nav.offsetHeight;
2351    var y = target.getBoundingClientRect().top + window.scrollY - offset;
2352    window.scrollTo({ top: y, behavior: 'smooth' });
2353  }
2354
2355  /* ── Nav shadow on scroll ────────────────────── */
2356  (function navScroll() {
2357    var nav = document.getElementById('site-nav');
2358    if (!nav) return;
2359    function update() {
2360      if (window.scrollY > 4) nav.classList.add('scrolled');
2361      else nav.classList.remove('scrolled');
2362    }
2363    update();
2364    window.addEventListener('scroll', update, { passive: true });
2365  }());
2366
2367  /* ── Announcement bar — SQE1 next-sitting countdown
2368     ─────────────────────────────────────────────
2369     Add a new entry to SQE1_SITTINGS each time the SRA confirms a new
2370     sitting. When today is past the LAST entry, the bar hides entirely
2371     rather than showing a negative countdown. Update this list at least
2372     annually.
2373  */
2374  (function announceBar() {
2375    var SQE1_SITTINGS = [
2376      { label: 'Next SQE1 sitting (July 2026)', date: '2026-07-07' },
2377      { label: 'Next SQE1 sitting (January 2027)', date: '2027-01-13' },
2378      { label: 'Next SQE1 sitting (July 2027)', date: '2027-07-13' }
2379    ];
2380
2381    var bar = document.getElementById('announce-bar');
2382    if (!bar) return;
2383
2384    if (getCookie('sqetrack_announcement_dismissed') === 'true') return;
2385
2386    var today = new Date();
2387    today.setHours(0, 0, 0, 0);
2388
2389    var next = null;
2390    for (var i = 0; i < SQE1_SITTINGS.length; i++) {
2391      var d = new Date(SQE1_SITTINGS[i].date + 'T00:00:00');
2392      if (d >= today) { next = { label: SQE1_SITTINGS[i].label, dateObj: d }; break; }
2393    }
2394    if (!next) return; // past the last entry — hide entirely
2395
2396    var days = Math.round((next.dateObj - today) / 86400000);
2397    var label = next.label + '. <strong>' + days + ' day' + (days === 1 ? '' : 's') + '</strong> to go.';
2398    var text = bar.querySelector('.announce-bar-text');
2399    text.innerHTML = label + ' <a href="#sample">Practice now →</a>';
2400    bar.style.display = 'flex';
2401
2402    var dismiss = document.getElementById('announce-bar-dismiss');
2403    if (dismiss) {
2404      dismiss.addEventListener('click', function () {
2405        setCookie('sqetrack_announcement_dismissed', 'true', 7);
2406        bar.style.display = 'none';
2407      });
2408    }
2409  }());
2410
2411  /* ── Smooth-scroll for in-page anchors ───────── */
2412  (function smoothScroll() {
2413    document.addEventListener('click', function (e) {
2414      var a = e.target.closest('a[href^="#"]');
2415      if (!a) return;
2416      var href = a.getAttribute('href');
2417      if (!href || href === '#' || href.length < 2) return;
2418      var target = document.querySelector(href);
2419      if (!target) return;
2420      e.preventDefault();
2421      smoothScrollTo(target);
2422      if (history.replaceState) history.replaceState(null, '', href);
2423    });
2424  }());
2425
2426  /* ── Sample drill — three-card sequence + conversion wall ── */
2427  (function sampleDrill() {
2428    var stack = document.querySelector('[data-stack]');
2429    if (!stack) return;
2430    // Scope to drills 1–3 only — the .s-card with data-idx attribute.
2431    // The .s-card.single-card (drills 4–13) is handled by singleCardFlow below.
2432    var cards = stack.querySelectorAll('.s-card[data-idx]');
2433    var wall = stack.querySelector('[data-wall]');
2434
2435    cards.forEach(function (card, idx) {
2436      var opts = card.querySelector('.drill-opts');
2437      if (!opts) return;
2438      var correct = opts.dataset.correct;
2439      var buttons = opts.querySelectorAll('.opt-btn');
2440      var explain = card.querySelector('.explain');
2441      var nextRow = card.querySelector('.next-row');
2442      var nextBtn = card.querySelector('[data-next]');
2443      var summaryCheck = card.querySelector('.s-card-summary-check');
2444      var summaryR = card.querySelector('.s-card-summary-r');
2445
2446      buttons.forEach(function (btn) {
2447        btn.addEventListener('click', function () {
2448          if (opts.dataset.answered) return;
2449          opts.dataset.answered = '1';
2450          var picked = btn.dataset.letter;
2451          var isCorrect = (picked === correct);
2452          buttons.forEach(function (b) {
2453            b.classList.add('locked');
2454            if (b.dataset.letter === correct) b.classList.add('correct');
2455            else if (b === btn && !isCorrect) b.classList.add('wrong');
2456          });
2457          // Swap the explain's lead-in to match the user's actual outcome.
2458          // The strong element holds the "Correct." prefix in markup; the
2459          // text node after it holds the per-drill explanation. We rewrite
2460          // only the prefix and apply .error for the red panel variant on
2461          // wrong answers.
2462          var strongEl = explain.querySelector('strong');
2463          if (strongEl) {
2464            strongEl.textContent = isCorrect
2465              ? 'Correct.'
2466              : 'Not quite, the correct answer is ' + correct + '.';
2467          }
2468          explain.classList.toggle('error', !isCorrect);
2469          explain.classList.add('show');
2470          nextRow.classList.add('show');
2471          if (!isCorrect) {
2472            summaryCheck.classList.add('wrong');
2473            summaryR.textContent = 'Wrong';
2474          }
2475          fireGCEvent(isCorrect
2476            ? 'sample-drill-' + (idx + 1) + '-correct'
2477            : 'sample-drill-' + (idx + 1) + '-wrong');
2478        });
2479      });
2480
2481      if (nextBtn) {
2482        nextBtn.addEventListener('click', function () {
2483          card.dataset.state = 'collapsed';
2484          var next = cards[idx + 1];
2485          if (next) {
2486            next.dataset.state = 'open';
2487            next.scrollIntoView({ behavior: 'smooth', block: 'center' });
2488          } else {
2489            wall.classList.add('show');
2490            wall.scrollIntoView({ behavior: 'smooth', block: 'center' });
2491            fireGCEvent('sample-drill-wall-reached');
2492          }
2493        });
2494      }
2495    });
2496  }());
2497
2498  /* ── Single-card flow for drills 4–13 ─────────
2499     ────────────────────────────────────────────────
2500     Triggered by "Try 10 more for free →" in wall 1. Hides wall 1 and
2501     renders one drill at a time in a single card, replacing content
2502     in place on each "Next drill" click (no scroll between drills).
2503     After drill 13 the card hides and wall 2 reveals.
2504
2505     ⚠ COPY-PASTE DUPLICATION DEBT ⚠
2506     The 10 drills below are hardcoded copies of rows from the
2507     `questions` table where is_free_sample = TRUE AND question_type = 'drill'
2508     in the SQETrack staging DB (IDs 561, 709, 606, 774, 659, 668, 858,
2509     696, 876, 895 as of 2026-05-18). These can drift from the
2510     authoritative DB versions over time. If you need to update them,
2511     re-run the source query against staging:
2512
2513       SELECT q.id, rt.subject_area, rt.module, q.stem, q.options,
2514              q.correct_answer, q.explanation
2515       FROM questions q
2516       JOIN reference_topics rt ON rt.id = q.reference_topic_id
2517       WHERE q.is_active = TRUE AND q.is_free_sample = TRUE
2518         AND q.question_type = 'drill';
2519
2520     ...and re-paste. No backend endpoint serves these to the homepage
2521     by design — the trade-off was rejected for simpler page load. */
2522  (function singleCardFlow() {
2523    var DRILLS_4_TO_13 = [
2524      {
2525        chip: 'Business Law and Practice · FLK1',
2526        stem: "What is the key characteristic of a sole trader's legal status?",
2527        options: [
2528          { letter: 'A', text: 'The business has separate legal personality from the owner' },
2529          { letter: 'B', text: 'The owner has limited liability for business debts' },
2530          { letter: 'C', text: 'The business and owner are the same legal entity with unlimited personal liability' },
2531          { letter: 'D', text: 'Formal registration with Companies House is required' },
2532          { letter: 'E', text: 'The business must have at least two owners' }
2533        ],
2534        correct: 'C',
2535        explanation: 'A sole trader has no separate legal personality from the owner. This means the business and individual are legally the same entity, resulting in unlimited personal liability for all business debts. Students often confuse this with limited companies which do have separate legal personality.'
2536      },
2537      {
2538        chip: 'Criminal Law and Practice · FLK2',
2539        stem: "When can a court draw an adverse inference from a defendant's failure to mention facts during police questioning?",
2540        options: [
2541          { letter: 'A', text: 'When the defendant fails to mention any facts during questioning, regardless of whether they later rely on them' },
2542          { letter: 'B', text: 'When the defendant later relies on facts in court that they failed to mention when questioned by police' },
2543          { letter: 'C', text: 'When the defendant gives inconsistent accounts during different police interviews' },
2544          { letter: 'D', text: 'When the defendant fails to mention facts that the prosecution later proves at trial' },
2545          { letter: 'E', text: 'When the defendant refuses to answer questions after being properly cautioned' }
2546        ],
2547        correct: 'B',
2548        explanation: "This correctly states the rule for adverse inferences. The court can draw an adverse inference when there is a contrast between the defendant's silence during police questioning about particular facts and their later reliance on those same facts in their defence at court. The key requirement is this connection between what was not said during questioning and what is later relied upon."
2549      },
2550      {
2551        chip: 'Dispute Resolution · FLK1',
2552        stem: 'Where does an appeal from a district judge normally go?',
2553        options: [
2554          { letter: 'A', text: 'To the Court of Appeal' },
2555          { letter: 'B', text: 'To a circuit judge' },
2556          { letter: 'C', text: 'To the High Court' },
2557          { letter: 'D', text: 'To another district judge' },
2558          { letter: 'E', text: 'To a recorder' }
2559        ],
2560        correct: 'B',
2561        explanation: 'Appeals from a district judge normally go to a circuit judge. This follows the general hierarchical structure where appeals move up one level at a time. The circuit judge represents the next tier above the district judge in the court hierarchy.'
2562      },
2563      {
2564        chip: 'Land Law · FLK2',
2565        stem: 'What is the maximum number of trustees who can hold legal title to land?',
2566        options: [
2567          { letter: 'A', text: 'Two' },
2568          { letter: 'B', text: 'Three' },
2569          { letter: 'C', text: 'Four' },
2570          { letter: 'D', text: 'Five' },
2571          { letter: 'E', text: 'There is no statutory maximum' }
2572        ],
2573        correct: 'C',
2574        explanation: 'The Trustee Act 1925 sets the maximum number of trustees who can hold legal title to land at four. This limit ensures that the legal title remains manageable while allowing sufficient trustees for practical purposes. Students sometimes confuse this with other numerical limits in land law, but the four-trustee maximum is a fundamental rule of trust law.'
2575      },
2576      {
2577        chip: 'Legal Services · FLK1',
2578        stem: "In a private retainer arrangement, what is the basis on which the client agrees to pay the solicitor's fees?",
2579        options: [
2580          { letter: 'A', text: 'On a contingency fee basis where payment depends on the outcome of the case' },
2581          { letter: 'B', text: 'On a time-cost or agreed basis' },
2582          { letter: 'C', text: 'On a damages-based agreement where fees are calculated as a percentage of damages recovered' },
2583          { letter: 'D', text: 'On a fixed fee basis only, with no variation permitted' },
2584          { letter: 'E', text: 'On an hourly rate basis only, calculated according to time spent' }
2585        ],
2586        correct: 'B',
2587        explanation: 'This correctly identifies the two permissible bases for fee payment in private retainer arrangements. The client commits to paying either based on time costs incurred by the solicitor or on a pre-agreed fee structure. Students sometimes confuse this with other funding arrangements like conditional fees or damages-based agreements.'
2588      },
2589      {
2590        chip: 'Legal System · FLK1',
2591        stem: 'What does Article 9 of the Bill of Rights 1689 protect from challenge in court?',
2592        options: [
2593          { letter: 'A', text: 'All statements made by MPs anywhere' },
2594          { letter: 'B', text: 'Parliamentary debates only' },
2595          { letter: 'C', text: 'Proceedings in Parliament' },
2596          { letter: 'D', text: 'Government ministers from judicial review' },
2597          { letter: 'E', text: 'Parliamentary buildings from search warrants' }
2598        ],
2599        correct: 'C',
2600        explanation: 'Article 9 of the Bill of Rights 1689 establishes that proceedings in Parliament cannot be challenged in court. This broad protection covers all parliamentary business including debates, questions, voting, and committee work. The most common confusion is thinking it only covers debates or extends to all MP statements everywhere.'
2601      },
2602      {
2603        chip: 'Solicitors Accounts · FLK2',
2604        stem: 'What must a solicitor do upon discovering a breach of the SRA Accounts Rules?',
2605        options: [
2606          { letter: 'A', text: 'Report the breach to the SRA within 7 days' },
2607          { letter: 'B', text: 'Correct the breach promptly' },
2608          { letter: 'C', text: 'Investigate the cause of the breach before taking action' },
2609          { letter: 'D', text: 'Correct the breach within a reasonable time' },
2610          { letter: 'E', text: 'Notify the client and correct the breach promptly' }
2611        ],
2612        correct: 'B',
2613        explanation: 'Rule 6.1 of the SRA Accounts Rules 2019 requires solicitors to correct any breach of the Accounts Rules promptly upon discovery. This is the fundamental obligation that applies immediately when a breach is identified. The emphasis is on swift remedial action rather than reporting or investigation procedures.'
2614      },
2615      {
2616        chip: 'Tort · FLK1',
2617        stem: 'What is the effect of contributory negligence on the damages awarded to a claimant?',
2618        options: [
2619          { letter: 'A', text: 'Damages are reduced to nil if the claimant contributed to their harm' },
2620          { letter: 'B', text: 'Damages are reduced by a fixed percentage regardless of the degree of fault' },
2621          { letter: 'C', text: "Damages are reduced by the claimant's proportionate share of fault" },
2622          { letter: 'D', text: "Damages are reduced only if the claimant's fault exceeds 50 percent" },
2623          { letter: 'E', text: 'Damages are reduced by half in all cases where contributory negligence is established' }
2624        ],
2625        correct: 'C',
2626        explanation: "Contributory negligence operates as a partial defence that reduces the claimant's damages according to their degree of responsibility for the harm suffered. The court assesses what percentage of fault lies with the claimant and reduces the award proportionally. This allows for a fair apporti
2626onment of responsibility between claimant and defendant, rather than the all-or-nothing approach that previously existed."
2627      },
2628      {
2629        chip: 'Trusts Law · FLK2',
2630        stem: 'What can a sole beneficiary who is of full legal capacity and holds the entire beneficial interest demand from the trustees?',
2631        options: [
2632          { letter: 'A', text: 'That the trust income be distributed to them immediately' },
2633          { letter: 'B', text: 'That the trustees consult them before making any investment decisions' },
2634          { letter: 'C', text: 'That the trust property be transferred to them and the trust be brought to an end' },
2635          { letter: 'D', text: 'That the trustees provide detailed accounts of all trust transactions' },
2636          { letter: 'E', text: 'That the trust be administered according to their specific instructions' }
2637        ],
2638        correct: 'C',
2639        explanation: 'This correctly states the rule in Saunders v Vautier. Where a sole beneficiary is of full legal capacity and holds the entire beneficial interest, they can demand transfer of the trust property and termination of the trust. This reflects the principle that equity will not permit a pointless continuation of a trust when the beneficiary can deal with the property directly.'
2640      },
2641      {
2642        chip: 'Wills and the Administration of Estates · FLK2',
2643        stem: "What is the primary duty of personal representatives regarding the assets of the deceased's estate?",
2644        options: [
2645          { letter: 'A', text: 'To preserve and maintain the assets in their current condition' },
2646          { letter: 'B', text: 'To collect and get in the assets of the estate' },
2647          { letter: 'C', text: 'To distribute the assets according to the will or intestacy rules' },
2648          { letter: 'D', text: 'To pay the debts and liabilities of the estate' },
2649          { letter: 'E', text: 'To obtain a grant of representation from the court' }
2650        ],
2651        correct: 'B',
2652        explanation: "This correctly states the fundamental duty imposed on personal representatives under the Administration of Estates Act 1925. They must actively identify, locate, and take control of all assets belonging to the deceased's estate. This is a positive duty requiring action, not merely passive preservation of known assets."
2653      }
2654    ];
2655
2656    var wall = document.querySelector('[data-wall]');
2657    var wall2 = document.querySelector('[data-wall-2]');
2658    var singleCard = document.querySelector('[data-single-card]');
2659    var moreBtn = document.querySelector('[data-more]');
2660    if (!wall || !wall2 || !singleCard || !moreBtn) return;
2661
2662    var counterEl = singleCard.querySelector('[data-single-counter]');
2663    var chipEl = singleCard.querySelector('[data-single-chip]');
2664    var stemEl = singleCard.querySelector('[data-single-stem]');
2665    var optsEl = singleCard.querySelector('[data-single-opts]');
2666    var explainEl = singleCard.querySelector('[data-single-explain]');
2667    var nextRowEl = singleCard.querySelector('[data-single-next-row]');
2668    var nextBtnEl = singleCard.querySelector('[data-single-next]');
2669
2670    var current = 0; // 0-indexed; drill 4 → index 0, drill 13 → index 9
2671    var SVG_NS = 'http://www.w3.org/2000/svg';
2672
2673    function makeIconSvg() {
2674      // Empty by default; populated with check/cross on answer.
2675      var svg = document.createElementNS(SVG_NS, 'svg');
2676      svg.setAttribute('class', 'opt-icon');
2677      svg.setAttribute('viewBox', '0 0 24 24');
2678      svg.setAttribute('fill', 'none');
2679      svg.setAttribute('stroke', 'currentColor');
2680      svg.setAttribute('stroke-width', '2.5');
2681      svg.setAttribute('stroke-linecap', 'round');
2682      svg.setAttribute('stroke-linejoin', 'round');
2683      return svg;
2684    }
2685
2686    function setIconCheck(svg) {
2687      svg.innerHTML = '';
2688      var p = document.createElementNS(SVG_NS, 'polyline');
2689      p.setAttribute('points', '20 6 9 17 4 12');
2690      svg.appendChild(p);
2691    }
2692
2693    function setIconCross(svg) {
2694      svg.innerHTML = '';
2695      var l1 = document.createElementNS(SVG_NS, 'line');
2696      l1.setAttribute('x1', '6'); l1.setAttribute('y1', '6');
2697      l1.setAttribute('x2', '18'); l1.setAttribute('y2', '18');
2698      var l2 = document.createElementNS(SVG_NS, 'line');
2699      l2.setAttribute('x1', '6'); l2.setAttribute('y1', '18');
2700      l2.setAttribute('x2', '18'); l2.setAttribute('y2', '6');
2701      svg.appendChild(l1);
2702      svg.appendChild(l2);
2703    }
2704
2705    function render(idx) {
2706      var d = DRILLS_4_TO_13[idx];
2707      counterEl.textContent = 'Drill ' + (idx + 4) + ' of 13';
2708      chipEl.textContent = d.chip;
2709      stemEl.textContent = d.stem;
2710      optsEl.innerHTML = '';
2711      d.options.forEach(function (o) {
2712        var btn = document.createElement('button');
2713        btn.type = 'button';
2714        btn.className = 'opt-btn';
2715        btn.dataset.letter = o.letter;
2716
2717        var letter = document.createElement('span');
2718        letter.className = 'opt-letter';
2719        letter.textContent = o.letter;
2720
2721        var label = document.createElement('span');
2722        label.className = 'opt-label-text';
2723        label.textContent = o.text;
2724
2725        btn.appendChild(letter);
2726        btn.appendChild(label);
2727        btn.appendChild(makeIconSvg());
2728
2729        btn.addEventListener('click', function () { answer(o.letter); });
2730        optsEl.appendChild(btn);
2731      });
2732      explainEl.classList.remove('show', 'error');
2733      nextRowEl.classList.remove('show');
2734    }
2735
2736    function answer(letter) {
2737      var d = DRILLS_4_TO_13[current];
2738      if (singleCard.dataset.answered === '1') return;
2739      singleCard.dataset.answered = '1';
2740
2741      var isCorrect = (letter === d.correct);
2742      var buttons = optsEl.querySelectorAll('.opt-btn');
2743      buttons.forEach(function (b) {
2744        b.classList.add('locked');
2745        b.disabled = true;
2746        var icon = b.querySelector('.opt-icon');
2747        if (b.dataset.letter === d.correct) {
2748          b.classList.add('correct');
2749          if (icon) setIconCheck(icon);
2750        } else if (b.dataset.letter === letter && !isCorrect) {
2751          b.classList.add('wrong');
2752          if (icon) setIconCross(icon);
2753        }
2754      });
2755      // Explain panel: green when the user is correct, red-tinted when
2756      // wrong. The lead phrase ("Correct." or "Not quite, the correct
2757      // answer is X.") sets the framing; the .error class swaps the
2758      // panel background/border/text colour. Matches drills 1–3.
2759      explainEl.innerHTML =
2760        '<strong>' + (isCorrect ? 'Correct.' : 'Not quite, the correct answer is ' + d.correct + '.') + '</strong> '
2761        + d.explanation;
2762      explainEl.classList.toggle('error', !isCorrect);
2763      explainEl.classList.add('show');
2764      nextRowEl.classList.add('show');
2765      fireGCEvent(isCorrect
2766        ? 'sample-drill-' + (current + 4) + '-correct'
2767        : 'sample-drill-' + (current + 4) + '-wrong');
2768    }
2769
2770    function advance() {
2771      if (current < DRILLS_4_TO_13.length - 1) {
2772        current += 1;
2773        delete singleCard.dataset.answered;
2774        render(current);
2775        // No scroll — the card stays put, only content swaps.
2776      } else {
2777        // End of drill 13 → wall 2.
2778        singleCard.dataset.state = 'hidden';
2779        wall2.classList.add('show');
2780        smoothScrollTo(wall2);
2781        fireGCEvent('sample-drill-wall2-reached');
2782      }
2783    }
2784
2785    nextBtnEl.addEventListener('click', advance);
2786
2787    moreBtn.addEventListener('click', function () {
2788      fireGCEvent('wall-more-free');
2789      wall.classList.remove('show');
2790      current = 0;
2791      delete singleCard.dataset.answered;
2792      render(0);
2793      singleCard.dataset.state = 'open';
2794      smoothScrollTo(singleCard);
2795    });
2796  }());
2797
2798  /* ── Inside SQETrack — tab switching ── */
2799  (function insideTabs() {
2800    var tabs = document.querySelectorAll('.tab');
2801    var panels = document.querySelectorAll('.panel');
2802    if (!tabs.length || !panels.length) return;
2803
2804    tabs.forEach(function (btn) {
2805      btn.addEventListener('click', function () {
2806        var target = btn.dataset.panel;
2807        tabs.forEach(function (b) { b.classList.toggle('active', b.dataset.panel === target); });
2808        panels.forEach(function (p) { p.classList.toggle('active', p.dataset.panel === target); });
2809        fireGCEvent('inside-tab-' + target);
2810      });
2811    });
2812  }());
2813</script>
vendor: 1 bytes, line 2813
2813
2814<script src="/js/stripe-buy.js" defer></script>
2814
2815
2816</body>
2817</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.