/* ─────────────────────────────────────────────────────────────────────────────
   /experience — the free-sample landing page.

   A FORK of the landing page's visual language, not a new language.

   The rules of the fork, so the two pages cannot drift apart:
     - the hero uses the landing page's own class names and its own values:
       the same dark ground, the same type scale, the same measure, the same
       button;
     - the sections below it use the same horizontal rules and the same
       editorial rhythm as the collection page;
     - the only genuinely new colours are the ones the offer needs: the gold
       rule, which the site already uses for its accent, and nothing else.

   The page's own styles are here rather than inline, so the file can be
   cached and so a change to the offer does not mean editing a 190 KB page.
   ───────────────────────────────────────────────────────────────────────────── */

.experience-shell {
    --fx-ink:      var(--color-text-primary, #0a0a0a);
    --fx-muted:    var(--color-text-secondary, rgba(0, 0, 0, 0.62));
    --fx-faint:    var(--color-text-tertiary, rgba(0, 0, 0, 0.58));
    --fx-rule:     var(--color-border-subtle, rgba(0, 0, 0, 0.08));
    --fx-surface:  var(--color-surface-1, #fff);
    --fx-surface2: var(--color-surface-2, #fcfcfc);
    --fx-accent:   var(--color-accent, #b89a4e);
    --fx-accent-ln:var(--color-accent-line, rgba(168, 132, 44, 0.42));
    --fx-hero-bg:  #141414;

    max-width: 1200px;
    margin: 0 auto;
    padding-left: clamp(1.25rem, 4vw, 2.5rem);
    padding-right: clamp(1.25rem, 4vw, 2.5rem);
}

/* ── Hero ───────────────────────────────────────────────────────────────────
   The landing page's hero, value for value. The class names are the landing
   page's own, so the page inherits its shape from the same system. */

.experience-hero {
    position: relative;
    isolation: isolate;
    background-color: var(--fx-hero-bg);
    color: #fff;
    padding: clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 4vw, 3.25rem) clamp(2.25rem, 4.5vw, 3.5rem);
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    text-align: left;
}

.experience-hero-copy {
    max-width: 46rem;
    min-width: 0;
}

.experience-eyebrow {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.66);
    margin: 0 0 1.25rem;
}

.experience-title {
    font-size: clamp(2rem, 3.8vw, 3.25rem);
    font-weight: 200;
    letter-spacing: -0.004em;
    line-height: 1.08;
    text-wrap: balance;
    margin: 0;
    max-width: 14em;
    color: #fff;
}

.experience-lede {
    font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
    font-weight: 300;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.78);
    max-width: 36rem;
    margin: 1.25rem 0 0;
    text-wrap: balance;
}

/* The three facts, stated in the hero: the deposit, the shipping, and the
   decision. They are the numbers a visitor decides on, so they are not
   buried on the offer's own page. */
.experience-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0 clamp(1.5rem, 4vw, 3rem);
    margin: 2rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    list-style: none;
}

.experience-fact {
    min-width: 0;
}

.experience-fact dt {
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 0.375rem;
}

.experience-fact dd {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 300;
    line-height: 1.4;
    color: #fff;
}

.experience-fact dd small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
}

/* ── Buttons ──────────────────────────────────────────────────────────────
   The landing page's button, on the hero's dark ground. */

.experience-hero-cta {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem;
}

.experience-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 52px;
    padding: 0 2.25rem;
    background: #fff;
    color: #000;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                color 0.3s ease,
                transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.experience-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.55);
}

.experience-cta:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 3px;
}

.experience-cta--ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
    min-height: 44px;
    padding: 0 1.75rem;
}

.experience-cta--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.55);
}

.experience-cta-arrow {
    width: 15px;
    height: 9px;
    flex: none;
}

/* The light button, on the page's light ground. */
.experience-cta--dark {
    background: var(--fx-ink);
    color: var(--color-bg, #fff);
}

.experience-cta--dark:hover {
    box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.45);
}

/* ── Sections ──────────────────────────────────────────────────────────────
   The collection page's rhythm: a rule, a title, a lead, then the content. */

.experience-section {
    padding-top: clamp(2rem, 4vw, 3rem);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    border-top: 1px solid var(--fx-rule);
}

.experience-h2 {
    margin: 0 0 0.625rem;
    font-size: clamp(1.375rem, 2.4vw, 1.875rem);
    font-weight: 300;
    letter-spacing: 0.005em;
    line-height: 1.2;
    color: var(--fx-ink);
}

.experience-lead {
    margin: 0 0 2rem;
    max-width: 46rem;
    font-size: 0.9375rem;
    font-weight: 300;
    line-height: 1.75;
    color: var(--fx-muted);
}

/* ── The three steps ────────────────────────────────────────────────────── */

.experience-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(1.25rem, 3vw, 2.5rem);
    counter-reset: fx-step;
}

.experience-step {
    counter-increment: fx-step;
    padding-top: 1.25rem;
    border-top: 2px solid var(--fx-accent-ln);
}

.experience-step::before {
    content: "0" counter(fx-step);
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    color: var(--fx-accent);
}

.experience-step h3 {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--fx-ink);
}

.experience-step p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--fx-muted);
}

/* ── The money ──────────────────────────────────────────────────────────── */

.experience-money {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

.experience-money-panel {
    padding: 1.5rem 1.375rem;
    border: 1px solid var(--fx-rule);
    background: var(--fx-surface);
}

.experience-money-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4375rem 0;
    font-size: 0.9375rem;
    color: var(--fx-muted);
}

.experience-money-row span:last-child {
    font-variant-numeric: tabular-nums;
    color: var(--fx-ink);
}

.experience-money-row.is-total {
    margin-top: 0.5rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--fx-rule);
    font-weight: 500;
    color: var(--fx-ink);
}

.experience-money-row.is-total span:last-child {
    font-size: 1.25rem;
}

.experience-money-note {
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px dashed var(--fx-rule);
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--fx-faint);
}

/* ── The rules ────────────────────────────────────────────────────────────
   The rules themselves are NOT styled here. They are the shared component
   (`fb_free_sample_rules_html()`, the same one the product page renders), and
   they live in free-sample.css. One implementation, one set of styles: the
   checklist cannot look one way on the product page and another way here. */

.experience-money .fb-fs-rules {
    gap: 1rem;
}

.experience-money .fb-fs-rule-body strong {
    font-size: 0.9375rem;
}

.experience-money .fb-fs-rule-body span {
    font-size: 0.875rem;
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.experience-faq {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--fx-rule);
}

.experience-faq details {
    border-bottom: 1px solid var(--fx-rule);
}

.experience-faq summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.125rem 0;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

.experience-faq summary::-webkit-details-marker { display: none; }

.experience-faq-q {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--fx-ink);
}

.experience-faq-hint {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--fx-faint);
    white-space: nowrap;
}

.experience-faq-ico {
    position: relative;
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    transition: transform 0.35s cubic-bezier(.16, 1, .3, 1);
}

.experience-faq-ico::before,
.experience-faq-ico::after {
    content: '';
    position: absolute;
    background: var(--fx-ink);
    transition: transform 0.35s cubic-bezier(.16, 1, .3, 1), opacity 0.35s ease;
}

.experience-faq-ico::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.experience-faq-ico::after  { top: 0; left: 50%; height: 100%; width: 1px; transform: translateX(-50%); }
.experience-faq details[open] .experience-faq-ico { transform: rotate(90deg); }
.experience-faq details[open] .experience-faq-ico::after { opacity: 0; }

.experience-faq-body {
    padding: 0 2rem 1.25rem 0;
}

.experience-faq-body p {
    margin: 0;
    max-width: 60ch;
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--fx-muted);
}

/* ── The outro ──────────────────────────────────────────────────────────── */

.experience-outro {
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--fx-rule);
    text-align: center;
}

.experience-outro h2 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.5rem, 2.8vw, 2.25rem);
    font-weight: 200;
    letter-spacing: 0.005em;
    color: var(--fx-ink);
}

.experience-outro p {
    margin: 0 auto 1.75rem;
    max-width: 42rem;
    font-size: 0.9375rem;
    font-weight: 300;
    line-height: 1.75;
    color: var(--fx-muted);
}

/* ── Narrow screens ─────────────────────────────────────────────────────── */

@media (max-width: 46rem) {
    .experience-money { grid-template-columns: minmax(0, 1fr); }
    .experience-hero-cta { flex-direction: column; align-items: stretch; }
    .experience-cta { justify-content: center; text-align: center; }
    .experience-faq-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .experience-cta { transition: none; }
    .experience-cta:hover { transform: none; }
    .experience-faq-ico { transition: none; }
}