/* ==========================================================================
   Terms & Conditions page (Figma: QF - BilAraby - WebsiteDesign-Concept-2,
   node 40001286:70458 "Terms & Conditions"). Uses the --hr-* tokens declared
   globally in layout-revamp.css.
   Prefix: .tnc-

   NOTE: .tnc-hero below reproduces the same "Innerpage-hero" component used by
   About Us (.about-revamp) and Contact Us (.contact-revamp), and shares their
   assets rather than approximating them: hero-banner.svg for the band and the
   Pattern-01/Pattern-02 corner wedges beside it.

   The SVG replaces the hand-sampled CSS ramp this file used to carry. That ramp
   was a flat eleven-stop linear-gradient — it could reproduce the teal-to-cream
   colours but not Figma's dark radial vignette or the fine white grain over
   them, which is what gives the band its liquid look on the other inner pages.
   The asset keeps its own alpha so it composites over the cream page colour
   exactly as Figma does, and preserveAspectRatio="none" lets it stretch to any
   width. The band is sized off the hero rather than off Figma's 1094px canvas —
   see the note on .tnc-hero below for why.
   ========================================================================== */
.terms-revamp {
    --tnc-teal: #12736a;
    --tnc-line: #e4dec4;
    --tnc-ink: #16150e;
    --tnc-body-text: #3e3d30;
    --tnc-callout-text: #4a4939;
    --tnc-purple: #8e3b78;
    --tnc-active: #c87f08;
    font-family: 'Almarai', 'Helvetica Neue', Arial, sans-serif;
    position: relative;
    background-color: var(--hr-cream-500);
}
.terms-revamp .hr-accent { color: var(--hr-yellow-400); }


/* Figma's angular corner wedges inside the Innerpage-hero instance: two DISTINCT
   vectors, "Pattern-01" (left, 305.329x160.658) and "Pattern-02" (right,
   305.29x204.731, mix-blend-mode: overlay), each carrying its own
   cream(#f9f7ea)-to-transparent gradient at 10% fill-opacity baked into the
   asset. Same pair and geometry as .abt-hero-decor / .cta-hero-decor.

   Anchored to the BOTTOM, not the top. On About Us and Contact Us the hero is a
   flat 256px, so pinning a 256px box to the top of the page put the wedges'
   bottom edge on the breadcrumb, which is what the design wants. This hero is
   ~557px tall, so the same top:0 left them stranded up by the nav with the
   breadcrumb 200px below. bottom:152px is the hero's own padding-bottom, which
   lands the box's bottom edge on the breadcrumb hairline - restoring the
   relationship About Us gets for free, and holding it at every breakpoint and
   any hero height rather than only at the one the number was measured for.

   z-index 0 against .tnc-hero-inner's 1: the decor is first inside the hero, so
   it paints above the hero's own background but stays behind the title,
   subtitle and breadcrumb.

   The slight blur softens the vector edges to match how the wedges read in
   Figma's own render, where the 10% gradient dissolves into the teal rather
   than showing a hard diagonal. */
.tnc-hero-decor {
    position: absolute;
    bottom: 152px;
    left: 0;
    width: 100%;
    height: 256px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.tnc-hero-decor img {
    position: absolute;
    bottom: 0;
    max-width: none;
    filter: blur(1.5px);
}
.tnc-hero-decor-left {
    left: 0;
    width: 305.329px;
    height: 160.658px;
}
.tnc-hero-decor-right {
    right: 0;
    width: 305.29px;
    height: 204.731px;
    mix-blend-mode: overlay;
}
/* RTL keeps each pattern on its own visual side by flipping the pair, so the
   composition mirrors with the text direction instead of the taller wedge
   always sitting on the right. */
[dir="rtl"] .tnc-hero-decor-left { left: auto; right: 0; transform: scaleX(-1); }
[dir="rtl"] .tnc-hero-decor-right { right: auto; left: 0; transform: scaleX(-1); }
/* No responsive height on the band, as on .cta-hero-decor: the wedges are pinned
   to the top of the page rather than to the bottom of a hero that shrinks, so
   only their widths scale — keeping their proportion of the viewport instead of
   swallowing a phone-width one. */
@media (max-width: 767.98px) {
    .tnc-hero-decor-left { width: 190px; height: 100px; }
    .tnc-hero-decor-right { width: 190px; height: 128px; }
}

/* Shared diamond primitive: a square turned 45deg, matching .abt-diamond on
   About Us. */
.tnc-diamond {
    width: 20px;
    height: 20px;
    /* 20 * (sqrt(2) - 1) / 2. A rotated 20px square is 28.28px wide visually but
       still occupies a 20px layout box, so the 4.142px overhang per side would
       make neighbours merge into one continuous zigzag. This margin separates
       the boxes by exactly that overhang, so adjacent tips just touch - corner
       to corner, 0px visible gap, no merge. Carried on the diamond rather than
       as a `gap` on the row so the last one also spaces itself off the line,
       matching .abt-diamond on About Us. */
    margin-inline: 4.142px;
    transform: rotate(45deg);
    background: var(--hr-cream-500);
    flex-shrink: 0;
}

/* ---------- Hero ---------- */
/* The band is painted here, on the hero, not on the page wrapper, so it is
   sized as a PERCENTAGE of the hero and tracks it at every breakpoint and for
   any length of translated title or subtitle.

   background-clip is border-box, so the hero CLIPS this image at its own bottom
   edge — whatever teal is left at that point ends in a hard line. The only way
   to avoid the step is for the ramp to reach zero on that edge exactly.
   hero-banner.svg is fully transparent at 86% of its own box (the teal ramp is
   gone by 81.8%, the dark radial vignette over it by 86.0%), so the box is
   scaled to 1/0.86006 = 116.271% of the hero: the green hits zero just as the
   clip happens, and the fade reads as a fade.

   .tnc-body's padding-top lives on this element's padding-bottom, so the hero's
   box - and therefore the band - carries on past the breadcrumb instead of
   stopping on it.

   padding-bottom is 152px against a margin-bottom of -80px. The 152 is what the
   ramp gets to run through; the -80 pulls .tnc-body back up over the tail of it,
   so what you actually SEE between the breadcrumb hairline and the Contents card
   is 152 - 80 = 72px. Splitting the two is the point: the gap stayed tight at
   72px while the band grew, and the teal under the breadcrumb came back from
   ~11% to ~26% - enough for the breadcrumb and its hairline (cream on teal, so
   invisible once the ground turns cream) to read again. With a plain 72px
   padding and no negative margin, the ramp died on the hairline and took them
   with it.

   The green now fades out ~80px below the card's top edge rather than exactly on
   it. That tail is under 11% teal the whole way and the card has its own opaque
   background, so it shows only as a faint wash beside the card - not the ~380px
   of green over the article that the original fixed 1094px band produced.

   Two other things read these numbers, so keep them in step: .tnc-hero-decor's
   `bottom` is the full 152px (it anchors the wedges to the hairline, not to the
   hero's bottom edge), and the band height is a percentage of the hero, so it
   grows and shrinks with the padding.

   This replaces a fixed `background-size: 100% 1094px` on the page wrapper.
   1094px is the Figma canvas height, but the hero renders ~560px tall, so the
   green ran ~330px into the article instead of stopping above it.

   padding-inline is 160px, not the 24px this used to carry: that is the inset
   .header-revamp .container-xl uses at >=992px, and what .abt-hero/.abt-intro
   use on About Us, so the title, breadcrumb and article all line up with the
   logo and nav above them. The 40px/16px steps below match About Us too. */
.tnc-hero {
    position: relative;
    padding: 200px 160px 152px;
    margin-bottom: -80px;
    /* Two layers. Underneath, the banner. Over it, a cream wash that is fully
       opaque across the bottom 80px - the strip the negative margin tucks under
       .tnc-body - and fades to nothing 152px up, at the breadcrumb hairline.

       This is what stops the green grazing the article. The banner's own ramp is
       too gradual to be both strong at the breadcrumb and gone 72px later, and
       cutting it short instead just moved the problem: clip it and you get a
       hard line, shorten it and the breadcrumb washes out. Masking the tail
       keeps the ramp long where it is wanted and accelerates it where it is not,
       so the teal reads at ~26% on the hairline and is at exactly 0 by the
       Contents card.

       Stops are px from the bottom, not percentages, so they stay pinned to the
       card and the hairline whatever the hero's height - a percentage would
       drift as the title wraps or the breakpoint changes. Keep 80px in step with
       margin-bottom and 152px with padding-bottom. The cream is --hr-cream-500's
       literal value: a gradient needs the alpha-0 stop to be that same colour
       (fading to `transparent` can grey out mid-ramp), and a var() cannot carry
       alpha. */
    background-image:
        linear-gradient(to top,
            var(--hr-cream-500) 0,
            var(--hr-cream-500) 80px,
            rgba(249, 247, 233, 0) 152px),
        var(--tnc-hero-bg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%, 100% 116.271%;
}
.tnc-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1600px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.tnc-hero-top {
    display: flex;
    flex-wrap: wrap;
    /* flex-start, not center: this row is the 72px title against a 151px column
       (subtitle + Download PDF), so centring dropped the title 40px and its line
       no longer read level with the subtitle's first line. Aligning the tops
       starts both blocks of text together. */
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}
.tnc-title {
    font-size: 64px;
    line-height: 72px;
    font-weight: 700;
    color: var(--hr-cream-500);
    margin: 0;
    /* 39.9% = Figma's 638.55 as a share of its 1601px content frame, not a flat
       640px. The artboard is 1920 wide, but the column is 1600 only at that one
       viewport - a fixed px pair (640 + 752) overflows the 1280px column at a
       1600px viewport and .tnc-hero-top's flex-wrap drops the copy onto its own
       row. As shares they shrink together and stay side by side, and at 1920
       they still resolve to the design's own numbers. */
    max-width: 39.9%;
}
.tnc-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    /* 47% = Figma's 752.45 as a share of its 1601px content frame, replacing a
       flat 560px. At 560 the column sat ~186px too far right and the subtitle
       broke onto a third line; the design has it on two (node
       I40001286:70460;40000160:33905, x=848.55 width=752.45).

       A share rather than an explicit x: .tnc-hero-top is justify-content:
       space-between, so the width alone puts the left edge at 1600 - 752 = 848,
       and it stays correct if the column width ever changes. See .tnc-title for
       why these are percentages and not pixels. */
    max-width: 47%;
}
.tnc-subtitle {
    font-size: 24px;
    line-height: 32px;
    color: var(--hr-cream-600, #e3e1d4);
    margin: 0;
}

/* Decorative, not wired to a download — no PDF export exists yet. Same
   convention as .agd-pdf-btn on the Agenda Details page. */
/* Same pill as the home page hero's "Culture" button (.hr-btn +
   .hr-btn-primary): 2px outset white border with the bottom edge dropped, and
   Figma's five stacked shadows - one inset highlight plus four ambient layers -
   rather than the single flat 0 3px 6px this carried. Geometry is .hr-btn's:
   14.5px/22.5px against a 24px line-height puts the box at 56px.
   Mirrors .pp-pdf-btn; keep the two in step. */
.tnc-pdf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14.5px 22.5px;
    border-radius: 61px;
    background: var(--hr-yellow-500);
    color: var(--hr-cream-50);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
    border: 2px outset #ffffff9c;
    border-bottom-width: 0;
    box-shadow:
        inset 0 4px 6.1px rgba(255,255,255,.23),
        7px 63px 18px rgba(0,0,0,.02),
        2px 23px 14px rgba(0,0,0,.02),
        1px 10px 10px rgba(0,0,0,.03),
        0 3px 6px rgba(0,0,0,.03);
    /* Glass + jump, kept in step with .agd-pdf-btn on the Agenda Details page
       (the convention both blades cite). The glass half is the shared hover
       glow, wired up by adding this class to the three lists in
       layout-revamp.css; the jump is the 2px lift below.

       This replaces a note saying the lift was deliberately withheld because
       the control is a decorative placeholder (aria-disabled, no export wired
       up) and a transform would advertise an interaction that does not exist.
       That reasoning still holds on its own terms - it is overridden here for
       consistency with the other orange buttons, on request. Both buttons are
       currently commented out in the markup, so none of this renders until
       they are switched back on. */
    transition: transform .2s ease-in-out;
    cursor: default;
}
.tnc-pdf-btn img { width: 20px; height: 20px; }
.tnc-pdf-btn:hover { transform: translateY(-2px); color: var(--hr-cream-50); }

.tnc-breadcrumb-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 24px;
}
/* Full-bleed hairline after the breadcrumb row (Figma), reaching both
   viewport edges rather than stopping at .tnc-hero-inner's 1400px column —
   same technique as .pp-breadcrumb-row::after on the Privacy Policy page. */
.tnc-breadcrumb-row::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    background: rgba(249, 247, 234, .35);
}
/* Type scales with the viewport so the trail always stays on one line. The
   last crumb is the CMS page title, and its length varies a lot - "TERMS AND
   CONDITIONS" is far wider than "PRIVACY POLICY", and fixed breakpoints kept
   missing sizes between them.

   Measured on this page: the trail needs 18.56px of width per 1px of font
   size, plus 2px of separators and four gaps, against (100vw - 48px) of
   content width - the hero's gutters are 24px a side, not the 16px an earlier
   pass assumed, which is why 5vw - 3px still wrapped at every phone width.
   5.1vw - 3.8px clears it with ~6px to spare from 320px up, and reaches the
   20px ceiling at 467px, just past the 462px where 20px first fits on its own,
   so desktop keeps the Figma size untouched. Gap scales alongside so the
   spacing stays proportional instead of dominating at small sizes. */
.tnc-breadcrumb {
    display: flex;
    align-items: center;
    /* Wrap only as a backstop - the last crumb is the CMS page title, so its
       length is not fixed and nowrap on the row would push it past the viewport
       edge. See .pp-breadcrumb. */
    flex-wrap: wrap;
    row-gap: 4px;
    gap: clamp(8px, 2.2vw, 12px);
    font-size: clamp(12px, calc(5.1vw - 3.8px), 20px);
    color: var(--hr-cream-500);
    text-transform: uppercase;
}
/* nowrap + no shrink keeps each crumb whole: they are shrinkable flex items,
   so they were squeezed below their text width and broke internally on a
   phone even when the row had room. */
/* Full strength per Figma's Breadcrumb component - only font weight marks the
   current crumb, there is no resting opacity on the others. Full note in
   press-releases-revamp.css. */
.tnc-breadcrumb a,
.tnc-breadcrumb span:not(.tnc-breadcrumb-sep) {
    opacity: 1;
    white-space: nowrap;
    flex-shrink: 0;
}
.tnc-breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: opacity .2s ease;
}
.tnc-breadcrumb a:hover { opacity: 1; color: inherit; text-decoration: underline; }
.tnc-breadcrumb-current { font-weight: 700; opacity: 1 !important; }
.tnc-breadcrumb-sep {
    width: 1px;
    /* Tracks the type: a fixed 16px rule looked oversized beside 13px text. */
    height: clamp(11px, 0.9em, 16px);
    background: rgba(249, 247, 234, .5);
}
.tnc-hero-divider { display: none; }
@media (min-width: 1200px) {
    .tnc-hero-divider {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        width: 300px;
        margin-inline-end: calc(-160px - max(0px, (100vw - 1920px) / 2));
    }
    .tnc-hero-divider-line {
        flex: 1 1 auto;
        height: 1px;
        background: rgba(249, 247, 234, .5);
        /* The last diamond's own 4.142px slot margin supplies the gap now, so
           an extra negative offset here would eat into it. */
        margin-inline-start: 0;
    }
}

/* ---------- Body: sidebar + article ---------- */
.tnc-body {
    position: relative;
    /* app.css sets a blanket `section { overflow: hidden }` — left at that,
       it makes this section (not the viewport) the sticky containing block
       for .tnc-toc below, so the sidebar scrolls away with the page instead
       of following it. */
    overflow: visible;
    /* padding-top now lives on .tnc-hero's padding-bottom — see the note
       there. Same 80px gap, but inside the hero's box so the band covers it. */
    padding: 0 160px 120px;
}
.tnc-body-inner {
    max-width: 1600px;
    margin-inline: auto;
    display: flex;
    align-items: flex-start;
    gap: 64px;
}

/* ---------- Contents sidebar ---------- */
/* Sticks within .tnc-body-inner (a flex row with align-items:flex-start, so
   the row's own height tracks .tnc-article — the taller column). No max
   height/internal scrollbar here: the whole card is meant to travel with the
   page — sticking near the top through most of the article, then (being
   contained by .tnc-body-inner) shifting up along with the scroll for the
   last stretch so it ends flush with the article's bottom instead of
   overlapping the footer. That catch-up motion is native `position: sticky`
   behaviour against a tall containing block — no JS needed for it. */
.tnc-toc {
    position: sticky;
    top: 24px;
    align-self: flex-start;
    flex: 0 0 340px;
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 24px;
    border: 1px solid #fff;
    border-radius: 24px;
    background: linear-gradient(to top, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .8) 76%, rgba(255, 255, 255, .6) 100%);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .03), inset 0 4px 6px rgba(255, 255, 255, .23);
}
.tnc-toc-head { display: flex; align-items: center; gap: 12px; }
/* Abstract compass mark: an outlined diamond behind a smaller solid one,
   both tilted — plain CSS shapes, no icon asset needed. */
.tnc-toc-icon {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.tnc-toc-icon::before,
.tnc-toc-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.tnc-toc-icon::before {
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--tnc-purple);
}
/* No top override: the shared rule above centres both squares on the 32px box
   (top/left 50% + translate(-50%,-50%)). A top:22% here put the filled
   diamond's centre 9px above the outline's, so the solid shape sat against the
   outline's top vertex with a gap toward the bottom instead of nesting
   concentrically. Same fix as .pp-toc-icon::after. */
.tnc-toc-icon::after {
    width: 11px;
    height: 11px;
    background: var(--tnc-purple);
}
.tnc-toc-title {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: var(--hr-brown-500);
    margin: 0;
}
.tnc-toc-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
}
.tnc-toc-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 13px;
    color: var(--hr-brown-500);
    font-size: 18px;
    line-height: 28px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
.tnc-toc-link:hover { color: var(--hr-brown-500); text-decoration: none; background: rgba(0, 0, 0, .03); }
.tnc-toc-link-number { width: 22px; flex-shrink: 0; font-weight: 700; }
.tnc-toc-link.is-active {
    background: rgba(232, 147, 13, .1);
    color: var(--tnc-active);
    font-weight: 700;
}
.tnc-toc-link.is-active .tnc-toc-link-number { color: var(--tnc-active); }
.tnc-toc-note {
    padding-top: 30px;
    border-top: 1px solid #eae3c9;
    font-size: 16px;
    line-height: 24px;
    color: #6b6a57;
}
.tnc-toc-note a { color: inherit; text-decoration: underline; }

/* ---------- Article ---------- */
.tnc-article {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 60px;
}
.tnc-section { scroll-margin-top: 24px; }
.tnc-section-head {
    display: flex;
    align-items: center;
    gap: 27px;
    margin-bottom: 32px;
}
.tnc-section-number {
    font-size: 32px;
    line-height: 40px;
    font-weight: 800;
    color: var(--tnc-teal);
    flex-shrink: 0;
}
.tnc-section-line {
    flex: 1 1 auto;
    height: 1px;
    background: var(--tnc-line);
}
.tnc-section-title {
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    color: var(--tnc-ink);
    margin: 0 0 32px;
}

/* Admin-authored (TinyMCE) section body: paragraphs, sub-headings, lists and
   the occasional callout note. */
.tnc-prose {
    display: flex;
    flex-direction: column;
    gap: 32px;
    font-size: 20px;
    line-height: 28px;
    color: var(--tnc-body-text);
}
.tnc-prose > :first-child { margin-top: 0; }
.tnc-prose > :last-child { margin-bottom: 0; }
.tnc-prose p { margin: 0; }
.tnc-prose p:empty { display: none; }
.tnc-prose strong,
.tnc-prose b { color: var(--tnc-ink); font-weight: 700; }
.tnc-prose a { color: var(--hr-blue-500, #005087); text-decoration: underline; }
.tnc-prose h3 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: var(--tnc-ink);
    margin: 0;
}
.tnc-prose ul,
.tnc-prose ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tnc-prose li {
    position: relative;
    padding: 12px 0 12px 32px;
    font-size: 20px;
    line-height: 28px;
}
[dir="rtl"] .tnc-prose li { padding: 12px 32px 12px 0; }
.tnc-prose li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 22px;
    width: 11.3px;
    height: 11.3px;
    background: var(--tnc-teal);
    transform: rotate(45deg);
}
/* Callout note: TinyMCE's native "Blockquote" format, restyled to the design's
   bordered cream card rather than a quote-with-rule. */
.tnc-prose blockquote {
    margin: 0;
    padding: 25px 33px;
    background: #fffdf5;
    border: 1px solid #eae3c9;
    border-inline-start: 1px solid #eae3c9;
    border-radius: 19px;
    font-size: 20px;
    line-height: 28px;
    color: var(--tnc-callout-text);
}
.tnc-prose img { display: block; width: 100%; height: auto; border-radius: 24px; }
.tnc-prose table { width: 100%; border-collapse: collapse; }
.tnc-prose td,
.tnc-prose th { border: 1px solid rgba(0, 0, 0, .1); padding: 12px; }

/* Fallback for content with no <h2> yet: one plain block, no sidebar. */
.tnc-plain {
    max-width: 900px;
}

/* ---------- Closing note + back to top ---------- */
.tnc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    /* No margin-top or padding-top: .tnc-article is a flex column with gap:60px,
       so the closing note is already separated from the last section by the same
       rhythm as every other block in the article. The 60px margin and 32px
       padding stacked on top of that gap for a 152px void - the padding existed
       only to sit under the 1px rule that has since been removed, and the margin
       to hold it off that rule. With the rule gone both were dead space. */
}
.tnc-foot-note {
    font-size: 16px;
    line-height: 24px;
    color: var(--tnc-callout-text);
    margin: 0;
}
/* Same pill as the home page's "Discover More"/"View All"
   (.hr-btn + .hr-btn-ghost-dark): 20% white fill, matching 1.5px white border,
   Figma's 0 4px 6.1px/6% shadow. Padding is .hr-btn's 14.5px/22.5px - the
   16px/24px here made the box 59px tall where every other revamp pill is 56.
   Mirrors .pp-back-to-top; keep the two in step. */
.tnc-back-to-top {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14.5px 22.5px;
    border-radius: 61px;
    border: 1.5px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .2);
    color: var(--hr-brown-900, #0b0b05);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
    box-shadow: 0 4px 6.1px rgba(0, 0, 0, .06);
    cursor: pointer;
    transition: all .2s ease-in-out;
}
/* Keeps the 2px lift .hr-btn gives its pills - this is a real working button,
   so unlike .tnc-pdf-btn the affordance belongs here. */
.tnc-back-to-top:hover { transform: translateY(-2px); color: var(--hr-brown-900, #0b0b05); }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
    .tnc-hero, .tnc-body { padding-inline: 40px; }
    .tnc-title { font-size: 48px; line-height: 56px; }
    .tnc-body-inner { gap: 40px; }
    .tnc-toc { flex-basis: 300px; width: 300px; }
}
@media (max-width: 991.98px) {
    .tnc-hero { padding-top: 140px; }
    .tnc-title { font-size: 40px; line-height: 48px; }
    .tnc-hero-copy { max-width: 100%; }
    .tnc-body-inner { flex-direction: column; }
    .tnc-toc { position: static; top: auto; width: 100%; flex-basis: auto; }
    .tnc-article { gap: 48px; }
    .tnc-section-title { font-size: 32px; line-height: 40px; }
}
/* ---------- Phone board ----------
   Terms & Conditions has no mobile artboard of its own - the design file
   carries only the Privacy Policy board (Figma 40004843:83249, 402 wide) for
   this template, and the two pages are the same component down to the class
   names, so its measurements are the reference here. Every value below is the
   one applied to .pp-* in privacy-policy-revamp.css; keep the two blocks in
   step, they are meant to render identically.

   The hero and the body do NOT share a gutter: the board puts the hero's
   content frame at x=24 on a 355 column and the body column at x=20 on a 362
   one. They were collapsed to a single 16px here, which is why neither
   matched. Split, and stated as two rules so a later edit cannot re-merge
   them. */
@media (max-width: 767.98px) {
    .tnc-hero { padding-inline: 24px; padding-top: 120px; }
    /* 60px top and bottom: the Contents card starts 60px into the body frame,
       and that frame ends 60px below its last child. The 120px this carried
       from the base rule was double the board's bottom inset. */
    .tnc-body { padding-inline: 20px; padding-top: 60px; padding-bottom: 60px; }

    /* Title and description centre on the phone board, unlike desktop - both
       are centred by geometry in the artboard, not by eye (the title is 346
       wide at x=4.5 inside its 355 frame, and the Download PDF pill is 164 at
       x=95.5, each exactly (355-w)/2). The breadcrumb stays on the leading
       edge: its own frame is full-width and renders left. */
    .tnc-hero-top {
        flex-direction: column;
        align-items: center;
        /* Title ends 138 into its frame, the description frame starts at 154. */
        gap: 16px;
    }
    .tnc-title { font-size: 32px; line-height: 40px; text-align: center; max-width: none; }
    /* align-items as well as text-align: .tnc-hero-copy is a flex column, so
       the Download PDF pill takes its cross-axis placement from here rather
       than from the text alignment. It is commented out in the markup today
       (blade line ~325), but leaving these disagreeing would put it back on the
       left the moment it is restored. */
    .tnc-hero-copy { align-items: center; text-align: center; max-width: none; }
    /* 16/24, giving the board's two-line 355x48 description box - it was
       inheriting the 24/32 desktop size. */
    .tnc-subtitle { font-size: 16px; line-height: 24px; }
    /* 24px, requested. The board has 16 here (the copy frame ends at 316,
       the breadcrumb frame starts at 332), but that left the trail crowded
       against the standfirst - .tnc-breadcrumb-row already carries 24px
       below it, so matching that sits the breadcrumb evenly between the
       copy and the hairline. Both pages keep the same value. */
    .tnc-hero-inner { gap: 24px; }
    /* One breadcrumb size site-wide on the phone, taken from the Events
       listing (.evt-breadcrumb in events-revamp.css): 12px type, 8px gaps, a
       12px separator. Replaces the fluid 13-20px clamp this page carried. */
    .tnc-breadcrumb { font-size: 12px; gap: 8px; }
    .tnc-breadcrumb-sep { height: 12px; }

    /* 32px between the Contents card and the article: the card ends at 688 and
       the article frame starts at 720. */
    .tnc-body-inner { gap: 32px; }
    /* 20px inset, from the card's own rows - each is 322 wide at x=20 inside
       the 362 card. The 32px block padding this carried overshot the board. */
    .tnc-toc { padding: 20px; gap: 16px; }

    /* The closing note stays full width (its container is 362, the same as the
       article column), so align-items stays at the default stretch - centring
       the flex items would shrink-wrap the note too. Only the button centres,
       and the board places it at x=134.5 on 402, which is (402-133)/2. 32px
       above it, from the article frame ending at 6686 and the button at 6718. */
    .tnc-foot { flex-direction: column; align-items: stretch; gap: 32px; }
    .tnc-back-to-top { align-self: center; }

    /* The painted band's LENGTH, sampled from the Figma render of the board's
       hero rather than guessed. Down its left gutter the teal lightens
       gradually across the whole hero - still (161,195,185) at y=410 against a
       421px hero - and does not reach cream (249,247,233) until y=536. So the
       band runs 115px PAST the hero's bottom edge, behind the top of the
       Contents card, and where the body begins it is still teal.

       That is the opposite of what this had. The base rule finishes the ramp
       80px ABOVE the body's start, so the body always begins on flat cream and
       the band stops short.

       So: overlap 115px instead of 80, and a ramp that is fully cream at the
       hero's own bottom edge (115px into the body) and gone 135px above it -
       the height of the board's transition wedge. padding-bottom is that 115px
       plus the 16px the board leaves between breadcrumb and hero bottom.

       The 135px ramp against a 131px padding puts the transparent stop 4px
       above the breadcrumb's box, so the crumbs sit on unwashed teal - ramping
       from the hero's bottom edge instead leaves them barely legible. */
    .tnc-hero {
        padding-bottom: 131px;
        margin-bottom: -115px;
        background-image:
            linear-gradient(to top,
                var(--hr-cream-500) 0,
                rgba(249, 247, 233, 0) 135px),
            var(--tnc-hero-bg);
    }
}