/*
 * Time Lapse launch page.
 *
 * Geometry mirrors the Principle prototype, which was authored on a 1366x768
 * artboard and scales with the viewport. `--u` is one artboard pixel: at or
 * above 1366px it resolves to 1px, below that everything scales down together
 * so the composition holds. The mobile block near the bottom re-flows the
 * layout once the scaled-down design would get too small to read.
 */

.beautysociety-timelapse {
    --tl-blue: #015fb1;
    --tl-ivory: #efebe6;
    --tl-ink: #151514;
    --tl-copy: 239, 235, 230;
    --tl-tan: #b8987d;
    --tl-design: 1366;
    --u: calc(min(100vw, 1366px) / var(--tl-design));

    position: relative;
    z-index: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    background-color: #ffffff;
    color: var(--tl-ink);
    font-family: 'SuisseIntl-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.beautysociety-timelapse * {
    box-sizing: border-box;
}

/* Zero-specificity reset so the component rules below still win. */
.beautysociety-timelapse :where(section, figure, h1, h2, h3, p, ul, li, article) {
    margin: 0;
    padding: 0;
}

/* Zero specificity, so a component rule can still make an element absolute. */
.beautysociety-timelapse :where(section, figure) {
    position: relative;
}

.beautysociety-timelapse img {
    display: block;
    max-width: 100%;
}

/* The backdrop element is only a paint hint; the animated colour lives on the
   root so it covers the full run of the page. */
.beautysociety-timelapse-backdrop {
    display: none;
}

/* ── Scroll reveals ─────────────────────────────────────────────────────── */

.beautysociety-timelapse [data-timelapse-reveal] {
    opacity: 0;
    transform: translate3d(0, calc(28 * var(--u)), 0);
    transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 1.15s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}

.beautysociety-timelapse [data-timelapse-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Never leave content hidden if the observer cannot run. */
.beautysociety-timelapse:not(.is-ready) [data-timelapse-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .beautysociety-timelapse [data-timelapse-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none;
    }
}

/* ── Shared type ────────────────────────────────────────────────────────── */

.beautysociety-timelapse-caps {
    margin: 0;
    font-family: 'SuisseIntl-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: calc(19 * var(--u));
    line-height: calc(26 * var(--u));
    letter-spacing: calc(0.55 * var(--u));
    text-transform: uppercase;
    text-align: center;
    color: var(--tl-ivory);
}

.beautysociety-timelapse-caps--dark {
    color: var(--tl-ink);
}

/* Small sans paragraphs set on blue. */
.beautysociety-timelapse-note {
    margin: 0;
    font-size: calc(18 * var(--u));
    line-height: calc(23 * var(--u));
    text-align: center;
    color: var(--tl-ivory);
}

.beautysociety-timelapse-fine {
    margin: 0;
    font-size: calc(14 * var(--u));
    line-height: calc(20 * var(--u));
    text-align: center;
    color: var(--tl-ink);
}

.beautysociety-timelapse-fine--dark {
    color: var(--tl-ink);
}

.beautysociety-timelapse-fine--dark span {
    text-decoration: underline;
    text-underline-offset: calc(2 * var(--u));
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

/*
 * The hero is a full-bleed film, so unlike the rest of the page it cannot stop
 * growing at 1366: `--tl-hero-u` is one artboard pixel of the film, tracking
 * the window, so the whole shot scales together.
 *
 * The hero takes what is left of the first screen once the site header above it
 * is accounted for, so the shot lands whole with nothing important below the
 * fold. `--tl-hero-offset` is that header's height, measured by the directive;
 * the floor keeps an unusually tall one from collapsing the film altogether.
 *
 * A window wider than the film's 16:9 has to lose some frame height, and the
 * two ends are not equally expendable. Above the cap there are 125 of the
 * frame's 768 rows of bare backdrop; `--tl-hero-crop` spends 110 of them and
 * keeps the rest as air. Anything still owed after that comes off the bottom,
 * which costs least because the veil is already near solid blue down there.
 */
.beautysociety-timelapse-hero {
    --tl-hero-u: calc(100vw / var(--tl-design));
    --tl-hero-h: max(calc(100vh - var(--tl-hero-offset, 0px)), 60vh);
    /*
     * The film is object-fit: cover, so it is sized by width on a window wider
     * than 16:9 and by height on a narrower one. This is its real scale, in px
     * per artboard px, and it is what the copy must be positioned against: on
     * a narrow window the width scale alone keeps shrinking while cover blows
     * the bottle up, so the lockup slides off the bottle toward the header.
     */
    --tl-film-u: max(var(--tl-hero-u), calc(var(--tl-hero-h) / 768));
    --tl-hero-crop: min(
        0px,
        max(
            calc(-110 * var(--tl-hero-u)),
            calc(var(--tl-hero-h) - 768 * var(--tl-hero-u))
        )
    );

    height: var(--tl-hero-h);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.beautysociety-timelapse-hero-media {
    position: absolute;
    inset: 0 -1px;
    overflow: hidden;
}

/*
 * The hero is a five-second loop of the bottle transforming while the studio
 * sweeps from peach to lavender. It is 16:9, the same as the 1366x768 artboard,
 * and `--tl-hero-crop` decides which part of it survives on a wider screen.
 * hero-bottle.jpg is the loop's opening frame, used as the poster and as the
 * still shown when motion is off.
 */
.beautysociety-timelapse-hero-media video,
.beautysociety-timelapse-hero-media picture,
.beautysociety-timelapse-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center var(--tl-hero-crop);
}

/*
 * The veil ramps from clear at the hero's top edge to solid brand blue exactly
 * at its bottom, which is what hands the page over to the section below.
 *
 * It is not a plain fade of one colour: in the prototype the veil's own colour
 * darkens in step with its opacity, so the middle of the hero sits deeper than
 * a straight ramp would put it. Each stop is therefore brand blue scaled by the
 * opacity at that height. The stops are spelled out because browsers
 * interpolate gradients with premultiplied alpha, which would otherwise
 * straighten the curve back out.
 */
.beautysociety-timelapse-hero-veil {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 10, 18, 0.1) 10%,
        rgba(0, 19, 35, 0.2) 20%,
        rgba(0, 29, 53, 0.3) 30%,
        rgba(0, 38, 71, 0.4) 40%,
        rgba(1, 48, 89, 0.5) 50%,
        rgba(1, 57, 106, 0.6) 60%,
        rgba(1, 67, 124, 0.7) 70%,
        rgba(1, 76, 142, 0.8) 80%,
        rgba(1, 86, 159, 0.9) 90%,
        rgba(1, 95, 177, 1) 100%
    );
}

/*
 * Held to the film rather than to the hero box, so it keeps its place against
 * the bottle however the frame is cropped: the film's top sits at the crop
 * offset, and the title belongs 284 artboard px below it.
 */
.beautysociety-timelapse-hero-copy {
    position: relative;
    margin: calc(var(--tl-hero-crop) + 284 * var(--tl-film-u)) 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.beautysociety-timelapse-hero-title {
    margin: 0;
    font-family: 'FeatureDisplay-Light', 'Times New Roman', Times, serif;
    font-weight: 400;
    /* FeatureDisplay caps are 0.75em; the prototype's title layer caps are 84px. */
    font-size: calc(112 * var(--tl-hero-u));
    line-height: calc(109 * var(--tl-hero-u));
    letter-spacing: calc(-1.3 * var(--tl-hero-u));
    text-align: center;
    color: var(--tl-ivory);
}

.beautysociety-timelapse-hero-title em {
    font-family: 'FeatureDisplay-LightItalic', 'Times New Roman', Times, serif;
    font-style: italic;
}

/*
 * Convention-style countdown under the hero title. Numbers share the title
 * face; labels stay small so the clock reads as a clock, not a second headline.
 */
.beautysociety-timelapse-hero-timer {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: calc(16 * var(--tl-hero-u));
    margin-top: calc(64 * var(--tl-hero-u));
    color: var(--tl-ivory);
}

.beautysociety-timelapse-hero-timer-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: calc(64 * var(--tl-hero-u));
}

.beautysociety-timelapse-hero-timer-value {
    font-family: 'FeatureDisplay-Light', 'Times New Roman', Times, serif;
    font-weight: 400;
    font-size: calc(40 * var(--tl-hero-u));
    line-height: 1;
    letter-spacing: calc(-0.4 * var(--tl-hero-u));
}

.beautysociety-timelapse-hero-timer-label {
    margin-top: calc(10 * var(--tl-hero-u));
    font-family: 'SuisseIntl-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: calc(11 * var(--tl-hero-u));
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.78;
}

.beautysociety-timelapse-hero-timer-sep {
    font-family: 'FeatureDisplay-Light', 'Times New Roman', Times, serif;
    font-size: calc(22 * var(--tl-hero-u));
    line-height: calc(40 * var(--tl-hero-u));
    opacity: 0.45;
}

/* ── Introducing ────────────────────────────────────────────────────────── */

.beautysociety-timelapse-introducing {
    padding-top: calc(100 * var(--u));
    text-align: center;
}

.beautysociety-timelapse-kicker {
    margin: 0;
    font-size: calc(23 * var(--u));
    line-height: 1;
    letter-spacing: calc(0.4 * var(--u));
    text-transform: uppercase;
    color: var(--tl-ivory);
}

.beautysociety-timelapse-wordmark {
    margin: calc(107 * var(--u)) 0 0;
    font-family: 'FeatureDisplay-Light', 'Times New Roman', Times, serif;
    font-weight: 400;
    font-size: calc(89 * var(--u));
    line-height: calc(85 * var(--u));
    color: var(--tl-ivory);
}

.beautysociety-timelapse-lede {
    margin: calc(47 * var(--u)) 0 0;
    font-family: 'FeatureDisplay-Light', 'Times New Roman', Times, serif;
    font-size: calc(31.8 * var(--u));
    line-height: calc(39 * var(--u));
    color: var(--tl-ivory);
}

/* ── Bottle portrait card ───────────────────────────────────────────────── */

.beautysociety-timelapse-portrait {
    padding-top: calc(73 * var(--u));
    display: flex;
    justify-content: center;
}

.beautysociety-timelapse-portrait-card {
    width: calc(571 * var(--u));
    height: calc(754 * var(--u));
    overflow: hidden;
}

.beautysociety-timelapse-portrait-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Meet ───────────────────────────────────────────────────────────────── */

.beautysociety-timelapse-meet {
    padding-top: calc(92 * var(--u));
}

.beautysociety-timelapse-meet-copy {
    margin: 0;
    font-family: 'FeatureDisplay-Light', 'Times New Roman', Times, serif;
    font-size: calc(32 * var(--u));
    line-height: calc(38.5 * var(--u));
    text-align: center;
    color: var(--tl-ink);
}

.beautysociety-timelapse-meet-copy em {
    font-family: 'FeatureDisplay-LightItalic', 'Times New Roman', Times, serif;
    font-style: italic;
}

/* ── "This isn't just another serum." ───────────────────────────────────── */

.beautysociety-timelapse-statement {
    padding-top: calc(109 * var(--u));
    overflow: visible;
}

.beautysociety-timelapse-rule {
    width: calc(1306 * var(--u));
    height: 1px;
    margin: 0 auto;
    background-color: rgba(21, 21, 20, 0.14);
}

.beautysociety-timelapse-statement-inner {
    position: relative;
    padding-top: calc(190 * var(--u));
    overflow: visible;
}

.beautysociety-timelapse-statement-title {
    position: relative;
    z-index: 2;
    margin: 0;
    font-family: 'FeatureDisplay-Light', 'Times New Roman', Times, serif;
    font-weight: 400;
    font-size: calc(89.6 * var(--u));
    line-height: calc(111 * var(--u));
    text-align: center;
    color: var(--tl-ink);
}

/* Both photo circles are static in the prototype; they just scroll with the page. */
.beautysociety-timelapse-orb {
    position: absolute;
    z-index: 1;
}

.beautysociety-timelapse-orb--drop {
    width: calc(215 * var(--u));
    left: calc(79 * var(--u));
    top: calc(124 * var(--u));
}

/* Overhangs the right edge of the artboard by 87px. */
.beautysociety-timelapse-orb--bottle {
    width: calc(539 * var(--u));
    right: calc(-87 * var(--u));
    top: calc(542 * var(--u));
}

/* ── Three technologies (Venn) ──────────────────────────────────────────── */

.beautysociety-timelapse-tech {
    padding-top: calc(445 * var(--u));
}

.beautysociety-timelapse-venn {
    position: relative;
    height: calc(556 * var(--u));
    margin-top: calc(87 * var(--u));
    display: flex;
    justify-content: center;
    align-items: stretch;
}

/*
 * The lobes are 555px circles on a 461px pitch, so the outer two run off both
 * edges of the artboard. They must not shrink to fit: the group is 1477px wide
 * against a 1366px stage, and that overhang is the composition.
 */
.beautysociety-timelapse-venn-lobe {
    flex: 0 0 auto;
    width: calc(555 * var(--u));
    border: 1px solid rgba(184, 152, 125, 0.85);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: calc(171 * var(--u));
    text-align: center;
}

.beautysociety-timelapse-venn-lobe + .beautysociety-timelapse-venn-lobe {
    margin-left: calc(-94 * var(--u));
}

/* Tracked wider and set larger than the page's other small caps. */
.beautysociety-timelapse-venn-key {
    display: block;
    font-size: calc(23 * var(--u));
    line-height: 1;
    letter-spacing: calc(0.47 * var(--u));
    text-transform: uppercase;
    color: var(--tl-ivory);
}

.beautysociety-timelapse-venn-claim {
    display: block;
    margin-top: calc(39 * var(--u));
    font-family: 'FeatureDisplay-Light', 'Times New Roman', Times, serif;
    font-weight: 400;
    font-size: calc(55.2 * var(--u));
    line-height: calc(69 * var(--u));
    color: var(--tl-ivory);
}

.beautysociety-timelapse-venn-claim em {
    font-family: 'FeatureDisplay-LightItalic', 'Times New Roman', Times, serif;
    font-style: italic;
}

.beautysociety-timelapse-tech .beautysociety-timelapse-note {
    margin-top: calc(52 * var(--u));
}

/* ── "But here's what makes it even more exciting:" ─────────────────────── */

.beautysociety-timelapse-bridge {
    padding-top: calc(587 * var(--u));
}

.beautysociety-timelapse-bridge-title {
    margin: 0;
    font-family: 'FeatureDisplay-Light', 'Times New Roman', Times, serif;
    font-weight: 400;
    font-size: calc(56.4 * var(--u));
    line-height: calc(56 * var(--u));
    letter-spacing: calc(-0.2 * var(--u));
    text-align: center;
    color: var(--tl-ivory);
}

.beautysociety-timelapse-bridge-title em {
    font-family: 'FeatureDisplay-LightItalic', 'Times New Roman', Times, serif;
    font-style: italic;
}

/* ── Routine tiles ──────────────────────────────────────────────────────── */

.beautysociety-timelapse-routine {
    position: relative;
    height: calc(1245 * var(--u));
    margin-top: calc(263 * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * The cards orbit well outside the section box, so the field is not clipped and
 * every card is positioned from the field's top-centre by the scroll engine.
 */
.beautysociety-timelapse-routine-field {
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
}

.beautysociety-timelapse-tile {
    --tl-tile-radius: calc(11 * var(--u));

    position: absolute;
    top: 0;
    left: 0;
    width: calc(178 * var(--u));
    height: calc(216 * var(--u));
    overflow: hidden;
    background: transparent;
    border-radius: var(--tl-tile-radius);
    /* clip-path, not a fading mask: the radial mask was eating the radius
     * and leaving a 1px white seam on 1x screens / Safari. */
    clip-path: inset(0 round var(--tl-tile-radius));
    -webkit-clip-path: inset(0 round var(--tl-tile-radius));
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
}

.beautysociety-timelapse-tile img {
    position: absolute;
    /* Overscan the box so subpixel rounding cannot open a white hairline
     * under the photo, and so the baked-in white plate is cropped off. */
    inset: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    max-width: none;
    object-fit: cover;
    border-radius: inherit;
}

.beautysociety-timelapse-routine-copy {
    position: relative;
    z-index: 2;
    /* Sits below the ring's centre in the prototype, not on it. */
    top: calc(106 * var(--u));
    margin: 0;
    font-family: 'FeatureDisplay-Light', 'Times New Roman', Times, serif;
    font-size: calc(32 * var(--u));
    line-height: calc(39 * var(--u));
    text-align: center;
    color: var(--tl-ivory);
}

.beautysociety-timelapse-routine-copy em {
    font-family: 'FeatureDisplay-LightItalic', 'Times New Roman', Times, serif;
    font-style: italic;
}

/* ── Power step ─────────────────────────────────────────────────────────── */

.beautysociety-timelapse-power {
    padding-top: calc(260 * var(--u));
}

/* ── 21 days ────────────────────────────────────────────────────────────── */

.beautysociety-timelapse-days {
    padding-top: calc(313 * var(--u));
}

.beautysociety-timelapse-days-title {
    margin: 0;
    font-family: 'FeatureDisplay-Light', 'Times New Roman', Times, serif;
    font-weight: 400;
    font-size: calc(56.4 * var(--u));
    line-height: calc(56 * var(--u));
    letter-spacing: calc(-0.2 * var(--u));
    text-align: center;
    color: var(--tl-ink);
}

.beautysociety-timelapse-days-title em {
    font-family: 'FeatureDisplay-LightItalic', 'Times New Roman', Times, serif;
    font-style: italic;
}

/* ── WOW ────────────────────────────────────────────────────────────────── */

.beautysociety-timelapse-wow {
    padding-top: calc(80 * var(--u));
}

.beautysociety-timelapse-wow-copy {
    margin: 0;
    font-size: calc(18 * var(--u));
    line-height: calc(22 * var(--u));
    text-align: center;
    color: var(--tl-ink);
}

.beautysociety-timelapse-wow .beautysociety-timelapse-fine {
    margin-top: calc(93 * var(--u));
}

/* ── Full-bleed close-up ────────────────────────────────────────────────── */

/* Inset by 96 each side in the prototype, so the blue shows down both edges. */
.beautysociety-timelapse-closeup {
    width: calc(1175 * var(--u));
    margin: calc(64 * var(--u)) auto 0;
    height: calc(739 * var(--u));
}

/*
 * The field itself now cross-fades to white as this figure arrives, the same
 * way Meet does. The hard white slab that used to start mid-frame is gone so
 * that fade can show around the bottle.
 */

.beautysociety-timelapse-closeup img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Renew. Protect. Replenish. ─────────────────────────────────────────── */

/*
 * Everything below the close-up is a hard white boundary in the prototype
 * (the white simply scrolls up over the blue) rather than one of the two
 * cross-fades, so these sections paint their own background over the root.
 */
.beautysociety-timelapse-renew,
.beautysociety-timelapse-ingredients {
    background-color: #ffffff;
}

.beautysociety-timelapse-renew {
    padding-top: calc(101 * var(--u));
}

.beautysociety-timelapse-renew-title {
    margin: 0;
    font-family: 'FeatureDisplay-Light', 'Times New Roman', Times, serif;
    font-weight: 400;
    font-size: calc(89.2 * var(--u));
    line-height: calc(107 * var(--u));
    text-align: center;
    color: var(--tl-ink);
}

/* ── Ingredient story ───────────────────────────────────────────────────── */

.beautysociety-timelapse-ingredients {
    padding-top: calc(157 * var(--u));
}

.beautysociety-timelapse-ingredient {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: calc(460 * var(--u)) 1fr;
    column-gap: calc(66 * var(--u));
    width: calc(1306 * var(--u));
    margin: 0 auto;
    padding: calc(56 * var(--u)) 0 calc(100 * var(--u));
}

/*
 * Each row has its own science plate, full-bleed. A heavy ivory veil keeps
 * the ink type on the prototype's white field; the image reads at the edges.
 */
.beautysociety-timelapse-ingredient::before,
.beautysociety-timelapse-ingredient::after {
    content: '';
    position: absolute;
    z-index: -2;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    pointer-events: none;
}

.beautysociety-timelapse-ingredient::before {
    background-image: var(--tl-science);
    background-size: cover;
    background-position: center;
}

.beautysociety-timelapse-ingredient::after {
    z-index: -1;
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.38) 0%,
        rgba(255, 255, 255, 0.86) 18%,
        rgba(255, 255, 255, 0.92) 50%,
        rgba(255, 255, 255, 0.86) 82%,
        rgba(255, 255, 255, 0.38) 100%
    );
}

.beautysociety-timelapse-ingredient--copper {
    --tl-science: url('../../images/timelapse/science-copper.jpg');
}

.beautysociety-timelapse-ingredient--ectoin {
    --tl-science: url('../../images/timelapse/science-ectoin.jpg');
}

.beautysociety-timelapse-ingredient--hymagic {
    --tl-science: url('../../images/timelapse/science-hymagic.jpg');
}

.beautysociety-timelapse-ingredient + .beautysociety-timelapse-ingredient {
    border-top: 1px solid rgba(21, 21, 20, 0.14);
}

.beautysociety-timelapse-ingredients .beautysociety-timelapse-ingredient:first-of-type {
    margin-top: calc(96 * var(--u));
    border-top: 1px solid rgba(21, 21, 20, 0.14);
}

.beautysociety-timelapse-ingredient-head {
    padding-left: calc(69 * var(--u));
}

.beautysociety-timelapse-ingredient-key {
    display: block;
    font-size: calc(17.3 * var(--u));
    line-height: 1;
    letter-spacing: calc(0.3 * var(--u));
    text-transform: uppercase;
    color: var(--tl-ink);
}

.beautysociety-timelapse-ingredient-claim {
    margin: calc(27 * var(--u)) 0 0;
    font-family: 'FeatureDisplay-Light', 'Times New Roman', Times, serif;
    font-weight: 400;
    font-size: calc(42.3 * var(--u));
    line-height: calc(40 * var(--u));
    color: var(--tl-ink);
}

.beautysociety-timelapse-ingredient-claim em {
    font-family: 'FeatureDisplay-LightItalic', 'Times New Roman', Times, serif;
    font-style: italic;
}

.beautysociety-timelapse-ingredient-summary {
    margin: 0;
    max-width: calc(590 * var(--u));
    font-size: calc(20.3 * var(--u));
    line-height: calc(25 * var(--u));
    color: var(--tl-ink);
}

/*
 * The measure is narrower than the summary above it, which is what makes the
 * longest benefit wrap onto a second line the way it does in the prototype.
 */
/*
 * Divi styles content lists from selectors far more specific than these, so the
 * reset has to be forced: left alone it puts its own bullet back beside the
 * checkmark and indents the list out of line with the summary above it.
 */
.beautysociety-timelapse-ingredient-list {
    margin: calc(32 * var(--u)) 0 0;
    padding: 0 !important;
    max-width: calc(400 * var(--u));
    list-style: none !important;
}

.beautysociety-timelapse-ingredient-list li {
    position: relative;
    padding-left: calc(18 * var(--u));
    font-size: calc(16.2 * var(--u));
    line-height: calc(32 * var(--u));
    color: var(--tl-ink);
    list-style: none !important;
}

.beautysociety-timelapse-ingredient-list li::before {
    content: '\2714';
    position: absolute;
    left: 0;
    font-size: calc(12.2 * var(--u));
}

/* ── How to use ─────────────────────────────────────────────────────────── */

.beautysociety-timelapse-howto {
    padding-top: calc(86 * var(--u));
    padding-bottom: calc(64 * var(--u));
}

.beautysociety-timelapse-howto-banner {
    width: calc(1306 * var(--u));
    height: calc(253 * var(--u));
    margin: 0 auto calc(73 * var(--u));
    overflow: hidden;
}

.beautysociety-timelapse-howto-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 46%;
}

.beautysociety-timelapse-howto-title {
    margin: calc(74 * var(--u)) 0 0;
    font-family: 'FeatureDisplay-Light', 'Times New Roman', Times, serif;
    font-weight: 400;
    font-size: calc(32 * var(--u));
    line-height: calc(39 * var(--u));
    text-align: center;
    color: var(--tl-ink);
}

.beautysociety-timelapse-howto-title em {
    font-family: 'FeatureDisplay-LightItalic', 'Times New Roman', Times, serif;
    font-style: italic;
}

.beautysociety-timelapse-howto-copy {
    margin: calc(44 * var(--u)) auto 0;
    max-width: calc(600 * var(--u));
    font-size: calc(22 * var(--u));
    line-height: calc(29 * var(--u));
    text-align: center;
    color: var(--tl-ink);
}

.beautysociety-timelapse-howto .beautysociety-timelapse-fine--dark {
    margin-top: calc(44 * var(--u));
    font-size: calc(16.2 * var(--u));
}

/* ── Before & After ─────────────────────────────────────────────────────── */

/*
 * Replica of the Figma closer gallery
 * (https://odd-great-15681448.figma.site/): a white chapter, display title,
 * then a grab-to-scroll row of 519 artboard-px tiles. Hovering one zooms
 * the photo inside its frame (overflow clipped) and dims the rest.
 */
.beautysociety-timelapse-after {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(36 * var(--u));
    padding: calc(80 * var(--u)) 0 0;
    overflow-x: hidden;
}

.beautysociety-timelapse-after-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(16 * var(--u));
    width: min(calc(634 * var(--u)), calc(100% - 48px));
    text-align: center;
}

.beautysociety-timelapse-after-title {
    margin: 0;
    font-family: 'FeatureDisplay-Light', 'Times New Roman', Times, serif !important;
    font-weight: 400;
    font-size: calc(56.4 * var(--u));
    line-height: calc(56 * var(--u));
    letter-spacing: calc(-0.2 * var(--u));
    color: var(--tl-ink) !important;
}

.beautysociety-timelapse-after-lede {
    margin: 0;
    max-width: calc(480 * var(--u));
    font-family: 'SuisseIntl-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: calc(18 * var(--u));
    line-height: calc(26 * var(--u));
    color: var(--tl-ink) !important;
}

.beautysociety-timelapse-after-strip {
    display: flex;
    align-items: center;
    gap: calc(6 * var(--u));
    width: 100%;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    user-select: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.beautysociety-timelapse-after-strip::-webkit-scrollbar {
    display: none;
}

.beautysociety-timelapse-after-strip.is-dragging {
    cursor: grabbing;
}

.beautysociety-timelapse-after-tile {
    position: relative;
    z-index: 0;
    flex: 0 0 auto;
    width: calc(519 * var(--u));
    height: calc(519 * var(--u));
    margin: 0;
    overflow: hidden;
}

.beautysociety-timelapse-after-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
    transform: scale(1);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}

.beautysociety-timelapse-after-tile.is-active {
    z-index: 1;
}

.beautysociety-timelapse-after-tile.is-active img {
    opacity: 1;
    transform: scale(1.4);
}

@media (prefers-reduced-motion: reduce) {
    .beautysociety-timelapse-after-tile img {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── Subscribe ──────────────────────────────────────────────────────────── */

/*
 * Sits after the white closer chapter, so it paints its own brand blue the
 * way Introducing / 21 days do. Divi text modules set colour (often with
 * !important) on the wrapper; without a force, the ivory type loses and this
 * reads as ink on blue.
 */
.beautysociety-timelapse-subscribe {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(280 * var(--u)) calc(40 * var(--u));
    text-align: center;
    color: rgb(var(--tl-copy));
}

.beautysociety-timelapse-subscribe-kicker {
    margin: 0;
    font-family: 'SuisseIntl-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: calc(19 * var(--u));
    line-height: 1;
    letter-spacing: calc(0.55 * var(--u));
    text-transform: uppercase;
    color: rgb(var(--tl-copy)) !important;
}

.beautysociety-timelapse-subscribe-title {
    margin: calc(28 * var(--u)) 0 0;
    font-family: 'FeatureDisplay-Light', 'Times New Roman', Times, serif !important;
    font-weight: 400;
    font-size: calc(56.4 * var(--u));
    line-height: calc(56 * var(--u));
    letter-spacing: calc(-0.2 * var(--u));
    color: rgb(var(--tl-copy)) !important;
}

.beautysociety-timelapse-subscribe-title em {
    font-family: 'FeatureDisplay-LightItalic', 'Times New Roman', Times, serif;
    font-style: italic;
}

.beautysociety-timelapse-subscribe-copy {
    margin: calc(36 * var(--u)) auto 0;
    max-width: calc(520 * var(--u));
    font-family: 'SuisseIntl-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: calc(18 * var(--u));
    line-height: calc(26 * var(--u));
    color: rgb(var(--tl-copy)) !important;
}

.beautysociety-timelapse-subscribe-copy em {
    font-family: 'FeatureDisplay-LightItalic', 'Times New Roman', Times, serif;
    font-style: italic;
    font-size: 1.06em;
}

.beautysociety-timelapse-subscribe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: calc(48 * var(--u));
    padding: calc(16 * var(--u)) calc(34 * var(--u));
    border: 1px solid var(--tl-ivory);
    border-radius: calc(999 * var(--u));
    background: var(--tl-ivory);
    font-family: 'SuisseIntl-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: calc(13 * var(--u));
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--tl-ink) !important;
}

.beautysociety-timelapse-subscribe-btn:hover,
.beautysociety-timelapse-subscribe-btn:focus {
    background: transparent;
    color: var(--tl-ivory) !important;
}

/* ── Tablet / mobile ────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
    .beautysociety-timelapse {
        /* Stop scaling with the artboard and set a readable fluid rhythm. */
        --u: 1px;
        font-size: 16px;
    }

    /*
     * The lockup keeps the desktop geometry below the artboard: every value is
     * the same artboard-pixel expression with a floor, so nothing jumps at this
     * breakpoint and the title/timer shrink together with the window. The only
     * departure is the top offset, which also has to clear the mobile header
     * once 284 artboard px stops being enough.
     */
    .beautysociety-timelapse-hero-copy {
        margin-top: max(
            calc(var(--tl-hero-offset, 0px) + 24px),
            calc(var(--tl-hero-crop) + 284 * var(--tl-film-u))
        );
        padding: 0 16px;
    }

    .beautysociety-timelapse-hero-title {
        font-size: max(34px, calc(112 * var(--tl-hero-u)));
        line-height: max(36px, calc(109 * var(--tl-hero-u)));
    }

    /*
     * The clock's floors are set so it still reads as a headline clock on a
     * phone, where the artboard-derived sizes collapse to nothing. They are
     * kept just above the values the desktop curve reaches at this breakpoint,
     * so crossing it is a couple of pixels rather than a step.
     */
    .beautysociety-timelapse-hero-timer {
        margin-top: max(34px, calc(64 * var(--tl-hero-u)));
        gap: max(8px, calc(16 * var(--tl-hero-u)));
    }

    .beautysociety-timelapse-hero-timer-unit {
        min-width: max(56px, calc(64 * var(--tl-hero-u)));
    }

    .beautysociety-timelapse-hero-timer-value {
        font-size: max(32px, calc(40 * var(--tl-hero-u)));
    }

    .beautysociety-timelapse-hero-timer-label {
        margin-top: max(9px, calc(10 * var(--tl-hero-u)));
        font-size: max(10px, calc(11 * var(--tl-hero-u)));
    }

    .beautysociety-timelapse-hero-timer-sep {
        font-size: max(18px, calc(22 * var(--tl-hero-u)));
        line-height: max(32px, calc(40 * var(--tl-hero-u)));
    }

    .beautysociety-timelapse-introducing {
        padding-top: 84px;
    }

    .beautysociety-timelapse-kicker {
        font-size: 15px;
        letter-spacing: 0.08em;
    }

    .beautysociety-timelapse-wordmark {
        margin-top: 54px;
        font-size: clamp(46px, 14vw, 92px);
        line-height: 1;
    }

    .beautysociety-timelapse-lede {
        margin-top: 30px;
        font-size: clamp(19px, 5vw, 34px);
        line-height: 1.28;
        padding: 0 24px;
    }

    .beautysociety-timelapse-portrait {
        padding-top: 60px;
    }

    .beautysociety-timelapse-portrait-card {
        width: min(78vw, 420px);
        height: auto;
        aspect-ratio: 571 / 754;
    }

    .beautysociety-timelapse-meet {
        padding-top: 76px;
    }

    .beautysociety-timelapse-meet-copy {
        font-size: clamp(19px, 4.8vw, 32px);
        line-height: 1.22;
        padding: 0 24px;
    }

    .beautysociety-timelapse-meet-copy br,
    .beautysociety-timelapse-statement-title br,
    .beautysociety-timelapse-lede br,
    .beautysociety-timelapse-routine-copy br,
    .beautysociety-timelapse-howto-title br,
    .beautysociety-timelapse-note br,
    .beautysociety-timelapse-wow-copy br {
        display: none;
    }

    .beautysociety-timelapse-statement {
        padding-top: 80px;
        overflow: visible;
    }

    .beautysociety-timelapse-rule {
        width: calc(100% - 40px);
    }

    /*
     * Desktop parks the drop beside the title and the bottle under the last
     * lines. On a phone those offsets collapse: the drop sits on the rule and
     * the bottle sits under the type. Push the whole stack down — same air
     * under the rule as above it — and leave only a small peach sector of the
     * bottle under the last line.
     */
    .beautysociety-timelapse-statement-inner {
        padding-top: 208px;
        padding-bottom: 228px;
        overflow: visible;
    }

    .beautysociety-timelapse-statement-title {
        font-size: clamp(32px, 8.6vw, 56px);
        line-height: 1.14;
        padding: 0 28px;
    }

    .beautysociety-timelapse-orb--drop {
        width: 108px;
        left: 18px;
        top: 80px;
    }

    .beautysociety-timelapse-orb--bottle {
        width: 200px;
        right: 16px;
        top: auto;
        bottom: 16px;
    }

    .beautysociety-timelapse-tech {
        padding-top: 132px;
    }

    .beautysociety-timelapse-caps {
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: 0.06em;
    }

    /* Stack the lobes vertically so the labels stay legible. */
    .beautysociety-timelapse-venn {
        height: auto;
        margin-top: 44px;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .beautysociety-timelapse-venn-lobe {
        width: min(78vw, 340px);
        height: min(78vw, 340px);
        aspect-ratio: 1;
        flex: 0 0 auto;
        padding-top: 0;
        justify-content: center;
    }

    .beautysociety-timelapse-venn-lobe + .beautysociety-timelapse-venn-lobe {
        margin-left: 0;
        margin-top: -44px;
    }

    .beautysociety-timelapse-venn-key {
        font-size: 13px;
        letter-spacing: 0.06em;
    }

    .beautysociety-timelapse-venn-claim {
        margin-top: 14px;
        font-size: clamp(30px, 8vw, 52px);
        line-height: 1.06;
    }

    .beautysociety-timelapse-note {
        font-size: 15px;
        line-height: 1.55;
        padding: 0 26px;
    }

    .beautysociety-timelapse-tech .beautysociety-timelapse-note {
        margin-top: 46px;
    }

    .beautysociety-timelapse-bridge {
        padding-top: 150px;
    }

    .beautysociety-timelapse-bridge-title {
        font-size: clamp(32px, 8.4vw, 48px);
        line-height: 1.08;
        padding: 0 28px;
    }

    /*
     * Same orbit as desktop, scaled down to the phone: the engine keeps writing
     * artboard-pixel transforms and the field is shrunk as a whole. Desktop is
     * outside this query and is untouched.
     *
     * The ring's own bounding box is fixed by the engine's constants: the widest
     * card orbits at radius 517.8 about a centre 727.2 below the field origin,
     * so the cards sweep from 101.4 to 1353 -- 1252 artboard px tall. Both the
     * section's height and the field's offset are derived from that one scale,
     * so the ring cannot outgrow the box it is clipped to.
     *
     * The scale below is only the value used before the directive measures: it
     * fits the orbit to the screen so the cards stay a sensible size.
     */
    .beautysociety-timelapse-routine {
        --tl-ring-scale: 0.42;

        height: auto;
        min-height: calc(1252px * var(--tl-ring-scale) + 40px);
        margin-top: 90px;
        padding: 0;
        overflow: hidden;
    }

    .beautysociety-timelapse-routine-field {
        z-index: 1;
        top: calc(50% - 727.2px * var(--tl-ring-scale));
        transform: scale(var(--tl-ring-scale));
        transform-origin: 0 0;
    }

    /*
     * The hole at the middle of the ring is 692 artboard px across -- the
     * tightest orbit less half a card either side -- so both the measure and
     * the type are taken off the ring's scale. The text then keeps clear of the
     * cards at whatever size the orbit ends up, instead of being sized against
     * the viewport and colliding with them.
     */
    .beautysociety-timelapse-routine-copy {
        top: 0;
        max-width: min(calc(692px * var(--tl-ring-scale) - 30px), calc(100% - 40px));
        font-size: clamp(15px, calc(36px * var(--tl-ring-scale)), 20px);
        line-height: 1.34;
        padding: 0;
    }

    .beautysociety-timelapse-power {
        padding-top: 110px;
    }

    .beautysociety-timelapse-days {
        padding-top: 130px;
    }

    .beautysociety-timelapse-days-title {
        font-size: clamp(30px, 8vw, 60px);
        line-height: 1.08;
        padding: 0 22px;
    }

    .beautysociety-timelapse-wow {
        padding-top: 70px;
    }

    .beautysociety-timelapse-wow-copy {
        font-size: 15px;
        line-height: 1.5;
        padding: 0 26px;
    }

    .beautysociety-timelapse-wow .beautysociety-timelapse-fine {
        margin-top: 54px;
    }

    .beautysociety-timelapse-fine {
        font-size: 12px;
        line-height: 1.55;
        padding: 0 26px;
    }

    .beautysociety-timelapse-closeup {
        width: calc(100% - 32px);
        max-width: 100%;
        margin: 48px auto 0;
        height: min(72vw, 420px);
    }

    .beautysociety-timelapse-closeup img {
        object-position: 42% 38%;
    }

    .beautysociety-timelapse-renew {
        padding-top: 96px;
    }

    .beautysociety-timelapse-renew-title {
        font-size: clamp(38px, 10.4vw, 84px);
        line-height: 1.12;
    }

    .beautysociety-timelapse-ingredients {
        padding-top: 118px;
    }

    .beautysociety-timelapse-ingredient {
        display: block;
        width: calc(100% - 32px);
        padding: 32px 20px 40px;
        overflow: hidden;
        border-radius: 12px;
    }

    .beautysociety-timelapse-ingredient::before,
    .beautysociety-timelapse-ingredient::after {
        left: 0;
        width: 100%;
        margin-left: 0;
    }

    .beautysociety-timelapse-ingredient::after {
        background-image: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.78) 0%,
            rgba(255, 255, 255, 0.88) 45%,
            rgba(255, 255, 255, 0.8) 100%
        );
    }

    .beautysociety-timelapse-ingredients .beautysociety-timelapse-ingredient:first-of-type {
        margin-top: 70px;
    }

    .beautysociety-timelapse-ingredient-head {
        padding-left: 0;
    }

    .beautysociety-timelapse-ingredient-key {
        font-size: 13px;
        letter-spacing: 0.06em;
    }

    .beautysociety-timelapse-ingredient-claim {
        margin-top: 16px;
        font-size: clamp(26px, 7vw, 38px);
        line-height: 1.1;
    }

    .beautysociety-timelapse-ingredient-body {
        margin-top: 26px;
    }

    .beautysociety-timelapse-ingredient-summary {
        max-width: none;
        font-size: 16px;
        line-height: 1.5;
    }

    .beautysociety-timelapse-ingredient-list {
        margin-top: 24px;
    }

    .beautysociety-timelapse-ingredient-list li {
        padding-left: 20px;
        font-size: 14px;
        line-height: 1.9;
    }

    .beautysociety-timelapse-howto {
        padding-top: 110px;
        padding-bottom: 48px;
    }

    .beautysociety-timelapse-howto-banner {
        width: calc(100% - 40px);
        height: min(34vh, 220px);
        margin-bottom: 56px;
    }

    .beautysociety-timelapse-howto-title {
        margin-top: 46px;
        font-size: clamp(22px, 5.6vw, 34px);
        line-height: 1.24;
        padding: 0 26px;
    }

    .beautysociety-timelapse-howto-copy {
        margin-top: 32px;
        max-width: none;
        padding: 0 26px;
        font-size: 16px;
        line-height: 1.6;
    }

    .beautysociety-timelapse-after {
        gap: 24px;
        padding: 48px 0 0;
    }

    .beautysociety-timelapse-after-copy {
        gap: 12px;
        width: calc(100% - 40px);
    }

    .beautysociety-timelapse-after-title {
        font-size: clamp(32px, 8.4vw, 48px);
        line-height: 1.08;
    }

    .beautysociety-timelapse-after-lede {
        max-width: 22em;
        font-size: 16px;
        line-height: 1.6;
        padding: 0 8px;
    }

    .beautysociety-timelapse-after-strip {
        gap: 6px;
        padding: 0 16px;
    }

    .beautysociety-timelapse-after-tile {
        width: min(72vw, 320px);
        height: min(72vw, 320px);
    }

    .beautysociety-timelapse-subscribe {
        padding: 200px 28px;
    }

    .beautysociety-timelapse-subscribe-kicker {
        font-size: 13px;
        letter-spacing: 0.16em;
    }

    .beautysociety-timelapse-subscribe-title {
        margin-top: 20px;
        font-size: clamp(32px, 8.4vw, 48px);
        line-height: 1.08;
    }

    .beautysociety-timelapse-subscribe-copy {
        margin-top: 28px;
        max-width: 34em;
        font-size: 16px;
        line-height: 1.6;
    }

    .beautysociety-timelapse-subscribe-btn {
        margin-top: 40px;
        padding: 16px 28px;
        font-size: 12px;
    }

    .beautysociety-timelapse-howto .beautysociety-timelapse-fine--dark {
        margin-top: 34px;
    }
}