/* Public Group Test landing page. Scoped under .gtc- so it cannot reach the shared shell. */

.gtc-page {
    --gtc-purple: #6d28f5;
    --gtc-purple-dark: #4c1d95;
    --gtc-ink: #111827;
    --gtc-muted: #6b7280;
    --gtc-line: #e5e7eb;
    --gtc-card: #ffffff;
    --gtc-tint: #f5f3ff;
    color: var(--gtc-ink);
    font-size: 15px;
}

.gtc-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

.gtc-container-narrow {
    max-width: 780px;
}

.gtc-section {
    padding: 56px 0;
}

.gtc-section-light {
    background: #f8fafc;
}

.gtc-section-tint {
    background: #f3efff;
}

.gtc-heading {
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 8px;
}

.gtc-heading-left {
    text-align: left;
}

.gtc-subheading {
    text-align: center;
    color: var(--gtc-muted);
    margin: 0 auto 28px;
    max-width: 560px;
}

.gtc-heading + .gtc-trending-track,
.gtc-heading + .gtc-benefit-grid,
.gtc-heading + .gtc-step-grid,
.gtc-heading + .gtc-faq-list {
    margin-top: 28px;
}

/* Hero: copy on the left, a picture of the product on the right.

   One flat tint, not a white-to-tint gradient. The gradient started white at the top, so the
   band directly under the site header read as plain page background and the hero only became
   itself halfway down - the section lost its edge exactly where it needed one. */
.gtc-hero {
    background: var(--gtc-tint);
    padding: 40px 0 44px;
}

.gtc-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 32px;
    align-items: center;
}

.gtc-hero-title {
    font-size: 38px;
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 14px;
}

.gtc-hero-title-accent {
    display: block;
    color: var(--gtc-purple);
}

.gtc-hero-desc {
    margin: 0 0 22px;
    color: var(--gtc-muted);
    max-width: 42ch;
}

.gtc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.gtc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    padding: 11px 20px;
    border-radius: 10px;
    text-decoration: none;
}

.gtc-btn-primary {
    background: var(--gtc-purple);
    color: #fff;
    box-shadow: 0 10px 15px -3px rgba(109, 40, 245, 0.30);
    transition: background 0.2s ease, transform 0.2s ease;
}

.gtc-btn-primary:hover {
    background: var(--gtc-purple-dark);
    color: #fff;
    text-decoration: none;
    transform: translateY(-4px);
}

/* The hero's single call to action, sized to carry the section on its own now that it is not
   sharing the row with a second button. */
.gtc-btn-lg {
    font-size: 16px;
    padding: 16px 32px;
    border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .gtc-btn-primary {
        transition: background 0.2s ease;
    }

    .gtc-btn-primary:hover {
        transform: none;
    }
}

/* Right half. The figures stand on the floor of the column and the cards fill the air over their
   heads - the min-height is what holds that air open.

   It has to cover the scene's own height, the lift under it AND the tallest card, because the two
   are anchored to opposite ends: the cards hang from the top of this box, the figures stand on its
   bottom. At 380px the leaderboard's bottom edge and the right-hand student's hairline met in the
   middle, and since the cards carry z-index 4 the card won - the head came out flat-topped, as
   though it had been cropped. */
.gtc-hero-art {
    position: relative;
    min-height: 430px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* --- The students, drawn in CSS -------------------------------------------------------------
   Three figures on a shared baseline, each built from flat shapes: a head, a hair shape clipped
   to that head, a torso and a laptop. The side pair carry negative margins so they tuck behind
   the middle one - a row of three with gaps between them reads as three separate drawings, and
   overlapping them is what makes it one group.
   Prefixed gtc-stu- rather than gtc-figure-, because .gtc-figure-right is already the Prize Pool
   column in the test cards further down this file. */
.gtc-scene {
    position: relative;
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* The desk edge the three sit behind. */
    border-bottom: 2px solid #d1d5db;
    padding-bottom: 2px;
    /* Lifted off the floor of the column. The cards float in the air above the group and the
       hero's own padding sits below it, so with the figures pushed all the way down the drawing
       read as bottom-heavy - the gap over their heads and the gap under the desk were nowhere
       near each other. Margin on the scene rather than on the figures, so the desk line they sit
       behind rises with them instead of leaving them hanging over it. */
    margin-bottom: 78px;
    /* Off centre, to the left. The accuracy card hangs down the right-hand side and was landing
       across the third figure's shoulder; moving the group half this padding to the left puts it
       in the gap under the rank card instead. Padding rather than a transform, because it is the
       figures that move and the desk line they sit behind that stays the full width. */
    padding-right: 110px;
}

.gtc-stu {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.gtc-stu-left {
    margin-right: -10px;
}

.gtc-stu-right {
    margin-left: -10px;
}

/* In front of the other two, which is the only depth cue in the drawing. */
.gtc-stu-mid {
    z-index: 2;
}

/* Head. overflow: hidden is load-bearing - the hair below is a plain block laid over the top of
   this box, and it is the head's own rounding that cuts it to the shape of a hairline. Drawing
   the hair as its own curved shape instead needs a second set of radii that have to be kept in
   step with the head's. */
.gtc-stu-head {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 64px;
    /* Overlaps the shoulders below, so the head sits on the body instead of on top of it. */
    margin-bottom: -12px;
    border-radius: 999px;
    background: #fed7aa;
    overflow: hidden;
}

.gtc-stu-hair {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 24px;
    border-radius: 0 0 8px 8px;
    background: #1f2937;
}

/* The middle figure is framed rather than capped: a tall dark shape fills the whole head and a
   smaller face is drawn back over it, which leaves the dark showing down both sides. */
/* The middle figure's hair is longer than the other two's, so it is drawn around the head rather
   than clipped inside it: overflow is released and the box itself goes transparent, leaving the
   hair and the face to draw the whole head between them.
   Clipped to the head the way the side pair are, the hair could not reach past 56px and came out
   as a dark disc with a small cream circle punched in it. */
.gtc-stu-mid .gtc-stu-head {
    margin-bottom: -10px;
    background: transparent;
    overflow: visible;
    /* Behind the torso - see the hair rule below. */
    z-index: 0;
}

/* Longer than the head box, because it has to carry on past the chin - stopping level with the
   neck reads as a hood pulled tight rather than as hair.
   Where it ends is hidden by the body rather than trimmed to fit: the head is put behind the
   torso below, and since the hair is 62px against the body's 80px, everything past the shoulder
   line disappears on its own. Painted in front instead, that same length showed as a dark band
   sitting across the chin. */
.gtc-stu-mid .gtc-stu-hair {
    top: -2px;
    left: 50%;
    width: 62px;
    height: 92px;
    margin-left: -31px;
    border-radius: 31px 31px 22px 22px;
    background: #111827;
    z-index: 0;
}

/* Drawn over the hair, inset on every side - that inset is the hair. */
.gtc-stu-face {
    position: absolute;
    z-index: 1;
    top: 8px;
    left: 50%;
    width: 40px;
    height: 46px;
    margin-left: -20px;
    border-radius: 20px;
    background: #fdeedc;
}

/* Shoulders: a wide rounded top on a square bottom, so the torso reads as a body cut off by the
   desk rather than as a pill. */
.gtc-stu-body {
    position: relative;
    display: flex;
    justify-content: center;
    width: 96px;
    height: 112px;
    padding-top: 16px;
    border-radius: 40px 40px 0 0;
    background: #9333ea;
}

.gtc-stu-right .gtc-stu-body {
    background: #3b82f6;
}

/* Narrower than the side pair but slightly taller, not shorter.
   All three stand on one baseline, so a figure's height is what decides where its head lands. At
   96px this body came to 150px against the side pair's 164px and the middle head sat 14px lower
   than the other two - reading as the furthest figure rather than the nearest one. 118px puts it
   a few pixels above them, which is what being in front should look like. */
.gtc-stu-mid .gtc-stu-body {
    z-index: 1;
    width: 96px;
    height: 118px;
    padding-top: 0;
    border-radius: 32px 32px 0 0;
    background: #facc15;
}

/* The drawstring down the front of the hoodie - the one detail that keeps the torso from reading
   as a plain block. */
.gtc-stu-string {
    display: block;
    width: 4px;
    height: 48px;
    border-radius: 999px;
    background: #7e22ce;
}

.gtc-stu-right .gtc-stu-string {
    background: #2563eb;
}

/* Laptops: wider than the torso behind them and pushed out to one side, so each overlaps its
   neighbour the way open laptops on a shared desk do. The skew is what stops the three from
   reading as one straight wall of grey. */
.gtc-stu-laptop {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 3;
    width: 96px;
    height: 64px;
    margin-left: -48px;
    border-radius: 8px 8px 0 0;
    border-top: 3px solid #9ca3af;
    background: #374151;
}

/* Each laptop is centred on the figure using it. They were pushed inward before, which piled all
   three lids into the middle of the group and read as the two at the back leaning across to the
   front one's machine. The skew is kept: it angles each lid towards the centre, which is what
   three people at their own laptops around one desk actually looks like. */
.gtc-stu-left .gtc-stu-laptop {
    transform: skewX(-6deg);
}

.gtc-stu-right .gtc-stu-laptop {
    transform: skewX(6deg);
}

/* The middle laptop is the light one - white at the top edge falling to grey, which is what reads
   as a silver lid catching the light against the two dark ones either side.
   Only a little wider than the torso behind it. At 112px against an 80px body it overhung the
   figure by 16px a side, and a torso narrower than the lid under it reads as someone perched on
   top of the laptop rather than sitting behind it. The side pair never had the problem because
   their body and lid are both 96px. */
.gtc-stu-mid .gtc-stu-laptop {
    width: 106px;
    height: 72px;
    margin-left: -53px;
    border-radius: 12px 12px 0 0;
    border-top: 4px solid #ffffff;
    background: linear-gradient(180deg, #f8fafc 0%, #dde2ec 100%);
}

/* The dot on the lid. Translucent white, so one rule covers all three lids at the contrast each
   needs rather than a colour per figure. */
.gtc-stu-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

/* Dark on the light lid: the translucent white the dark lids use disappears against it. */
.gtc-stu-mid .gtc-stu-dot {
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    background: rgba(17, 24, 39, 0.12);
}

/* Sits directly over the rank card, where the original design puts it - the one piece of the
   composition that is decoration rather than a number. */
/* Overlaps the card's top edge, so the two read as one object rather than as an icon hovering
   over a box.
   The offset looks wrong for the size and is not: the base of the drawing ends at y=20 of a
   24-unit viewBox, so the bottom sixth of the element is empty. At 42px that is 7px of nothing,
   which is why an offset that should have landed the base on the edge left a visible gap above
   it. -30px puts the painted base a few pixels inside the card. */
.gtc-hero-trophy {
    position: absolute;
    top: -30px;
    left: 46px;
    width: 42px;
    height: 42px;
    filter: drop-shadow(0 3px 4px rgba(17, 24, 39, 0.18));
}

.gtc-hero-card {
    position: absolute;
    /* Above the figures, laptops included - those carry z-index: 3 of their own, and without a
       number here a card that reaches down onto the desk is painted over by them rather than
       sitting on top. On mobile the accuracy card lands squarely on the laptops, so it was
       showing as a white box with its own text cut out of it. */
    z-index: 4;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(17, 24, 39, 0.10), 0 8px 10px -6px rgba(17, 24, 39, 0.08);
    padding: 14px 16px;
    animation: gtc-float 4s ease-in-out infinite;
}

/* Staggered so the three never rise and fall together, which would read as the whole panel
   moving rather than as three cards floating independently. */
.gtc-hero-card-board { animation-duration: 4.5s; animation-delay: 0.8s; }
.gtc-hero-card-acc   { animation-duration: 5s;   animation-delay: 1.6s; }

@keyframes gtc-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Motion here is decoration - it carries no information, so it goes away for anyone who has asked
   the system for less of it. */
@media (prefers-reduced-motion: reduce) {
    .gtc-hero-card {
        animation: none;
    }
}

.gtc-hero-card-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--gtc-muted);
    margin-bottom: 6px;
}

/* Pinned to the column's corners rather than to percentages of it: these are cards of a fixed
   size, so a percentage moved them around under the figures as the column narrowed. */
.gtc-hero-card-rank {
    top: 62px;
    left: 0;
    width: 144px;
}

span.gtc-hero-card-rank {
    position: static;
    display: block;
    width: auto;
    font-size: 30px;
    font-weight: 800;
    color: var(--gtc-ink);
}

span.gtc-hero-card-rank small {
    font-size: 12px;
    font-weight: 600;
    color: var(--gtc-muted);
}

.gtc-hero-card-board {
    top: 0;
    right: 0;
    width: 240px;
}

.gtc-hero-board {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
}

.gtc-hero-board li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.gtc-hero-board b {
    margin-left: auto;
    color: var(--gtc-ink);
    font-weight: 700;
}

.gtc-hero-pos {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #cbd5e1;
}

.gtc-hero-pos-1 { background: #f59e0b; }
.gtc-hero-pos-2 { background: #94a3b8; }
.gtc-hero-pos-3 { background: #d97706; }

/* A stand-in for a profile picture: head and shoulders in a tinted disc, built from the element's
   own two shadows rather than an icon font, so the row costs nothing to load. */
.gtc-hero-ava {
    position: relative;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    overflow: hidden;
}

.gtc-hero-ava::before,
.gtc-hero-ava::after {
    content: "";
    position: absolute;
    left: 50%;
    background: rgba(255, 255, 255, 0.92);
}

.gtc-hero-ava::before {
    top: 5px;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    border-radius: 50%;
}

.gtc-hero-ava::after {
    top: 15px;
    width: 14px;
    height: 10px;
    margin-left: -7px;
    border-radius: 7px 7px 0 0;
}

.gtc-hero-ava-1 { background: #93b4fb; }
.gtc-hero-ava-2 { background: #c4b0f7; }
.gtc-hero-ava-3 { background: #86dcae; }

/* Deliberately overlapping the figures below, which is what layers the composition instead of
   leaving the cards ringed around an empty middle. */
.gtc-hero-card-acc {
    bottom: 84px;
    right: 0;
    width: 160px;
}

span.gtc-hero-card-acc {
    position: static;
    display: block;
    width: auto;
    bottom: auto;
    font-size: 24px;
    font-weight: 800;
}

.gtc-hero-spark {
    display: block;
    width: 100%;
    height: 30px;
    margin-top: 4px;
}

.gtc-hero-spark-area {
    fill: #ede9fe;
    stroke: none;
}

.gtc-hero-spark-line {
    fill: none;
    stroke: #8b5cf6;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* The viewBox is stretched to the card's width, which would stretch the stroke with it. */
    vector-effect: non-scaling-stroke;
}

/* Exam picker */
.gtc-picker {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 28px;
    align-items: start;
}

/* A grid item's default min-width is auto, which is its content's width, not the track's - so the
   category strip and the exam grid inside these columns pushed the column wider than the 1fr it
   was given rather than scrolling or reflowing inside it. On a phone that took the whole page
   sideways: two columns of exam cards running off the right edge and a category row with no end.
   min-width: 0 is what lets a track actually constrain what is in it. */
.gtc-picker-col {
    min-width: 0;
}

/* Read out, never shown: the chevron is a picture, and a button whose only content is an icon
   reaches a screen reader as "button" and nothing else. */
.gtc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.gtc-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 12px;
}

.gtc-picker-label {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px;
}

/* The label inside the head row carries the row's margin instead, or the two stack up. */
.gtc-picker-head .gtc-picker-label {
    margin: 0;
}

/* Chevron that folds the category list away. Only meaningful once the script is running - it is
   what does the folding - so it stays out of the way until then. */
.gtc-cat-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--gtc-line);
    border-radius: 8px;
    background: var(--gtc-card);
    color: var(--gtc-ink);
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.gtc-page-js .gtc-cat-toggle {
    display: inline-flex;
}

.gtc-cat-toggle:hover {
    border-color: var(--gtc-purple);
    color: var(--gtc-purple);
}

.gtc-cat-toggle-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

/* Points down when the list is open (press to close) and up when it is folded. */
.gtc-cat-toggle[aria-expanded="false"] .gtc-cat-toggle-icon {
    transform: rotate(180deg);
}

.gtc-cat-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* The two shapes the list takes on a phone are set out in the max-width block near the bottom of
   this file: a sideways strip by default, a stacked column while gtc-cat-wrap-expanded is on.

   Both are a phone measure only. On a desktop the categories are a 220px column beside the exams
   rather than a block of page above them, so the list is always a column there and the "Select
   Exam Category" row has no work to do. */
@media (min-width: 768px) {
    .gtc-picker-head {
        display: none;
    }
}

/* Height is set from JS (capCategoryList), which measures the rows rather than guessing at a
   fixed one. The padding keeps the focus ring on the last visible row from being clipped, and
   leaves the scrollbar a lane of its own instead of sitting on top of the cards. */
.gtc-cat-list-scroll {
    overflow-y: auto;
    padding-right: 8px;
    /* Firefox. The wide platform default reads as a second column of UI next to a list of
       plain white cards. */
    scrollbar-width: thin;
    scrollbar-color: #c7c2d8 transparent;
}

/* WebKit / Blink. Track left transparent so the bar reads as part of the list rather than a
   chrome element bolted to its edge. */
.gtc-cat-list-scroll::-webkit-scrollbar {
    width: 6px;
}

.gtc-cat-list-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.gtc-cat-list-scroll::-webkit-scrollbar-thumb {
    background: #d5d1e4;
    border-radius: 999px;
}

.gtc-cat-list-scroll::-webkit-scrollbar-thumb:hover {
    background: #b9b2d3;
}

/* A soft fade at the bottom edge, so a list that continues past the cut looks cut rather than
   simply ended. Sits behind nothing clickable - it is painted on the wrapper, not the list. */
.gtc-cat-wrap {
    position: relative;
}

.gtc-cat-wrap-faded::after {
    content: "";
    position: absolute;
    left: 0;
    right: 8px;
    bottom: 0;
    height: 28px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(248, 250, 252, 0), #f8fafc 85%);
    border-radius: 0 0 8px 8px;
}

.gtc-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
    background: var(--gtc-card);
    border: 1px solid var(--gtc-line);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    cursor: pointer;
}

.gtc-cat-active {
    border-color: var(--gtc-purple);
    color: var(--gtc-purple);
    font-weight: 600;
}

/* The count, pinned to the right of the row. A tinted pill rather than plain grey text: the
   numbers are what the eye scans down the column for, and next to a name at the same weight they
   read as part of it. */
.gtc-cat-count {
    flex: 0 0 auto;
    min-width: 24px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f3f4f6;
    color: var(--gtc-muted);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.gtc-cat-active .gtc-cat-count {
    background: #ede9fe;
    color: var(--gtc-purple);
}

.gtc-exam-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.gtc-hidden {
    display: none;
}

/* Height set from JS (capExamGrid), measured in grid rows. */
.gtc-exam-grid-scroll {
    overflow-y: auto;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: #c7c2d8 transparent;
}

.gtc-exam-grid-scroll::-webkit-scrollbar {
    width: 6px;
}

.gtc-exam-grid-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.gtc-exam-grid-scroll::-webkit-scrollbar-thumb {
    background: #d5d1e4;
    border-radius: 999px;
}

.gtc-exam-grid-scroll::-webkit-scrollbar-thumb:hover {
    background: #b9b2d3;
}

/* Name, one line about the exam, then the button. The gap is the space between the name and its
   description; the button pushes itself to the bottom with its own margin, so cards of unequal
   text length still line their buttons up. */
.gtc-exam-card {
    background: var(--gtc-card);
    border: 1px solid var(--gtc-line);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Name on the left, paper count pinned to the right. baseline rather than center, so the count
   sits on the name's first line when a long exam name wraps to two. */
.gtc-exam-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

/* The same pill as the category list's count, so the two read as the same kind of fact - one
   counts exams in a category, the other papers on an exam. */
.gtc-exam-count {
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: 999px;
    background: #ede9fe;
    color: var(--gtc-purple);
    font-size: 12px;
    font-weight: 700;
}

/* Grey rather than purple at zero. The pill is the card's one piece of colour and it is there to
   say "there is something here" - an exam with nothing to sit should not be wearing it. */
.gtc-exam-count-zero {
    background: #f3f4f6;
    color: #9ca3af;
}

.gtc-exam-badge {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 6px;
    background: #ede9fe;
    color: var(--gtc-purple);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.gtc-exam-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
}

.gtc-exam-desc {
    margin: 0;
    color: var(--gtc-muted);
    font-size: 13px;
    line-height: 1.5;
}

.gtc-exam-btn {
    display: block;
    text-align: center;
    border: 1px solid var(--gtc-purple);
    color: var(--gtc-purple);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    margin-top: auto;
}

.gtc-exam-btn:hover {
    background: var(--gtc-purple);
    color: #fff;
    text-decoration: none;
}

.gtc-empty {
    color: var(--gtc-muted);
    margin: 0;
}

/* Trending tests */
.gtc-benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

/* A horizontal track. overflow-x carries the whole feature on its own: the script only nudges
   scrollLeft, so with JS off, or with reduced motion asked for, this is still a scroller the
   reader can drag or flick through rather than a row with its end cut off. */
.gtc-trending-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Room for the cards' shadow and for the focus ring on the Join Test links, which a plain
       overflow container would otherwise clip. */
    padding: 4px 4px 12px;
    /* The bar is hidden, not the scrolling: the track drives itself, and a scrollbar under a row
       that is already moving reads as a control the reader is meant to use. Dragging, flicking
       and the wheel all still work - they only pause the animation while in use. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gtc-trending-track::-webkit-scrollbar {
    display: none;
}

.gtc-trending-track > .gtc-test-card {
    /* Fixed width, and no shrinking: in a flex row cards would otherwise squeeze to fit and the
       track would never overflow, which is what makes it scrollable in the first place.

       380px, not the 320 it started at. The stats line carries three figures now on every card -
       an exam with no language of its own says "Eng/Hin" rather than dropping the line - and at
       320 the third of them wrapped to a second row, so cards sat at two different heights along
       the track depending on how long their numbers happened to be. This is the width that holds
       "110+ Tests  Eng/Hin  254+ Taken" on one line with room to spare.

       Under 380px of screen the card follows the viewport instead, so a phone is never asked to
       scroll sideways to read one card; 84vw leaves the next card's edge showing, which is what
       says the row scrolls. */
    flex: 0 0 min(380px, 84vw);
    scroll-snap-align: start;
}

/* Two bands: the name on white, the figures and the button on a tint. The card has no padding of
   its own - each band carries its own, which is what lets the divider run the full width instead
   of stopping short of the card's edges. */
.gtc-test-card {
    background: var(--gtc-card);
    border: 1px solid var(--gtc-line);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
    transition: box-shadow 0.3s ease;
}

.gtc-test-card:hover {
    box-shadow: 0 10px 15px -3px rgba(17, 24, 39, 0.10), 0 4px 6px -4px rgba(17, 24, 39, 0.10);
}

.gtc-test-head {
    padding: 20px;
    /* Lighter than --gtc-line, which is the card's own outline: the divider inside a card should
       not read as heavily as the edge around it. */
    border-bottom: 1px solid #f3f4f6;
}

.gtc-test-name {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

/* flex:1 so cards of unequal name length still line their buttons up along the row. */
.gtc-test-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    background: #fafafa;
}

/* One wrapped row rather than a stack: three short facts read as a caption line under the name,
   and stacking them made a card twice as tall as it needed to be. */
.gtc-test-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    color: #4b5563;
    font-size: 14px;
}

.gtc-test-stats li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gtc-test-stats b {
    color: var(--gtc-ink);
    font-weight: 700;
}

.gtc-test-stat-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    color: #9ca3af;
}

/* The same outlined pill the exam grid uses, at the width of the card - the two buttons lead to
   the same place and there is no reason for them to be two different shapes. Taller than the grid
   one, because here it is the card's floor rather than one item in a narrow tile.
   margin-top: auto puts it on that floor whatever the figures above it come to. */
.gtc-test-btn {
    display: block;
    margin-top: auto;
    text-align: center;
    border: 1px solid var(--gtc-purple);
    color: var(--gtc-purple);
    border-radius: 999px;
    padding: 11px 16px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.gtc-test-btn:hover,
.gtc-test-btn:focus-visible {
    background: var(--gtc-purple);
    color: #fff;
    text-decoration: none;
}

/* Benefits */
/* Left-aligned, not centred: each card now opens with an icon tile, and a centred column of
   tile-then-heading-then-paragraph gives the eye a new starting point on every line. */
.gtc-benefit-card {
    background: var(--gtc-card);
    border: 1px solid #f3f4f6;
    border-radius: 16px;
    padding: 24px;
    text-align: left;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gtc-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(17, 24, 39, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    .gtc-benefit-card {
        transition: box-shadow 0.2s ease;
    }

    .gtc-benefit-card:hover {
        transform: none;
    }
}

/* A tinted tile behind each icon. Colour is set per icon name below rather than per position, so
   reordering the benefits does not reshuffle the colours. */
.gtc-benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.gtc-benefit-icon svg {
    width: 24px;
    height: 24px;
}

.gtc-benefit-icon-rank   { background: #ffedd5; color: #ea580c; }
.gtc-benefit-icon-bolt   { background: #fee2e2; color: #dc2626; }
.gtc-benefit-icon-chip   { background: #dbeafe; color: #2563eb; }
.gtc-benefit-icon-people { background: #dcfce7; color: #16a34a; }
.gtc-benefit-icon-game   { background: #f3e8ff; color: #9333ea; }
.gtc-benefit-icon-trophy { background: #fef9c3; color: #ca8a04; }

.gtc-benefit-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
}

.gtc-benefit-desc {
    margin: 0;
    color: var(--gtc-muted);
    font-size: 14px;
    line-height: 1.55;
}

/* Steps */
/* A connected timeline rather than four loose cards: the steps happen in an order, and the line
   through them is what says so.
   Flex with flex:1 rather than an auto-fit grid, because the connector below is positioned off
   each step's own width - auto-fit silently drops to fewer columns and wraps, which would leave a
   segment drawn across a row break. Flex keeps them on one row until the breakpoint says
   otherwise. */
.gtc-step-grid {
    display: flex;
    gap: 20px;
    text-align: center;
}

.gtc-step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

/* One segment per gap, drawn from the previous badge's centre to this one's. -50% reaches this
   step's own left edge back to its centre; the extra 20px crosses the flex gap to land on the
   step before it. Behind the badges, which are opaque, so it reads as a line they sit on. */
.gtc-step + .gtc-step::before {
    content: "";
    position: absolute;
    top: 23px;
    right: 50%;
    left: calc(-50% - 20px);
    height: 2px;
    background: #ddd6fe;
    z-index: 0;
}

/* Squared off rather than round, and large enough to sit on the connector without the line
   showing through beside it. */
.gtc-step-num {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--gtc-purple);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 4px 6px -1px rgba(109, 40, 245, 0.30);
}

.gtc-step-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 8px;
}

.gtc-step-desc {
    margin: 0;
    color: var(--gtc-muted);
    font-size: 14px;
    line-height: 1.55;
}

/* Walkthrough cards, closing the same band the steps open. A smaller heading than .gtc-heading
   on purpose: this is the tail of "How It Works", and a second 26px heading inside one section
   would read as a second section that forgot its own background. */
.gtc-tutorials {
    margin-top: 44px;
}

.gtc-tutorials-heading {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 6px;
}

.gtc-tutorials-sub {
    text-align: center;
    color: var(--gtc-muted);
    font-size: 14px;
    margin: 0 auto 24px;
    max-width: 560px;
}

/* auto-fit, not a fixed three: with one walkthrough the card takes the whole width, and adding a
   second splits the row in two without this rule needing to be touched. A fixed three-column grid
   left a single card stranded in the left third with two empty columns beside it. */
.gtc-tutorial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* A column, so the title sits at the top of the body on every card and the descriptions line up
   even when one of them wraps to a third line. */
.gtc-tutorial {
    background: var(--gtc-card);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
    display: flex;
    flex-direction: column;
}

.gtc-tutorial-thumb {
    position: relative;
}

/* aspect-ratio rather than a fixed height: thumbnails stay the same size as each other at any
   column width, and a replacement still that is not exactly this size is cropped to the same
   frame instead of making its card taller than the one beside it.

   Landscape, not the portrait 280/356 this carried while the row was three narrow columns: at
   full width that ratio made a single card taller than the screen, so the section became one
   enormous placeholder with its caption pushed off the bottom. */
.gtc-tutorial-thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 13 / 6;
    object-fit: cover;
}

.gtc-tutorial-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(17, 24, 39, 0.72);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
}

.gtc-tutorial-body {
    padding: 16px 18px 20px;
}

.gtc-tutorial-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 6px;
}

.gtc-tutorial-desc {
    margin: 0;
    color: var(--gtc-muted);
    font-size: 14px;
    line-height: 1.55;
}

/* About: copy on the left, the headline numbers on the right, sharing one band. */
.gtc-section-about {
    background: #f8fafc;
    padding: 34px 0;
}

.gtc-about-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 14px;
}

.gtc-about-para {
    color: var(--gtc-muted);
    line-height: 1.7;
    font-size: 15px;
    margin: 0 0 14px;
}

.gtc-about-para:last-child {
    margin-bottom: 0;
}

/* The card sits on the seam between two sections, half in each.

   Zero height on the wrapper is what makes that exact: it reserves no vertical space, so its top
   edge is the boundary itself, and translateY(-50%) on the card then lifts it by half its own
   height - whatever that height turns out to be. A negative margin would need a number equal to
   half the card, which stops being half as soon as the stats wrap to a second row.

   z-index because the section below is painted after this one and would otherwise cover the half
   of the card that overhangs it. */
.gtc-stat-straddle {
    position: relative;
    z-index: 2;
    height: 0;
}

.gtc-stat-straddle .gtc-stat-card {
    transform: translateY(-50%);
}

/* The room the straddling card no longer takes for itself. Its own height is roughly 170px, so
   each section gives up about half of that on the side facing it. */
.gtc-section-straddled {
    padding-top: 140px;
}

.gtc-section-straddled-above {
    padding-bottom: 140px;
}

/* A raised white panel, so the numbers read as one claim rather than as five loose figures. */
.gtc-stat-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(17, 24, 39, 0.10), 0 8px 10px -6px rgba(17, 24, 39, 0.06);
    padding: 32px 24px;
}

/* auto-fit, not a fixed four: the stats come from the controller and adding a fifth should widen
   the row rather than start a second one with a single orphan on it. */
.gtc-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 24px 16px;
    text-align: center;
}

/* One colour per column, as in the design - they read as four different facts rather than four
   copies of the same badge. */
.gtc-stat-icon {
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto 10px;
}

.gtc-stat-icon-file { color: #6d28f5; }
.gtc-stat-icon-people { color: #6d28f5; }
.gtc-stat-icon-layers { color: #6d28f5; }
.gtc-stat-icon-star { color: #facc15; }
.gtc-stat-icon-trophy { color: #eab308; }
/* Kept for stats already saved with the old icon names. */
.gtc-stat-icon-target { color: #6d28f5; }
.gtc-stat-icon-calendar { color: #16a34a; }

.gtc-stat-value {
    display: block;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
}

.gtc-stat-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--gtc-muted);
    margin-top: 4px;
}

/* FAQ */
.gtc-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gtc-faq {
    background: var(--gtc-card);
    border: 1px solid var(--gtc-line);
    border-radius: 8px;
    overflow: hidden;
}

.gtc-faq-q {
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.gtc-faq-chevron {
    border: solid var(--gtc-muted);
    border-width: 0 2px 2px 0;
    padding: 3px;
    transform: rotate(45deg);
    flex: 0 0 auto;
    transition: transform 0.15s ease;
}

.gtc-faq-q[aria-expanded="true"] .gtc-faq-chevron {
    transform: rotate(-135deg);
}

.gtc-faq-a {
    padding: 0 16px 14px;
    color: var(--gtc-muted);
    line-height: 1.6;
}

@media (max-width: 900px) {
    .gtc-hero-inner {
        grid-template-columns: 1fr;
    }

    .gtc-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Two across, then one: three thumbnails at tablet width are narrower than the text under
       them needs, and the tallest card sets the row height for all of them. */
    .gtc-tutorial-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Stacked, the copy has no column beside it to be the left of, so it centres over the
       illustration below rather than hugging an edge that is no longer there. */
    .gtc-hero-copy {
        text-align: center;
    }

    .gtc-hero-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .gtc-hero-actions {
        justify-content: center;
    }

    /* The cards stay floating over the figures rather than falling into a plain row beneath
       them. Stacked, the column is the full width of the page - wider than it was as half of a
       two-column grid - so there is more room for the composition here, not less. What has to
       give is the cards' own size: three at their desktop widths do not fit across a phone.
       They overlap each other a little at the narrow end, which is what the illustration does
       anyway - the leaderboard is meant to sit over the corner of the rank card. */
    .gtc-hero-art {
        min-height: 300px;
    }

    /* Back to centre. The desktop shift is there to clear an accuracy card hanging down the right
       of a half-width column; stacked, the column is the whole page and the figures have room on
       both sides, so an off-centre group just reads as misaligned.

       The lift comes down with it. Margin is laid out before the transform below scales the group,
       so the desktop 78px stays 78px however small the figures are drawn - on a phone that read as
       a band of empty tint under the desk line taller than the drawing above it. */
    .gtc-scene {
        padding-right: 0;
        margin-bottom: 20px;
    }

    .gtc-hero-card {
        padding: 12px 14px;
    }

    .gtc-hero-card-rank {
        top: 40px;
        width: 120px;
    }

    .gtc-hero-card-board {
        top: 16px;
        width: 210px;
    }

    /* Lower than on desktop, and further down than the width alone would ask for: stacked, the
       leaderboard is directly above this card rather than off to one side, and at the desktop
       offset the accuracy card covered its bottom row. It clears the card and lands on the
       figures instead, which is where it is meant to overlap. */
    .gtc-hero-card-acc {
        bottom: 62px;
        right: 4px;
        width: 136px;
    }

    /* Follows the card in: the trophy is positioned off the card's left edge, and on a card
       24px narrower the desktop offset put it over the right-hand corner. */
    .gtc-hero-trophy {
        left: 34px;
        width: 36px;
        height: 36px;
        top: -26px;
    }

    span.gtc-hero-card-rank {
        font-size: 26px;
    }

    .gtc-hero-board {
        font-size: 12px;
    }

    /* The stats card stops straddling the seam and sits on it instead.
       Straddling only works while the card is short against the sections either side. Below this
       width the five stats become three rows of two, and the card is then taller than the strip
       above it - so the half that overhangs upwards covered the group test card's button. This
       goes with the two-column stat grid rather than with the phone breakpoint, because it is
       that reflow that makes the card too tall, not the screen being small.
       In normal flow the card takes its own height, and the sections give back the room they were
       holding open for an overhang that no longer happens. */
    .gtc-stat-straddle {
        height: auto;
    }

    .gtc-stat-straddle .gtc-stat-card {
        transform: none;
    }

    .gtc-section-straddled-above {
        padding-bottom: 40px;
    }

    .gtc-section-straddled {
        padding-top: 40px;
    }
}

@media (max-width: 767px) {
    /* On a phone the exam list is the next thing on screen anyway, so a button whose only job is
       to jump down to it costs a screenful and buys nothing. */
    .gtc-hero-actions {
        display: none;
    }

    /* Air over the figures for the accuracy card to sit in, without the whole block running past
       what a phone screen shows at once. At the 900px offset the card hung down across the group
       and covered the right-hand student's head and the middle one's shoulder - the three of them
       are the illustration, and a card sitting on top of them is not an overlap, it is a cover.
       This height is the card's lane and no more: the leaderboard is anchored to the top of this
       box and the figures to the bottom, so every pixel taken off here closes the empty tint
       between them rather than crowding either one. */
    .gtc-hero-art {
        min-height: 290px;
    }

    /* The leaderboard moves up to the top of the column, and the accuracy card sits in the gap
       under it. Lifting the card clear of the figures put it across the leaderboard's bottom row
       instead - the third place disappeared behind it - so the two cards are given a lane each
       rather than being nudged past one another a few pixels at a time. */
    .gtc-hero-card-board {
        top: 0;
        width: 200px;
    }

    /* Hung from the top, under the leaderboard, rather than propped up from the bottom.
       The two share the right-hand lane and the leaderboard is anchored to the top of the column,
       so the gap between them was whatever the column's height happened to leave - and every time
       that height came down, this card rose into the leaderboard's third place and hid it. Off a
       top offset the clearance is fixed: the board runs about 140px, and 152px starts this card
       below it whatever the column does. The 12px of that gap is for the float animation, which
       moves the two cards 8px out of phase with each other.
       Dropping it does not put it on the figures - they are pushed into the left of the column and
       this lane is clear of them. */
    .gtc-hero-card-acc {
        top: 152px;
        bottom: auto;
        right: 0;
        width: 126px;
    }

    /* The group is drawn smaller and pushed into the left of the column, which is what finally
       clears the accuracy card hanging down the right of it.
       Padding alone could not do it: at their full size the three figures are wider than the space
       left beside the card on a phone, so however far left they were pushed the card still landed
       on the right-hand student's head. Scaling is the only move that makes them narrower - the
       drawing is built from a few dozen fixed pixel sizes, and a mobile set of all of them would
       be a second copy of the illustration to keep in step with the first.
       Anchored bottom left so the figures keep standing on the desk line as they shrink. */
    .gtc-scene {
        /* Off centre again, the way the desktop group is. The figures are centred inside a
           full-width scene, so this is what moves them out from under the accuracy card's lane on
           the right. It is padding rather than a transform because the desk line they sit behind
           should stay the full width of the column. */
        padding-right: 44px;
        margin-bottom: 14px;
        transform: scale(0.8);
        transform-origin: bottom left;
    }

    .gtc-picker {
        grid-template-columns: 1fr;
    }

    /* A sideways strip by default: one line of the page rather than a block of it, so the exams
       the reader came for start above the fold. Every category is still there, reached by
       scrolling the strip - and the chevron in the head row swaps it for the stacked list below
       when the reader wants to see them all at once. */
    .gtc-cat-list {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        /* Room for the focus ring on the buttons, which an overflow box would otherwise clip. */
        padding: 2px;
        /* Lands a chip against the left edge rather than parked half off it. proximity, not
           mandatory: a reader flicking through eight categories should be able to stop between
           two of them. */
        scroll-snap-type: x proximity;
        /* No bar under the strip. It is one row tall, and a scrollbar drawn beneath it reads as a
           divider between the categories and the exams rather than as an affordance. */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .gtc-cat-list::-webkit-scrollbar {
        display: none;
    }

    /* Sized to its own name in the strip, and never squeezed: flex items shrink to fit by
       default, which would fit every category into the screen width as a row of slivers instead
       of letting them run off the edge to be scrolled. */
    .gtc-cat-list .gtc-cat {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    /* Opened from the chevron: the stacked list, full-width rows, the shape for reading every
       category at once rather than flicking past them. This is also where the height cap in
       group_test_category.js applies - it measures rows, and only a column has them. */
    .gtc-cat-wrap-expanded .gtc-cat-list {
        flex-direction: column;
        overflow-x: visible;
    }

    .gtc-cat-wrap-expanded .gtc-cat-list .gtc-cat {
        scroll-snap-align: none;
    }

    /* One card per row. auto-fill with a 220px minimum already resolved to a single column at
       this width - it was the column overflowing, not the grid miscounting - but saying it
       outright means the card is never squeezed to fit two into a narrow phone. */
    .gtc-exam-grid {
        grid-template-columns: 1fr;
    }

    .gtc-hero-title {
        font-size: 24px;
    }

    .gtc-heading {
        font-size: 21px;
    }

    /* Two across rather than four down: at full width each step was a wide card holding one short
       line of text, and the four of them ran longer than the section they belong to. Wrapped in
       pairs the whole sequence is visible at once, which is the point of a How It Works.
       The connector goes away rather than being drawn vertically - a line that has to jump a row
       break reads as a border, not as an order. */
    .gtc-step-grid {
        flex-wrap: wrap;
        gap: 12px;
    }

    .gtc-step {
        /* Half the row minus its share of the gap. Basis rather than flex-grow, so a pair of two
           short steps cannot stretch to a full row of their own. */
        flex: 0 0 calc(50% - 6px);
        background: #fff;
        border-radius: 12px;
        padding: 16px 12px;
        box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
    }

    .gtc-step-num {
        width: 40px;
        height: 40px;
        font-size: 18px;
        margin-bottom: 12px;
    }

    .gtc-step-desc {
        font-size: 13px;
    }

    .gtc-step + .gtc-step::before {
        display: none;
    }

    .gtc-tutorial-grid {
        grid-template-columns: 1fr;
    }

    /* One per row, the 280x356 portrait frame would be most of a phone screen for a thumbnail
       nobody has to look at closely, so the card lies down: picture beside the copy. */
    .gtc-tutorial {
        flex-direction: row;
        align-items: stretch;
    }

    .gtc-tutorial-thumb {
        flex: 0 0 112px;
    }

    .gtc-tutorial-thumb img {
        height: 100%;
        aspect-ratio: auto;
    }

    .gtc-tutorial-body {
        padding: 14px 16px;
    }

}

/* Small phones. The column is a hundred-odd pixels narrower again, and the lane beside the
   accuracy card narrows with it, so the group takes another step down to keep out of it. */
@media (max-width: 480px) {
    .gtc-scene {
        transform: scale(0.68);
    }

    .gtc-hero-card-acc {
        width: 112px;
    }

    .gtc-hero-card-board {
        width: 184px;
    }
}