/* ==========================================================================
   HumanProse writing packs
   The /packs pages (body.hp-ui.hp-templates.hp-packs, on the guides shell),
   the pack cards on the templates gallery, and the tips and outline section
   of a template page. Colours come from the --hx-* tokens, so the dark
   theme follows; logical properties keep Arabic (RTL) right.
   ========================================================================== */

/* ---------- Banner: title, lead and the pack's contents ---------- */
body.hp-ui.hp-templates .hpk-banner { --hx-focus: var(--hx-focus-on-stage); }
/* The pack's contents carry their own brass seam, so the banner's band steps aside */
body.hp-ui.hp-templates .hpk-banner:not(.is-index)::after { display: none; }
body.hp-ui.hp-templates .hpk-banner .hpk-banner-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); gap: 28px 56px; align-items: end;
    max-width: none;
}
body.hp-ui.hp-templates .hpk-banner-main { min-width: 0; }
body.hp-ui.hp-templates .hpk-banner-main > * { max-width: 62ch; }
body.hp-ui.hp-templates .hpk-banner .hpg-banner-title { font-size: clamp(2.3rem, 5vw, 4rem); }
body.hp-ui.hp-templates .hpk-banner-actions { margin: 28px 0 0; }
body.hp-ui.hp-templates .hpk-btn-cream {
    background: #f6efe2; color: #0f2a20; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .6);
}
body.hp-ui.hp-templates .hpk-btn-cream:hover { background: #fff; }

/* The contents: a ruled index with a brass seam, like the inside cover of a notebook */
body.hp-ui.hp-templates .hpk-contents {
    position: relative; min-width: 0; margin: 0;
    padding-block: 4px; padding-inline-start: 24px;
    border-inline-start: 1.5px solid rgba(240, 214, 170, .55);
}
body.hp-ui.hp-templates .hpk-contents-title {
    margin: 0 0 10px; font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--hx-cream);
}
body.hp-ui.hp-templates .hpk-contents ol { margin: 0; padding: 0; list-style: none; }
body.hp-ui.hp-templates .hpk-contents li + li { border-top: 1px solid rgba(240, 214, 170, .14); }
body.hp-ui.hp-templates .hpk-contents a {
    display: flex; align-items: baseline; gap: 12px; padding: 7px 0;
    color: var(--hx-on-stage-2); text-decoration: none; font-size: .9rem; line-height: 1.35;
    transition: color .2s ease;
}
body.hp-ui.hp-templates .hpk-contents a:hover { color: var(--hx-on-stage); }
body.hp-ui.hp-templates .hpk-contents-n {
    flex: none; min-width: 1.6em; font-family: var(--hx-f-display); font-size: 1.05rem; color: var(--hx-cream);
    font-variant-numeric: tabular-nums;
}

/* ---------- Shared section heads ---------- */
body.hp-ui.hp-templates.hp-packs :is(.hpk-section-head h2, .hpk-intro h2, .hpk-flow > h2, .hpk-faq > h2, .hpk-others > h2) {
    margin: 0; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.08; color: var(--hx-ink); text-wrap: balance;
}
body.hp-ui.hp-templates .hpk-section-head { display: grid; gap: 12px; max-width: 70ch; margin-bottom: 26px; }
body.hp-ui.hp-templates .hpk-section-head > p { margin: 0; color: var(--hx-ink-2); font-size: 1.02rem; line-height: 1.65; }

/* ---------- Who it is for / what the reader looks for ---------- */
body.hp-ui.hp-templates .hpk-intro {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px; margin-top: 28px;
}
body.hp-ui.hp-templates .hpk-audience { min-width: 0; padding: clamp(24px, 3.4vw, 36px) clamp(4px, 1vw, 12px); }
body.hp-ui.hp-templates .hpk-reader {
    min-width: 0; padding: clamp(24px, 3.4vw, 36px); border-radius: 26px;
    background: var(--hx-surface); border: 1px solid var(--hx-line); box-shadow: var(--hx-shadow);
}
body.hp-ui.hp-templates.hp-packs .hpk-intro h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 18px; }
body.hp-ui.hp-templates .hpk-audience ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
body.hp-ui.hp-templates .hpk-audience li {
    position: relative; padding-inline-start: 26px; color: var(--hx-ink-2); font-size: .98rem; line-height: 1.6;
}
body.hp-ui.hp-templates .hpk-audience li::before {
    content: ""; position: absolute; inset-inline-start: 2px; top: .62em;
    width: 10px; height: 10px; border-radius: 3px; transform: rotate(45deg);
    background: color-mix(in srgb, var(--hx-quill) 26%, transparent); border: 1.5px solid var(--hx-quill);
}
body.hp-ui.hp-templates .hpk-reader ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: hpk-look; }
body.hp-ui.hp-templates .hpk-reader li {
    counter-increment: hpk-look; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: 10px;
    padding: 12px 0; border-top: 1px solid var(--hx-line); font-size: .96rem; line-height: 1.55; color: var(--hx-ink-2);
}
body.hp-ui.hp-templates .hpk-reader li:first-child { border-top: 0; padding-top: 0; }
body.hp-ui.hp-templates .hpk-reader li::before {
    content: counter(hpk-look, decimal-leading-zero); grid-row: span 2;
    font-family: var(--hx-f-display); font-size: 1.35rem; line-height: 1.1; color: var(--hx-quill);
}
body.hp-ui.hp-templates .hpk-reader strong { color: var(--hx-ink); font-weight: 700; }

/* ---------- The templates ---------- */
body.hp-ui.hp-templates .hpk-templates { margin-top: 76px; scroll-margin-top: 96px; }
body.hp-ui.hp-templates .hpk-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
body.hp-ui.hp-templates .hpk-item {
    scroll-margin-top: 96px; border-radius: 22px; background: var(--hx-surface); border: 1px solid var(--hx-line);
    transition: border-color .2s ease, box-shadow .25s ease;
}
body.hp-ui.hp-templates .hpk-item:hover { border-color: color-mix(in srgb, var(--hx-quill) 60%, var(--hx-line)); box-shadow: var(--hx-shadow); }
body.hp-ui.hp-templates .hpk-item:target { border-color: var(--hx-quill); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hx-quill) 22%, transparent); }
body.hp-ui.hp-templates .hpk-item-row {
    display: grid; grid-template-columns: 2.6rem 46px minmax(0, 1fr) auto; gap: 6px 18px; align-items: center;
    padding: 20px 22px 16px;
}
body.hp-ui.hp-templates .hpk-item-n {
    font-family: var(--hx-f-display); font-size: 1.9rem; line-height: 1; color: var(--hx-quill); font-variant-numeric: tabular-nums;
}
body.hp-ui.hp-templates .hpk-item-icon {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
    background: var(--hx-royal-soft); color: var(--hx-royal-ink);
}
body.hp-ui.hp-templates .hpk-item-copy { min-width: 0; }
body.hp-ui.hp-templates .hpk-item-title { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.7rem); line-height: 1.12; color: var(--hx-ink); }
body.hp-ui.hp-templates .hpk-item-title a { color: inherit; text-decoration: none; }
body.hp-ui.hp-templates .hpk-item-title a:hover { text-decoration: underline; text-decoration-color: var(--hx-quill); text-underline-offset: 5px; text-decoration-thickness: 1px; }
body.hp-ui.hp-templates .hpk-item-copy p { margin: 4px 0 0; color: var(--hx-ink-2); font-size: .93rem; line-height: 1.55; }
body.hp-ui.hp-templates .hpk-item-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
body.hp-ui.hp-templates .hpk-item-actions .hp-btn { padding: 11px 16px; font-size: .86rem; }
body.hp-ui.hp-templates .hpk-item-actions .hp-btn svg,
body.hp-ui.hp-templates .hpt-outline-card .hp-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Tips, outline and settings: a quiet disclosure under each template */
body.hp-ui.hp-templates .hpk-more { margin: 0 22px; border-top: 1px dashed var(--hx-line-2); }
body.hp-ui.hp-templates .hpk-more > summary {
    display: flex; align-items: center; gap: 8px; width: fit-content; padding: 12px 0 14px; margin-inline-start: calc(2.6rem + 46px + 36px);
    list-style: none; cursor: pointer; color: var(--hx-royal-ink); font-size: .86rem; font-weight: 700;
}
body.hp-ui.hp-templates .hpk-more > summary::-webkit-details-marker { display: none; }
body.hp-ui.hp-templates .hpk-chevron { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--hx-ease); }
body.hp-ui.hp-templates details[open] > summary .hpk-chevron { transform: rotate(180deg); }
body.hp-ui.hp-templates .hpk-more-body {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px 28px;
    padding: 4px 0 24px; margin-inline-start: calc(2.6rem + 46px + 36px);
}
body.hp-ui.hp-templates .hpk-more-body h4 {
    margin: 0 0 10px; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--hx-quill-ink);
}
body.hp-ui.hp-templates .hpk-more-tips h4 + ul { margin: 0 0 20px; }
body.hp-ui.hp-templates .hpk-more-tips ul,
body.hp-ui.hp-templates .hpt-tips ol { display: grid; gap: 8px; padding: 0; list-style: none; }
body.hp-ui.hp-templates .hpk-more-tips li {
    position: relative; padding-inline-start: 20px; color: var(--hx-ink-2); font-size: .93rem; line-height: 1.55;
}
body.hp-ui.hp-templates .hpk-more-tips li::before {
    content: ""; position: absolute; inset-inline-start: 2px; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--hx-quill);
}

/* The outline: a sheet of ruled paper; placeholders keep their brackets */
body.hp-ui.hp-templates .hpk-outline {
    --hpk-rule: 1.7em;
    margin: 0; padding: 16px 18px; border-radius: 14px; max-height: 340px; overflow: auto;
    background-color: var(--hx-paper);
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hpk-rule) - 1px), color-mix(in srgb, var(--hx-line) 75%, transparent) calc(var(--hpk-rule) - 1px), color-mix(in srgb, var(--hx-line) 75%, transparent) var(--hpk-rule));
    background-position: 0 16px; background-attachment: local;
    border: 1px solid var(--hx-line); border-inline-start: 3px solid var(--hx-quill);
    font-family: var(--hx-f-body); font-size: .9rem; line-height: var(--hpk-rule); color: var(--hx-ink);
    overflow-wrap: anywhere;
}
body.hp-ui.hp-templates .hpk-outline-line { display: block; min-height: var(--hpk-rule); text-align: start; }

/* Recommended workspace settings */
body.hp-ui.hp-templates .hpk-settings { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
body.hp-ui.hp-templates .hpk-setting {
    display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 11px; border-radius: 999px;
    background: var(--hx-surface-2); border: 1px solid var(--hx-line); font-size: .8rem;
}
body.hp-ui.hp-templates .hpk-setting dt { color: var(--hx-ink-3); font-weight: 600; }
body.hp-ui.hp-templates .hpk-setting dd { margin: 0; color: var(--hx-ink); font-weight: 800; }

/* "I'll write my notes in": English | Arabic → English */
body.hp-ui.hp-templates .hpk-lang {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 6px 0 0; padding: 0; border: 0; min-width: 0;
}
body.hp-ui.hp-templates .hpk-lang[hidden] { display: none; }
body.hp-ui.hp-templates .hpk-lang-legend { float: inline-start; padding: 0; font-size: .88rem; font-weight: 700; color: var(--hx-ink-2); }
body.hp-ui.hp-templates .hpk-lang-options {
    display: inline-flex; padding: 4px; border-radius: 999px; background: var(--hx-surface-2); border: 1px solid var(--hx-line);
}
body.hp-ui.hp-templates .hpk-lang-option { position: relative; display: inline-flex; cursor: pointer; }
body.hp-ui.hp-templates .hpk-lang-option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
body.hp-ui.hp-templates .hpk-lang-option span {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 15px; border-radius: 999px;
    font-size: .86rem; font-weight: 700; color: var(--hx-ink-2); white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}
body.hp-ui.hp-templates .hpk-lang-option:hover span { color: var(--hx-ink); }
body.hp-ui.hp-templates .hpk-lang-option input:checked + span { background: var(--hx-royal); color: #fff; }
body.hp-ui.hp-templates .hpk-lang-option input:focus-visible + span { outline: 2px solid var(--hx-focus); outline-offset: 2px; }

/* ---------- Common mistakes ---------- */
body.hp-ui.hp-templates .hpk-mistakes { margin-top: 88px; }
body.hp-ui.hp-templates .hpk-mistake-list { margin: 0; padding: 0; list-style: none; }
body.hp-ui.hp-templates .hpk-mistake {
    display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 18px 36px; align-items: center;
    padding: 26px 0; border-top: 1px solid var(--hx-line);
}
body.hp-ui.hp-templates .hpk-mistake:last-child { border-bottom: 1px solid var(--hx-line); }
body.hp-ui.hp-templates .hpk-mistake-copy { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
body.hp-ui.hp-templates .hpk-mistake-n {
    grid-row: span 2; font-family: var(--hx-f-display); font-size: 2.2rem; line-height: 1; color: var(--hx-quill); font-variant-numeric: tabular-nums;
}
body.hp-ui.hp-templates .hpk-mistake-copy h3 { margin: 0; font-size: 1.12rem; font-weight: 700; line-height: 1.35; color: var(--hx-ink); }
body.hp-ui.hp-templates .hpk-mistake-copy p { margin: 6px 0 0; color: var(--hx-ink-2); font-size: .96rem; line-height: 1.6; }
body.hp-ui.hp-templates .hpk-mistake .hpg-example { margin: 0; }
body.hp-ui.hp-templates .hpk-mistake .hpg-example-text {
    margin: 0; min-width: 0; text-align: start;
    font-family: var(--hx-f-display); font-size: 1.16rem; line-height: 1.5; color: var(--hx-ink-2);
}
body.hp-ui.hp-templates .hpk-mistake .is-after .hpg-example-text { color: var(--hx-ink); }

/* ---------- Arabic → English flow and the honesty note ---------- */
body.hp-ui.hp-templates .hpk-flow { margin-top: 88px; }
body.hp-ui.hp-templates.hp-packs .hpk-flow > h2 { margin-bottom: 22px; }
body.hp-ui.hp-templates .hpt-steps.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.hp-ui.hp-templates .hpk-honesty {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 20px; align-items: start;
    margin-top: 18px; padding: 24px clamp(20px, 3vw, 30px); border-radius: 22px;
    background: var(--hx-royal-soft); border: 1px solid color-mix(in srgb, var(--hx-royal) 22%, var(--hx-line));
}
body.hp-ui.hp-templates .hpk-honesty-icon {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
    background: var(--hx-surface); color: var(--hx-royal-ink); border: 1px solid color-mix(in srgb, var(--hx-quill) 50%, transparent);
}
body.hp-ui.hp-templates .hpk-honesty h3 { margin: 2px 0 6px; font-size: 1.1rem; font-weight: 700; color: var(--hx-ink); }
body.hp-ui.hp-templates .hpk-honesty p { margin: 0 0 8px; max-width: 78ch; color: var(--hx-ink-2); font-size: .96rem; line-height: 1.65; }
body.hp-ui.hp-templates .hpk-honesty p:last-child { margin-bottom: 0; }
body.hp-ui.hp-templates .hpk-honesty .hpk-promise { padding-top: 8px; border-top: 1px dashed color-mix(in srgb, var(--hx-royal) 25%, var(--hx-line)); color: var(--hx-ink-3); font-size: .9rem; }

/* ---------- FAQ ---------- */
body.hp-ui.hp-templates .hpk-faq { margin-top: 88px; }
body.hp-ui.hp-templates.hp-packs .hpk-faq > h2 { margin-bottom: 22px; }
body.hp-ui.hp-templates .hpk-faq-list { border-top: 1px solid var(--hx-line); }
body.hp-ui.hp-templates .hpk-faq-item { border-bottom: 1px solid var(--hx-line); }
body.hp-ui.hp-templates .hpk-faq-item > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 4px;
    list-style: none; cursor: pointer; color: var(--hx-ink);
}
body.hp-ui.hp-templates .hpk-faq-item > summary::-webkit-details-marker { display: none; }
body.hp-ui.hp-templates .hpk-faq-item h3 { margin: 0; font-size: 1.08rem; font-weight: 700; line-height: 1.4; }
body.hp-ui.hp-templates .hpk-faq-item > summary:hover h3 { color: var(--hx-royal-ink); }
body.hp-ui.hp-templates .hpk-faq-item .hpk-chevron { width: 20px; height: 20px; color: var(--hx-quill); }
body.hp-ui.hp-templates .hpk-faq-item > p { margin: 0; padding: 0 4px 22px; max-width: 76ch; color: var(--hx-ink-2); font-size: 1rem; line-height: 1.7; }

/* ---------- Call to action and other packs ---------- */
body.hp-ui.hp-templates .hpk-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
body.hp-ui.hp-templates .hpk-cta-actions .hp-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.hp-ui.hp-templates .hpk-others { margin-top: 76px; }
body.hp-ui.hp-templates.hp-packs .hpk-others > h2 { margin-bottom: 22px; }

/* ---------- Pack cards (packs index, templates gallery, other packs) ---------- */
body.hp-ui.hp-templates .hpk-index { margin-top: 28px; }
body.hp-ui.hp-templates .hpk-pack-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
body.hp-ui.hp-templates .hpk-pack-cards.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.hp-ui.hp-templates .hpk-pack-cards.is-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* "Other packs": rows of three on a six-column grid, so a last row of two shares the width and a last card alone takes all of it */
@media (min-width: 1001px) {
    body.hp-ui.hp-templates .hpk-pack-cards.is-compact { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    body.hp-ui.hp-templates .hpk-pack-cards.is-compact > * { grid-column: span 2; }
    body.hp-ui.hp-templates .hpk-pack-cards.is-compact > :nth-child(3n+1):nth-last-child(2),
    body.hp-ui.hp-templates .hpk-pack-cards.is-compact > :nth-child(3n+2):last-child { grid-column: span 3; }
    body.hp-ui.hp-templates .hpk-pack-cards.is-compact > :nth-child(3n+1):last-child { grid-column: 1 / -1; }
}
body.hp-ui.hp-templates .hpk-pack-card {
    position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0;
    padding: 28px 26px 22px; border-radius: 24px;
    background: var(--hx-surface); border: 1px solid var(--hx-line);
    transition: border-color .2s ease, transform .25s var(--hx-ease), box-shadow .25s ease;
}
body.hp-ui.hp-templates .hpk-pack-card::before {
    content: ""; position: absolute; inset-block-start: 0; inset-inline: 26px; height: 2px; border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg, transparent, var(--hx-quill), transparent); opacity: .7;
}
body.hp-ui.hp-templates .hpk-pack-card:hover { border-color: color-mix(in srgb, var(--hx-quill) 70%, transparent); transform: translateY(-2px); box-shadow: var(--hx-shadow); }
body.hp-ui.hp-templates .hpk-pack-card:has(.hpk-pack-title a:focus-visible) { outline: 2px solid var(--hx-focus); outline-offset: 3px; }
body.hp-ui.hp-templates .hpk-pack-title a:focus-visible { outline-color: transparent; }
body.hp-ui.hp-templates .hpk-pack-icon {
    display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
    background: var(--hx-royal); color: var(--hx-cream);
}
body.hp-ui.hp-templates .hpk-pack-count { margin: 6px 0 0; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--hx-quill-ink); }
body.hp-ui.hp-templates .hpk-pack-title { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1.1; color: var(--hx-ink); }
body.hp-ui.hp-templates .hpk-pack-title a { color: inherit; text-decoration: none; }
body.hp-ui.hp-templates .hpk-pack-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
body.hp-ui.hp-templates .hpk-pack-summary { margin: 0; color: var(--hx-ink-2); font-size: .95rem; line-height: 1.6; }
body.hp-ui.hp-templates .hpk-pack-names { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; flex: 1; align-content: flex-start; }
body.hp-ui.hp-templates .hpk-pack-names li {
    padding: 5px 11px; border-radius: 999px; background: var(--hx-surface-2); border: 1px solid var(--hx-line);
    font-size: .8rem; font-weight: 600; color: var(--hx-ink-2);
}
body.hp-ui.hp-templates .hpk-pack-names li.is-more { background: transparent; border-style: dashed; color: var(--hx-ink-3); }
body.hp-ui.hp-templates .hpk-pack-more {
    display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding-top: 14px; border-top: 1px dashed var(--hx-line-2);
    font-size: .86rem; font-weight: 700; color: var(--hx-royal-ink);
}
body.hp-ui.hp-templates .hpk-pack-card:hover .hpk-pack-more .hpt-arrow { transform: translateX(3px); }
[dir="rtl"] body.hp-ui.hp-templates .hpk-pack-card:hover .hpk-pack-more .hpt-arrow { transform: scaleX(-1) translateX(3px); }
body.hp-ui.hp-templates .hpk-pack-card.is-compact { padding: 22px 22px 18px; }
body.hp-ui.hp-templates .hpk-pack-card.is-compact .hpk-pack-icon { width: 44px; height: 44px; border-radius: 14px; }
body.hp-ui.hp-templates .hpk-pack-card.is-compact .hpk-pack-title { font-size: clamp(1.35rem, 2vw, 1.6rem); }
body.hp-ui.hp-templates .hpk-pack-card.is-compact .hpk-pack-summary { flex: 1; font-size: .9rem; }

/* ---------- Templates gallery: packs band and the pack template lists ---------- */
body.hp-ui.hp-templates .hpt-packs { margin-top: 28px; }
body.hp-ui.hp-templates .hpt-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin: 0 0 20px; }
body.hp-ui.hp-templates .hpt-section-head h2 { margin: 0; font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.08; color: var(--hx-ink); }
body.hp-ui.hp-templates .hpt-section-head a { font-size: .9rem; font-weight: 700; color: var(--hx-royal-ink); text-underline-offset: 4px; }
body.hp-ui.hp-templates .hpt-gallery.is-everyday { margin-top: 64px; }
body.hp-ui.hp-templates .hpt-packlists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 64px; }
body.hp-ui.hp-templates .hpt-packlist { min-width: 0; padding: 22px 24px; border-radius: 22px; background: var(--hx-surface-2); border: 1px solid var(--hx-line); }
body.hp-ui.hp-templates .hpt-packlist h3 { margin: 0 0 12px; font-size: 1.05rem; font-weight: 700; }
body.hp-ui.hp-templates .hpt-packlist h3 a { color: var(--hx-ink); text-decoration: none; }
body.hp-ui.hp-templates .hpt-packlist h3 a:hover { color: var(--hx-royal-ink); text-decoration: underline; text-underline-offset: 4px; }
body.hp-ui.hp-templates .hpt-packlist ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
body.hp-ui.hp-templates .hpt-packlist li a {
    display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border-radius: 999px;
    background: var(--hx-surface); border: 1px solid var(--hx-line); color: var(--hx-ink-2); font-size: .84rem; font-weight: 600; text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}
body.hp-ui.hp-templates .hpt-packlist li a:hover { border-color: var(--hx-quill); color: var(--hx-ink); }
body.hp-ui.hp-templates .hpt-packlist .hpt-icon-sm { color: var(--hx-quill); }

/* ---------- Template page: what the reader looks for and the outline ---------- */
body.hp-ui.hp-templates .hpt-guide {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 22px; align-items: start; margin-top: 28px; scroll-margin-top: 96px;
}
body.hp-ui.hp-templates .hpt-tips,
body.hp-ui.hp-templates .hpt-outline-card {
    min-width: 0; padding: clamp(22px, 3vw, 32px); border-radius: 26px; border: 1px solid var(--hx-line);
}
body.hp-ui.hp-templates .hpt-tips { background: var(--hx-surface-2); }
body.hp-ui.hp-templates .hpt-outline-card { display: grid; gap: 14px; align-content: start; background: var(--hx-surface); box-shadow: var(--hx-shadow); }
body.hp-ui.hp-templates :is(.hpt-tips, .hpt-outline-card) h2 { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1.12; color: var(--hx-ink); }
body.hp-ui.hp-templates .hpt-outline-card .hp-kicker { margin: 0; }
body.hp-ui.hp-templates .hpt-outline-card > p:not(.hp-kicker) { margin: 0; color: var(--hx-ink-2); font-size: .94rem; line-height: 1.6; }
body.hp-ui.hp-templates .hpt-tips ol { margin: 18px 0 0; counter-reset: hpt-tip; }
body.hp-ui.hp-templates .hpt-tips li {
    counter-increment: hpt-tip; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: 10px; align-items: baseline;
    padding: 10px 0; border-top: 1px solid var(--hx-line); color: var(--hx-ink-2); font-size: .97rem; line-height: 1.55;
}
body.hp-ui.hp-templates .hpt-tips li:first-child { border-top: 0; }
body.hp-ui.hp-templates .hpt-tips li::before { content: counter(hpt-tip, decimal-leading-zero); font-family: var(--hx-f-display); font-size: 1.3rem; color: var(--hx-quill); line-height: 1; }
body.hp-ui.hp-templates .hpt-settings-title { margin: 22px 0 10px; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--hx-quill-ink); }
body.hp-ui.hp-templates .hpt-outline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
body.hp-ui.hp-templates .hpt-pack-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: .88rem; font-weight: 700; color: var(--hx-royal-ink); text-decoration: none; }
body.hp-ui.hp-templates .hpt-pack-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Spotlight: the pack's key text, taught with a real example ---------- */
body.hp-ui.hp-templates .hpk-spot { margin-top: 88px; }
body.hp-ui.hp-templates .hpk-spot .hpk-section-head .hp-kicker { margin: 0; }
body.hp-ui.hp-templates.hp-packs .hpk-spot .hpk-section-head h2 { margin: 0; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.08; color: var(--hx-ink); text-wrap: balance; }
body.hp-ui.hp-templates .hpk-spot-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
body.hp-ui.hp-templates .hpk-spot-actions .hp-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* A [placeholder] in an example: a blank on the line, waiting for a real figure */
body.hp-ui.hp-templates .hpk-blank {
    display: inline-block; padding: 0 .3em; margin: 0 .05em; border-radius: 5px;
    background: color-mix(in srgb, var(--hx-quill) 16%, transparent);
    border-bottom: 1.5px dashed var(--hx-quill);
    font-family: var(--hx-f-body); font-size: .74em; font-weight: 700; letter-spacing: .01em; line-height: 1.6;
    color: var(--hx-quill-ink); vertical-align: .08em; white-space: nowrap;
}

/* Anatomy: one email on a sheet of paper, a note in the margin of each part */
body.hp-ui.hp-templates .hpk-anatomy {
    --hpk-gap: clamp(28px, 4vw, 56px);
    position: relative; display: grid; margin: 0; padding: 0; list-style: none;
}
body.hp-ui.hp-templates .hpk-anatomy::before {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: calc((100% - var(--hpk-gap)) * 5 / 9);
    border-radius: 6px 22px 22px 6px; background: var(--hx-surface); border: 1px solid var(--hx-line);
    border-inline-start: 3px solid var(--hx-quill); box-shadow: var(--hx-shadow);
}
[dir="rtl"] body.hp-ui.hp-templates .hpk-anatomy::before { border-radius: 22px 6px 6px 22px; }
body.hp-ui.hp-templates .hpk-anatomy-row {
    position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); column-gap: var(--hpk-gap); align-items: start;
}
body.hp-ui.hp-templates .hpk-anatomy-text {
    position: relative; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0 14px; align-items: baseline;
    padding: 20px clamp(20px, 2.6vw, 34px); transition: background-color .25s ease;
}
body.hp-ui.hp-templates .hpk-anatomy-row:first-child .hpk-anatomy-text { padding-top: 30px; }
body.hp-ui.hp-templates .hpk-anatomy-row:last-child .hpk-anatomy-text { padding-bottom: 30px; }
body.hp-ui.hp-templates .hpk-anatomy-row + .hpk-anatomy-row .hpk-anatomy-text::before {
    content: ""; position: absolute; inset-block-start: 0; inset-inline: clamp(20px, 2.6vw, 34px); border-top: 1px dashed var(--hx-line-2);
}
body.hp-ui.hp-templates .hpk-anatomy-row:hover .hpk-anatomy-text { background: color-mix(in srgb, var(--hx-quill) 7%, transparent); }
body.hp-ui.hp-templates .hpk-anatomy-n {
    display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--hx-quill) 70%, transparent); color: var(--hx-quill-ink);
    font-family: var(--hx-f-display); font-size: 1.05rem; line-height: 1; font-variant-numeric: tabular-nums;
    align-self: start; transition: background-color .25s ease, color .25s ease;
}
body.hp-ui.hp-templates .hpk-anatomy-row:hover .hpk-anatomy-n { background: var(--hx-quill); color: var(--hx-surface); }
body.hp-ui.hp-templates .hpk-anatomy-text p {
    margin: 0; min-width: 0; text-align: start;
    font-family: var(--hx-f-display); font-size: 1.18rem; line-height: 1.5; color: var(--hx-ink);
}
body.hp-ui.hp-templates .hpk-anatomy-note {
    position: relative; padding: 20px 0 18px; padding-inline-start: 22px;
}
body.hp-ui.hp-templates .hpk-anatomy-row:first-child .hpk-anatomy-note { padding-top: 30px; }
/* A hairline from the sheet's edge to the note, the way a proofreader links a mark to its comment */
body.hp-ui.hp-templates .hpk-anatomy-note::before {
    content: ""; position: absolute; inset-block-start: 31px; inset-inline-start: calc(-1 * var(--hpk-gap)); width: calc(var(--hpk-gap) + 4px);
    border-top: 1px solid color-mix(in srgb, var(--hx-quill) 55%, transparent);
}
body.hp-ui.hp-templates .hpk-anatomy-row:first-child .hpk-anatomy-note::before { inset-block-start: 41px; }
body.hp-ui.hp-templates .hpk-anatomy-note::after {
    content: ""; position: absolute; inset-block-start: 28px; inset-inline-start: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--hx-quill);
}
body.hp-ui.hp-templates .hpk-anatomy-row:first-child .hpk-anatomy-note::after { inset-block-start: 38px; }
body.hp-ui.hp-templates .hpk-anatomy-note h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 700; line-height: 1.4; color: var(--hx-ink); }
body.hp-ui.hp-templates .hpk-anatomy-note p { margin: 0; color: var(--hx-ink-2); font-size: .94rem; line-height: 1.6; }

/* Transform: the formula, then each duty and the achievement it becomes */
body.hp-ui.hp-templates .hpk-formula {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px 0; margin: 0 0 22px; padding: 0; list-style: none;
}
body.hp-ui.hp-templates .hpk-formula li {
    position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 46px;
    padding: 8px 18px 8px 10px; border-radius: 999px;
    background: var(--hx-surface); border: 1px solid var(--hx-line); color: var(--hx-ink); font-size: .92rem; font-weight: 700;
}
body.hp-ui.hp-templates .hpk-formula li + li { margin-inline-start: 34px; }
body.hp-ui.hp-templates .hpk-formula li + li::before {
    content: "+"; position: absolute; inset-inline-start: -25px; top: 50%; transform: translateY(-52%);
    font-family: var(--hx-f-display); font-size: 1.5rem; font-weight: 400; color: var(--hx-quill);
}
body.hp-ui.hp-templates .hpk-formula li.is-result { background: var(--hx-royal); border-color: var(--hx-royal); color: #fff; }
body.hp-ui.hp-templates .hpk-formula-n {
    display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    background: var(--hx-surface-2); color: var(--hx-quill-ink); font-family: var(--hx-f-display); font-size: 1rem; font-weight: 400;
}
body.hp-ui.hp-templates .hpk-formula li.is-result .hpk-formula-n { background: color-mix(in srgb, #fff 16%, transparent); color: var(--hx-cream); }

body.hp-ui.hp-templates .hpk-transform { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
body.hp-ui.hp-templates .hpk-transform-row {
    display: grid; grid-template-columns: minmax(0, .8fr) 44px minmax(0, 1.2fr); align-items: stretch;
    border-radius: 22px; background: var(--hx-surface); border: 1px solid var(--hx-line); overflow: hidden;
    transition: border-color .2s ease, box-shadow .25s ease;
}
body.hp-ui.hp-templates .hpk-transform-row:hover { border-color: color-mix(in srgb, var(--hx-quill) 60%, var(--hx-line)); box-shadow: var(--hx-shadow); }
body.hp-ui.hp-templates .hpk-transform-from { padding: 20px 22px; background: var(--hx-surface-2); }
body.hp-ui.hp-templates .hpk-transform-to { padding: 20px 24px 18px; border-inline-start: 3px solid var(--hx-quill); }
body.hp-ui.hp-templates .hpk-transform-label {
    display: block; margin-bottom: 8px; font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--hx-ink-3);
}
body.hp-ui.hp-templates .hpk-transform-to .hpk-transform-label { color: var(--hx-quill-ink); }
body.hp-ui.hp-templates .hpk-transform-from p { margin: 0; color: var(--hx-ink-2); font-size: .98rem; line-height: 1.6; text-align: start; }
body.hp-ui.hp-templates .hpk-transform-from p[lang="ar"] { font-family: "HP Arabic", var(--hx-f-body); line-height: 1.85; }
body.hp-ui.hp-templates .hpk-transform-arrow {
    display: grid; place-items: center; background: linear-gradient(90deg, var(--hx-surface-2) 50%, transparent 50%); color: var(--hx-quill);
}
[dir="rtl"] body.hp-ui.hp-templates .hpk-transform-arrow { background: linear-gradient(270deg, var(--hx-surface-2) 50%, transparent 50%); }
body.hp-ui.hp-templates .hpk-transform-arrow .hpt-arrow {
    width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--hx-surface); border: 1px solid color-mix(in srgb, var(--hx-quill) 55%, transparent);
}
body.hp-ui.hp-templates .hpk-transform-text { margin: 0; text-align: start; font-family: var(--hx-f-display); font-size: 1.22rem; line-height: 1.5; color: var(--hx-ink); }
body.hp-ui.hp-templates .hpk-transform-note { margin: 10px 0 0; color: var(--hx-ink-3); font-size: .88rem; line-height: 1.55; }

/* ---------- Arabic ---------- */
html[lang="ar"] body.hp-ui.hp-templates :is(.hpk-contents-title, .hpk-more-body h4, .hpk-pack-count, .hpt-settings-title) { letter-spacing: 0; font-size: .82rem; }
html[lang="ar"] body.hp-ui.hp-templates :is(.hpk-item-copy p, .hpk-audience li, .hpk-reader li, .hpk-mistake-copy p, .hpk-faq-item > p, .hpk-honesty p, .hpt-tips li) { line-height: 1.85; }
html[lang="ar"] body.hp-ui.hp-templates .hpk-outline { --hpk-rule: 1.95em; }
html[lang="ar"] body.hp-ui.hp-templates .hpk-mistake .hpg-example-text {
    font-family: "HP Display", "Iowan Old Style", Georgia, serif; text-align: left; line-height: 1.5;
}
html[lang="ar"] body.hp-ui.hp-templates .hpk-contents a { font-size: .95rem; }
html[lang="ar"] body.hp-ui.hp-templates .hpk-contents-n { font-family: "HP Display", Georgia, serif; }
html[lang="ar"] body.hp-ui.hp-templates :is(.hpk-item-n, .hpk-mistake-n, .hpt-step-n),
html[lang="ar"] body.hp-ui.hp-templates :is(.hpk-reader, .hpt-tips) li::before { font-family: "HP Display", Georgia, serif; }
html[lang="ar"] body.hp-ui.hp-templates :is(.hpk-anatomy-text p, .hpk-transform-text) { font-family: "HP Display", "Iowan Old Style", Georgia, serif; line-height: 1.5; }
html[lang="ar"] body.hp-ui.hp-templates :is(.hpk-anatomy-n, .hpk-formula-n) { font-family: "HP Display", Georgia, serif; }
html[lang="ar"] body.hp-ui.hp-templates .hpk-transform-label { letter-spacing: 0; font-size: .82rem; }
html[lang="ar"] body.hp-ui.hp-templates :is(.hpk-anatomy-note p, .hpk-transform-note) { line-height: 1.85; }

/* ---------- Dark theme touches ---------- */
html[data-hp-theme="dark"] body.hp-ui.hp-templates .hpk-pack-icon { background: var(--hx-royal-soft); color: var(--hx-quill); border: 1px solid color-mix(in srgb, var(--hx-quill) 35%, transparent); }
html[data-hp-theme="dark"] body.hp-ui.hp-templates .hpk-honesty { background: color-mix(in srgb, var(--hx-royal) 18%, var(--hx-surface)); }
html[data-hp-theme="dark"] body.hp-ui.hp-templates .hpk-lang-option input:checked + span { background: var(--hx-royal); color: var(--hx-ink); }
html[data-hp-theme="dark"] body.hp-ui.hp-templates .hpk-formula li.is-result { color: var(--hx-ink); border-color: color-mix(in srgb, var(--hx-quill) 45%, transparent); }
html[data-hp-theme="dark"] body.hp-ui.hp-templates .hpk-anatomy-row:hover .hpk-anatomy-n { color: var(--hx-paper); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    body.hp-ui.hp-templates .hpk-pack-cards.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.hp-ui.hp-templates .hpk-item-row { grid-template-columns: 2.4rem 46px minmax(0, 1fr); }
    body.hp-ui.hp-templates .hpk-item-actions { grid-column: 3; justify-content: flex-start; margin-top: 8px; }
}
@media (max-width: 1000px) {
    body.hp-ui.hp-templates .hpk-banner .hpk-banner-grid { grid-template-columns: minmax(0, 1fr); }
    body.hp-ui.hp-templates .hpk-contents ol { columns: 2; column-gap: 28px; }
    body.hp-ui.hp-templates .hpk-contents li { break-inside: avoid; }
    body.hp-ui.hp-templates .hpk-contents li + li { border-top: 0; }
    body.hp-ui.hp-templates .hpk-intro,
    body.hp-ui.hp-templates .hpt-guide { grid-template-columns: minmax(0, 1fr); }
    body.hp-ui.hp-templates .hpk-mistake { grid-template-columns: minmax(0, 1fr); }
    body.hp-ui.hp-templates .hpt-steps.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.hp-ui.hp-templates .hpk-pack-cards.is-compact { grid-template-columns: minmax(0, 1fr); }
    body.hp-ui.hp-templates .hpt-packlists { grid-template-columns: minmax(0, 1fr); }
    /* The anatomy becomes one sheet, each margin note tucked under its line */
    body.hp-ui.hp-templates .hpk-anatomy {
        border-radius: 6px 22px 22px 6px; background: var(--hx-surface); border: 1px solid var(--hx-line);
        border-inline-start: 3px solid var(--hx-quill); box-shadow: var(--hx-shadow); overflow: hidden;
    }
    [dir="rtl"] body.hp-ui.hp-templates .hpk-anatomy { border-radius: 22px 6px 6px 22px; }
    body.hp-ui.hp-templates .hpk-anatomy::before { display: none; }
    body.hp-ui.hp-templates .hpk-anatomy-row { grid-template-columns: minmax(0, 1fr); }
    body.hp-ui.hp-templates .hpk-anatomy-row .hpk-anatomy-text,
    body.hp-ui.hp-templates .hpk-anatomy-row:first-child .hpk-anatomy-text,
    body.hp-ui.hp-templates .hpk-anatomy-row:last-child .hpk-anatomy-text { padding: 20px 20px 10px; }
    body.hp-ui.hp-templates .hpk-anatomy-row:first-child .hpk-anatomy-text { padding-top: 24px; }
    body.hp-ui.hp-templates .hpk-anatomy-row + .hpk-anatomy-row .hpk-anatomy-text::before { inset-inline: 20px; }
    body.hp-ui.hp-templates .hpk-anatomy-note,
    body.hp-ui.hp-templates .hpk-anatomy-row:first-child .hpk-anatomy-note {
        margin: 0 20px 18px; margin-inline-start: calc(20px + 2.2rem + 14px); padding: 10px 14px; border-radius: 12px;
        background: color-mix(in srgb, var(--hx-quill) 9%, var(--hx-surface));
    }
    body.hp-ui.hp-templates .hpk-anatomy-note::before,
    body.hp-ui.hp-templates .hpk-anatomy-note::after { display: none; }
    body.hp-ui.hp-templates .hpk-transform-row { grid-template-columns: minmax(0, 1fr); }
    body.hp-ui.hp-templates .hpk-transform-arrow { height: 0; overflow: visible; background: none; position: relative; z-index: 1; }
    [dir="rtl"] body.hp-ui.hp-templates .hpk-transform-arrow { background: none; }
    body.hp-ui.hp-templates .hpk-transform-arrow .hpt-arrow { transform: rotate(90deg); }
    body.hp-ui.hp-templates .hpk-transform-to { border-inline-start: 0; border-top: 3px solid var(--hx-quill); padding-top: 22px; }
}
@media (max-width: 720px) {
    body.hp-ui.hp-templates .hpk-contents { display: none; }
    body.hp-ui.hp-templates .hpk-pack-cards,
    body.hp-ui.hp-templates .hpk-pack-cards.is-three,
    body.hp-ui.hp-templates .hpt-steps.is-four { grid-template-columns: minmax(0, 1fr); }
    body.hp-ui.hp-templates .hpk-item-row { grid-template-columns: 46px minmax(0, 1fr); gap: 12px 14px; padding: 18px 16px 14px; align-items: start; }
    body.hp-ui.hp-templates .hpk-item-n { display: none; }
    body.hp-ui.hp-templates .hpk-item-actions { grid-column: 1 / -1; margin-top: 2px; }
    body.hp-ui.hp-templates .hpk-item-actions .hp-btn { flex: 1 1 auto; white-space: normal; text-align: center; }
    body.hp-ui.hp-templates .hpk-more { margin-inline: 16px; }
    body.hp-ui.hp-templates .hpk-more > summary,
    body.hp-ui.hp-templates .hpk-more-body { margin-inline-start: 0; }
    body.hp-ui.hp-templates .hpk-more-body { grid-template-columns: minmax(0, 1fr); }
    body.hp-ui.hp-templates .hpk-mistake-copy { grid-template-columns: 2.4rem minmax(0, 1fr); }
    body.hp-ui.hp-templates .hpk-mistake-n { font-size: 1.8rem; }
    body.hp-ui.hp-templates .hpk-honesty { grid-template-columns: minmax(0, 1fr); }
    body.hp-ui.hp-templates .hpk-faq-item > summary { padding: 16px 2px; }
    body.hp-ui.hp-templates .hpk-cta-actions .hp-btn { width: 100%; }
    body.hp-ui.hp-templates .hpk-lang-options { display: flex; width: 100%; }
    body.hp-ui.hp-templates .hpk-lang-option { flex: 1 1 0; }
    body.hp-ui.hp-templates .hpk-lang-option span { justify-content: center; width: 100%; padding-inline: 10px; }
    body.hp-ui.hp-templates .hpk-reader { border-radius: 22px; }
    body.hp-ui.hp-templates .hpk-audience { padding-block: 12px 4px; }
    body.hp-ui.hp-templates .hpk-spot-actions .hp-btn { width: 100%; }
    body.hp-ui.hp-templates .hpk-anatomy-text p { font-size: 1.1rem; }
    body.hp-ui.hp-templates .hpk-anatomy-row .hpk-anatomy-text,
    body.hp-ui.hp-templates .hpk-anatomy-row:first-child .hpk-anatomy-text,
    body.hp-ui.hp-templates .hpk-anatomy-row:last-child .hpk-anatomy-text { grid-template-columns: 1.8rem minmax(0, 1fr); gap: 0 12px; padding-inline: 16px; }
    body.hp-ui.hp-templates .hpk-anatomy-n { width: 1.6rem; height: 1.6rem; font-size: .92rem; }
    body.hp-ui.hp-templates .hpk-anatomy-note,
    body.hp-ui.hp-templates .hpk-anatomy-row:first-child .hpk-anatomy-note { margin-inline: 16px; }
    body.hp-ui.hp-templates .hpk-formula { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    body.hp-ui.hp-templates .hpk-formula li { border-radius: 16px; padding-inline-end: 12px; font-size: .86rem; line-height: 1.3; }
    body.hp-ui.hp-templates .hpk-formula li + li { margin-inline-start: 0; }
    body.hp-ui.hp-templates .hpk-formula li + li::before { display: none; }
    body.hp-ui.hp-templates .hpk-transform-from,
    body.hp-ui.hp-templates .hpk-transform-to { padding-inline: 18px; }
    body.hp-ui.hp-templates .hpk-transform-text { font-size: 1.14rem; }
}

@media (prefers-reduced-motion: reduce) {
    body.hp-ui.hp-templates :is(.hpk-item, .hpk-pack-card, .hpk-chevron, .hpk-lang-option span, .hpk-contents a, .hpt-packlist li a, .hpk-anatomy-text, .hpk-anatomy-n, .hpk-transform-row) { transition: none; }
    body.hp-ui.hp-templates .hpk-pack-card:hover { transform: none; }
}

@media print {
    body.hp-ui.hp-templates :is(.hpk-item-actions, .hpk-lang, .hpk-others, .hpk-cta, .hpk-banner-actions, .hpk-spot-actions) { display: none; }
    body.hp-ui.hp-templates .hpk-more-body { display: grid; }
}