/* ═══════════════════════════════════════════════════════════════════════════
   DIAMOND FINDER — a distinct product surface inside The Diamond Price.

   Design direction: calm, dark, single-focus. The page opens on one deep navy
   field with a slow-moving light behind it (a diamond's dispersion, not a
   generic SaaS gradient), and exactly one thing to do. Everything else -
   filters, FAQ, social proof - is quieter and further down.

   Palette is derived from the existing brand navy (#254264) rather than
   inventing a new one, so this reads as the same company's premium surface, not
   a bolt-on. Gold (#c9a227) is used only for the accent spark and eyebrow.

   Motion respects prefers-reduced-motion throughout.
   ═══════════════════════════════════════════════════════════════════════════ */

.tdpf {
    --tdpf-navy-900: #0d1b2c;
    --tdpf-navy-800: #14263c;
    --tdpf-navy-700: #1c3450;
    --tdpf-navy: #254264;
    --tdpf-gold: #c9a227;
    --tdpf-gold-soft: #e3cd8a;
    --tdpf-ink: #0f1720;
    --tdpf-muted: #6b7684;
    --tdpf-line: #e6e9ee;
    --tdpf-bg-soft: #f7f8fa;
    display: block;
}

/* ── HERO ──────────────────────────────────────────────────────────────── */
.tdpf-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(120% 140% at 50% 0%, #1c3450 0%, #14263c 45%, #0d1b2c 100%);
    padding: 88px 20px 66px;
    text-align: center;
    isolation: isolate;
}

/* Slow, wide light sweep - dispersion, not a "hero gradient". Sits behind
   content and never interferes with text contrast. */
.tdpf-hero__aurora {
    position: absolute;
    inset: -40% -20% auto -20%;
    height: 130%;
    background:
        radial-gradient(38% 42% at 22% 30%, rgba(120, 190, 255, .20) 0%, transparent 70%),
        radial-gradient(34% 38% at 78% 22%, rgba(201, 162, 39, .16) 0%, transparent 70%),
        radial-gradient(46% 46% at 52% 68%, rgba(160, 130, 255, .13) 0%, transparent 72%);
    filter: blur(28px);
    animation: tdpf-drift 22s ease-in-out infinite alternate;
    z-index: -1;
    pointer-events: none;
}
@keyframes tdpf-drift {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
    100% { transform: translate3d(4%, 3%, 0) scale(1.09); }
}

/* ── HERO VAULT ────────────────────────────────────────────────────────────
   Real stones, background keyed out, laid out as a shallow display case. Size,
   opacity and blur fall off from the centre so the row reads as depth rather
   than as nine equal thumbnails; the eye lands mid-row and the edges dissolve
   into the gradient instead of stopping at a hard crop.                      */
.tdpf-vault {
    position: relative;
    /* No negative bottom margin: the hero clips overflow, so letting the row
       sink into the edge cut the stones in half and read as a broken image
       rather than as depth. */
    margin: 48px auto 0;
    max-width: 1080px;
    display: flex; align-items: flex-end; justify-content: center;
    gap: clamp(6px, 1.6vw, 20px);
    pointer-events: none;
}
/* Pool of light the stones stand in. */
.tdpf-vault::before {
    content: ""; position: absolute; left: 50%; bottom: -6%;
    width: 78%; height: 150%; transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, rgba(150,195,255,.17) 0%, rgba(150,195,255,0) 70%);
    filter: blur(8px); z-index: -1;
}
.tdpf-vault__slot { display: flex; align-items: flex-end; justify-content: center; }
.tdpf-vault__stone {
    display: block; width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 10px 14px rgba(0,0,0,.55));
    animation: tdpf-hover 7s ease-in-out infinite alternate;
}

/* Depth falloff, centre outward (9 slots, centre = 5th). */
.tdpf-vault__slot { width: clamp(38px, 5.4vw, 74px); }
.tdpf-vault__slot:nth-child(5) { width: clamp(62px, 8.6vw, 118px); }
.tdpf-vault__slot:nth-child(4),
.tdpf-vault__slot:nth-child(6) { width: clamp(55px, 7.6vw, 104px); }
.tdpf-vault__slot:nth-child(3),
.tdpf-vault__slot:nth-child(7) { width: clamp(47px, 6.5vw, 89px); }
.tdpf-vault__slot:nth-child(2),
.tdpf-vault__slot:nth-child(8) { width: clamp(41px, 5.8vw, 79px); }

.tdpf-vault__slot:nth-child(4) .tdpf-vault__stone,
.tdpf-vault__slot:nth-child(6) .tdpf-vault__stone { opacity: .93; }
.tdpf-vault__slot:nth-child(3) .tdpf-vault__stone,
.tdpf-vault__slot:nth-child(7) .tdpf-vault__stone { opacity: .74; filter: drop-shadow(0 8px 12px rgba(0,0,0,.5)) blur(.35px); }
/* Floor on the outer pair: below roughly 0.4 a keyed stone stops reading as a
   diamond receding into the dark and starts reading as a smudge on the
   gradient. */
.tdpf-vault__slot:nth-child(2) .tdpf-vault__stone,
.tdpf-vault__slot:nth-child(8) .tdpf-vault__stone { opacity: .62; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)) blur(.8px); }
.tdpf-vault__slot:nth-child(1) .tdpf-vault__stone,
.tdpf-vault__slot:nth-child(9) .tdpf-vault__stone { opacity: .44; filter: drop-shadow(0 5px 9px rgba(0,0,0,.4)) blur(1.4px); }

/* Each stone breathes on its own phase, so the row never pulses in unison. */
.tdpf-vault__slot:nth-child(1) .tdpf-vault__stone { animation-delay: -0.0s; animation-duration: 7.5s; }
.tdpf-vault__slot:nth-child(2) .tdpf-vault__stone { animation-delay: -1.1s; animation-duration: 8.2s; }
.tdpf-vault__slot:nth-child(3) .tdpf-vault__stone { animation-delay: -2.3s; animation-duration: 6.8s; }
.tdpf-vault__slot:nth-child(4) .tdpf-vault__stone { animation-delay: -3.1s; animation-duration: 7.9s; }
.tdpf-vault__slot:nth-child(5) .tdpf-vault__stone { animation-delay: -0.7s; animation-duration: 9.1s; }
.tdpf-vault__slot:nth-child(6) .tdpf-vault__stone { animation-delay: -2.9s; animation-duration: 7.2s; }
.tdpf-vault__slot:nth-child(7) .tdpf-vault__stone { animation-delay: -1.7s; animation-duration: 8.6s; }
.tdpf-vault__slot:nth-child(8) .tdpf-vault__stone { animation-delay: -3.6s; animation-duration: 6.5s; }
.tdpf-vault__slot:nth-child(9) .tdpf-vault__stone { animation-delay: -0.4s; animation-duration: 8.9s; }

@keyframes tdpf-hover {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-7px); }
}

.tdpf-hero__inner { max-width: 860px; margin: 0 auto; }

.tdpf-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: #cbd6e4;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .13);
    padding: 7px 16px 7px 13px;
    border-radius: 999px;
    margin: 0 0 26px;
    backdrop-filter: blur(6px);
}
.tdpf-hero__spark {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--tdpf-gold);
    box-shadow: 0 0 0 0 rgba(201, 162, 39, .65);
    animation: tdpf-pulse 2.6s ease-out infinite;
}
@keyframes tdpf-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(201, 162, 39, .55); }
    70%  { box-shadow: 0 0 0 9px rgba(201, 162, 39, 0); }
    100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
}

.tdpf-hero__title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(38px, 6.4vw, 66px);
    line-height: 1.06;
    letter-spacing: -.015em;
    color: #fff;
    margin: 0 0 22px;
    text-wrap: balance;
}
.tdpf-hero__title-em {
    background: linear-gradient(96deg, #ffe9a8 0%, #f3d98a 42%, #bcd8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.tdpf-hero__lede {
    font-size: clamp(15px, 1.7vw, 18px);
    line-height: 1.65;
    color: #b8c4d4;
    max-width: 640px;
    margin: 0 auto 40px;
}
.tdpf-hero__lede strong { color: #e6edf6; font-weight: 600; }

/* ── THE INPUT (the product) ───────────────────────────────────────────── */
.tdpf-form { max-width: 720px; margin: 0 auto; }
.tdpf-form__shell {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    background: rgba(255, 255, 255, .97);
    border-radius: 16px;
    padding: 10px 10px 10px 20px;
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .1);
    transition: box-shadow .28s ease, transform .28s ease;
}
.tdpf-form__shell:focus-within {
    box-shadow: 0 28px 70px -16px rgba(0, 0, 0, .6), 0 0 0 2px var(--tdpf-gold);
    transform: translateY(-2px);
}
.tdpf-form__input {
    flex: 1 1 auto;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    font-size: 17px;
    line-height: 1.5;
    color: var(--tdpf-ink);
    padding: 12px 0;
    font-family: inherit;
    max-height: 160px;
    overflow-y: auto;
}
.tdpf-form__input::placeholder { color: #98a2b0; }

.tdpf-form__btn {
    flex: 0 0 auto;
    position: relative;
    border: none;
    border-radius: 11px;
    background: linear-gradient(180deg, #2d4f78 0%, #1d3a5c 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 26px;
    cursor: pointer;
    transition: filter .2s ease, transform .12s ease;
    white-space: nowrap;
}
.tdpf-form__btn:hover { filter: brightness(1.14); }
.tdpf-form__btn:active { transform: scale(.985); }
.tdpf-form__btn:disabled { cursor: default; filter: saturate(.6) brightness(.9); }
.tdpf-form__btn-spinner { display: none; }
.tdpf-form__btn.is-busy .tdpf-form__btn-text { visibility: hidden; }
.tdpf-form__btn.is-busy .tdpf-form__btn-spinner {
    display: block;
    position: absolute; inset: 0; margin: auto;
    width: 17px; height: 17px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tdpf-spin .7s linear infinite;
}
@keyframes tdpf-spin { to { transform: rotate(360deg); } }

/* ── example prompts ───────────────────────────────────────────────────── */
.tdpf-examples {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 9px; margin: 26px auto 0; max-width: 1000px;
}
.tdpf-examples__label {
    font-size: 12px; text-transform: uppercase; letter-spacing: .13em;
    color: #7f8da0; margin-right: 3px;
}
.tdpf-example {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .15);
    color: #d3dde9;
    font-size: 13px;
    padding: 8px 15px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
    font-family: inherit;
}
.tdpf-example:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(201, 162, 39, .6);
    color: #fff;
    transform: translateY(-1px);
}


/* ── RESULT PANEL ──────────────────────────────────────────────────────── */
.tdpf-result { background: #fff; padding: 0 20px; }
.tdpf-result__inner {
    max-width: 1080px; margin: -46px auto 0;
    background: #fff;
    border: 1px solid var(--tdpf-line);
    border-radius: 18px;
    padding: 30px 32px 28px;
    box-shadow: 0 18px 50px -22px rgba(13, 27, 44, .28);
    position: relative; z-index: 2;
    animation: tdpf-rise .42s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes tdpf-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.tdpf-result__eyebrow {
    font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: #8a6d1f; margin: 0 0 13px;
}
.tdpf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tdpf-chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: #f3f6fa; border: 1px solid #dde4ed; border-radius: 999px;
    padding: 7px 9px 7px 15px; font-size: 13.5px; font-weight: 600; color: var(--tdpf-navy);
    animation: tdpf-pop .3s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes tdpf-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.tdpf-chip__x {
    border: none; background: transparent; cursor: pointer; color: #98a4b4;
    font-size: 16px; line-height: 1; padding: 0 2px;
}
.tdpf-chip__x:hover { color: #b3441c; }

.tdpf-result__count {
    margin-top: 20px;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 34px; font-weight: 600; color: var(--tdpf-navy);
    letter-spacing: -.01em;
}
/* Two totals when a request resolves to both products. The second is set
   smaller and lighter so the line reads as one count with an addendum rather
   than two competing headlines - but it is present, because printing only the
   diamond figure as "matches" would describe a set that isn't on the page. */
.tdpf-result__count-sec { font-size: .62em; color: var(--tdpf-muted); font-weight: 500; }

.tdpf-reasoning { margin-top: 6px; }
.tdpf-reason {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 13.5px; line-height: 1.62; color: #56606e;
    padding: 9px 0; border-bottom: 1px solid #f1f3f6;
}
.tdpf-reason:last-child { border-bottom: none; }
.tdpf-reason::before {
    content: ''; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%;
    background: var(--tdpf-gold); margin-top: 8px;
}
.tdpf-reason--warn { color: #8a6d1f; }
.tdpf-reason--warn::before { background: #d99b1c; }

.tdpf-result__actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px;
}
.tdpf-cta {
    display: inline-block; padding: 13px 26px; border-radius: 10px;
    background: var(--tdpf-navy); color: #fff; text-decoration: none;
    font-size: 14.5px; font-weight: 600;
    transition: filter .18s ease, transform .12s ease;
}
.tdpf-cta:hover { filter: brightness(1.13); color: #fff; transform: translateY(-1px); }
.tdpf-cta--ghost { background: #fff; color: var(--tdpf-navy); border: 1px solid #cbd5e1; }
.tdpf-cta--ghost:hover { background: var(--tdpf-bg-soft); color: var(--tdpf-navy); }
.tdpf-restart {
    background: none; border: none; color: var(--tdpf-muted); font-size: 13.5px;
    text-decoration: underline; cursor: pointer; font-family: inherit;
}

/* ── MANUAL FILTERS (progressive disclosure) ───────────────────────────── */
.tdpf-manual { background: #fff; padding: 30px 20px 0; }
.tdpf-manual__inner { max-width: 1080px; margin: 0 auto; }
.tdpf-manual__details {
    border: 1px solid var(--tdpf-line); border-radius: 14px; background: var(--tdpf-bg-soft);
}
.tdpf-manual__summary {
    cursor: pointer; list-style: none; padding: 18px 22px;
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.tdpf-manual__summary::-webkit-details-marker { display: none; }
.tdpf-manual__summary-text { font-size: 15px; font-weight: 600; color: var(--tdpf-navy); }
.tdpf-manual__summary-hint { font-size: 13px; color: var(--tdpf-muted); }
.tdpf-manual__summary::after {
    content: '+'; margin-left: auto; font-size: 20px; color: var(--tdpf-navy); line-height: 1;
}
.tdpf-manual__details[open] .tdpf-manual__summary::after { content: '\2212'; }
.tdpf-manual__body { padding: 0 22px 22px; }
.tdpf-manual__note { font-size: 14px; line-height: 1.65; color: #56606e; margin: 0 0 16px; }
.tdpf-manual__note a { color: var(--tdpf-navy); }

/* ── HOW IT WORKS ──────────────────────────────────────────────────────── */
.tdpf-how { background: #fff; padding: 58px 20px 8px; }
.tdpf-how__inner { max-width: 1080px; margin: 0 auto; }
.tdpf-how__title {
    font-family: 'EB Garamond', Georgia, serif; font-size: clamp(26px, 3.4vw, 36px);
    color: var(--tdpf-navy); margin: 0 0 34px; text-align: center;
}
.tdpf-how__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 26px;
}
.tdpf-how__num {
    display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em;
    color: var(--tdpf-gold); margin-bottom: 11px;
}
.tdpf-how__h { font-size: 16.5px; font-weight: 700; color: var(--tdpf-navy); margin: 0 0 8px; }
.tdpf-how__p { font-size: 14px; line-height: 1.68; color: #56606e; margin: 0; }

/* ── OTHERS SEARCHING ──────────────────────────────────────────────────── */
.tdpf-others { background: var(--tdpf-bg-soft); padding: 68px 20px; margin-top: 62px; }
.tdpf-others__inner { max-width: 1080px; margin: 0 auto; }
.tdpf-others__eyebrow {
    font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: #8a6d1f; margin: 0 0 10px;
}
.tdpf-others__title {
    font-family: 'EB Garamond', Georgia, serif; font-size: clamp(26px, 3.4vw, 36px);
    color: var(--tdpf-navy); margin: 0 0 10px;
}
.tdpf-others__sub { font-size: 14.5px; color: #56606e; margin: 0 0 30px; max-width: 620px; line-height: 1.65; }
.tdpf-others__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
.tdpf-other {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--tdpf-line); border-radius: 16px;
    overflow: hidden; text-decoration: none;
    transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.tdpf-other:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px -20px rgba(13, 27, 44, .42);
    border-color: #c3d0e0;
}

/* The stage. Identical treatment to the curated brief cards, because these are
   the same kind of object - a search with live inventory behind it - and giving
   real shopper demand a plainer card than a hand-picked example would have had
   the ranking exactly backwards.
   Stones come from the cluster's OWN logged shape/type/carat, so the imagery is
   a property of the real search, not decoration attached to it. Rendered only
   when inventory supplied a full set of four. */
.tdpf-other__stage {
    position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
    align-items: center; gap: 8px; padding: 22px 18px 24px;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(120,160,215,.20) 0%, rgba(120,160,215,0) 62%),
        linear-gradient(168deg, #22364f 0%, #16273c 58%, #121f31 100%);
}
.tdpf-other__stage::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 50%, rgba(255,255,255,0) 100%);
}
.tdpf-other__slot { display: flex; align-items: center; justify-content: center; min-width: 0; aspect-ratio: 1/1; }
.tdpf-other__img {
    display: block; width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 7px 9px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(150,190,240,.18));
    transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.tdpf-other:hover .tdpf-other__img { transform: translateY(-4px) scale(1.05); }
.tdpf-other__slot:nth-child(2) .tdpf-other__img { transition-delay: .035s; }
.tdpf-other__slot:nth-child(3) .tdpf-other__img { transition-delay: .07s; }
.tdpf-other__slot:nth-child(4) .tdpf-other__img { transition-delay: .105s; }

.tdpf-other__body { display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 17px; flex: 1; }
.tdpf-other__quote {
    font-family: 'EB Garamond', Georgia, serif; font-size: 19px; line-height: 1.38;
    color: var(--tdpf-ink); flex: 1;
}
.tdpf-other__foot {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--tdpf-line);
}
.tdpf-other__meta { font-size: 12.5px; color: var(--tdpf-muted); }
.tdpf-other__meta strong { color: var(--tdpf-ink); font-variant-numeric: tabular-nums; }
.tdpf-other__cta { font-size: 12.5px; font-weight: 700; color: #8a6d1f; white-space: nowrap; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.tdpf-faq { background: #fff; padding: 68px 20px 80px; }
.tdpf-faq__inner { max-width: 1080px; margin: 0 auto; }
.tdpf-faq__title {
    font-family: 'EB Garamond', Georgia, serif; font-size: clamp(26px, 3.4vw, 36px);
    color: var(--tdpf-navy); margin: 0 0 26px;
}
.tdpf-faq__item { border-bottom: 1px solid var(--tdpf-line); }
.tdpf-faq__q {
    cursor: pointer; list-style: none; padding: 18px 30px 18px 0;
    font-size: 16px; font-weight: 600; color: var(--tdpf-navy); position: relative;
}
.tdpf-faq__q::-webkit-details-marker { display: none; }
.tdpf-faq__q::after {
    content: '+'; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    font-size: 20px; font-weight: 400; color: var(--tdpf-muted);
}
.tdpf-faq__item[open] .tdpf-faq__q::after { content: '\2212'; }
.tdpf-faq__a { font-size: 14.5px; line-height: 1.72; color: #56606e; padding: 0 0 20px; max-width: 760px; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .tdpf-hero { padding: 74px 16px 62px; }
    .tdpf-form__shell { flex-direction: column; align-items: stretch; padding: 14px; gap: 12px; }
    .tdpf-form__input { padding: 4px 4px 0; }
    .tdpf-form__btn { width: 100%; padding: 15px; }
    .tdpf-result__inner { padding: 24px 20px; margin-top: -34px; border-radius: 15px; }
    .tdpf-result__count { font-size: 28px; }
    .tdpf-examples { gap: 7px; }
    .tdpf-example { font-size: 12.5px; padding: 7px 13px; }
    .tdpf-cta { width: 100%; text-align: center; }
    .tdpf-others, .tdpf-faq, .tdpf-how { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .tdpf-hero__aurora, .tdpf-hero__spark { animation: none; }
    .tdpf-result__inner, .tdpf-chip { animation: none; }
    .tdpf-form__shell, .tdpf-cta, .tdpf-other, .tdpf-other__img, .tdpf-example { transition: none; }
    .tdpf-other:hover { transform: none; }
    .tdpf-other:hover .tdpf-other__img { transform: none; }
}

/* ── LIVE RESULTS ──────────────────────────────────────────────────────── */
/* Container for one or more product sections. When a request resolves to both
   loose stones and finished jewelry each gets its own headed section, because
   they are two different purchases and a shopper should never have to work out
   which rows in one list are comparable to which. */
.tdpf-results { display: block; }
.tdpf-results:empty { display: none; }

.tdpf-sect + .tdpf-sect { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--tdpf-line); }
.tdpf-sect__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 26px; }
.tdpf-sect:first-child .tdpf-sect__head { margin-top: 22px; }
.tdpf-sect + .tdpf-sect .tdpf-sect__head { margin-top: 0; }
.tdpf-sect__title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 23px; font-weight: 600; color: var(--tdpf-navy);
    margin: 0; letter-spacing: -.01em;
}
.tdpf-sect__note { margin: 0; font-size: 12.5px; color: var(--tdpf-muted); line-height: 1.5; }

.tdpf-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 14px; margin-top: 14px;
}
.tdpf-results > .tdpf-grid { margin-top: 24px; }
.tdpf-grid:empty { display: none; }
.tdpf-item {
    display: flex; flex-direction: column;
    /* Explicit, not left to the grid's default stretch: jewelry titles wrap to
       one or two lines within the same row, and without this the short-titled
       cards end higher than their neighbours and the row reads as broken. */
    height: 100%;
    border: 1px solid var(--tdpf-line); border-radius: 13px; overflow: hidden;
    background: #fff; text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    animation: tdpf-rise .4s cubic-bezier(.2,.7,.3,1) both;
}
.tdpf-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -14px rgba(13,27,44,.32);
    border-color: #c8d3e0;
}
/* Same dark stage as the brief cards. Results arrive background-free from
   /ai-search/stone.php, so a light tile would waste the cut-out and leave white
   metal and white stones washed out against near-white. */
.tdpf-item__media {
    position: relative; display: block; aspect-ratio: 1/1;
    background:
        radial-gradient(115% 85% at 50% 0%, rgba(120,160,215,.18) 0%, rgba(120,160,215,0) 62%),
        linear-gradient(168deg, #22364f 0%, #16273c 58%, #121f31 100%);
}
/* Taken out of flow deliberately. `height: 100%` against a parent whose own
   height comes from aspect-ratio is circular, so the browser falls back to the
   image's intrinsic height and the "square" tile silently becomes as tall as
   the photo. Loose stones are always wider than tall and never revealed it;
   jewelry is not - a pendant on a chain (93x309) stretched its tile to 597px
   beside 190px neighbours. Absolute positioning lets aspect-ratio govern the
   box and object-fit govern the picture, which is what both were for. */
.tdpf-item__img {
    position: absolute; inset: 0; box-sizing: border-box;
    width: 100%; height: 100%; object-fit: contain; display: block; padding: 13px;
    filter: drop-shadow(0 7px 10px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(150,190,240,.16));
    transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.tdpf-item:hover .tdpf-item__img { transform: scale(1.06); }
/* Finished pieces are photographed wide and shallow - a ring or a tennis
   bracelet is roughly 2.5:1 - so the stone padding leaves them floating as a
   thin ribbon in a square tile. Less inset lets them fill the stage the way a
   loose stone already does. */
.tdpf-item--jw .tdpf-item__img { padding: 7px; }
.tdpf-item__badge {
    position: absolute; top: 8px; left: 8px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
    padding: 4px 8px; border-radius: 999px; color: #fff; background: #6b7684;
}
/* Best Deal = the absolute lowest price in the set (the site-wide v1.7.38
   definition). Green is reserved for it and for the top score tier, exactly as
   on the Diamond Prices surfaces - the badge colour has to mean the same thing
   on both or the alignment is only skin deep. */
.tdpf-item__badge--best { background: #15803d; }
.tdpf-item__badge--s5 { background: #15803d; }
.tdpf-item__badge--s4 { background: #1d4ed8; }
.tdpf-item__badge--s3 { background: #4a7fc9; }
.tdpf-item__badge--s2 { background: #6b7684; }
.tdpf-item__badge--s1 { background: #b3441c; }
/* Natural / Lab-Grown, on every diamond card. Deliberately quiet: this is a
   fact the shopper must be able to read, not a claim competing with the value
   badge on the opposite corner. Natural is the more muted of the two so the
   pair reads as one label in two states rather than two different signals. */
.tdpf-item__type {
    position: absolute; top: 8px; right: 8px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 3px 7px; border-radius: 999px;
    backdrop-filter: saturate(140%) blur(3px);
    -webkit-backdrop-filter: saturate(140%) blur(3px);
}
.tdpf-item__type--nat {
    background: rgba(255,255,255,.16); color: #eaf1fa;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.tdpf-item__type--lab {
    background: rgba(122,169,232,.26); color: #dbe9fb;
    box-shadow: inset 0 0 0 1px rgba(150,190,240,.38);
}
.tdpf-item__body { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px 13px; }
.tdpf-item__title { font-size: 13.5px; font-weight: 700; color: var(--tdpf-navy); line-height: 1.3; }
.tdpf-item__specs { font-size: 11.5px; color: var(--tdpf-muted); }
.tdpf-item__row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-top: 4px; }
.tdpf-item__price { font-size: 15.5px; font-weight: 700; color: var(--tdpf-ink); font-variant-numeric: tabular-nums; }
.tdpf-item__gap { font-size: 11px; font-weight: 600; color: #15803d; }

/* ── SHARED SEARCH (spec §9) ───────────────────────────────────────────────
   A forwarded link has to read as a short report rather than a bare grid, so
   these blocks sit below the results: where the price sits in the market, what
   to look at first, and where to go next. They render only on an ?aiq= link and
   the container collapses entirely otherwise, so a typed search is unchanged. */
.tdpf-results__label {
    margin: 26px 0 0; font-size: 11.5px; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase; color: #8a6d1f;
}
.tdpf-results__label + .tdpf-sect .tdpf-sect__head { margin-top: 12px; }

.tdpf-share:empty { display: none; }
.tdpf-share { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--tdpf-line); }
.tdpf-share__block + .tdpf-share__block { margin-top: 26px; }
.tdpf-share__h {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 21px; font-weight: 600; color: var(--tdpf-navy);
    margin: 0 0 12px; letter-spacing: -.01em;
}

/* Real, live figures - deliberately given the weight of a fact panel rather
   than being buried in prose, because they are the part of a shared search a
   recipient can check. */
.tdpf-share__stats {
    display: flex; flex-wrap: wrap; gap: 10px;
}
.tdpf-share__stat {
    flex: 1 1 150px; display: flex; flex-direction: column; gap: 3px;
    background: var(--tdpf-bg-soft, #f7f9fc);
    border: 1px solid var(--tdpf-line); border-radius: 11px;
    padding: 13px 15px;
}
.tdpf-share__stat-v {
    font-size: 19px; font-weight: 700; color: var(--tdpf-ink);
    font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap;
}
.tdpf-share__stat-l {
    font-size: 11px; font-weight: 600; letter-spacing: .07em;
    text-transform: uppercase; color: var(--tdpf-muted);
}
.tdpf-share__foot { margin: 10px 0 0; font-size: 12px; color: var(--tdpf-muted); }

.tdpf-share__list { margin: 0; padding: 0; list-style: none; }
.tdpf-share__li {
    position: relative; padding: 9px 0 9px 18px;
    font-size: 13.5px; line-height: 1.62; color: #56606e;
    border-bottom: 1px solid #f1f3f6;
}
.tdpf-share__li:last-child { border-bottom: none; }
.tdpf-share__li::before {
    content: ''; position: absolute; left: 0; top: 17px;
    width: 5px; height: 5px; border-radius: 50%; background: var(--tdpf-gold);
}

.tdpf-share__related { display: flex; flex-wrap: wrap; gap: 9px; }
.tdpf-share__rel {
    display: inline-block; padding: 9px 15px; border-radius: 999px;
    background: #fff; border: 1px solid #dde4ed;
    font-size: 13.5px; font-weight: 600; color: var(--tdpf-navy); text-decoration: none;
    transition: background .16s ease, border-color .16s ease, transform .12s ease;
}
.tdpf-share__rel:hover {
    background: var(--tdpf-bg-soft, #f3f6fa); border-color: #c8d3e0;
    color: var(--tdpf-navy); transform: translateY(-1px);
}

/* The shared hero: the request becomes the headline, so it needs the quieter
   lead-in above it and a size that survives a long sentence. */
.tdpf-hero__askedfor {
    margin: 0 0 8px; font-size: 14px; letter-spacing: .01em;
    color: #9fb0c6;
}
/* Wide enough that a typical request ("1.5ct oval, eye-clean, around $6,000")
   does not break at the hyphen inside "eye-clean" - a mid-word break in a
   40px serif quotation reads as a typographic accident. hyphens:manual stops
   the browser adding its own on top. */
.tdpf-hero__title--quote {
    font-size: clamp(26px, 4vw, 42px); line-height: 1.2;
    max-width: 760px; margin-left: auto; margin-right: auto;
    hyphens: manual; text-wrap: balance;
}
/* A request can be up to 500 characters. Set at the full display size that is a
   wall of serif where a headline should be, so a long one steps down instead -
   chosen server-side from the actual string length rather than guessed at with
   a viewport query, which cannot see content. */
.tdpf-hero__title--long { font-size: clamp(21px, 2.6vw, 27px); line-height: 1.35; }

/* ── EXPLORE (briefs with live previews) ───────────────────────────────── */
.tdpf-explore { background: var(--tdpf-bg-soft); padding: 70px 20px; margin-top: 60px; }
.tdpf-explore__inner { max-width: 1080px; margin: 0 auto; }
.tdpf-explore__eyebrow {
    font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: #8a6d1f; margin: 0 0 10px;
}
.tdpf-explore__title {
    font-family: 'EB Garamond', Georgia, serif; font-size: clamp(26px,3.4vw,36px);
    color: var(--tdpf-navy); margin: 0 0 10px;
}
.tdpf-explore__sub { font-size: 14.5px; line-height: 1.65; color: #56606e; max-width: 620px; margin: 0 0 30px; }
.tdpf-explore__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px,1fr)); gap: 16px; }
.tdpf-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--tdpf-line); border-radius: 16px;
    text-decoration: none; overflow: hidden;
    transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.tdpf-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px -20px rgba(13,27,44,.42);
    border-color: #c3d0e0;
}

/* The stage: one continuous dark ground the stones sit on, full-bleed to the
   card edges. Stones arrive background-free from /ai-search/stone.php, so there
   are no photo rectangles and no per-tile frames - just stones on a tray. */
.tdpf-card__stage {
    display: grid; grid-template-columns: repeat(4, 1fr);
    align-items: center;
    gap: 8px; padding: 22px 18px 24px;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(120,160,215,.20) 0%, rgba(120,160,215,0) 62%),
        linear-gradient(168deg, #22364f 0%, #16273c 58%, #121f31 100%);
    position: relative;
}
/* A faint parting line across the base of the stage, like the lip of a tray. */
.tdpf-card__stage::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 50%, rgba(255,255,255,0) 100%);
}
/* Square slots so every stone is judged inside the same optical box. Without
   this the box is as wide as the column but only as tall as the image, so a wide
   emerald sprawls into its neighbours while a round looks undersized - the
   silhouette difference then reads as a layout bug rather than as shape. */
.tdpf-card__slot {
    display: flex; align-items: center; justify-content: center;
    min-width: 0; aspect-ratio: 1 / 1;
}
.tdpf-card__img {
    display: block; width: 100%; height: 100%;
    object-fit: contain;
    /* Grounds the stone on the stage so it reads as lit, not pasted. */
    filter: drop-shadow(0 7px 9px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(150,190,240,.18));
    transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
/* Stones lift in a gentle stagger - the card answers the cursor rather than
   snapping. Disabled wholesale under prefers-reduced-motion below. */
.tdpf-card:hover .tdpf-card__img { transform: translateY(-4px) scale(1.05); }
.tdpf-card__slot:nth-child(2) .tdpf-card__img { transition-delay: .035s; }
.tdpf-card__slot:nth-child(3) .tdpf-card__img { transition-delay: .07s; }
.tdpf-card__slot:nth-child(4) .tdpf-card__img { transition-delay: .105s; }

.tdpf-card__body { display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 17px; flex: 1; }
.tdpf-card__q {
    font-family: 'EB Garamond', Georgia, serif; font-size: 19px; line-height: 1.38;
    color: var(--tdpf-ink); letter-spacing: .1px;
}
.tdpf-card__foot {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-top: auto; flex-wrap: wrap;
}
.tdpf-card__meta { font-size: 12.5px; color: var(--tdpf-muted); }
.tdpf-card__meta strong { color: var(--tdpf-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.tdpf-card__cta { font-size: 13.5px; font-weight: 600; color: var(--tdpf-navy); white-space: nowrap; }
.tdpf-card__cta::after { content: ""; }
.tdpf-card:hover .tdpf-card__cta { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 720px) {
    .tdpf-grid { grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 11px; }
    .tdpf-explore { padding: 54px 16px; }

    /* Two 140px tiles per row leave the value badge and the Natural/Lab-Grown
       label fighting for the same strip: the type pill was overlapping and
       clipping "Great Deal" to "Great D". They are not the same kind of
       statement, so the answer is separation rather than shrinking both -
       the value badge keeps the top-left corner, the type label moves to the
       bottom of the stage where nothing else sits. */
    .tdpf-item__type { top: auto; bottom: 8px; right: 8px; }

    .tdpf-sect + .tdpf-sect { margin-top: 24px; padding-top: 22px; }
    .tdpf-sect__title { font-size: 21px; }
    /* Heading and note stack on a phone - side by side they wrap into an
       unreadable ragged block at this width. */
    .tdpf-sect__head { flex-direction: column; gap: 3px; }
}

/* ── HERO ON SMALL SCREENS ─────────────────────────────────────────────────
   Three separate things break when the hero is squeezed to phone width, and
   each needs its own answer rather than a blanket font-size reduction.       */
@media (max-width: 720px) {
    .tdpf-hero { padding: 56px 18px 44px; }

    /* 1. The vault. Nine stones across 390px leaves each one a ~38px speck, so
       the display case reads as grit along the bottom edge. Drop the two
       faintest pairs and let the surviving five be properly large - fewer,
       bigger, still real. */
    .tdpf-vault { margin-top: 38px; gap: 10px; }
    .tdpf-vault__slot:nth-child(1),
    .tdpf-vault__slot:nth-child(2),
    .tdpf-vault__slot:nth-child(8),
    .tdpf-vault__slot:nth-child(9) { display: none; }
    .tdpf-vault__slot:nth-child(5) { width: clamp(84px, 25vw, 112px); }
    .tdpf-vault__slot:nth-child(4),
    .tdpf-vault__slot:nth-child(6) { width: clamp(66px, 20vw, 92px); }
    .tdpf-vault__slot:nth-child(3),
    .tdpf-vault__slot:nth-child(7) { width: clamp(48px, 15vw, 70px); }
    /* Re-floor the now-outermost pair; at .74 they were tuned to sit mid-row. */
    .tdpf-vault__slot:nth-child(3) .tdpf-vault__stone,
    .tdpf-vault__slot:nth-child(7) .tdpf-vault__stone { opacity: .62; }

    /* 2. The example chips. Wrapping produced a ragged 1/2/1 stack; a single
       edge-to-edge scroller keeps them on one line and reads as intentional.
       The label leaves the flow so it can't be scrolled away from its row. */
    /* No scroll-snap here: snapping to the first *chip* scrolled the "Try"
       label off the left edge on load, so the row opened mid-scroll with a
       clipped first chip. A plain scroller starts where it should. */
    .tdpf-examples {
        flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
        margin-inline: -18px; padding: 2px 18px 6px;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .tdpf-examples::-webkit-scrollbar { display: none; }
    .tdpf-example { flex: 0 0 auto; }
    .tdpf-examples__label { flex: 0 0 auto; }

    /* 3. The trust line. Stacked, the inline dot separators stranded themselves
       at the end of each line; as a centred stack the lines separate on their
       own and the dots are noise. */
        }

@media (prefers-reduced-motion: reduce) {
    .tdpf-item { animation: none; transition: none; }
    .tdpf-card { transition: none; }
    .tdpf-vault__stone { animation: none; }
    .tdpf-hero__aurora { animation: none; }
    .tdpf-hero__spark { animation: none; }
}

/* ── example chips: plain-speech set (2026-09-07) ──────────────────────────
   The chips are now full sentences rather than four-word filter shorthand, so
   the row is doing more work: it has to read as speech at a glance and still
   fit five items. Slightly more horizontal padding and a real line-height stop
   long chips looking cramped when one of them wraps.

   The single expert phrasing is kept visually quieter than the four plain ones
   - it is there to reassure someone who does know the vocabulary that it is
   understood, not to suggest that is how you are supposed to type.           */
.tdpf-example {
    line-height: 1.35;
    padding: 8px 15px;
    font-size: 12.5px;
    max-width: 100%;
}

/* The row was capped at 1000px when the chips were four-word abbreviations. Five
   sentences need more, and at 1000px exactly one chip wrapped to a line of its
   own - the same orphan the original comment on this block was written to fix,
   just one chip further along. Widened so all five sit on one line on a normal
   desktop; below that they wrap several at a time, which reads as a wrapped row
   rather than as one stray item. */
.tdpf-examples { max-width: 1260px; }

.tdpf-example--expert {
    background: rgba(255, 255, 255, .035);
    border-color: rgba(255, 255, 255, .1);
    color: #a8b6c6;
}

.tdpf-example--expert:hover {
    background: rgba(255, 255, 255, .11);
    color: #e8eef5;
}

.tdpf-examples__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

@media (max-width: 650px) {
    /* Was a horizontally-scrolling row, chosen because five sentence-length
       chips stacked into five full lines and pushed the trust line below the
       fold. That trust line is gone (2026-09-07), so the vertical space is
       available again - and the scroller was the worse trade: it showed one
       chip plus a sliver of a second, which reads as a clipped layout bug
       rather than an affordance. Five full-width rows, each a real tap
       target, say "pick one of these" without needing to be discovered. */
    .tdpf-examples {
        display: block;
        text-align: left;
        margin-top: 22px;
    }

    .tdpf-examples__label {
        display: block;
        margin: 0 0 10px;
        text-align: center;
    }

    .tdpf-examples__row {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 8px;
        overflow: visible;
        margin: 0;
        padding: 0;
    }

    .tdpf-example {
        flex: 0 0 auto;
        width: 100%;
        white-space: normal;
        text-align: left;
        font-size: 13.5px;
        line-height: 1.35;
        padding: 11px 15px;
        border-radius: 12px;
    }
}

/* The eyebrow started at y=56px against a 57px fixed header - literally
   touching it. Real clearance below the header. (2026-09-07) */
@media (max-width: 720px) {
    .tdpf-hero { padding-top: 92px; }
}


/* ── RESULT TILES NOW CARRY THE RETAILER'S ACTUAL PHOTOGRAPH ──────────────
   2026-09-07. The keyed cut-out is gone from every surface where a person is
   judging a stone (see tdp_stone_src()): a white diamond's outer facets are the
   same colour as the studio field it is shot on, so no threshold separates
   them, and two rounds of tuning produced two different visible defects.

   The photograph arrives on its own light-grey studio field, so the tile
   becomes that same grey instead of navy and the seam disappears. Measured
   across live photos: #bababb to #cac9c9, so #c6c6c7 sits inside the spread.

   `contain` not `cover`: cover fills the tile seamlessly but crops ~21% of the
   width (these are 757x600), which clipped the round and the pear when tested.
   The drop-shadows go too - they were drawn around a floating stone, and around
   a rectangle they read as a box shadow on the photo.                        */
.tdpf-item__media {
    /* Every retailer photo measured is exactly 757x600 (13 of 13, all shapes,
       both types), so matching the tile to that aspect makes the photo fill it
       edge to edge and NO tile colour shows at all - the seam disappears rather
       than being colour-matched. The grey remains as the fallback for any photo
       with a different aspect, where it letterboxes into the same studio grey
       and reads as a slightly wider field rather than as a mismatch. */
    aspect-ratio: 757 / 600;
    background: #c6c6c7;
}
.tdpf-item__img,
.tdpf-item--jw .tdpf-item__img {
    padding: 0;
    object-fit: contain;
    filter: none;
}
/* The type pill was white-on-translucent over navy. On a light field it needs
   its own ground to stay legible. */
.tdpf-item__type {
    background: rgba(22, 35, 58, .82);
    color: #fff;
    border-color: rgba(255, 255, 255, .18);
}