/* ==========================================================================
   iThank.uk refresh — "Plum & Paper"
   Load after styles/bootstrap.css. Replaces styles/public.css on refreshed pages.
   Fonts: Fraunces (display), Figtree (UI/body), Caveat (handwriting accents).
   ========================================================================== */

:root {
    /* Brand tokens */
    --ith-plum: #541388;          /* logo colour - primary brand */
    --ith-plum-hover: #440f6f;
    --ith-plum-deep: #2b1140;     /* dark sections */
    --ith-plum-soft: #f1e8f7;     /* tints, icon wells */
    --ith-paper: #fbf8f3;         /* page background */
    --ith-cream: #f4ece0;         /* alternate sections (evolved from old #f1e9da) */
    --ith-ink: #241b2f;           /* body text */
    --ith-muted: #685e72;         /* secondary text */
    --ith-line: #e6ddd0;          /* hairlines */
    --ith-rose: #c23b5b;          /* accent - wax seal / highlights */
    --ith-gold: #e9b949;          /* ribbon - small highlights on dark only */

    --ith-font-display: 'Fraunces', Georgia, serif;
    --ith-font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ith-font-hand: 'Caveat', cursive;

    --ith-radius: 14px;
    --ith-radius-lg: 22px;
    --ith-shadow: 0 1px 2px rgba(43, 17, 64, .06), 0 8px 24px rgba(43, 17, 64, .08);
    --ith-shadow-lg: 0 2px 4px rgba(43, 17, 64, .06), 0 24px 48px rgba(43, 17, 64, .16);

    /* Remap Bootstrap's semantic colours so existing utility classes follow the new palette */
    --bs-primary: var(--ith-plum);
    --bs-primary-rgb: 84, 19, 136;
    --bs-secondary: var(--ith-plum-deep);
    --bs-secondary-rgb: 43, 17, 64;
    --bs-success: var(--ith-gold);
    --bs-success-rgb: 233, 185, 73;
    --bs-danger: var(--ith-rose);
    --bs-danger-rgb: 194, 59, 91;
    --bs-warning-rgb: 244, 236, 224;
    --bs-info-rgb: 244, 236, 224;
    --bs-light-rgb: 251, 248, 243;
    --bs-dark-rgb: 36, 27, 47;
    --bs-body-color: var(--ith-ink);
    --bs-body-bg: var(--ith-paper);
    --bs-body-font-family: var(--ith-font-body);
    --bs-link-color: var(--ith-plum);
    --bs-link-color-rgb: 84, 19, 136;
    --bs-link-hover-color: var(--ith-rose);
    --bs-link-hover-color-rgb: 194, 59, 91;
    --bs-border-color: var(--ith-line);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
    font-family: var(--ith-font-body);
    color: var(--ith-ink);
    background: var(--ith-paper);
    padding-top: 72px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .ith-display {
    font-family: var(--ith-font-display);
    font-optical-sizing: auto;
    font-weight: 600;
    color: var(--ith-plum-deep);
    letter-spacing: -0.015em;
    line-height: 1.1;
}
h4, h5, h6 { font-family: var(--ith-font-body); font-weight: 700; color: var(--ith-plum-deep); }

.lead { font-size: 1.15rem; line-height: 1.6; color: var(--ith-muted); }
.ith-hand { font-family: var(--ith-font-hand); }

.ith-eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ith-rose);
    margin-bottom: .75rem;
}

.ith-section { padding: 96px 0; }
.ith-section-sm { padding: 64px 0; }
@media (max-width: 767px) {
    .ith-section { padding: 64px 0; }
    .ith-section-sm { padding: 48px 0; }
}
.ith-section-title { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: .75rem; }
.bg-cream { background: var(--ith-cream); }
.bg-plum-deep { background: var(--ith-plum-deep); }

a { text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--ith-gold); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 999px;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: .6rem;
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(84, 19, 136, .25);
    transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn-lg { --bs-btn-padding-x: 1.6rem; --bs-btn-padding-y: .8rem; --bs-btn-font-size: 1.05rem; --bs-btn-border-radius: 999px; }
.btn:hover { transform: translateY(-1px); }

.btn-primary {
    --bs-btn-bg: var(--ith-plum);
    --bs-btn-border-color: var(--ith-plum);
    --bs-btn-hover-bg: var(--ith-plum-hover);
    --bs-btn-hover-border-color: var(--ith-plum-hover);
    --bs-btn-active-bg: var(--ith-plum-deep);
    --bs-btn-active-border-color: var(--ith-plum-deep);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
}
.btn-outline-primary {
    --bs-btn-color: var(--ith-plum);
    --bs-btn-border-color: var(--ith-plum);
    --bs-btn-hover-bg: var(--ith-plum);
    --bs-btn-hover-border-color: var(--ith-plum);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ith-plum-hover);
    --bs-btn-active-color: #fff;
    border-width: 1.5px;
}
.btn-secondary {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--ith-plum-deep);
    --bs-btn-border-color: var(--ith-line);
    --bs-btn-hover-bg: var(--ith-cream);
    --bs-btn-hover-color: var(--ith-plum-deep);
    --bs-btn-hover-border-color: var(--ith-line);
}
.btn-accent, .btn-danger {
    --bs-btn-bg: var(--ith-rose);
    --bs-btn-border-color: var(--ith-rose);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #a8304d;
    --bs-btn-hover-border-color: #a8304d;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #8f2841;
    --bs-btn-active-color: #fff;
}
.btn-success {
    --bs-btn-bg: var(--ith-gold);
    --bs-btn-border-color: var(--ith-gold);
    --bs-btn-color: var(--ith-plum-deep);
    --bs-btn-hover-bg: #dba634;
    --bs-btn-hover-border-color: #dba634;
    --bs-btn-hover-color: var(--ith-plum-deep);
}
.btn-light {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-color: var(--ith-plum-deep);
    --bs-btn-hover-bg: var(--ith-cream);
    --bs-btn-hover-border-color: var(--ith-cream);
}
.btn-outline-light { --bs-btn-hover-color: var(--ith-plum-deep); border-width: 1.5px; }

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */
.ith-nav {
    background: rgba(251, 248, 243, .92);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--ith-line);
    min-height: 72px;
    padding-top: .25rem;
    padding-bottom: .25rem;
}
.ith-brand {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    text-decoration: none;
}
.ith-brand img { height: 56px; width: 56px; margin: -6px -4px -6px -8px; mix-blend-mode: multiply; } /* drops the PNG's white background */
.ith-wordmark {
    font-family: var(--ith-font-body);
    font-weight: 800;
    font-size: 1.45rem;
    letter-spacing: -0.02em;
    color: var(--ith-plum);
}
.ith-nav .nav-link {
    color: var(--ith-ink);
    font-weight: 500;
    padding: .5rem .9rem !important;
    border-radius: 999px;
}
.ith-nav .nav-link:hover,
.ith-nav .nav-link:focus,
.ith-nav .nav-link.show,
.ith-nav .nav-link.active { color: var(--ith-plum); background: var(--ith-plum-soft); }
.ith-nav .navbar-toggler {
    border: 0;
    color: var(--ith-plum);
    font-size: 1.25rem;
    padding: .5rem .75rem;
}
.ith-nav .navbar-toggler:focus { box-shadow: none; }
.ith-nav .ith-nav-mobile-link { font-size: .95rem; color: var(--ith-plum); }

.dropdown-menu {
    --bs-dropdown-border-color: var(--ith-line);
    --bs-dropdown-border-radius: var(--ith-radius);
    --bs-dropdown-link-color: var(--ith-ink);
    --bs-dropdown-link-hover-bg: var(--ith-plum-soft);
    --bs-dropdown-link-hover-color: var(--ith-plum);
    --bs-dropdown-link-active-bg: var(--ith-plum);
    box-shadow: var(--ith-shadow);
    padding: .5rem;
}
.dropdown-item { border-radius: 8px; white-space: normal; }
.dropdown-groupheader { font-weight: 600; color: var(--ith-plum-deep); }
.dropdown-contents { font-style: normal !important; font-size: .925rem; color: var(--ith-muted); }

@media (max-width: 991px) {
    .ith-nav .navbar-collapse { padding: .5rem 0 1rem; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.ith-hero {
    position: relative;
    padding: 72px 0 96px;
    background:
        radial-gradient(1200px 500px at 90% -10%, var(--ith-plum-soft) 0%, transparent 60%),
        var(--ith-paper);
    overflow: hidden;
}
.ith-hero h1 {
    font-size: clamp(2.5rem, 5.6vw, 4.125rem);
    font-weight: 600;
    margin-bottom: 1.25rem;
}
.ith-hero h1 em {
    font-style: italic;
    font-weight: 400;
    color: var(--ith-plum);
}
.ith-hero .lead { font-size: 1.2rem; max-width: 34rem; }

.ith-start {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 36rem;
    margin-top: 2rem;
}
@media (max-width: 575px) { .ith-start { grid-template-columns: 1fr; } }
.ith-start-card {
    background: #fff;
    border: 1px solid var(--ith-line);
    border-radius: var(--ith-radius);
    padding: 1.1rem 1.1rem 1.2rem;
    box-shadow: var(--ith-shadow);
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.ith-start-card .ith-step-num {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ith-rose);
}
.ith-start-card h2 { font-family: var(--ith-font-body); font-size: 1.1rem; font-weight: 700; margin: 0; letter-spacing: 0; }
.ith-start-card p { font-size: .9rem; color: var(--ith-muted); margin: 0 0 .85rem; }
.ith-start-card .btn { margin-top: auto; }

.ith-reassure {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    font-size: .925rem;
    color: var(--ith-muted);
}
.ith-reassure i { color: var(--ith-plum); margin-right: .35rem; }

/* Hero visual: photo + floating personalised card */
.ith-hero-visual { position: relative; padding: 0 0 48px 0; }
.ith-hero-photo {
    border-radius: var(--ith-radius-lg);
    overflow: hidden;
    box-shadow: var(--ith-shadow-lg);
    aspect-ratio: 4 / 3.4;
}
.ith-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; display: block; }

/* Two guests' cards from one design, over the hero photo (drawn by scripts/cardstyle.js) */
.ith-herocards {
    position: absolute;
    left: -36px;
    bottom: 0;
    width: min(360px, 80%);
    aspect-ratio: 740 / 525;
}
.ith-herocard {
    position: absolute;
    inset: 0;
    background: #fffdf9;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--ith-shadow-lg);
}
.ith-herocard svg { display: block; width: 100%; height: 100%; }
.ith-herocard-back { transform: translate(24%, -34%) rotate(5deg); }
.ith-herocard-back:empty { display: none; }
.ith-herocard-front { transform: rotate(-3deg); }
.ith-herocard-fallback {
    font-family: var(--ith-font-hand);
    font-size: 1.35rem;
    line-height: 1.2;
    color: var(--ith-plum-deep);
    margin: 0;
    padding: 1.3rem 1.5rem;
}
.ith-herocard-fallback mark {
    background: linear-gradient(transparent 55%, rgba(233, 185, 73, .55) 55%);
    color: inherit;
    padding: 0 .1em;
}
.ith-herocards-tag {
    position: absolute;
    right: 10px;
    bottom: -16px;
    transform: rotate(-3deg);
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--ith-plum);
    background: var(--ith-plum-soft);
    border-radius: 999px;
    padding: .3rem .75rem;
    box-shadow: 0 2px 8px rgba(43, 17, 64, .14);
}
@media (max-width: 991px) {
    .ith-hero { padding: 40px 0 64px; }
    .ith-hero-visual { margin-top: 48px; }
    .ith-herocards { left: 12px; }
}
@media (max-width: 575.98px) {
    .ith-herocards { width: 70%; }
}

/* Returning visitor bar (shown by scripts/index.js) */
.ith-resume {
    background: var(--ith-plum-deep);
    color: #fff;
    border-radius: var(--ith-radius);
    padding: .9rem 1.25rem;
    margin-bottom: 2rem;
}
.ith-resume p { color: rgba(255, 255, 255, .8); }
.ith-resume #eventname { color: #fff; font-weight: 700; }

/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */
.ith-steps { counter-reset: step; }
.ith-step {
    position: relative;
    padding: 2rem 1.75rem;
    background: #fff;
    border: 1px solid var(--ith-line);
    border-radius: var(--ith-radius-lg);
    height: 100%;
}
.ith-step-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ith-plum);
    color: #fff;
    font-family: var(--ith-font-display);
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 1.25rem;
}
.ith-step h3 { font-size: 1.5rem; margin-bottom: .5rem; }
.ith-step p { color: var(--ith-muted); margin: 0; }

/* --------------------------------------------------------------------------
   Products
   -------------------------------------------------------------------------- */
.ith-product {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.75rem;
    background: var(--ith-paper);
    border: 1px solid var(--ith-line);
    border-radius: var(--ith-radius-lg);
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ith-product:hover { transform: translateY(-3px); box-shadow: var(--ith-shadow); border-color: transparent; color: inherit; }
.ith-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--ith-plum-soft);
    color: var(--ith-plum);
    font-size: 1.3rem;
    margin-bottom: 1.25rem;
}
.ith-product h3 { font-size: 1.4rem; margin-bottom: .4rem; }
.ith-product p { color: var(--ith-muted); font-size: .95rem; }
.ith-product .ith-more { margin-top: auto; font-weight: 600; color: var(--ith-plum); font-size: .95rem; }
.ith-product:hover .ith-more { color: var(--ith-rose); }
.ith-badge-free {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--ith-rose);
    color: #fff;
    border-radius: 999px;
    padding: .2rem .6rem;
    vertical-align: middle;
    margin-left: .4rem;
}

/* --------------------------------------------------------------------------
   Pricing band
   -------------------------------------------------------------------------- */
.ith-pricing { background: var(--ith-plum-deep); color: #fff; }
.ith-pricing h2 { color: #fff; }
.ith-pricing .lead { color: rgba(255, 255, 255, .75); }
.ith-price {
    border-left: 2px solid rgba(255, 255, 255, .15);
    padding: .25rem 0 .25rem 1.25rem;
}
.ith-price-figure {
    font-family: var(--ith-font-display);
    font-size: clamp(2.5rem, 5vw, 3.25rem);
    font-weight: 600;
    line-height: 1;
    color: var(--ith-gold);
}
.ith-price-figure small { font-size: .45em; font-family: var(--ith-font-body); font-weight: 600; color: rgba(255, 255, 255, .7); margin-left: .25rem; }
.ith-price-label { font-weight: 600; margin-top: .5rem; }
.ith-price-note { font-size: .875rem; color: rgba(255, 255, 255, .65); }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.ith-quote {
    margin: 0;
    height: 100%;
    padding: 1.75rem;
    background: #fff;
    border-radius: var(--ith-radius-lg);
    border: 1px solid var(--ith-line);
    display: flex;
    flex-direction: column;
}
.ith-quote::before {
    content: "\201C";
    font-family: var(--ith-font-display);
    font-size: 3.5rem;
    line-height: .8;
    color: var(--ith-rose);
    height: 1.75rem;
}
.ith-quote blockquote {
    font-family: var(--ith-font-display);
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--ith-plum-deep);
    margin: 0 0 1.25rem;
}
.ith-quote figcaption { margin-top: auto; font-size: .9rem; color: var(--ith-muted); }
.ith-quote figcaption strong { color: var(--ith-ink); }

/* --------------------------------------------------------------------------
   Story
   -------------------------------------------------------------------------- */
/* The same picture as three different cards (drawn by scripts/cardstyle.js) */
.ith-stylecards { position: relative; aspect-ratio: 5 / 4; max-width: 560px; margin: 0 auto; }
.ith-stylecard { position: absolute; width: 41%; margin: 0; }
.ith-stylecard > div {
    aspect-ratio: 740 / 1050;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--ith-shadow-lg);
}
.ith-stylecard svg { display: block; width: 100%; height: 100%; }
.ith-stylecard-1 { left: 0; top: 11%; transform: rotate(-6deg); }
.ith-stylecard-2 { left: 29.5%; top: 2%; z-index: 2; }
.ith-stylecard-3 { left: 59%; top: 11%; transform: rotate(6deg); z-index: 1; }
/* the layout's name, as a label on top of each card */
.ith-stylecard figcaption {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 999px;
    padding: .25rem .8rem;
    box-shadow: 0 2px 8px rgba(43, 17, 64, .16);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ith-plum);
}
.ith-story p { color: var(--ith-muted); font-size: 1.05rem; line-height: 1.7; }
.ith-story p.ith-story-lede { font-family: var(--ith-font-display); font-size: 1.5rem; line-height: 1.35; color: var(--ith-plum-deep); }

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */
.ith-cta {
    background: var(--ith-plum);
    background-image: radial-gradient(600px 300px at 100% 0%, rgba(255, 255, 255, .12), transparent 70%);
    border-radius: var(--ith-radius-lg);
    padding: 3.5rem 2rem;
    color: #fff;
}
.ith-cta h2 { color: #fff; }
.ith-cta p { color: rgba(255, 255, 255, .8); }

/* --------------------------------------------------------------------------
   Feature pages (features_refresh.php)
   -------------------------------------------------------------------------- */
.ith-pagehead {
    padding: 48px 0 56px;
    background:
        radial-gradient(1000px 420px at 95% -20%, var(--ith-plum-soft) 0%, transparent 60%),
        var(--ith-paper);
    border-bottom: 1px solid var(--ith-line);
}
.ith-pagehead h1 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); max-width: 22ch; margin-bottom: 0; }

.ith-crumbs {
    --bs-breadcrumb-divider-color: var(--ith-muted);
    --bs-breadcrumb-item-active-color: var(--ith-muted);
    font-size: .875rem;
    margin-bottom: 1.5rem;
}
.ith-crumbs a { color: var(--ith-plum); text-decoration: none; }
.ith-crumbs a:hover { text-decoration: underline; }

.ith-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 2rem;
    padding: 0;
    list-style: none;
}
.ith-pills a {
    display: inline-block;
    padding: .4rem .95rem;
    border: 1px solid var(--ith-line);
    border-radius: 999px;
    background: #fff;
    color: var(--ith-ink);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.ith-pills a:hover { border-color: var(--ith-plum); color: var(--ith-plum); }
.ith-pills a[aria-current="page"] { background: var(--ith-plum); border-color: var(--ith-plum); color: #fff; }

.ith-prose { font-size: 1.075rem; line-height: 1.75; color: var(--ith-ink); max-width: 40rem; }
.ith-prose p { margin-bottom: 1.15rem; }
.ith-prose p.lead { font-size: 1.25rem; line-height: 1.6; color: var(--ith-plum-deep); }
.ith-prose q { quotes: "\2018" "\2019"; font-weight: 600; color: var(--ith-plum); }
.ith-prose h2 { font-size: clamp(1.75rem, 3.4vw, 2.4rem); margin-bottom: 1.25rem; }

/* Generated card examples from images/spotlights/spotlightcreator.php */
.ith-specimen {
    display: block;
    padding: 1.5rem 1.5rem 1rem;
    background: #fff;
    border: 1px solid var(--ith-line);
    border-radius: var(--ith-radius-lg);
    box-shadow: var(--ith-shadow);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.ith-specimen:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: var(--ith-shadow-lg); }
.ith-specimen svg { display: block; width: 100%; height: auto; }
/* signed-in initials in the public header (scripts/sessioncheck.js) */
.ith-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ith-plum);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .03em;
    vertical-align: middle;
}
.nav-link:hover .ith-avatar, .nav-link:focus-visible .ith-avatar { background: var(--ith-plum-deep); }

/* the design's picture, shown until scripts/cardstyle.js draws the example card */
.ith-spot-fallback { display: block; width: 100%; aspect-ratio: 400 / 468; object-fit: cover; border-radius: 4px; }
.ith-specimen-caption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--ith-line);
    font-size: .8rem;
    color: var(--ith-muted);
}
.ith-specimen-caption i { color: var(--ith-plum); }
.modal-body .ith-specimen-full svg { display: block; width: 100%; height: auto; max-height: 80vh; }

.ith-related a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid var(--ith-line);
    border-radius: var(--ith-radius);
    color: var(--ith-ink);
    text-decoration: none;
    font-weight: 600;
    transition: border-color .15s ease, transform .15s ease;
}
.ith-related a:hover { border-color: var(--ith-plum); transform: translateY(-2px); color: var(--ith-plum); }
.ith-related .ith-icon { width: 44px; height: 44px; font-size: 1.1rem; margin: 0; flex-shrink: 0; }
.ith-related .fa-arrow-right { margin-left: auto; color: var(--ith-plum); }

/* --------------------------------------------------------------------------
   Pricing page (pricing_refresh.html)
   -------------------------------------------------------------------------- */
.ith-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem 1.75rem;
    background: #fff;
    border: 1px solid var(--ith-line);
    border-radius: var(--ith-radius-lg);
}
.ith-plan.is-featured { border: 2px solid var(--ith-plum); box-shadow: var(--ith-shadow-lg); }
.ith-plan-flag {
    position: absolute;
    top: -12px;
    left: 1.75rem;
    background: var(--ith-plum);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: .25rem .7rem;
}
.ith-plan h2 { font-family: var(--ith-font-body); font-size: 1.15rem; font-weight: 700; letter-spacing: 0; margin-bottom: .25rem; }
.ith-plan-sub { color: var(--ith-muted); font-size: .925rem; margin-bottom: 1.25rem; }
.ith-plan-price {
    font-family: var(--ith-font-display);
    font-size: 3rem;
    font-weight: 600;
    line-height: 1;
    color: var(--ith-plum-deep);
}
.ith-plan-price small { font-family: var(--ith-font-body); font-size: .9rem; font-weight: 500; color: var(--ith-muted); margin-left: .35rem; }
.ith-plan-pre { font-size: .8rem; font-weight: 600; color: var(--ith-muted); text-transform: uppercase; letter-spacing: .08em; min-height: 1.2em; }
.ith-plan ul { list-style: none; padding: 0; margin: 1.5rem 0; }
.ith-plan li { position: relative; padding-left: 1.6rem; margin-bottom: .6rem; font-size: .95rem; }
.ith-plan li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: .1rem;
    font-size: .8rem;
    color: var(--ith-plum);
}
.ith-plan .btn { margin-top: auto; }

.ith-free-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 2rem;
    margin-top: 2.5rem;
    color: var(--ith-muted);
    font-size: .95rem;
}
.ith-free-strip i { color: var(--ith-rose); margin-right: .4rem; }

/* Price table */
.ith-table-wrap {
    background: #fff;
    border: 1px solid var(--ith-line);
    border-radius: var(--ith-radius-lg);
    overflow: hidden;
}
.ith-table { margin: 0; --bs-table-bg: transparent; --bs-table-border-color: var(--ith-line); }
.ith-table th {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ith-muted);
    background: var(--ith-paper);
    padding: 1rem 1.25rem;
    white-space: nowrap;
}
.ith-table td { padding: 1.1rem 1.25rem; vertical-align: middle; }
.ith-table tbody tr:last-child td { border-bottom: 0; }
.ith-table td strong { display: block; color: var(--ith-plum-deep); }
.ith-table td span.ith-row-note { display: block; font-size: .875rem; color: var(--ith-muted); }
.ith-table .ith-num {
    font-family: var(--ith-font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--ith-plum-deep);
    text-align: right;
    white-space: nowrap;
}
.ith-table th.ith-num { font-family: var(--ith-font-body); font-size: .78rem; text-align: right; color: var(--ith-muted); }
@media (max-width: 575px) {
    .ith-table th, .ith-table td { padding: .85rem .75rem; }
    .ith-table .ith-num { font-size: 1.1rem; }
}

/* Estimator */
.ith-estimator {
    background: var(--ith-plum-deep);
    color: #fff;
    border-radius: var(--ith-radius-lg);
    padding: 2rem;
}
.ith-estimator h2 { color: #fff; }
.ith-estimator label { font-size: .85rem; font-weight: 600; color: rgba(255, 255, 255, .75); margin-bottom: .35rem; }
.ith-estimator .form-control,
.ith-estimator .form-select {
    background-color: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    border-radius: 10px;
    padding: .65rem .9rem;
}
.ith-estimator .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.ith-estimator .form-select option { color: var(--ith-ink); }
.ith-estimator .form-control:focus,
.ith-estimator .form-select:focus { border-color: var(--ith-gold); box-shadow: 0 0 0 .2rem rgba(233, 185, 73, .3); }
.ith-estimate-total {
    font-family: var(--ith-font-display);
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 600;
    line-height: 1;
    color: var(--ith-gold);
}
.ith-estimate-lines { font-size: .9rem; color: rgba(255, 255, 255, .75); margin-top: .75rem; }
.ith-estimate-lines div { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }

/* AI credit packs */
.ith-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .75rem; }
.ith-pack {
    background: #fff;
    border: 1px solid var(--ith-line);
    border-radius: var(--ith-radius);
    padding: 1rem;
    text-align: center;
}
.ith-pack-count { font-weight: 700; color: var(--ith-plum-deep); }
.ith-pack-price { font-family: var(--ith-font-display); font-size: 1.4rem; font-weight: 600; color: var(--ith-plum); }
.ith-pack-each { font-size: .78rem; color: var(--ith-muted); }

/* FAQ */
.ith-faq .accordion-item {
    background: #fff;
    border: 1px solid var(--ith-line);
    border-radius: var(--ith-radius) !important;
    margin-bottom: .75rem;
    overflow: hidden;
}
.ith-faq .accordion-button {
    font-weight: 600;
    color: var(--ith-plum-deep);
    background: #fff;
    padding: 1.1rem 1.25rem;
    box-shadow: none;
}
.ith-faq .accordion-button:not(.collapsed) { color: var(--ith-plum); background: var(--ith-plum-soft); }
.ith-faq .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(84, 19, 136, .2); }
.ith-faq .accordion-body { color: var(--ith-muted); padding: 1rem 1.25rem 1.25rem; }

/* --------------------------------------------------------------------------
   About / Contact / 404
   -------------------------------------------------------------------------- */
.ith-facts {
    background: #fff;
    border: 1px solid var(--ith-line);
    border-radius: var(--ith-radius-lg);
    padding: 1.75rem;
}
.ith-facts h2 { font-family: var(--ith-font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0; margin-bottom: 1rem; }
.ith-facts ul { list-style: none; padding: 0; margin: 0; }
.ith-facts li { display: flex; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--ith-line); font-size: .95rem; }
.ith-facts li:first-child { border-top: 0; padding-top: 0; }
.ith-facts li i { color: var(--ith-plum); width: 1.1rem; text-align: center; margin-top: .2rem; }
@media (min-width: 992px) { .ith-sticky { position: sticky; top: 96px; } }

.ith-company dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.25rem; margin: 0; font-size: .95rem; }
.ith-company dt { font-weight: 600; color: var(--ith-plum-deep); }
.ith-company dd { margin: 0; color: var(--ith-muted); }
@media (max-width: 575px) { .ith-company dl { grid-template-columns: 1fr; gap: .1rem; } .ith-company dd { margin-bottom: .6rem; } }

.ith-form-card {
    background: #fff;
    border: 1px solid var(--ith-line);
    border-radius: var(--ith-radius-lg);
    padding: 2rem;
    box-shadow: var(--ith-shadow);
}
@media (max-width: 575px) { .ith-form-card { padding: 1.25rem; } }
.ith-form-card .form-label { font-weight: 600; font-size: .9rem; color: var(--ith-plum-deep); }
.ith-form-card .form-control,
.ith-form-card .form-select {
    border-color: var(--ith-line);
    border-radius: 10px;
    padding: .7rem .9rem;
    background-color: var(--ith-paper);
}
.ith-form-card .form-control:focus,
.ith-form-card .form-select:focus { border-color: var(--ith-plum); box-shadow: 0 0 0 .2rem rgba(84, 19, 136, .15); background-color: #fff; }
.ith-form-card .bg-danger-subtle { background-color: #fbeaee !important; border-color: var(--ith-rose); }
.ith-check {
    background: var(--ith-plum-soft);
    border-radius: var(--ith-radius);
    padding: 1rem 1.1rem;
}
.ith-check #securenumber { font-weight: 700; color: var(--ith-plum); }

.alert-success { --bs-alert-bg: #eaf5ee; --bs-alert-color: #1f5a35; --bs-alert-border-color: #cfe7d7; }
.alert-danger { --bs-alert-bg: #fbeaee; --bs-alert-color: #7d2236; --bs-alert-border-color: #f2ccd5; }
.alert { border-radius: var(--ith-radius); }
.alert .card-body { padding: 0; }

.ith-404 {
    min-height: calc(100vh - 72px);
    display: flex;
    align-items: center;
    padding: 64px 0;
    background:
        radial-gradient(900px 420px at 50% 0%, var(--ith-plum-soft) 0%, transparent 65%),
        var(--ith-paper);
}
.ith-404-num {
    font-family: var(--ith-font-display);
    font-size: clamp(6rem, 18vw, 10rem);
    font-weight: 600;
    line-height: .9;
    color: var(--ith-plum);
    letter-spacing: -0.04em;
}
.ith-404-num span { display: inline-block; color: var(--ith-rose); transform: rotate(-8deg); }

/* --------------------------------------------------------------------------
   Login / Register
   -------------------------------------------------------------------------- */
.ith-auth {
    min-height: calc(100vh - 72px);
    padding: 56px 0 80px;
    background:
        radial-gradient(1000px 420px at 0% 0%, var(--ith-plum-soft) 0%, transparent 60%),
        var(--ith-paper);
}
.ith-auth h1 { font-size: clamp(2.25rem, 4.5vw, 3rem); }
.ith-auth .input-group-text {
    background: var(--ith-paper);
    border-color: var(--ith-line);
    color: var(--ith-plum);
    min-width: 46px;
    justify-content: center;
}
.ith-auth .input-group .form-control { border-color: var(--ith-line); padding: .7rem .9rem; }
.ith-auth .input-group .form-control:focus { border-color: var(--ith-plum); box-shadow: none; }
.ith-auth .input-group:focus-within { box-shadow: 0 0 0 .2rem rgba(84, 19, 136, .15); border-radius: 10px; }
.ith-auth .input-group > :first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.ith-auth .input-group > :last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
#viewpassword { cursor: pointer; }
.ith-auth .form-check-input:checked { background-color: var(--ith-plum); border-color: var(--ith-plum); }
.ith-auth .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(84, 19, 136, .2); border-color: var(--ith-plum); }

.ith-or {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.75rem 0 1.25rem;
    color: var(--ith-muted);
    font-size: .85rem;
}
.ith-or::before, .ith-or::after { content: ""; flex: 1; height: 1px; background: var(--ith-line); }
.ith-sso { text-align: center; }
.ith-sso p { font-size: .8rem; color: var(--ith-muted); margin: .85rem 0 0; }

.ith-auth-aside {
    background: var(--ith-plum-deep);
    background-image: radial-gradient(500px 260px at 100% 0%, rgba(255, 255, 255, .1), transparent 70%);
    color: rgba(255, 255, 255, .8);
    border-radius: var(--ith-radius-lg);
    padding: 2.25rem 2rem;
    height: 100%;
}
.ith-auth-aside h2 { color: #fff; font-size: 1.75rem; margin-bottom: 1.25rem; }
.ith-auth-aside ul { list-style: none; padding: 0; margin: 0 0 1.75rem; }
.ith-auth-aside li { display: flex; gap: .75rem; padding: .45rem 0; }
.ith-auth-aside li i { color: var(--ith-gold); margin-top: .3rem; width: 1rem; }
.ith-game {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--ith-radius);
    background: rgba(255, 255, 255, .07);
    color: #fff;
    text-decoration: none;
    margin-top: 1.25rem;
}
.ith-game:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.ith-game img { width: 72px; height: auto; border-radius: 8px; background: #fff; }
.ith-game small { display: block; color: rgba(255, 255, 255, .65); }

/* Loading spinner (shown while the session check runs) */
.ith-loading { min-height: 60vh; display: grid; place-items: center; }
.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--ith-plum-soft);
    border-top-color: var(--ith-plum);
    border-radius: 50%;
    animation: ith-spin .8s infinite linear;
}
@keyframes ith-spin { to { transform: rotate(360deg); } }

/* Toast-style messages used by login.js / register.js / contact.js */
#messagelog {
    z-index: 2000;
    top: 84px !important;
    max-width: 36rem;
    border-radius: var(--ith-radius) !important;
    box-shadow: var(--ith-shadow-lg);
}
#messagelog p { margin: .15rem 0; }
#messagelog.bg-danger { background: var(--ith-rose) !important; }
#messagelog.bg-primary { background: var(--ith-plum) !important; }
#messagelog.bg-success { background: #2f7a4a !important; }

/* --------------------------------------------------------------------------
   Legal pages (also rendered inside the terms/privacy modals)
   -------------------------------------------------------------------------- */
.ith-legal { font-size: 1rem; line-height: 1.75; max-width: 46rem; }
.ith-legal h2 {
    font-size: 1.35rem;
    margin: 2.25rem 0 .75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ith-line);
}
.ith-legal h3 { font-size: 1rem; margin: 1.25rem 0 .5rem; }
.ith-legal ul { padding-left: 1.25rem; }
.ith-legal li { margin-bottom: .5rem; }
.ith-legal li::marker { color: var(--ith-plum); }
.ith-legal-meta {
    display: inline-block;
    font-size: .875rem;
    background: var(--ith-plum-soft);
    color: var(--ith-plum-deep);
    border-radius: 999px;
    padding: .3rem .85rem;
    margin-bottom: 1.5rem;
}
.modal-body .ith-legal h2 { font-size: 1.15rem; margin-top: 1.5rem; padding-top: 1rem; }
.ith-toc { font-size: .9rem; }
.ith-toc ol { padding-left: 1.2rem; margin: 0; }
.ith-toc li { margin-bottom: .35rem; }
.ith-toc a { color: var(--ith-ink); text-decoration: none; }
.ith-toc a:hover { color: var(--ith-plum); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Card browser (browsehandler.php)
   -------------------------------------------------------------------------- */
.ith-search .form-control { border-color: var(--ith-line); border-radius: 999px 0 0 999px; padding: .65rem 1.1rem; background: #fff; }
.ith-search .form-control:focus { border-color: var(--ith-plum); box-shadow: none; }
.ith-search .btn { border-radius: 0 999px 999px 0; }
.ith-design-grid .ith-specimen { padding: 1rem 1rem .75rem; height: 100%; }
.ith-design-name { font-size: .85rem; font-weight: 600; color: var(--ith-plum-deep); margin-top: .6rem; text-align: center; }

/* --------------------------------------------------------------------------
   Blog (momentsthatmatter)
   -------------------------------------------------------------------------- */
.ith-post-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--ith-line);
    border-radius: var(--ith-radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease;
}
.ith-post-card:hover { transform: translateY(-3px); box-shadow: var(--ith-shadow-lg); color: inherit; }
.ith-post-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ith-cream); }
.ith-post-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.ith-post-card:hover .ith-post-img img { transform: scale(1.03); }
.ith-post-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.6rem 1.6rem; }
.ith-post-date { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ith-rose); margin-bottom: .5rem; }
.ith-post-body h2, .ith-post-body h3 { font-size: 1.6rem; margin-bottom: .6rem; }
.ith-post-body p { color: var(--ith-muted); }
.ith-post-body .ith-more { margin-top: auto; font-weight: 600; color: var(--ith-plum); }
.ith-post-card:hover .ith-more { color: var(--ith-rose); }
@media (min-width: 992px) {
    .ith-post-card.is-lead { flex-direction: row; }
    .ith-post-card.is-lead .ith-post-img { flex: 0 0 50%; aspect-ratio: auto; min-height: 380px; }
    .ith-post-card.is-lead .ith-post-body { padding: 2.5rem; justify-content: center; }
    .ith-post-card.is-lead h2 { font-size: 2.4rem; }
}

.ith-article-head .ith-byline { font-size: .95rem; color: var(--ith-muted); margin-top: 1.25rem; }
.ith-article-head .ith-byline strong { color: var(--ith-ink); }
.ith-article-img { border-radius: var(--ith-radius-lg); box-shadow: var(--ith-shadow-lg); width: 100%; height: auto; transform: rotate(1.5deg); }
.ith-article { font-size: 1.15rem; line-height: 1.8; max-width: 40rem; margin: 0 auto; }
.ith-article p { margin-bottom: 1.4rem; }
.ith-article p.lead { font-family: var(--ith-font-display); font-size: 1.45rem; line-height: 1.5; color: var(--ith-plum-deep); }
.ith-article-ask {
    margin-top: 2.5rem;
    padding: 1.5rem 1.75rem;
    border-left: 4px solid var(--ith-rose);
    background: var(--ith-cream);
    border-radius: 0 var(--ith-radius) var(--ith-radius) 0;
    font-family: var(--ith-font-display);
    font-size: 1.35rem;
    color: var(--ith-plum-deep);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.ith-footer { background: var(--ith-plum-deep); color: rgba(255, 255, 255, .7); padding: 72px 0 32px; }
.ith-footer h3 {
    font-family: var(--ith-font-body);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ith-gold);
    margin-bottom: 1rem;
}
.ith-footer ul { list-style: none; padding: 0; margin: 0; }
.ith-footer li { margin-bottom: .45rem; }
.ith-footer a { color: rgba(255, 255, 255, .8); text-decoration: none; font-size: .925rem; }
.ith-footer a:hover { color: #fff; text-decoration: underline; }
.ith-footer .ith-wordmark { color: #fff; }
.ith-footer-base {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 48px;
    padding-top: 24px;
    font-size: .875rem;
}
.ith-social a {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    margin-right: .4rem;
    font-size: 1rem;
}
.ith-social a:hover { background: rgba(255, 255, 255, .18); text-decoration: none; }

/* --------------------------------------------------------------------------
   Modals (also restyles the cookie banner from sessioncheck.js)
   -------------------------------------------------------------------------- */
.modal-content {
    border: 0;
    border-radius: var(--ith-radius-lg);
    background: var(--ith-paper);
    box-shadow: var(--ith-shadow-lg);
}
.modal-header, .modal-footer { border-color: var(--ith-line); }
.modal-title { font-family: var(--ith-font-display); font-weight: 600; color: var(--ith-plum-deep); }

.ith-choice {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    height: 100%;
    padding: 1.5rem;
    background: #fff;
    border: 1.5px solid var(--ith-line);
    border-radius: var(--ith-radius);
    text-decoration: none;
    color: var(--ith-ink);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ith-choice:hover { border-color: var(--ith-plum); box-shadow: var(--ith-shadow); transform: translateY(-2px); color: var(--ith-ink); }
.ith-choice strong { font-size: 1.1rem; color: var(--ith-plum-deep); }
.ith-choice span { font-size: .9rem; color: var(--ith-muted); }

#CookiePrefs.alert-warning {
    background: #fff;
    border: 1px solid var(--ith-line);
    border-radius: var(--ith-radius-lg);
    box-shadow: var(--ith-shadow-lg);
    color: var(--ith-ink);
    left: 16px;
    right: 16px;
    width: auto !important;
}
#CookiePrefs h5.display-5 { font-size: 1.5rem; font-family: var(--ith-font-display); }

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}