/* ============================================================
   Heritage Herald — brand design-system foundation
   Reusable tokens + primitives for the redesigned screens.
   All classes are prefixed `hh-` to avoid clashing with
   Bootstrap / app.css. Swap placeholder imagery where noted.
   ============================================================ */

:root {
    /* Palette measured from the Figma exports and confirmed against the
       file's own tokens (Primary Colors/01 = #D59F00). */
    --hh-navy:      #04183d;   /* primary dark — hero, footer, sidebar active */
    --hh-navy-2:    #293a5a;   /* secondary navy */
    --hh-navy-deep: #04183d;
    --hh-gold:      #d59f00;   /* Primary Colors/01 */
    --hh-gold-soft: #e8c46a;
    --hh-gold-deep: #b8860b;
    --hh-cream:     #f8f5f0;
    --hh-bg:        #f5f6fa;   /* page ground */
    --hh-surface:   #ffffff;
    --hh-ink:       #111b2c;   /* headings */
    --hh-muted:     #4c5369;   /* body copy */
    --hh-line:      #e2e8f0;
    --hh-line-cool: #e2e8f0;
    --hh-danger:    #ec162e;

    /* Accent hues shared by the feature icons and the step markers */
    --hh-accent-blue:   #006ff8;
    --hh-accent-teal:   #57ddd0;
    --hh-accent-purple: #7065f0;

    --hh-serif: "Fraunces", "Palatino Linotype", Palatino, Georgia, serif;
    --hh-sans:  "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

    --hh-radius:  16px;
    --hh-radius-sm: 10px;
    --hh-shadow:  0 18px 40px rgba(15, 30, 61, 0.10);
    --hh-shadow-sm: 0 6px 18px rgba(15, 30, 61, 0.07);
    --hh-maxw: 1320px;
}

/* ---- Root wrapper: scopes brand typography without touching global body ---- */
.hh {
    font-family: var(--hh-sans);
    color: var(--hh-ink);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
/* Fraunces is variable: let optical size track the rendered size */
.hh-serif, .hh h1, .hh h2 { font-optical-sizing: auto; }
.hh *, .hh *::before, .hh *::after { box-sizing: border-box; }

.hh-serif { font-family: var(--hh-serif); }

/* ---- Layout primitives ---- */
.hh-container {
    width: 100%;
    max-width: var(--hh-maxw);
    margin-inline: auto;
    padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}
.hh-section { padding-block: clamp(2.5rem, 5vw, 4.25rem); }

.hh-eyebrow {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--hh-gold);
    margin: 0 0 0.75rem;
}
.hh-eyebrow.is-ondark  { color: var(--hh-gold-soft); }

.hh-h2 {
    font-size: clamp(1.75rem, 3.4vw, 3rem);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    margin: 0;
    text-wrap: balance;
}
.hh-lead { color: var(--hh-muted); font-size: 16px; line-height: 1.5; margin: 0; }

/* ---- Buttons ---- */
.hh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--hh-sans);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    white-space: nowrap;
}
.hh-btn:hover { transform: translateY(-1px); }
.hh-btn:focus-visible { outline: 3px solid var(--hh-gold-soft); outline-offset: 2px; }

.hh-btn-gold {
    background: linear-gradient(160deg, var(--hh-gold-soft) 0%, var(--hh-gold) 55%, var(--hh-gold-deep) 100%);
    color: var(--hh-navy);
    box-shadow: 0 8px 20px rgba(169, 121, 27, 0.30);
}
.hh-btn-gold:hover { color: var(--hh-navy); box-shadow: 0 12px 26px rgba(169, 121, 27, 0.40); }

.hh-btn-navy { background: var(--hh-navy); color: #fff; }
.hh-btn-navy:hover { color: #fff; background: var(--hh-navy-2); }

.hh-btn-ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
}
.hh-btn-ghost:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }

.hh-btn-outline {
    background: transparent;
    color: var(--hh-navy);
    border-color: var(--hh-navy);
}
.hh-btn-outline:hover { background: var(--hh-navy); color: #fff; }

.hh-btn-sm { padding: 0.55rem 1.15rem; font-size: 0.88rem; }

/* ============================================================
   Auth screens (Login, Sign Up)
   Full-page split: a navy story panel beside the form. Surface colours
   are measured from the design export.
   ============================================================ */
.hh-auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    font-family: var(--hh-sans);
    color: var(--hh-ink);
}

/* ---- Left: story panel ---- */
.hh-auth-aside {
    background: linear-gradient(135deg, #10182c 0%, #1d293d 50%, #10182c 100%);
    color: #b9c2d6;
    padding: clamp(2rem, 4vw, 3.5rem);
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 4vw, 3rem);
}
.hh-auth-aside .hh-logo { height: 52px; }
.hh-auth-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; max-width: 34rem; }
.hh-auth-aside h1 {
    font-family: var(--hh-sans);
    font-size: clamp(1.9rem, 3.2vw, 2.75rem);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 0.5rem;
}
.hh-auth-aside p { margin: 0; font-size: 16px; line-height: 1.6; }

.hh-auth-badges { display: flex; gap: 1.75rem; }
.hh-auth-badge { text-align: center; }
.hh-auth-badge .tile {
    width: 44px; height: 44px; border-radius: 10px;
    background: #323d4f;
    display: grid; place-items: center;
    color: var(--hh-gold);
    font-size: 20px;
    margin-inline: auto;
}
.hh-auth-badge .cap { display: block; margin-top: 0.5rem; font-size: 14px; color: #d6dced; }

.hh-auth-support { font-size: 15px; color: #b9c2d6; margin: 0; }
.hh-auth-support a { color: var(--hh-gold); text-decoration: underline; text-underline-offset: 3px; }

/* Password rules listed on the story panel (Sign Up) */
.hh-auth-reqs h2 { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 0.75rem; font-family: var(--hh-sans); }
.hh-auth-reqs ul { margin: 0; padding-left: 1.35rem; display: flex; flex-direction: column; gap: 0.4rem; }
.hh-auth-reqs li { font-size: 16px; line-height: 1.6; }

/* Badges without tiles, used on the light panel (Sign Up) */
.hh-auth-badges.is-plain { justify-content: center; gap: clamp(2rem, 6vw, 4.5rem); margin-top: 1.75rem; }
.hh-auth-badges.is-plain .tile { background: none; width: auto; height: auto; font-size: 24px; }
.hh-auth-badges.is-plain .cap { color: var(--hh-muted); }

/* Consent row */
.hh-check {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 0.25rem 0 0; font-size: 14px; line-height: 1.5; color: var(--hh-muted);
}
.hh-check input[type="checkbox"] {
    width: 18px; height: 18px; flex: none; margin: 1px 0 0;
    accent-color: var(--hh-gold); cursor: pointer;
}
.hh-check a { color: var(--hh-gold-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Right: form panel ---- */
.hh-auth-main {
    background: linear-gradient(180deg, #fffdfa 0%, #fffef9 55%, #fffcf0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 3vw, 2.5rem);
}
.hh-auth-form { width: 100%; max-width: 45rem; }
.hh-auth-form h2 {
    font-family: var(--hh-sans);
    font-size: clamp(1.5rem, 2.6vw, 2.15rem);
    font-weight: 700;
    line-height: 1.25;
    color: #0f172b;
    margin: 0 0 0.5rem;
}
.hh-auth-form .hh-auth-sub { color: var(--hh-muted); font-size: 15px; margin: 0 0 1.75rem; }

/* ---- Fields ---- */
.hh-field { margin-bottom: 1.1rem; }
.hh-field > label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #0f172b;
    margin-bottom: 0.45rem;
}
.hh-input {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--hh-line);
    border-radius: 10px;
    height: 48px;
    padding-inline: 16px;
    gap: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.hh-input:focus-within {
    border-color: var(--hh-navy);
    box-shadow: 0 0 0 3px rgba(4, 24, 61, 0.08);
}
.hh-input > .bi { color: #90a1b9; font-size: 18px; line-height: 1; flex: none; }
.hh-input input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: var(--hh-sans);
    font-size: 16px;
    color: var(--hh-ink);
    height: 100%;
}
.hh-input input::placeholder { color: #90a1b9; }
.hh-reveal {
    border: 0; background: transparent; cursor: pointer; padding: 4px;
    color: #90a1b9; font-size: 18px; line-height: 1; display: grid; place-items: center;
}
.hh-reveal:hover { color: var(--hh-navy); }

/* ---- Row of helper links under a field ---- */
.hh-field-row {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    margin: -0.35rem 0 0; font-size: 14px;
}
.hh-field-row a.gold { color: var(--hh-gold-deep); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.hh-field-row .muted { color: var(--hh-muted); }

/* ---- Submit ---- */
.hh-auth-submit {
    width: 100%;
    height: 52px;
    margin-top: 1.75rem;
    border: 0;
    border-radius: 10px;
    background: var(--hh-navy);
    color: #fff;
    font-family: var(--hh-sans);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
.hh-auth-submit:hover { background: #0a2350; }

/* ---- Informational note ---- */
.hh-note {
    display: flex; gap: 12px; align-items: flex-start;
    background: #eff6ff;
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 1.75rem;
    font-size: 14px;
    line-height: 1.5;
    color: #006ff8;
}
.hh-note .bi { flex: none; font-size: 18px; line-height: 1.3; }

/* ---- Footer links ---- */
.hh-auth-links {
    display: flex; flex-wrap: wrap; gap: 1.5rem;
    margin-top: 1.5rem; padding-top: 1.25rem;
    border-top: 1px solid var(--hh-line);
    font-size: 14px;
}
.hh-auth-links a { color: var(--hh-muted); text-decoration: none; }
.hh-auth-links a:hover { color: var(--hh-navy); }
.hh-auth-links a.is-strong { color: var(--hh-ink); font-weight: 600; }

/* ---- Validation ----
   Styled through Blazor's own classes rather than Bootstrap's .text-danger,
   whose !important would win regardless of specificity. */
.hh-auth-form .validation-message {
    display: block;
    margin-top: 0.4rem;
    font-size: 13px;
    color: #d9122a;
}
.hh-auth-form .validation-errors {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 12px 16px;
    background: #fdeaec;
    border-radius: 10px;
}
.hh-auth-form .validation-errors .validation-message { margin: 0; }
.hh-auth-form .alert { border-radius: 10px; font-size: 14px; padding: 12px 16px; margin-bottom: 1.25rem; }
.hh-auth-form .alert-danger { background: #fdeaec; border: 0; color: #a80d20; }
.hh-auth-form .alert-success { background: #e8f8f0; border: 0; color: #0f6b45; }

@media (max-width: 900px) {
    .hh-auth { grid-template-columns: 1fr; min-height: 0; }
    .hh-auth-aside { order: 2; }
    .hh-auth-main { order: 1; min-height: 100vh; }
    .hh-auth-body { justify-content: flex-start; }
}

/* ============================================================
   Authenticated content pages (Repository, Recipients, Account…)
   Shared header, card and control primitives used inside the sidebar
   shell. Page background comes from MainLayout (#f5f6fa).
   ============================================================ */
.hh-page { padding-block: 0.25rem 2rem; }
.hh-page-head { margin-bottom: 1.5rem; }
.hh-page-head h1 {
    font-family: var(--hh-sans);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 700; color: var(--hh-ink); margin: 0 0 0.35rem;
}
.hh-page-head p { margin: 0; color: var(--hh-muted); font-size: 16px; }

.hh-card {
    background: var(--hh-surface);
    border-radius: var(--hh-radius);
    box-shadow: var(--hh-shadow-sm);
    padding: clamp(1.25rem, 2.5vw, 2rem);
}
.hh-card + .hh-card { margin-top: 1.25rem; }
.hh-card h2 { font-family: var(--hh-sans); font-size: 1.35rem; font-weight: 700; color: var(--hh-ink); margin: 0 0 0.5rem; }
.hh-card .muted { color: var(--hh-muted); font-size: 15px; margin: 0; }

/* Light control button (Upload Files, Create Folder) */
.hh-btn-light {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--hh-line); border-radius: 10px;
    padding: 0.6rem 1.05rem; font-family: var(--hh-sans); font-size: 14px; font-weight: 600;
    color: var(--hh-ink); cursor: pointer; text-decoration: none;
}
.hh-btn-light:hover { background: #f5f6fa; color: var(--hh-ink); }
.hh-btn-light .bi { color: var(--hh-muted); }

/* ---- "What can I store" icon grid ---- */
.hh-store-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2.5rem; margin-top: 1.25rem;
}
.hh-store-item { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--hh-ink); }
.hh-store-item .ico {
    width: 36px; height: 36px; border-radius: 9px; flex: none;
    background: #fbeecb; color: #b8860b; display: grid; place-items: center; font-size: 1.05rem;
}

/* ---- Vault breadcrumb (Root / folder / subfolder), the navigation the
   design draws with green separators between segments ---- */
.hh-vault-crumbs { display: flex; align-items: center; flex-wrap: wrap; row-gap: 0.35rem; }
.hh-vault-crumbs .crumb {
    background: none; border: 0; cursor: pointer; font-family: var(--hh-sans);
    font-size: 1.05rem; font-weight: 600; color: var(--hh-muted);
    padding: 0 1.1rem; display: inline-flex; align-items: center; gap: 7px;
}
.hh-vault-crumbs .crumb:first-child { padding-left: 0; }
.hh-vault-crumbs button.crumb:hover { color: var(--hh-navy); }
.hh-vault-crumbs .crumb.is-current { color: var(--hh-ink); }
.hh-vault-crumbs .crumb-sep { width: 2px; height: 15px; background: #22c55e; flex: none; }

/* ---- Folders table ---- */
.hh-repo-toolbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: 2rem 0 1rem; }
.hh-repo-toolbar h2 { font-family: var(--hh-sans); font-size: 1.35rem; font-weight: 700; color: var(--hh-ink); margin: 0 0 0.3rem; }
.hh-repo-toolbar p.muted { margin: 0; }
.hh-repo-toolbar .actions { display: flex; gap: 0.6rem; }

.hh-table-wrap { background: var(--hh-surface); border-radius: var(--hh-radius); box-shadow: var(--hh-shadow-sm); overflow: hidden; }
.hh-table-scroll { overflow-x: auto; }
.hh-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 44rem; }
.hh-table thead th {
    text-align: left; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--hh-muted); font-weight: 600; padding: 0.9rem 1.5rem; background: #faf7f0;
}
.hh-table thead th:last-child { text-align: right; }
.hh-table tbody td { padding: 0.95rem 1.5rem; border-top: 1px solid var(--hh-line); vertical-align: middle; color: var(--hh-ink); }
.hh-table tbody tr:first-child td { border-top: 0; }
.hh-table .name { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; background: none; border: 0; cursor: pointer; color: var(--hh-ink); font: inherit; }
.hh-table .name:hover { color: var(--hh-navy); text-decoration: underline; }
.hh-table .name .bi { font-size: 1.15rem; }
/* Folders read gold; file icons keep the type colour from GetFileIconClasses */
.hh-table .name .bi-folder-fill { color: #e0a83e; }
.hh-table .muted { color: var(--hh-muted); }

.hh-row-actions { display: flex; gap: 1.15rem; justify-content: flex-end; }
.hh-row-actions button {
    background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--hh-sans); font-size: 14px; font-weight: 500; color: var(--hh-ink);
}
.hh-row-actions button:hover { color: var(--hh-navy); }
.hh-row-actions button.danger { color: var(--hh-danger); }
.hh-row-actions .bi { font-size: 1rem; }

.hh-empty { text-align: center; padding: 3rem 1rem; color: var(--hh-muted); }
.hh-empty .bi { font-size: 3rem; color: #cbd3e1; }
.hh-empty p { margin: 1rem 0 0; }

@media (max-width: 640px) {
    .hh-store-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Recipients
   ============================================================ */
.hh-banner {
    display: flex; align-items: flex-start; gap: 1.25rem;
    background: var(--hh-navy); color: #cdd6e6;
    border-radius: var(--hh-radius); padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.hh-banner .ico {
    width: 60px; height: 60px; border-radius: 14px; flex: none;
    background: rgba(255, 255, 255, 0.10); color: #fff;
    display: grid; place-items: center; font-size: 1.6rem;
}
.hh-banner h2 { font-family: var(--hh-sans); font-size: 1.35rem; font-weight: 700; color: #fff; margin: 0 0 0.4rem; }
.hh-banner p { margin: 0; font-size: 15px; line-height: 1.5; max-width: 90ch; }

/* Priority badge + optional Tier-2 message indicator */
.hh-priority { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.hh-level { display: inline-block; background: var(--hh-navy); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 6px; }
.hh-msg-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 6px; }
.hh-msg-tag.is-set { background: #e8f6ef; color: #0f6b45; }
.hh-msg-tag.is-empty { background: #fdf6e4; color: #9a5b00; }

/* Contact cell */
.hh-contact { display: flex; flex-direction: column; gap: 5px; font-size: 14px; }
.hh-contact span { display: inline-flex; align-items: center; gap: 8px; color: var(--hh-ink); }
.hh-contact .bi { color: var(--hh-muted); }

/* Take-action buttons */
.hh-take-action { display: flex; gap: 0.6rem; }
.hh-btn-danger-outline {
    display: inline-flex; align-items: center; gap: 7px;
    background: #fff; border: 1px solid #f3c0c6; border-radius: 10px;
    padding: 0.55rem 0.95rem; font-family: var(--hh-sans); font-size: 14px; font-weight: 600;
    color: var(--hh-danger); cursor: pointer;
}
.hh-btn-danger-outline:hover { background: #fdeaec; }

.hh-recipients .hh-table thead th:last-child { text-align: left; }
.hh-recipients .hh-table tbody tr.is-editing { background: #eef3fb; }

/* Add-recipient form */
.hh-form-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr 1.1fr 1fr; gap: 1.1rem; align-items: start; }
.hh-form-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.hh-form-field label { font-size: 14px; font-weight: 600; color: var(--hh-ink); display: inline-flex; align-items: center; gap: 5px; }
.hh-form-field label .bi { color: var(--hh-muted); cursor: help; }
.hh-form-field .validation-message { color: var(--hh-danger); font-size: 13px; }
.hh-input-plain {
    height: 46px; border: 1px solid var(--hh-line); border-radius: 10px; padding-inline: 14px;
    font-family: var(--hh-sans); font-size: 15px; color: var(--hh-ink); background: #fff; width: 100%;
}
.hh-input-plain:focus { outline: none; border-color: var(--hh-navy); box-shadow: 0 0 0 3px rgba(4, 24, 61, 0.08); }
.hh-input-plain::placeholder { color: #90a1b9; }

/* Tier-2 personal message box */
.hh-msg-box { border: 1px solid var(--hh-line); border-radius: 12px; background: #f8fafc; padding: 1.25rem; margin-top: 1.25rem; }
.hh-msg-box .head { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--hh-ink); margin-bottom: 1rem; }
.hh-msg-box .head .bi { color: var(--hh-gold-deep); }
.hh-msg-box textarea.hh-input-plain { height: auto; min-height: 8rem; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.hh-msg-actions { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; flex-wrap: wrap; }

/* Repository picker list (inside branded modal) */
.hh-picker-list { display: flex; flex-direction: column; }
.hh-picker-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; border-top: 1px solid var(--hh-line); }
.hh-picker-item:first-child { border-top: 0; }
.hh-picker-item .info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hh-picker-item .info > .bi { font-size: 1.15rem; color: var(--hh-muted); flex: none; }
.hh-picker-item .info > .bi-folder-fill { color: #e0a83e; }
.hh-picker-name { background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; color: var(--hh-navy); text-align: left; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-picker-name:hover { text-decoration: underline; }

@media (max-width: 1100px) { .hh-form-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px) {
    .hh-form-grid { grid-template-columns: 1fr; }
    .hh-take-action { flex-direction: column; }
    .hh-banner { flex-direction: column; }
}

/* ============================================================
   Account Settings
   ============================================================ */
.hh-crumb-top { font-size: 14px; color: var(--hh-muted); margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.4rem; }
.hh-crumb-top a { color: var(--hh-muted); text-decoration: none; }
.hh-crumb-top a:hover { color: var(--hh-navy); }
.hh-crumb-top .cur { color: var(--hh-navy); font-weight: 600; }

.hh-acct-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.hh-acct-card { border-radius: var(--hh-radius); padding: 1.5rem; }
.hh-acct-card.is-status { background: #eef5ff; border: 1px solid #dce7fb; }
.hh-acct-card.is-storage { background: #eefbf2; border: 1px solid #d3efdc; }
.hh-acct-card .head { display: flex; align-items: center; gap: 0.6rem; font-family: var(--hh-sans); font-weight: 700; color: var(--hh-ink); font-size: 1.15rem; margin-bottom: 1.15rem; }
.hh-acct-card .head .bi { font-size: 1.25rem; }
.hh-acct-card.is-status .head .bi { color: #2f7fe0; }
.hh-acct-card.is-storage .head .bi { color: #1f9d57; }

/* Account status */
.hh-status-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.hh-status-row .label { font-weight: 700; color: var(--hh-ink); }
.hh-status-row .sub { font-size: 13px; color: var(--hh-muted); margin-top: 3px; }
.hh-status-row .date { font-weight: 700; color: #2f5fd0; }
.hh-status-row .rem { font-size: 13px; color: var(--hh-muted); margin-top: 3px; text-align: right; }
.hh-status-note { background: #fff; border-radius: 12px; padding: 1rem 1.15rem; margin-top: 1.25rem; display: flex; gap: 0.7rem; font-size: 14px; line-height: 1.5; color: var(--hh-ink); }
.hh-status-note .bi { color: #2f7fe0; flex: none; font-size: 1.1rem; }
.hh-status-note a { color: #2f7fe0; font-weight: 600; text-decoration: none; }

/* Storage */
.hh-storage-btn { margin-bottom: 1.1rem; }
.hh-storage-meter-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; margin-bottom: 0.55rem; }
.hh-storage-meter-head .l { font-weight: 700; color: var(--hh-ink); }
.hh-storage-meter-head .r { font-weight: 700; color: #1f9d57; }
.hh-storage-bar { height: 8px; border-radius: 999px; background: #cfe7d6; overflow: hidden; }
.hh-storage-bar > span { display: block; height: 100%; background: var(--hh-navy-deep); border-radius: 999px; }
.hh-storage-avail { font-size: 13px; color: var(--hh-muted); margin-top: 0.5rem; }
.hh-storage-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 1.25rem; }
.hh-storage-tile { background: #fff; border: 1px solid #d3efdc; border-radius: 10px; padding: 0.75rem 0.9rem; }
.hh-storage-tile .t { font-size: 13px; color: var(--hh-muted); }
.hh-storage-tile .v { font-weight: 700; color: var(--hh-ink); margin-top: 2px; }

/* Tabs */
.hh-tabs2 { display: flex; gap: 2.25rem; border-bottom: 1px solid var(--hh-line); margin-top: 1.75rem; }
.hh-tabs2 a { padding: 0 0 0.9rem; font-family: var(--hh-sans); font-weight: 600; font-size: 1rem; color: var(--hh-muted); text-decoration: none; position: relative; }
.hh-tabs2 a:hover { color: var(--hh-ink); }
.hh-tabs2 a.active { color: var(--hh-ink); }
.hh-tabs2 a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--hh-navy); }

/* Tab panel (white card) */
.hh-acct-panel { background: #fff; border-radius: var(--hh-radius); box-shadow: var(--hh-shadow-sm); padding: clamp(1.5rem, 3vw, 2.5rem); margin-top: 1.5rem; }
.hh-acct-panel .panel-title { font-family: var(--hh-sans); font-size: 1.4rem; font-weight: 700; color: var(--hh-ink); margin: 0; }
.hh-acct-panel .panel-sub { color: var(--hh-muted); font-size: 15px; margin: 0.4rem 0 1.75rem; }
.hh-acct-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.75rem; }
.hh-acct-head .tile { width: 52px; height: 52px; border-radius: 12px; background: #fbeecb; color: var(--hh-gold-deep); display: grid; place-items: center; font-size: 1.4rem; flex: none; }
.hh-acct-head .panel-sub { margin: 0.3rem 0 0; }

.hh-acct-field { margin-bottom: 1.35rem; max-width: 100%; }
.hh-acct-field > label { display: block; font-size: 15px; font-weight: 600; color: var(--hh-ink); margin-bottom: 0.5rem; }
.hh-acct-field .hint { font-size: 13px; color: var(--hh-muted); margin: 0.5rem 0 0; }
.hh-acct-field .hh-input { height: 52px; }
.hh-acct-field .hh-input.is-readonly { background: #f5f6fa; }
.hh-acct-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem; }

.hh-acct-foot { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 0.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hh-line); }

/* Password management sub-row */
.hh-pw-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #f5f6fa; border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 2rem; }
.hh-pw-row .info { display: flex; align-items: center; gap: 0.85rem; }
.hh-pw-row .info > .bi { font-size: 1.2rem; color: var(--hh-muted); }
.hh-pw-row .info .t { font-weight: 700; color: var(--hh-ink); }
.hh-pw-row .info .s { font-size: 13px; color: var(--hh-muted); }
.hh-pw-row .acts { display: flex; align-items: center; gap: 0.9rem; }
.hh-pw-row .acts .change { background: none; border: 0; cursor: pointer; font-family: var(--hh-sans); font-size: 14px; font-weight: 600; color: var(--hh-ink); }

/* Encrypted-note strip */
.hh-encnote { display: flex; align-items: center; gap: 0.7rem; background: #fdf8ea; border-radius: 12px; padding: 0.9rem 1.15rem; margin-top: 1.75rem; font-size: 14px; color: #705a1f; }
.hh-encnote .bi { color: var(--hh-gold-deep); }

/* StatusMessage alert inside panels */
.hh-acct-panel .alert { border-radius: 10px; font-size: 14px; padding: 12px 16px; margin-bottom: 1.25rem; border: 0; }
.hh-acct-panel .alert-success { background: #e8f8f0; color: #0f6b45; }
.hh-acct-panel .alert-danger { background: #fdeaec; color: #a80d20; }
.hh-acct-panel .validation-message { color: var(--hh-danger); font-size: 13px; display: block; margin-top: 0.4rem; }

@media (max-width: 900px) {
    .hh-acct-cards { grid-template-columns: 1fr; }
    .hh-acct-two { grid-template-columns: 1fr; }
}

/* ============================================================
   Dashboard — Delivery Rules
   ============================================================ */
.hh-dash > * + * { margin-top: 1.25rem; }

.hh-status-alert { display: flex; align-items: center; gap: 0.6rem; border-radius: 12px; padding: 0.9rem 1.15rem; font-size: 14px; }
.hh-status-alert.is-ok { background: #e8f8f0; color: #0f6b45; }
.hh-status-alert.is-err { background: #fdeaec; color: #a80d20; }
.hh-status-alert .close { margin-left: auto; background: none; border: 0; font-size: 1.3rem; line-height: 1; cursor: pointer; color: inherit; opacity: 0.7; }

/* Inline "couldn't save" banner shown next to the Save button on invalid submit */
.hh-form-errors { display: flex; align-items: flex-start; gap: 0.6rem; background: #fdeaec; color: #a80d20; border-radius: 12px; padding: 0.9rem 1.15rem; font-size: 14px; margin-bottom: 1rem; }
.hh-form-errors .bi { margin-top: 0.1rem; }
.hh-form-errors ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.hh-form-errors .validation-message { color: inherit; }

.hh-info-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.1rem; }
.hh-info-head .ic { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--hh-navy); color: var(--hh-navy); display: grid; place-items: center; font-size: 1.2rem; flex: none; }
.hh-info-head h2 { font-family: var(--hh-sans); font-size: 1.4rem; font-weight: 700; color: var(--hh-ink); margin: 0; }
.hh-plain-h2 { font-family: var(--hh-sans); font-size: 1.4rem; font-weight: 700; color: var(--hh-ink); margin: 0 0 0.4rem; }
.hh-card > .lead { color: var(--hh-muted); font-size: 15px; margin: 0 0 1.5rem; }

/* 3-step process */
.hh-steps3 { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0.5rem; }
.hh-step3 { display: flex; align-items: center; gap: 0.85rem; background: #f5f6fa; border-radius: 12px; padding: 1rem 1.15rem; }
.hh-step3 .n { width: 34px; height: 34px; border-radius: 50%; background: var(--hh-navy); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; }
.hh-step3 .t { font-size: 14px; font-weight: 600; color: var(--hh-ink); }
.hh-steps3 .arrow { color: #9aa6bd; font-size: 1.1rem; display: grid; place-items: center; }

/* Message editor: a plain textarea over a mirrored backdrop that paints
   {{placeholder}} tokens as highlighted chips. Both layers MUST share identical
   box metrics (font, padding, border, line-height, wrapping) so chips align.

   The backdrop sits in normal flow and grows to fit the text; the textarea is
   absolutely positioned on top and fills it exactly. Because the field grows
   with its content, the textarea never scrolls internally — so the two layers
   can never drift out of sync (the page scrolls instead). */
.hh-msg-editor { position: relative; }
.hh-msg-editor .hh-msg-textarea,
.hh-msg-editor .hh-msg-backdrop {
    box-sizing: border-box;
    width: 100%;
    min-height: 180px;
    margin: 0;
    padding: 1rem 1.15rem;
    border: 1px solid var(--hh-line);
    border-radius: 12px;
    font-family: var(--hh-sans);
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: normal;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: normal;
}
.hh-msg-editor .hh-msg-backdrop {
    position: relative;
    z-index: 0;
    background: #f8fafc;
    border-color: transparent;
    color: transparent;
    pointer-events: none;
    user-select: none;
}
.hh-msg-editor .hh-msg-textarea {
    position: absolute;
    inset: 0;
    z-index: 1;
    height: 100%;
    background: transparent;
    color: var(--hh-ink);
    caret-color: var(--hh-ink);
    resize: none;
    overflow: hidden;
}
.hh-msg-editor .hh-msg-backdrop .hh-token {
    /* Override the UA <mark> defaults: text stays transparent (the textarea
       paints the visible glyphs on top); only the chip background shows. */
    color: transparent;
    border-radius: 3px;
    background: rgba(213, 159, 0, 0.20);
    box-shadow: 0 0 0 1px rgba(213, 159, 0, 0.20);
}
.hh-msg-editor .hh-msg-textarea:focus { outline: none; border-color: var(--hh-navy); box-shadow: 0 0 0 3px rgba(4, 24, 61, 0.08); }
.hh-msg-editor:focus-within .hh-msg-backdrop { border-color: var(--hh-navy); box-shadow: 0 0 0 3px rgba(4, 24, 61, 0.08); }

/* Legend of available placeholders (chips insert the token at the caret) */
.hh-token-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.hh-token-legend .lbl { font-size: 13px; font-weight: 600; color: var(--hh-ink); }
.hh-token-legend .note { flex-basis: 100%; font-size: 12px; color: var(--hh-muted); margin-top: 0.15rem; }
.hh-token-legend .hh-token {
    font-family: var(--hh-sans);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hh-navy);
    background: rgba(213, 159, 0, 0.14);
    border: 1px solid rgba(213, 159, 0, 0.45);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.hh-token-legend .hh-token:hover { background: rgba(213, 159, 0, 0.28); border-color: var(--hh-gold); }

.hh-msg-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 0.75rem; font-size: 13px; color: var(--hh-muted); }
.hh-msg-foot .reset { background: none; border: 0; cursor: pointer; color: var(--hh-navy); font: inherit; font-weight: 600; }
.hh-msg-foot .count { white-space: nowrap; }

/* "When should we contact" centred header */
.hh-when-head { text-align: center; max-width: 40rem; margin: 0.5rem auto 1.5rem; }
.hh-when-head .ic { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--hh-navy); color: var(--hh-navy); display: inline-grid; place-items: center; font-size: 1.3rem; margin-bottom: 0.75rem; }
.hh-when-head h2 { font-family: var(--hh-sans); font-size: 1.5rem; font-weight: 700; color: var(--hh-ink); margin: 0 0 0.4rem; }
.hh-when-head p { color: var(--hh-muted); font-size: 15px; margin: 0; }

/* Message Schedule: three columns. The first two cover the period while the
   member is alive ("While you're still around"), the third covers what happens
   afterwards, so the group headers span 2 + 1 columns above the grid. */
.hh-sched-title { font-family: var(--hh-sans); font-size: 1.35rem; font-weight: 700; color: var(--hh-ink); text-align: center; margin: 0 0 0.9rem; }
.hh-sched-groups { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; margin-bottom: 0.6rem; }
.hh-sched-group { text-align: center; font-family: var(--hh-sans); font-size: 1.05rem; font-weight: 700; color: var(--hh-navy); padding: 0.5rem 0.75rem; border-radius: 10px; background: #eef1f7; }
.hh-sched-group.is-post { background: #f6efe1; }

.hh-sched-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.25rem; align-items: stretch; margin-bottom: 2.25rem; }
.hh-sched-grid > .hh-card { align-self: stretch; }
/* The generic `.hh-card + .hh-card` stacking margin must not push grid cells down. */
.hh-sched-grid > .hh-card + .hh-card { margin-top: 0; }
.hh-sched-col { display: flex; flex-direction: column; }

.hh-sched-head { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.4rem; }
.hh-sched-head h4 { font-family: var(--hh-sans); font-size: 1.05rem; font-weight: 700; color: var(--hh-ink); margin: 0; }
.hh-sched-num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--hh-navy); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 700; font-family: var(--hh-sans); }
.hh-sched-sub { font-size: 14px; font-weight: 600; color: var(--hh-ink); margin: 0 0 0.5rem; }
.hh-sched-sub.is-lead { font-style: italic; color: var(--hh-navy); margin-bottom: 1rem; }
.hh-sched-note { color: var(--hh-muted); font-size: 13.5px; line-height: 1.55; margin: 0 0 1.25rem; }
/* Push the last field group to sit consistently while columns differ in height */
.hh-sched-col .hh-timing-field:last-of-type { margin-bottom: 0; }

.hh-timing-field { margin-bottom: 1.25rem; }
.hh-timing-field:last-child { margin-bottom: 0; }
.hh-timing-field > label { display: block; font-size: 15px; font-weight: 600; color: var(--hh-ink); margin-bottom: 0.5rem; }
.hh-timing-field .fieldnote { font-size: 12.5px; color: var(--hh-muted); margin: 0.55rem 0 0; }
.hh-timing-row { display: flex; gap: 0.6rem; }
.hh-timing-row .num { width: 92px; flex: none; text-align: center; }
.hh-timing-row .unit { flex: 1; }

/* Switch with both positions labelled: Off in ink, On in green, the position
   not currently selected dimmed so the state still reads at a glance. */
.hh-switch-group { display: flex; align-items: center; gap: 0.65rem; flex: none; }
.hh-switch-label {
    font-family: var(--hh-sans); font-size: 14px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    opacity: 0.4; transition: opacity .15s ease;
}
.hh-switch-label.is-off { color: var(--hh-ink); }
.hh-switch-label.is-on { color: #1f9d57; }
.hh-switch-label.is-current { opacity: 1; }

/* Toggle switch */
.hh-switch { position: relative; display: inline-block; width: 52px; height: 28px; flex: none; }
.hh-switch input { opacity: 0; width: 0; height: 0; }
.hh-switch .slider { position: absolute; inset: 0; background: #cbd3e1; border-radius: 999px; transition: .2s; cursor: pointer; }
.hh-switch .slider::before { content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.hh-switch input:checked + .slider { background: #1f9d57; }
.hh-switch input:checked + .slider::before { transform: translateX(24px); }

/* Delivery status */
.hh-status-block { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.hh-status-block h3 { font-family: var(--hh-sans); font-size: 1.5rem; font-weight: 700; color: var(--hh-ink); margin: 0 0 0.4rem; }
.hh-status-block p { color: var(--hh-muted); font-size: 15px; margin: 0; max-width: 70ch; }
.hh-status-btn { width: 100%; margin-top: 1.5rem; height: 56px; border-radius: 12px; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; cursor: pointer; font-family: var(--hh-sans); transition: background .15s ease; }
.hh-status-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.hh-status-btn.is-paused,
.hh-status-btn.is-save { background: var(--hh-navy); color: #fff; border: 0; }
.hh-status-btn.is-paused:hover:not(:disabled),
.hh-status-btn.is-save:hover:not(:disabled) { background: #0a2350; }
/* Nothing outstanding: reads as settled rather than unavailable. */
.hh-status-btn.is-saved { background: #eef1f6; color: var(--hh-muted); border: 1px solid var(--hh-line); }
.hh-status-btn.is-saved:hover:not(:disabled) { background: #e4e9f1; }
.hh-status-btn.is-active { background: #fff; color: var(--hh-navy); border: 1px solid var(--hh-line); }
.hh-status-btn.is-active:hover:not(:disabled) { background: #f5f6fa; }

/* Amber info card */
.hh-amber-card { background: #fdf8ea; border: 1px solid #f2e4bf; border-radius: var(--hh-radius); padding: 1.5rem; display: flex; gap: 0.9rem; }
.hh-amber-card > .ic { color: #9a7b1f; font-size: 1.3rem; flex: none; }
.hh-amber-card h3 { font-family: var(--hh-sans); font-size: 1.15rem; font-weight: 700; color: #7a5f16; margin: 0 0 0.4rem; }
.hh-amber-card p { color: #8a6d24; font-size: 14px; line-height: 1.6; margin: 0; }

/* Active-process schedule info (shown instead of the amber card once active) */
.hh-active-info { background: #eef5ff; border: 1px solid #dce7fb; border-radius: var(--hh-radius); padding: 1.5rem; }
.hh-active-info .hh-info-head { margin-bottom: 1rem; }
.hh-active-info .hh-info-head .ic { border-color: #2f7fe0; color: #2f7fe0; }
.hh-active-info .hh-info-head h2 { font-size: 1.25rem; }
.hh-active-list { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 14px; color: var(--hh-ink); }
.hh-active-steps p { font-size: 14px; line-height: 1.6; color: var(--hh-muted); margin: 0 0 0.6rem; }
.hh-active-steps p:last-child { margin-bottom: 0; }
.hh-active-steps p.danger { color: #a80d20; }
.hh-active-steps strong, .hh-active-list strong { color: var(--hh-ink); }

/* Danger card */
.hh-danger-card { background: #fdf2f3; border: 1px solid #f6ced3; border-radius: var(--hh-radius); padding: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.hh-danger-card h3 { font-family: var(--hh-sans); font-size: 1.15rem; font-weight: 700; color: var(--hh-ink); margin: 0 0 0.35rem; display: flex; align-items: center; gap: 0.6rem; }
.hh-danger-card h3 .bi { color: var(--hh-danger); }
.hh-danger-card p { color: var(--hh-muted); font-size: 14px; margin: 0; }
.hh-danger-btn { background: var(--hh-danger); color: #fff; border: 0; border-radius: 10px; padding: 0.85rem 1.5rem; font-family: var(--hh-sans); font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 0.5rem; }
.hh-danger-btn:hover:not(:disabled) { background: #c0102a; }
.hh-danger-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Emergency-stop bar repeated at the top of the dashboard */
.hh-estop-bar { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; background: #fdf2f3; border: 1px solid #f6ced3; border-radius: var(--hh-radius); padding: 0.9rem 1.25rem; margin-bottom: 1.5rem; }
.hh-estop-bar strong { display: block; font-family: var(--hh-sans); font-size: 15px; color: var(--hh-ink); margin-bottom: 0.15rem; }
.hh-estop-bar strong .bi { color: var(--hh-danger); margin-right: 0.4rem; }
.hh-estop-bar span { color: var(--hh-muted); font-size: 13.5px; }

/* The three controls grouped together, plus their operating instructions */
.hh-controls-row { display: flex; gap: 0.85rem; margin-top: 1.5rem; }
.hh-controls-row .hh-status-btn { margin-top: 0; flex: 1; }
.hh-controls-row .hh-danger-btn { height: 56px; border-radius: 12px; font-size: 16px; padding-inline: 1.75rem; }
.hh-controls-hint { margin: 1.25rem 0 0; padding-left: 1.2rem; color: var(--hh-muted); font-size: 13.5px; line-height: 1.6; }
.hh-controls-hint li { margin-bottom: 0.3rem; }
.hh-controls-hint strong { color: var(--hh-ink); }

@media (max-width: 1024px) {
    .hh-sched-grid { grid-template-columns: 1fr; }
    /* The group headers label columns; once the columns stack they would sit
       above the wrong card, and each card already carries its own title. */
    .hh-sched-groups { display: none; }
}

@media (max-width: 860px) {
    .hh-steps3 { grid-template-columns: 1fr; }
    .hh-steps3 .arrow { display: none; }
    .hh-danger-card { flex-direction: column; align-items: flex-start; }
    .hh-estop-bar { flex-direction: column; align-items: flex-start; }
    .hh-controls-row { flex-direction: column; }
}

/* ============================================================
   Branded modals (vault dialogs — no Figma design, styled to match)
   ============================================================ */
.hh-modal-backdrop {
    position: fixed; inset: 0; z-index: 1050;
    background: rgba(4, 24, 61, 0.45);
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
}
.hh-modal {
    background: #fff; border-radius: var(--hh-radius);
    width: 100%; max-width: 30rem;
    box-shadow: 0 24px 60px rgba(4, 24, 61, 0.30);
    display: flex; flex-direction: column;
    max-height: calc(100vh - 3rem);
    overflow: hidden;
}
.hh-modal.is-wide { max-width: min(56rem, 96vw); }
.hh-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--hh-line);
}
.hh-modal-head h3 {
    font-family: var(--hh-sans); font-size: 1.15rem; font-weight: 700; color: var(--hh-ink);
    margin: 0; display: inline-flex; align-items: center; gap: 0.5rem;
}
.hh-modal-close {
    background: none; border: 0; cursor: pointer; color: var(--hh-muted);
    font-size: 1.25rem; line-height: 1; padding: 4px; display: grid; place-items: center;
}
.hh-modal-close:hover { color: var(--hh-ink); }
.hh-modal-body { padding: 1.5rem; overflow-y: auto; }
.hh-modal-body label.field-label { display: block; font-size: 14px; font-weight: 600; color: var(--hh-ink); margin-bottom: 0.45rem; }
.hh-modal-body .hh-text-input,
.hh-modal-body select {
    width: 100%; height: 46px; border: 1px solid var(--hh-line); border-radius: 10px;
    padding-inline: 14px; font-family: var(--hh-sans); font-size: 15px; color: var(--hh-ink);
    background: #fff;
}
.hh-modal-body .hh-text-input:focus,
.hh-modal-body select:focus { outline: none; border-color: var(--hh-navy); box-shadow: 0 0 0 3px rgba(4,24,61,0.08); }
.hh-modal-body .help { font-size: 13px; color: var(--hh-muted); margin: 0.5rem 0 0; }
.hh-modal-foot { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 1.1rem 1.5rem; border-top: 1px solid var(--hh-line); }

.hh-mbtn {
    border: 0; border-radius: 10px; padding: 0.6rem 1.25rem; cursor: pointer;
    font-family: var(--hh-sans); font-size: 14px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.hh-mbtn:disabled { opacity: 0.5; cursor: not-allowed; }
.hh-mbtn-primary { background: var(--hh-navy); color: #fff; }
.hh-mbtn-primary:hover:not(:disabled) { background: #0a2350; }
.hh-mbtn-light { background: #fff; color: var(--hh-ink); border: 1px solid var(--hh-line); }
.hh-mbtn-light:hover { background: #f5f6fa; }
.hh-mbtn-danger { background: var(--hh-danger); color: #fff; }

.hh-alert-danger { background: #fdeaec; color: #a80d20; border-radius: 10px; padding: 10px 14px; font-size: 14px; margin-top: 0.75rem; }

/* Copy-link row (share modal) */
.hh-copyrow { display: flex; gap: 0; border: 1px solid var(--hh-line); border-radius: 10px; overflow: hidden; }
.hh-copyrow input { flex: 1; min-width: 0; border: 0; padding: 0 14px; height: 46px; font-size: 14px; color: var(--hh-ink); }
.hh-copyrow input:focus { outline: none; }
.hh-copyrow button { border: 0; border-left: 1px solid var(--hh-line); background: #f5f6fa; padding: 0 16px; cursor: pointer; color: var(--hh-navy); }
.hh-note-ok { color: #0f6b45; font-size: 13px; margin: 0.6rem 0 0; display: flex; align-items: center; gap: 0.35rem; }
.hh-note-muted { color: var(--hh-muted); font-size: 13px; margin: 0.6rem 0 0; display: flex; align-items: center; gap: 0.35rem; }

/* ---- Drag & drop upload ---- */
.hh-dropzone {
    position: relative; border: 2px dashed var(--hh-line-cool); border-radius: 12px;
    background: #f8fafc; transition: border-color .15s ease, background .15s ease;
}
.hh-dropzone:hover, .hh-dropzone.is-hover { border-color: var(--hh-navy); background: #eef2fb; }
.hh-dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.hh-dropzone-inner { padding: 2rem 1.25rem; text-align: center; pointer-events: none; }
.hh-dropzone-inner .bi { font-size: 2rem; color: var(--hh-navy); }
.hh-dropzone-inner .t { display: block; margin-top: 0.6rem; font-weight: 600; color: var(--hh-ink); }
.hh-dropzone-inner .s { display: block; margin-top: 0.2rem; font-size: 13px; color: var(--hh-muted); }
.hh-filelist { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.hh-filelist li { display: flex; align-items: center; gap: 0.6rem; font-size: 14px; color: var(--hh-ink); background: #f5f6fa; border-radius: 8px; padding: 0.5rem 0.75rem; }
.hh-filelist li .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-filelist li .sz { color: var(--hh-muted); font-size: 13px; }
.hh-filelist li .bi { color: var(--hh-muted); }

/* ---- File preview modal ---- */
.hh-preview-body { position: relative; padding: 0; background: #f0f1f5; display: grid; place-items: center; min-height: 55vh; }
.hh-preview-loader {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.85rem;
    background: #f0f1f5; color: var(--hh-muted); font-size: 14px;
}
.hh-preview-loader .spinner-border { color: var(--hh-navy); width: 2.25rem; height: 2.25rem; }
.hh-preview-body img { max-width: 100%; max-height: 78vh; display: block; }
.hh-preview-body iframe { width: 100%; height: 78vh; border: 0; background: #fff; }
.hh-preview-body pre { width: 100%; max-height: 78vh; overflow: auto; margin: 0; padding: 1.5rem; background: #fff; font-size: 13px; }

/* ============================================================
   Signed-out shell (Resend Confirmation and siblings)
   A navy rail and title bar around a cream content card. Distinct from
   both the split auth screens and the light signed-in sidebar.
   ============================================================ */
.hh-shell {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 100vh;
    font-family: var(--hh-sans);
    color: var(--hh-ink);
    background: var(--hh-bg);
}

.hh-shell-side {
    background: var(--hh-navy);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.4rem;
    gap: 2rem;
}
.hh-shell-side .hh-logo { height: 46px; }
.hh-shell-nav { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.hh-shell-nav a {
    display: flex; align-items: center; gap: 12px;
    height: 46px; padding-inline: 12px; border-radius: 8px;
    color: #fff; text-decoration: none; font-size: 16px; font-weight: 500;
    transition: background .15s ease;
}
.hh-shell-nav a:hover { background: rgba(255, 255, 255, 0.08); }
.hh-shell-nav a.is-current { background: rgba(255, 255, 255, 0.12); }
/* The rail is dark, so the masked icons invert */
.hh-shell-nav .hh-nav-ico { background-color: #fff; }
.hh-shell-nav .bi { width: 22px; font-size: 20px; text-align: center; line-height: 1; }
.hh-shell-tag {
    font-size: 14px; line-height: 1.5; color: #9aa6bd; margin: 0;
    padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hh-shell-body { display: flex; flex-direction: column; min-width: 0; }
.hh-shell-top {
    background: var(--hh-navy);
    color: #fff;
    min-height: 72px;
    display: flex;
    align-items: center;
    padding-inline: clamp(1.25rem, 3vw, 2.5rem);
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    font-weight: 600;
}
.hh-shell-content { flex: 1; padding: clamp(1.25rem, 3vw, 2.5rem); }
.hh-shell-foot {
    background: #f5f0eb;
    display: flex; flex-wrap: wrap; gap: 0.75rem;
    justify-content: space-between; align-items: center;
    padding: 1.15rem clamp(1.25rem, 3vw, 2.5rem);
    font-size: 14px; color: var(--hh-muted);
}
.hh-shell-foot nav { display: flex; gap: 1.5rem; }
.hh-shell-foot a { color: var(--hh-muted); text-decoration: none; }
.hh-shell-foot a:hover { color: var(--hh-navy); }

/* ---- Cream card that holds the form ---- */
.hh-cream-card {
    background: #f0e6d8;
    border-radius: var(--hh-radius);
    padding: clamp(1.5rem, 3.5vw, 3rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}
.hh-cream-card h1 {
    font-family: var(--hh-sans);
    font-size: clamp(1.5rem, 2.6vw, 2.15rem);
    font-weight: 700;
    line-height: 1.25;
    color: #0d1b3e;
    margin: 0 0 0.6rem;
}
.hh-cream-card .lead { color: var(--hh-muted); font-size: 16px; line-height: 1.5; margin: 0 0 1.75rem; max-width: 44ch; }
.hh-cream-card .hh-input { border-color: transparent; }
.hh-cream-card .hh-hint { font-size: 14px; color: #666; margin: 0.75rem 0 0; }
.hh-cream-card .alert { border-radius: 10px; font-size: 14px; padding: 12px 16px; margin-bottom: 1.25rem; border: 0; }
.hh-cream-card .alert-danger { background: #fdeaec; color: #a80d20; }
.hh-cream-card .alert-success { background: #e8f8f0; color: #0f6b45; }
.hh-cream-media img {
    /* PNG with transparent, already-rounded corners — no clip needed */
    width: 100%; max-width: 620px; height: auto; display: block;
    margin-inline: auto;
}
.hh-cream-links {
    display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between;
    margin-top: 1.75rem; font-size: 16px; font-weight: 600;
}
.hh-cream-links a { color: #0d1b3e; text-decoration: underline; text-underline-offset: 3px; }
.hh-cream-note {
    margin: clamp(1.5rem, 4vw, 3rem) auto 0;
    max-width: 62ch; text-align: center;
    font-size: 15px; line-height: 1.6; color: var(--hh-muted);
}

/* Brushed-gold submit, sampled across the design's gradient */
.hh-btn-gold-bar {
    width: 100%; height: 52px; border: 0; border-radius: 10px; cursor: pointer;
    font-family: var(--hh-sans); font-size: 16px; font-weight: 600; color: #3a2a10;
    background: linear-gradient(90deg, #8e6336 0%, #c9a76c 25%, #f0d490 48%, #c9a76c 72%, #96703f 100%);
    transition: filter .15s ease;
}
.hh-btn-gold-bar:hover { filter: brightness(1.06); }

@media (max-width: 900px) {
    .hh-shell { grid-template-columns: 1fr; }
    .hh-shell-side { flex-direction: row; align-items: center; gap: 1rem; padding: 1rem 1.25rem; }
    .hh-shell-nav { flex-direction: row; flex: 1; justify-content: flex-end; }
    .hh-shell-nav a span:not(.hh-nav-ico):not(.bi) { display: none; }
    .hh-shell-tag { display: none; }
    .hh-cream-card { grid-template-columns: 1fr; }
    .hh-cream-media { order: -1; }
}

/* ============================================================
   Sidebar navigation icons
   The exported SVGs carry a fixed #545A64 stroke, so they are applied as
   masks and coloured from CSS — one asset serves both the resting and the
   active (white) state.
   ============================================================ */
.hh-nav-ico {
    width: 22px;
    height: 22px;
    flex: none;
    display: block;
    background-color: #545a64;
    -webkit-mask: center / 22px 22px no-repeat;
    mask: center / 22px 22px no-repeat;
    transition: background-color .15s ease;
}
.nav-link.active .hh-nav-ico { background-color: #fff; }

/* Home is the one entry the design draws twice: outlined at rest and
   solid once selected, so the mask swaps with the state. */
.hh-nav-home       { -webkit-mask-image: url("/images/heritage/nav-home.svg");       mask-image: url("/images/heritage/nav-home.svg"); }
.nav-link.active .hh-nav-home {
    -webkit-mask-image: url("/images/heritage/nav-home-active.svg");
    mask-image: url("/images/heritage/nav-home-active.svg");
}
.hh-nav-dashboard  { -webkit-mask-image: url("/images/heritage/nav-dashboard.svg");  mask-image: url("/images/heritage/nav-dashboard.svg"); }
.hh-nav-vault      { -webkit-mask-image: url("/images/heritage/nav-vault.svg");      mask-image: url("/images/heritage/nav-vault.svg"); }
.hh-nav-recipients { -webkit-mask-image: url("/images/heritage/nav-recipients.svg"); mask-image: url("/images/heritage/nav-recipients.svg"); }
.hh-nav-profile    { -webkit-mask-image: url("/images/heritage/nav-profile.svg");    mask-image: url("/images/heritage/nav-profile.svg"); }
.hh-nav-terms      { -webkit-mask-image: url("/images/heritage/nav-terms.svg");      mask-image: url("/images/heritage/nav-terms.svg"); }
.hh-nav-logout     { -webkit-mask-image: url("/images/heritage/nav-logout.svg");     mask-image: url("/images/heritage/nav-logout.svg"); }

/* ============================================================
   Public top navigation
   ============================================================ */
.hh-topnav {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--hh-surface);
    border-bottom: 1px solid var(--hh-line-cool);
}
.hh-topnav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 72px;
}
.hh-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: var(--hh-navy);
}
/* Brand logo (raster-in-SVG export, 269×72) */
.hh-logo { height: 46px; width: auto; display: block; }
/* Footer sits on navy — render the single-colour logo in white */
.hh-logo-light { filter: brightness(0) invert(1); }

.hh-topnav-links { display: flex; align-items: center; gap: 1.5rem; }
.hh-topnav-links a.hh-navlink {
    text-decoration: none;
    color: var(--hh-navy);
    font-weight: 600;
    font-size: 0.95rem;
}
.hh-topnav-links a.hh-navlink:hover { color: var(--hh-gold-deep); }

/* ============================================================
   Hero
   ============================================================ */
/* Full-bleed band: the navy ground and photo run edge to edge, while the
   copy stays aligned to the page container. */
.hh-hero {
    position: relative;
    background: var(--hh-navy);
    overflow: hidden;
}
.hh-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: clamp(340px, 42vw, 560px);
}
.hh-hero-copy {
    max-width: 765px;
    padding-block: clamp(2.25rem, 5vw, 3.5rem);
    color: #eef1f7;
}
.hh-hero-copy h1 {
    font-family: var(--hh-serif);
    font-weight: 600;
    font-optical-sizing: auto;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.4;
    letter-spacing: 0;
    margin: 0 0 1.15rem;
}
.hh-hero-copy p { color: #b9c2d6; max-width: 52ch; margin: 0; font-size: 16px; line-height: 1.5; }
.hh-hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.75rem; }

/* Photo occupies the right of the band and dissolves into the navy */
.hh-hero-media { position: absolute; inset: 0 0 0 auto; width: 64%; }
.hh-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.hh-hero-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg,
        var(--hh-navy) 0%,
        rgba(15, 30, 61, 0.92) 18%,
        rgba(15, 30, 61, 0.45) 42%,
        rgba(15, 30, 61, 0) 66%);
}

/* ============================================================
   Feature cards ("What we offer")
   ============================================================ */
.hh-offer { background: var(--hh-bg); text-align: center; }
.hh-offer .hh-h2 { max-width: 24ch; margin-inline: auto; }
.hh-cards {
    margin-top: 2.25rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    text-align: left;
}
.hh-cards .hh-card {
    background: var(--hh-surface);
    border: 1px solid var(--hh-line-cool);
    border-radius: var(--hh-radius);
    padding: 1.4rem 1.35rem 1.25rem;
    box-shadow: var(--hh-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.hh-card-icon {
    width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 1.35rem;
}
.hh-card-icon img { width: 26px; height: 26px; object-fit: contain; }
.hh-ic-blue   { background: #e6f0fe; }
.hh-ic-teal   { background: #ddf7f4; }
.hh-ic-navy   { background: #e4e8f1; }
.hh-ic-purple { background: #ebe9fe; }
.hh-ic-gold   { background: #f9edcf; color: var(--hh-gold-deep); }
.hh-cards .hh-card h3 {
    font-family: var(--hh-serif);
    font-optical-sizing: auto;
    font-size: 20px; line-height: 1.5; font-weight: 600;
    margin: 0; color: var(--hh-ink);
}
.hh-cards .hh-card p { color: var(--hh-muted); font-size: 14px; line-height: 1.5; margin: 0; flex: 1; }
.hh-learn {
    font-weight: 500; font-size: 14px; line-height: 1.5; color: var(--hh-ink);
    text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem;
}
.hh-learn:hover { color: var(--hh-gold-deep); }

/* ============================================================
   Story / split sections ("More than just files", "Customisation")
   ============================================================ */
.hh-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: center;
}
.hh-split.is-reverse .hh-split-media { order: 2; }
.hh-split-media img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--hh-radius); box-shadow: var(--hh-shadow);
}
.hh-split-copy .hh-h2 { margin-bottom: 1rem; }
.hh-checks { list-style: none; margin: 1.4rem 0 1.9rem; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.hh-checks li { display: flex; align-items: center; gap: 0.7rem; font-weight: 600; color: var(--hh-navy); }
.hh-checks .bi { color: var(--hh-gold); font-size: 1.15rem; }

/* ============================================================
   How it works — steps
   ============================================================ */
.hh-steps-wrap { background: var(--hh-bg); }
.hh-steps-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: stretch;
}
/* Left column: heading pinned top, photo settling at the bottom so its
   lower edge lines up with the last step card. */
.hh-steps-intro { display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; }
/* The photo is a small asset (261×282) — show it at its natural size
   rather than stretching it, which would soften the image. */
.hh-steps-media img {
    display: block;
    width: auto; max-width: min(100%, 262px); height: auto;
    border-radius: var(--hh-radius);
    box-shadow: var(--hh-shadow);
}

.hh-steps { display: flex; flex-direction: column; gap: 1.25rem; }
.hh-step {
    display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start;
    background: var(--hh-surface);
    border-radius: var(--hh-radius);
    padding: 1.5rem 1.75rem;
    box-shadow: var(--hh-shadow-sm);
}
/* Per the design asset (82×82): a white disc with a 2px dotted ring, and a
   separate inner disc of the accent at 10% — leaving a white gap between the
   two. The inner disc is 58/80 = 72.5% of the ring's inner diameter. */
.hh-step-num {
    width: 64px; height: 64px; border-radius: 50%;
    flex: none;
    display: grid; place-items: center;
    font-family: var(--hh-serif); font-weight: 600; font-size: 1.3rem;
    border: 2px dotted currentColor;
    background: #fff;
    background: radial-gradient(circle closest-side,
        color-mix(in srgb, currentColor 10%, #fff) 0 72.5%,
        #fff 72.5%);
}
/* Accents mirror the feature-card icon palette */
.hh-step-num.is-01 { color: var(--hh-accent-blue); }
.hh-step-num.is-02 { color: var(--hh-gold); }
.hh-step-num.is-03 { color: var(--hh-accent-teal); }

.hh-step h3 { margin: 0 0 0.4rem; font-size: 18px; line-height: 1.5; font-weight: 600; color: var(--hh-ink); }
.hh-step p { margin: 0; color: var(--hh-muted); font-size: 14px; line-height: 1.5; }

/* ============================================================
   Stats CTA banner
   ============================================================ */
.hh-cta-wrap { background: var(--hh-bg); padding-bottom: clamp(2.5rem, 5vw, 4.25rem); }
.hh-cta {
    background: var(--hh-navy);
    border-radius: var(--hh-radius);
    padding: clamp(2rem, 5vw, 3.5rem);
    display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(1.5rem, 5vw, 3.5rem);
    align-items: center;
    box-shadow: var(--hh-shadow);
}
.hh-cta-copy h2 { color: #fff; font-size: clamp(1.6rem, 3.1vw, 2.75rem); line-height: 1.2; font-weight: 400; }
.hh-cta-copy p { color: #b9c2d6; margin: 1rem 0 1.75rem; max-width: 48ch; font-size: 16px; line-height: 1.5; }
.hh-stats { display: flex; flex-direction: column; gap: 1.4rem; border-left: 1px solid rgba(255,255,255,0.14); padding-left: clamp(1.5rem, 4vw, 3rem); }
.hh-stat .fig { display: block; font-family: var(--hh-serif); font-optical-sizing: auto; font-weight: 400; font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1.2; color: #fff; }
.hh-stat .cap { display: block; color: #c7cfde; font-size: 16px; line-height: 1.5; margin-top: 0.15rem; }

/* ============================================================
   Footer
   ============================================================ */
.hh-footer { background: var(--hh-navy-deep); color: #c7cfde; }
.hh-footer-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.1fr auto;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.hh-footer .hh-brand { color: #fff; }
.hh-footer .hh-crest { color: #fff; }
.hh-footer .hh-wordmark .sub { color: #8f9bb3; }
.hh-footer-tag { margin: 1rem 0 0; font-size: 0.9rem; max-width: 34ch; color: #9aa6bd; }
.hh-footer h4 { color: #fff; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 1rem; }
.hh-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.hh-footer a { color: #c7cfde; text-decoration: none; font-size: 0.92rem; }
.hh-footer a:hover { color: var(--hh-gold-soft); }
.hh-footer address { font-style: normal; font-size: 0.92rem; line-height: 1.7; color: #9aa6bd; }
.hh-social { display: flex; gap: 0.6rem; }
.hh-social a {
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255,255,255,0.08); color: #fff;
}
.hh-social a:hover { background: var(--hh-gold); color: var(--hh-navy); }
.hh-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.10);
    padding-block: 1.25rem;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem;
    font-size: 0.85rem; color: #8f9bb3;
}
.hh-footer-bottom .links { display: flex; gap: 1.5rem; }
.hh-footer-bottom .links a { color: #8f9bb3; text-decoration: none; }
.hh-footer-bottom .links a:hover { color: var(--hh-gold-soft); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 992px) {
    .hh-cards { grid-template-columns: repeat(2, 1fr); }
    .hh-cta { grid-template-columns: 1fr; }
    .hh-stats { flex-direction: row; flex-wrap: wrap; gap: 1.5rem 2.5rem; border-left: 0; border-top: 1px solid rgba(255,255,255,0.14); padding-left: 0; padding-top: 1.5rem; }
    .hh-footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
    .hh-hero { display: flex; flex-direction: column-reverse; }
    .hh-hero-media { position: relative; inset: auto; width: 100%; height: 230px; }
    .hh-hero-media::after { background: linear-gradient(0deg, var(--hh-navy) 0%, rgba(15,30,61,0) 55%); }
    .hh-hero-inner { min-height: auto; }
    .hh-hero-copy { max-width: 100%; }
    .hh-split, .hh-steps-grid { grid-template-columns: 1fr; }
    .hh-split.is-reverse .hh-split-media { order: 0; }
    /* Stacked: the photo follows the heading, before the step cards */
    .hh-steps-intro { gap: 1.5rem; }
    .hh-cards { grid-template-columns: 1fr; }
    .hh-footer-top { grid-template-columns: 1fr; }
    .hh-footer-bottom { flex-direction: column; }
}

/* ============================================================
   Signed-in only: white panels used in place of the marketing
   bands — a message panel and a two-up legacy card.
   ============================================================ */
.hh-panel {
    background: var(--hh-surface);
    border-radius: var(--hh-radius);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: var(--hh-shadow-sm);
}

/* Copy on the left, photograph on the right, split by a dotted rule */
.hh-message {
    display: grid;
    grid-template-columns: 1.3fr 0.85fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}
.hh-message-copy { border-right: 1px dashed var(--hh-line); padding-right: clamp(1rem, 3vw, 2.5rem); }
.hh-message-copy .hh-h2 {
    margin-bottom: 1rem;
    font-size: clamp(1.6rem, 3vw, 2.75rem);
    line-height: 1.2;
}
.hh-message-copy .hh-btn { margin-top: 1.75rem; }
.hh-message-media img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--hh-radius); display: block;
}

/* Two legacy stories side by side, each with its photograph on top */
.hh-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
.hh-duo article { display: flex; flex-direction: column; }
.hh-duo img {
    width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
    border-radius: var(--hh-radius); display: block; margin-bottom: 1.5rem;
}
.hh-duo .hh-h2 { margin-bottom: 0.75rem; }
.hh-duo .hh-checks { margin-bottom: 0; }

/* ============================================================
   In-app variant: the landing rendered inside the authenticated
   sidebar shell (post-login Home). Sections drop their full-bleed
   bands and sit on the app's light background.
   ============================================================ */
.hh-in-app .hh-container { padding-inline: 0; max-width: none; }
.hh-in-app .hh-offer,
.hh-in-app .hh-steps-wrap,
.hh-in-app .hh-cta-wrap { background: transparent; }
/* Here the hero is a rounded card, not a full-bleed band — it keeps its
   navy ground and the copy shares the width with the photograph. */
.hh-in-app .hh-hero { border-radius: var(--hh-radius); overflow: hidden; }
.hh-in-app .hh-hero-inner { min-height: clamp(300px, 26vw, 400px); }
.hh-in-app .hh-hero-copy {
    padding-inline: clamp(1.5rem, 3vw, 2.75rem);
    max-width: 50%;
}
.hh-in-app .hh-hero-copy h1 { font-size: clamp(1.6rem, 2.4vw, 2.25rem); }
.hh-in-app .hh-hero-media { width: 52%; }
/* The design sets this image fill to 70%, letting the navy read through */
.hh-in-app .hh-hero-media img { opacity: 0.7; }
.hh-in-app .hh-hero-media::after {
    background: linear-gradient(90deg,
        var(--hh-navy) 0%,
        rgba(4, 24, 61, 0.55) 22%,
        rgba(4, 24, 61, 0) 55%);
}
.hh-in-app .hh-section { padding-block: clamp(1.75rem, 4vw, 3rem); }
.hh-in-app .hh-cta-wrap { padding-bottom: clamp(1.75rem, 4vw, 3rem); }

/* ============================================================
   Mobile overrides for the signed-in panels. These must come after
   the base .hh-message / .hh-duo rules above, or the cascade would
   leave them two-column on small screens.
   ============================================================ */
@media (max-width: 760px) {
    .hh-message, .hh-duo { grid-template-columns: 1fr; }
    .hh-message-copy { border-right: 0; padding-right: 0; }
    .hh-duo article + article { padding-top: 1.5rem; border-top: 1px solid var(--hh-line); }
    .hh-in-app .hh-hero-copy { max-width: 100%; }
    .hh-in-app .hh-hero-media { width: 100%; }
}

/* ============================================================
   Plans. A grid of storage sizes within each level, since the
   levels differ by size alone and nothing else.
   ============================================================ */
.hh-plan-level { margin-block: clamp(1.5rem, 3vw, 2.5rem); }
.hh-plan-level > h2 { margin-bottom: 0.75rem; }

.hh-plan-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.hh-plan-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.25rem;
    border: 1px solid var(--hh-line);
    border-radius: 12px;
    background: #fff;
}

.hh-plan-card > h3 { margin: 0; font-size: 1.5rem; }
.hh-plan-card .hh-btn { margin-top: auto; align-self: flex-start; }

.hh-plan-name { margin: 0; color: var(--hh-muted, #5a6473); }
.hh-plan-price { margin: 0.35rem 0 0; font-size: 1.25rem; font-weight: 600; }
.hh-plan-note { margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--hh-muted, #5a6473); }
.hh-plan-current { margin: 0 0 0.5rem; font-weight: 600; }

/* The plan already paid for, so it reads as a statement rather than an offer. */
.hh-plan-card.is-current { border-color: var(--hh-gold, #c9a227); border-width: 2px; }

/* ============================================================
   Subscription tab: the summary figures and the payment history.
   ============================================================ */
.hh-sub-summary {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-block: 1rem 1.25rem;
}

.hh-sub-label { font-size: 0.8125rem; color: var(--hh-muted, #5a6473); }
.hh-sub-value { font-size: 1.125rem; font-weight: 600; }
.hh-sub-note { font-size: 0.875rem; color: var(--hh-muted, #5a6473); }
.hh-sub-heading { margin-top: 2rem; }

.hh-sub-table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; }
.hh-sub-table th,
.hh-sub-table td { padding: 0.6rem 0.5rem; text-align: left; border-bottom: 1px solid var(--hh-line); }
.hh-sub-table th { font-size: 0.8125rem; color: var(--hh-muted, #5a6473); font-weight: 600; }
.hh-sub-table td:last-child,
.hh-sub-table th:last-child { text-align: right; white-space: nowrap; }

/* A table of four columns will not fit a phone, so it scrolls sideways
   rather than squeezing the dates onto three lines each. */
@media (max-width: 640px) {
    .hh-sub-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ============================================================
   A row of buttons closing a page. Kept clear of whatever sits
   above it, since a button pressed against a banner reads as part
   of it, and spaced from its neighbours so two never touch.
   ============================================================ */
.hh-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-start: 1.75rem;
}

/* A plan that cannot hold what the member already stores. Stated, not
   forbidden: they may intend to clear space, and the choice is theirs. */
.hh-plan-warn {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--hh-danger, #8a1f1f);
}

/* ============================================================
   Vault usage, and the panel for freeing space when a member is
   over their allowance. Rare, but it is the moment they are most
   likely to delete something they meant to keep, so it is plain
   and slow rather than clever.
   ============================================================ */
.hh-vault-usage { margin-bottom: 1.25rem; }
.hh-storage-bar.is-over > span { background: var(--hh-danger, #8a1f1f); }

.hh-free-space { margin-top: 1.25rem; }
.hh-free-space > h3 { margin: 0 0 0.5rem; }

.hh-free-table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; }
.hh-free-table th,
.hh-free-table td { padding: 0.5rem; text-align: left; border-bottom: 1px solid var(--hh-line); }
.hh-free-table th { font-size: 0.8125rem; color: var(--hh-muted, #5a6473); font-weight: 600; }
.hh-free-table td:last-child,
.hh-free-table th:last-child { text-align: right; white-space: nowrap; }
.hh-free-table td:first-child,
.hh-free-table th:first-child { width: 2rem; }

.hh-free-counter { margin: 0.75rem 0 0; font-weight: 600; }