/* ==========================================================================
   Policy pages: threadandfilm theme (0.15.0, the legal pages plan)
   ==========================================================================
   Loaded only on pages assigned template-policy.php (inc/assets.php), right after
   pages.css and before responsive.css: Terms & Conditions, the Refund & Reprint Policy
   and the Privacy Policy. Designs of record: design/Terms and Conditions.dc.html,
   Refund Policy.dc.html and Privacy Policy.dc.html from 769px, Legal Mobile and
   States.dc.html L1 to L3 on the mobile twin and P1 in print. Plan
   2026-11-07-legal-pages.md, spec 2026-11-06-legal-pages-design.md, in the
   site-redesign folder under .plans/.

   The page's content is editor-owned block markup: a Group carrying
   .taf-policy-summary (the template lifts it out to sit over the hero), numbered H2s
   and H3s (the template gives them anchors and wraps each typed number in
   .taf-policy__num, inc/policy.php), paragraphs, lists and .taf-note--warn|tip
   callouts. Everything else is template-policy.php's. Every selector starts with
   .page-template-template-policy, the template's body class, inside @media print and
   the twin too (css-lint.mjs CL-7), so the homepage's and the product tabs' callouts
   keep their own construction.

   Widths come from the theme's shell (.taf-main .taf-container caps at --content-max
   with --shell-gutter), not the mocks' 1440px frame and 56px padding. Weight 800 is set
   at 700, the heaviest self-hosted Inter face.

   Sections:
   1. Tokens and page
   2. Hero
   3. Summary card
   4. Layout and the sidebar (contents, Related, print)
   5. The text: sections, clauses, lists, links
   6. Callouts
   7. Our policies cards
   8. Jump to section (shown on phones only)
   9. Focus
   10. Phones (the mobile twin)
   11. Print (P1)
   ========================================================================== */


/* ── 1. Tokens and page ── */

/* Values this sheet uses more than once. The dark-ground inks are the homepage
   hero's (pages.css --home-*), repeated here because the homepage scopes its own. */
.page-template-template-policy .taf-policy {
    --policy-ink-soft: rgba(255, 255, 255, 0.8);    /* Lead, the date pill's text */
    --policy-ink-faint: rgba(255, 255, 255, 0.6);   /* Breadcrumb */
    --policy-edge: rgba(255, 255, 255, 0.2);        /* The date pill's border */
    --policy-mark: rgba(255, 255, 255, 0.25);       /* Crop marks */
    --policy-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    --policy-gutter: 64px;                          /* The section-number column: 48px and a 16px gap */
    --policy-h3-line: 25px;                         /* A clause heading's line, shared with its number */
    --policy-print-ink: #000000;
    padding: 0;
}

/* The tone square of each policy page, by its place in the list (cyan, magenta,
   yellow, as the designs colour the three cards): Related's squares and the cards'
   strips read it. By position, so no slug or ID is in the CSS. */
.page-template-template-policy .taf-policy__tone-1 { --policy-tone: var(--color-cyan); }
.page-template-template-policy .taf-policy__tone-2 { --policy-tone: var(--color-magenta); }
.page-template-template-policy .taf-policy__tone-3 { --policy-tone: var(--color-yellow); }


/* ── 2. Hero ── */

.page-template-template-policy .taf-policy__hero {
    position: relative;                 /* Containing block for the crop marks */
    overflow: hidden;
    padding: 64px 0;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a2a3a 100%);
    color: var(--color-bg);
}

/* With a summary card, the hero runs on under it: the card rises 80px into it. */
.page-template-template-policy .taf-policy__hero.has-summary {
    padding-bottom: 140px;
}

.page-template-template-policy .taf-policy__hero:not(.has-summary) {
    margin-bottom: 56px;
}

/* Crop marks, top corners, as the homepage hero draws them. Decorative. */
.page-template-template-policy .taf-policy__hero::before,
.page-template-template-policy .taf-policy__hero::after {
    content: "";
    position: absolute;
    top: 20px;
    width: 16px;
    height: 16px;
    border-top: 1px solid var(--policy-mark);
    pointer-events: none;
}

.page-template-template-policy .taf-policy__hero::before {
    left: 20px;
    border-left: 1px solid var(--policy-mark);
}

.page-template-template-policy .taf-policy__hero::after {
    right: 20px;
    border-right: 1px solid var(--policy-mark);
}

.page-template-template-policy .taf-policy__hero-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 860px;
}

.page-template-template-policy .taf-policy__crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: var(--policy-ink-faint);
}

.page-template-template-policy .taf-policy__crumbs a {
    color: inherit;
}

.page-template-template-policy .taf-policy__crumbs a:hover,
.page-template-template-policy .taf-policy__crumbs [aria-current="page"] {
    color: var(--color-bg);
}

.page-template-template-policy .taf-policy__title {
    margin: 0;
    font-size: 72px;
    line-height: 1;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.045em;
    color: var(--color-bg);
    text-wrap: balance;
}

/* The title's last word (template-policy.php). */
.page-template-template-policy .taf-policy__accent {
    color: var(--color-cyan);
}

/* "Thread and Film · {host}/{slug}/ · Last updated: {date}": print only (section 11). */
.page-template-template-policy .taf-policy__printline {
    display: none;
}

.page-template-template-policy .taf-policy__lead {
    margin: 0;
    max-width: 620px;
    font-size: 20px;
    line-height: 1.5;
    color: var(--policy-ink-soft);
    text-wrap: pretty;
}

.page-template-template-policy .taf-policy__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.page-template-template-policy .taf-policy__updated {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--policy-edge);
    border-radius: var(--radius-full);
    font-size: 13px;
    color: var(--policy-ink-soft);
}

.page-template-template-policy .taf-policy__updated::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    background: var(--color-yellow);
}

.page-template-template-policy .taf-policy__updated time {
    font-weight: var(--font-weight-semibold);
    color: var(--color-bg);
}


/* ── 3. Summary card ──
   The page's own Group block, lifted out of the content by the template. Its rows are
   a grid: the heading, a list and the closing note span it. A summary made of nested
   Groups (all three policies' three cards) takes the card form below instead. WordPress wraps a
   classic theme's Group in an inner container, which display: contents takes out of
   the layout. */

.page-template-template-policy .taf-policy__summary {
    position: relative;
    z-index: 2;
    margin-top: -80px;
    padding-bottom: 72px;
}

.page-template-template-policy .taf-policy-summary {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 22px 20px;
    padding: 34px 36px 28px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--policy-shadow);
    overflow-wrap: anywhere;
}

/* The CMY bar along the top. */
.page-template-template-policy .taf-policy-summary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-cyan), var(--color-magenta), var(--color-yellow));
}

.page-template-template-policy .taf-policy-summary > .wp-block-group__inner-container {
    display: contents;
}

.page-template-template-policy .taf-policy-summary > :not(.wp-block-group),
.page-template-template-policy .taf-policy-summary > .wp-block-group__inner-container > :not(.wp-block-group) {
    grid-column: 1 / -1;
    margin: 0;
}

.page-template-template-policy .taf-policy-summary h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 22px;
    line-height: 1.3;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.page-template-template-policy .taf-policy-summary h2::before,
.page-template-template-policy .taf-policy__aside-head::before,
.page-template-template-policy .taf-policy__cards-title::before,
.page-template-template-policy .taf-policy__jump summary::before {
    content: "";
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    background: var(--color-text);
}

.page-template-template-policy .taf-policy-summary ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    gap: 14px 48px;
    padding: 0;
    list-style: none;
}

.page-template-template-policy .taf-policy-summary li {
    position: relative;
    padding-left: 20px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--color-text);
}

.page-template-template-policy .taf-policy-summary li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 8px;
    height: 8px;
    background: var(--color-cyan);
}

/* The closing note ("This summary doesn't replace the full terms"). */
.page-template-template-policy .taf-policy-summary > p:last-child,
.page-template-template-policy .taf-policy-summary > .wp-block-group__inner-container > p:last-child {
    padding-top: 16px;
    border-top: 1px solid var(--color-border-light);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--color-text-light);
}

/* Nested Groups: the summary's cards, each with its tone strip. */
.page-template-template-policy .taf-policy-summary .wp-block-group {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 24px 22px 22px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-tile);
    --policy-tone: var(--color-cyan);
}

.page-template-template-policy .taf-policy-summary .wp-block-group:nth-of-type(3n + 2) { --policy-tone: var(--color-magenta); }
.page-template-template-policy .taf-policy-summary .wp-block-group:nth-of-type(3n) { --policy-tone: var(--color-yellow); }

.page-template-template-policy .taf-policy-summary .wp-block-group::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--policy-tone);
}

.page-template-template-policy .taf-policy-summary .wp-block-group > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page-template-template-policy .taf-policy-summary .wp-block-group > *,
.page-template-template-policy .taf-policy-summary .wp-block-group > .wp-block-group__inner-container > * {
    margin: 0;
}

.page-template-template-policy .taf-policy-summary h3 {
    font-size: 18px;
    line-height: 1.35;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.page-template-template-policy .taf-policy-summary .wp-block-group p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-light);
}

/* The card form: a summary made of Groups is no box at all, but the cards themselves,
   free-standing in one row that shares the content width equally and wraps when a card
   would fall under 240px (Privacy Policy.dc.html, lines 136-157; Terms and Refund take it
   too, the owner's CP2b). Each card has its tone's 4px bar (cyan, the accessible magenta,
   yellow, by its place in the row) and a 52px icon tile, drawn by the inner container's
   ::before over the card's top padding, with the icon on it in ink, or white on the
   magenta: the card's ::after, the icon's SVG as a mask, so one drawing serves any tone.
   The icon is named by a class on the card's Group, taf-policy-icon-{name}; a card that
   names none takes Privacy's by its place (a person, a lock, a circled X). A card's text is
   a paragraph or a short list. "Quick summary" stays in the content for screen readers,
   but the designs show no heading here, so it takes no space; a closing paragraph after
   the cards is a small muted line under the row. */
.page-template-template-policy .taf-policy-summary:has(.wp-block-group) {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0;
    overflow: visible;                  /* The cards' shadows */
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.page-template-template-policy .taf-policy-summary:has(.wp-block-group)::before {
    content: none;
}

.page-template-template-policy .taf-policy-summary:has(.wp-block-group) h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.page-template-template-policy .taf-policy-summary:has(.wp-block-group) .wp-block-group {
    flex: 1 1 240px;
    min-width: 0;
    padding: calc(28px + 52px + 14px) 24px 28px;   /* The tile and its 14px gap above the text */
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--policy-shadow);
    --policy-glyph: var(--color-text);
    --policy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.6'%3E%3Cpath d='M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.page-template-template-policy .taf-policy-summary:has(.wp-block-group) .wp-block-group:nth-of-type(3n + 2) {
    --policy-tone: var(--color-accent-text);
    --policy-glyph: var(--color-bg);
    --policy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.6'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E");
}

.page-template-template-policy .taf-policy-summary:has(.wp-block-group) .wp-block-group:nth-of-type(3n) {
    --policy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
}

/* Icons a card can name (after the defaults by place, so a named one wins). */
.page-template-template-policy .taf-policy-summary:has(.wp-block-group) .wp-block-group.taf-policy-icon-user { --policy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.6'%3E%3Cpath d='M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.page-template-template-policy .taf-policy-summary:has(.wp-block-group) .wp-block-group.taf-policy-icon-lock { --policy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.6'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E"); }
.page-template-template-policy .taf-policy-summary:has(.wp-block-group) .wp-block-group.taf-policy-icon-x-circle { --policy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E"); }
.page-template-template-policy .taf-policy-summary:has(.wp-block-group) .wp-block-group.taf-policy-icon-file { --policy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E"); }
.page-template-template-policy .taf-policy-summary:has(.wp-block-group) .wp-block-group.taf-policy-icon-zap { --policy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E"); }
.page-template-template-policy .taf-policy-summary:has(.wp-block-group) .wp-block-group.taf-policy-icon-package { --policy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='16.5' y1='9.4' x2='7.5' y2='4.21'/%3E%3Cpath d='M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E"); }
.page-template-template-policy .taf-policy-summary:has(.wp-block-group) .wp-block-group.taf-policy-icon-rotate { --policy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 4 1 10 7 10'/%3E%3Cpath d='M3.51 15a9 9 0 102.13-9.36L1 10'/%3E%3C/svg%3E"); }
.page-template-template-policy .taf-policy-summary:has(.wp-block-group) .wp-block-group.taf-policy-icon-clock { --policy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); }

.page-template-template-policy .taf-policy-summary:has(.wp-block-group) .wp-block-group > .wp-block-group__inner-container {
    gap: 14px;
}

/* The tile. */
.page-template-template-policy .taf-policy-summary:has(.wp-block-group) .wp-block-group > .wp-block-group__inner-container::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 24px;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: var(--policy-tone);
}

/* The icon, 26px in the middle of the tile. */
.page-template-template-policy .taf-policy-summary:has(.wp-block-group) .wp-block-group::after {
    content: "";
    position: absolute;
    top: calc(28px + 13px);
    left: calc(24px + 13px);
    width: 26px;
    height: 26px;
    background: var(--policy-glyph);
    -webkit-mask: var(--policy-icon) center / contain no-repeat;
    mask: var(--policy-icon) center / contain no-repeat;
}

.page-template-template-policy .taf-policy-summary:has(.wp-block-group) h3 {
    font-size: 20px;
    line-height: 1.3;
}

/* A card's list: compact, as the card's paragraph reads, each item led by a small square. */
.page-template-template-policy .taf-policy-summary:has(.wp-block-group) .wp-block-group ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.page-template-template-policy .taf-policy-summary:has(.wp-block-group) .wp-block-group li {
    padding-left: 16px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-light);
}

.page-template-template-policy .taf-policy-summary:has(.wp-block-group) .wp-block-group li::before {
    top: 9px;
    width: 6px;
    height: 6px;
    background: var(--color-text);
}

/* The closing note ("This summary doesn't replace the full terms"), under the row. */
.page-template-template-policy .taf-policy-summary:has(.wp-block-group) > p:last-child,
.page-template-template-policy .taf-policy-summary:has(.wp-block-group) > .wp-block-group__inner-container > p:last-child {
    flex: 1 1 100%;
    padding-top: 0;
    border-top: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--color-text-light);
}


/* ── 4. Layout and the sidebar ──
   The sidebar and the text side by side. A grid, not the mock's wrapping flex row:
   wrapped, the sticky sidebar would ride over the text below it. At 769px the text
   column still has about 410px. */

.page-template-template-policy .taf-policy__doc {
    display: grid;
    grid-template-columns: minmax(200px, 280px) minmax(0, 760px);
    gap: 40px clamp(32px, 4vw, 64px);
    align-items: start;
    padding-bottom: 88px;
}

.page-template-template-policy .taf-policy__aside {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    max-height: calc(100vh - var(--header-h) - 48px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 2px 4px 8px 2px;
}

.page-template-template-policy .taf-policy__aside-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.page-template-template-policy .taf-policy__toc {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.page-template-template-policy .taf-policy__toc a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    font-size: 14px;
    line-height: 1.4;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-light);
}

.page-template-template-policy .taf-policy__toc a:hover {
    background: var(--color-bg-muted);
    color: var(--color-text);
}

.page-template-template-policy .taf-policy__tocnum {
    flex-shrink: 0;
    width: 22px;
    font-size: 12px;
    line-height: 19.6px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-light);
}

.page-template-template-policy .taf-policy__related {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border-light);
}

/* Related's heading has no square, and lines up with the links' text. */
.page-template-template-policy .taf-policy__related .taf-policy__aside-head {
    padding: 0 12px 4px;
}

.page-template-template-policy .taf-policy__related .taf-policy__aside-head::before {
    content: none;
}

.page-template-template-policy .taf-policy__related a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: var(--font-weight-medium);
}

.page-template-template-policy .taf-policy__related a::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    background: var(--policy-tone);
}

.page-template-template-policy .taf-policy__print {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 20px;
    border: 1.5px solid var(--color-text);
    border-radius: var(--radius-full);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background-color var(--ease-out-fast), color var(--ease-out-fast);
}

.page-template-template-policy .taf-policy__print:hover {
    background: var(--color-text);
    color: var(--color-bg);
}

/* The button's display: flex would otherwise beat the hidden attribute it is printed
   with, and show a button that does nothing without JavaScript. */
.page-template-template-policy .taf-policy__print[hidden] {
    display: none;
}


/* ── 5. The text ──
   Flat block content: the template adds no wrapper per section. Every block sits in the
   text column, right of the number column (--policy-gutter); a numbered H2 runs the full
   width, so its rule spans the number column too, and its number moves into that
   column. A clause H3's number hangs in its own 48px. */

.page-template-template-policy .taf-policy__body {
    min-width: 0;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-light);
    overflow-wrap: anywhere;            /* A long address or URL wraps rather than scrolling the page */
    text-wrap: pretty;
}

.page-template-template-policy .taf-policy__body > * {
    max-width: var(--measure-prose);
    margin: 0 0 16px var(--policy-gutter);
}

.page-template-template-policy .taf-policy__body > :last-child {
    margin-bottom: 0;
}

/* Anchors land below the sticky header, from the contents and from another page. */
.page-template-template-policy .taf-policy__body [id] {
    scroll-margin-top: calc(var(--header-h) + 24px);
}

.page-template-template-policy .taf-policy__body > h2 {
    position: relative;
    max-width: none;
    margin: 40px 0 22px;
    padding: 40px 0 0 var(--policy-gutter);
    border-top: 1px solid var(--color-border-light);
    font-size: 28px;
    line-height: 1.2;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.page-template-template-policy .taf-policy__body > h2:first-child {
    margin-top: 0;
}

/* The section number, in the number column, level with the heading's first line. */
.page-template-template-policy .taf-policy__body > h2 .taf-policy__num {
    position: absolute;
    top: 48px;
    left: 0;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: var(--policy-num);
}

.page-template-template-policy .taf-policy__body > h3 {
    position: relative;
    margin-top: 28px;
    margin-bottom: 10px;
    padding-left: 48px;
    font-size: 18px;
    line-height: var(--policy-h3-line);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.page-template-template-policy .taf-policy__body > h2 + h3 {
    margin-top: 0;
}

.page-template-template-policy .taf-policy__body > h3 .taf-policy__num {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 15px;
    line-height: var(--policy-h3-line);
    font-variant-numeric: tabular-nums;
    color: var(--policy-num);
}

.page-template-template-policy .taf-policy__body strong {
    color: var(--color-text);
}

.page-template-template-policy .taf-policy__body ul,
.page-template-template-policy .taf-policy__body ol {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    list-style: none;
}

.page-template-template-policy .taf-policy__body ul > li {
    position: relative;
    padding-left: 18px;
}

.page-template-template-policy .taf-policy__body ul > li::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 6px;
    height: 6px;
    background: var(--color-cyan);
}

/* Numbered steps (Refund's "How to file a claim"): ink discs with white numbers. */
.page-template-template-policy .taf-policy__body ol {
    gap: 14px;
    counter-reset: taf-policy-step;
}

.page-template-template-policy .taf-policy__body ol > li {
    position: relative;
    min-height: 28px;
    padding-left: 42px;
    color: var(--color-text);
    counter-increment: taf-policy-step;
}

.page-template-template-policy .taf-policy__body ol > li::before {
    content: counter(taf-policy-step);
    position: absolute;
    top: -1px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-text);
    color: var(--color-bg);
    font-size: 13px;
    line-height: 1;
    font-weight: var(--font-weight-bold);
}

/* Links in the text and the summary: underlined as well as coloured, as base.css does
   for .taf-page-content, because the link ink against the grey copy is under 3:1. */
.page-template-template-policy .taf-policy__body a,
.page-template-template-policy .taf-policy-summary a {
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ── 6. Callouts ──
   The stored .taf-note paragraphs, drawn as the designs draw them on these pages only:
   a warning (and an aside) is a grey box with a square, yellow for a warning; a tip is
   the light cyan box with link-ink text. The homepage's How to apply and the product
   tabs keep their own construction (woocommerce.css, product.css §4b). #666 on the grey
   is 5.27:1, #005C7F on the cyan tint 6.69:1. */

.page-template-template-policy .taf-policy__body .taf-note {
    position: relative;
    padding: 18px 20px 18px 42px;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-bg-muted);
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-text-light);
}

.page-template-template-policy .taf-policy__body .taf-note::before {
    content: "";
    position: absolute;
    top: 27px;
    left: 20px;
    width: 8px;
    height: 8px;
    background: var(--color-text);
}

/* The yellow square needs an edge to hold on the grey, as the notices' does. */
.page-template-template-policy .taf-policy__body .taf-note--warn::before {
    background: var(--color-yellow);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.page-template-template-policy .taf-policy__body .taf-note strong {
    font-size: 15.5px;
    color: var(--color-text);
}

.page-template-template-policy .taf-policy__body .taf-note--tip {
    padding: 16px 18px;
    border-radius: var(--radius-tile);
    background: var(--state-success-bg);
    line-height: 1.6;
    color: var(--state-success-text);
}

.page-template-template-policy .taf-policy__body .taf-note--tip::before {
    content: none;
}

.page-template-template-policy .taf-policy__body .taf-note--tip strong {
    font-size: inherit;
    color: inherit;
}


/* ── 7. Our policies cards ──
   All the policy pages in menu order; the one being read is a grey card with no link
   (aria-current="page"), as the designs mark it. */

.page-template-template-policy .taf-policy__cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 96px;
}

.page-template-template-policy .taf-policy__cards-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding-top: 40px;
    border-top: 1px solid var(--color-border-light);
    font-size: 22px;
    line-height: 1.3;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.page-template-template-policy .taf-policy__card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 16px;
}

.page-template-template-policy .taf-policy__card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 24px 22px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color var(--ease-out-fast);
}

.page-template-template-policy .taf-policy__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--policy-tone);
}

.page-template-template-policy a.taf-policy__card:hover {
    border-color: var(--color-text);
    color: var(--color-text);
}

.page-template-template-policy .taf-policy__card strong {
    font-size: 18px;
    color: var(--color-text);
}

.page-template-template-policy .taf-policy__card-text {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--color-text-light);
}

.page-template-template-policy .taf-policy__card-cta {
    margin-top: auto;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-link);
}

.page-template-template-policy .taf-policy__card.is-current {
    border-color: transparent;
    background: var(--color-bg-muted);
}

.page-template-template-policy .taf-policy__card.is-current .taf-policy__card-cta {
    font-size: 13px;
    color: var(--color-text-light);
}


/* ── 8. Jump to section ──
   A Details element: the contents on phones, under the summary card (section 10). */

.page-template-template-policy .taf-policy__jump {
    display: none;
}


/* ── 9. Focus ──
   The site ring, inverse on the hero's dark ground. */

.page-template-template-policy .taf-policy a:focus-visible,
.page-template-template-policy .taf-policy button:focus-visible,
.page-template-template-policy .taf-policy summary:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.page-template-template-policy .taf-policy__hero a:focus-visible {
    outline-color: var(--focus-ring-inverse);
}


/* ── 10. Phones (the mobile twin) ──
   Legal Mobile and States.dc.html L1 to L3: the sidebar goes and Jump to section takes
   its place under the summary card, its rows at least 44px tall; each section number
   sits above its heading. Keep this query byte-identical to its nine other copies
   (css-lint.mjs CL-3): responsive.css's mobile-overlay, utility-row and blog-collapse
   blocks, pages.css's card-overlap block, product.css's, cart.css's, checkout.css's and
   account.css's phone blocks and MOBILE_QUERY in assets/js/main.js. */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

    .page-template-template-policy .taf-policy__hero {
        padding: 24px 0;
    }

    .page-template-template-policy .taf-policy__hero.has-summary {
        padding-bottom: 64px;
    }

    .page-template-template-policy .taf-policy__hero:not(.has-summary) {
        margin-bottom: 28px;
    }

    .page-template-template-policy .taf-policy__hero::before,
    .page-template-template-policy .taf-policy__hero::after {
        content: none;
    }

    .page-template-template-policy .taf-policy__hero-text {
        gap: 14px;
    }

    .page-template-template-policy .taf-policy__crumbs {
        font-size: 12.5px;
    }

    .page-template-template-policy .taf-policy__title {
        font-size: 40px;
        line-height: 1.02;
        letter-spacing: -0.04em;
    }

    .page-template-template-policy .taf-policy__lead {
        font-size: 16px;
        line-height: 1.55;
    }

    .page-template-template-policy .taf-policy__updated {
        min-height: 32px;
        padding: 0 12px;
        font-size: 12.5px;
    }

    .page-template-template-policy .taf-policy__summary {
        margin-top: -40px;
        padding-bottom: 0;
    }

    .page-template-template-policy .taf-policy-summary {
        gap: 16px;
        padding: 24px 20px 20px;
    }

    .page-template-template-policy .taf-policy-summary h2 {
        gap: 10px;
        font-size: 19px;
    }

    .page-template-template-policy .taf-policy-summary ul {
        gap: 12px;
    }

    .page-template-template-policy .taf-policy-summary li {
        font-size: 15px;
    }

    .page-template-template-policy .taf-policy-summary > p:last-child,
    .page-template-template-policy .taf-policy-summary > .wp-block-group__inner-container > p:last-child {
        padding-top: 14px;
        font-size: 13px;
        line-height: 1.55;
    }

    /* Jump to section: a bordered card, closed by default. */
    .page-template-template-policy .taf-policy__jump {
        display: block;
        margin-top: 20px;
        overflow: hidden;
        border: 1px solid var(--color-border-light);
        border-radius: var(--radius-tile);
    }

    .page-template-template-policy .taf-policy__jump summary {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 56px;
        padding: 0 16px;
        font-size: 15px;
        font-weight: var(--font-weight-semibold);
        color: var(--color-text);
        list-style: none;
        cursor: pointer;
    }

    .page-template-template-policy .taf-policy__jump summary::-webkit-details-marker {
        display: none;
    }

    /* The chevron, pointing down while closed and up while open. */
    .page-template-template-policy .taf-policy__jump summary::after {
        content: "";
        flex-shrink: 0;
        width: 8px;
        height: 8px;
        margin: 0 3px 4px 0;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
    }

    .page-template-template-policy .taf-policy__jump[open] summary::after {
        margin-bottom: -4px;
        transform: rotate(-135deg);
    }

    .page-template-template-policy .taf-policy__jump-count {
        margin-left: auto;
        font-size: 13px;
        font-weight: var(--font-weight-medium);
        color: var(--color-text-light);
    }

    .page-template-template-policy .taf-policy__jump nav {
        display: flex;
        flex-direction: column;
        padding: 6px;
        border-top: 1px solid var(--color-border-light);
    }

    .page-template-template-policy .taf-policy__jump a {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        min-height: 44px;
        padding: 11px 12px;
        border-radius: var(--radius-md);
        font-size: 15px;
        line-height: 1.45;
        color: var(--color-text);
    }

    .page-template-template-policy .taf-policy__jump a:hover {
        background: var(--color-bg-muted);
        color: var(--color-text);
    }

    .page-template-template-policy .taf-policy__jump .taf-policy__tocnum {
        width: 24px;
        font-size: 12.5px;
        line-height: 21.75px;
    }

    /* One column; the sidebar's job is Jump to section's. */
    .page-template-template-policy .taf-policy__doc {
        display: block;
        padding-top: 8px;
        padding-bottom: 36px;
    }

    .page-template-template-policy .taf-policy__aside {
        display: none;
    }

    .page-template-template-policy .taf-policy__body > * {
        margin-left: 0;
    }

    .page-template-template-policy .taf-policy__body > h2 {
        margin-top: 28px;
        padding: 28px 0 0;
        font-size: 24px;
    }

    .page-template-template-policy .taf-policy__body > h2:first-child {
        padding-top: 20px;
        border-top: 0;
    }

    /* The section number above its heading. */
    .page-template-template-policy .taf-policy__body > h2 .taf-policy__num {
        position: static;
        display: block;
        margin-bottom: 8px;
    }

    .page-template-template-policy .taf-policy__body > h3 {
        font-size: 17px;
    }

    .page-template-template-policy .taf-policy__cards {
        padding-bottom: 36px;
    }

    .page-template-template-policy .taf-policy__cards-title {
        gap: 10px;
        padding-top: 28px;
        font-size: 19px;
    }
}


/* ── 11. Print (P1) ──
   No header, footer, sidebar, Jump to section, breadcrumb, buttons or cards; black text
   on white, boxes outlined, numbers back inline in their headings, and the print line
   (site, address, date) under the title in place of the lead and the date pill.
   !important on the ink, the grounds and transitions only: print must beat every screen
   colour in this sheet and the rest, whatever their specificity.
   A printed page box is about 718 to 740 CSS px wide, so the mobile twin above applies
   in print too. Every rule here that undoes one of the twin's carries at least the
   twin rule's weight, and wins by coming later (legal-suite.mjs LS-9 prints at 740px). */
@media print {

    .page-template-template-policy .taf-header-shell,
    .page-template-template-policy .taf-skip-link,
    .page-template-template-policy footer.taf-footer,
    .page-template-template-policy .taf-policy__crumbs,
    .page-template-template-policy .taf-policy__lead,
    .page-template-template-policy .taf-policy__meta,
    .page-template-template-policy .taf-policy__jump,
    .page-template-template-policy .taf-policy__aside,
    .page-template-template-policy .taf-policy__cards {
        display: none;
    }

    /* No transition either: a link's colour must not glide from its screen ink. */
    .page-template-template-policy .taf-policy * {
        color: var(--policy-print-ink) !important;
        transition: none !important;
    }

    .page-template-template-policy .taf-policy .taf-container {
        max-width: none;
        padding: 0;
    }

    .page-template-template-policy .taf-policy__hero,
    .page-template-template-policy .taf-policy__hero.has-summary,
    .page-template-template-policy .taf-policy__hero:not(.has-summary) {
        margin: 0;
        padding: 0 0 20px;
        background: none !important;
    }

    .page-template-template-policy .taf-policy__hero::before,
    .page-template-template-policy .taf-policy__hero::after,
    .page-template-template-policy .taf-policy-summary::before,
    .page-template-template-policy .taf-policy-summary .wp-block-group::before {
        content: none;
    }

    .page-template-template-policy .taf-policy__hero-text {
        gap: 8px;
    }

    .page-template-template-policy .taf-policy__title {
        font-size: 32px;
        line-height: 1.1;
        letter-spacing: -0.02em;
    }

    .page-template-template-policy .taf-policy__printline {
        display: block;
        margin: 0;
        font-size: 12.5px;
    }

    .page-template-template-policy .taf-policy__summary {
        margin: 0;
        padding: 0 0 16px;
    }

    .page-template-template-policy .taf-policy-summary,
    .page-template-template-policy .taf-policy-summary .wp-block-group,
    .page-template-template-policy .taf-policy__body .taf-note {
        border: 1px solid var(--policy-print-ink);
        border-radius: 0;
        background: none !important;
        box-shadow: none;
    }

    .page-template-template-policy .taf-policy-summary {
        padding: 14px 16px;
    }

    /* The card form: no box around the row, the cards outlined without their tiles
       or icons, three to a row on the page. */
    .page-template-template-policy .taf-policy-summary:has(.wp-block-group) {
        gap: 12px;
        padding: 0;
        border: 0;
    }

    .page-template-template-policy .taf-policy-summary:has(.wp-block-group) .wp-block-group {
        flex-basis: 180px;
        padding: 12px 14px;
        border: 1px solid var(--policy-print-ink);
        border-radius: 0;
        box-shadow: none;
    }

    .page-template-template-policy .taf-policy-summary:has(.wp-block-group) .wp-block-group::after,
    .page-template-template-policy .taf-policy-summary:has(.wp-block-group) .wp-block-group > .wp-block-group__inner-container::before {
        content: none;
    }

    .page-template-template-policy .taf-policy-summary:has(.wp-block-group) h3 {
        font-size: 15px;
    }

    .page-template-template-policy .taf-policy__doc {
        display: block;
        padding: 0;
    }

    .page-template-template-policy .taf-policy__body {
        padding: 0;
        border: 0;
        font-size: 14px;
        line-height: 1.6;
    }

    .page-template-template-policy .taf-policy__body > * {
        max-width: none;
        margin-left: 0;
    }

    /* Every section opens on a rule, the first included, as P1 draws them. */
    .page-template-template-policy .taf-policy__body > h2,
    .page-template-template-policy .taf-policy__body > h2:first-child {
        margin-top: 18px;
        padding: 18px 0 0;
        border-top: 1px solid var(--policy-print-ink);
        font-size: 20px;
        line-height: 1.25;
        letter-spacing: 0;
    }

    .page-template-template-policy .taf-policy__body > h2:first-child {
        margin-top: 0;
    }

    .page-template-template-policy .taf-policy__body > h3 {
        padding-left: 0;
        font-size: 18px;
    }

    .page-template-template-policy .taf-policy__body h2,
    .page-template-template-policy .taf-policy__body h3 {
        break-after: avoid;
    }

    /* "1. Agreement to terms", "1.1 Who we are", as P1 prints them. The selectors
       match the screen rules' weight, so this later rule wins. */
    .page-template-template-policy .taf-policy__body > h2 .taf-policy__num,
    .page-template-template-policy .taf-policy__body > h3 .taf-policy__num {
        position: static;
        display: inline;
        margin: 0;
        font-size: inherit;
        line-height: inherit;
    }

    .page-template-template-policy .taf-policy__body ul > li::before,
    .page-template-template-policy .taf-policy-summary li::before {
        background: var(--policy-print-ink);
    }

    .page-template-template-policy .taf-policy__body ol > li::before {
        border: 1px solid var(--policy-print-ink);
        background: none;
        color: var(--policy-print-ink);
    }

    .page-template-template-policy .taf-policy__body a,
    .page-template-template-policy .taf-policy-summary a {
        text-decoration: underline;
    }
}