/* ==========================================================================
   Agenda Details page (Figma: QF - BilAraby - WebsiteDesign-Concept-2,
   node 40000567:26357 "AGENDA"). Uses the --hr-* tokens declared globally
   in layout-revamp.css, plus a couple of page-only tokens below.
   Prefix: .agd-
   ========================================================================== */
.agenda-revamp {
    --agd-purple-500: #8e3b78;
    --agd-purple-400: #a15c8f;
    /* Hero wash, sampled off Figma's own render of this page's
       "Innerpage-hero" (node 40001286:68361, 1920x556). It's a BLUE that runs
       deep at the top and lightens all the way down, not the navy/teal this
       hero used to carry. -200 is the colour at the hero's bottom edge, where
       .agd-lineup::before picks the wash up and carries it into the cream. */
    --agd-blue-200: #a9bec6;
    /* Inline gutter for this page's sections. Deliberately the SAME scale
       .header-revamp/.footer-revamp run (layout-revamp.css: 160px, 40px under
       1200, 24px under 768), which is Figma's own content inset - the agenda
       content frame sits at x=160 on the 1920 artboard (node 40001286:68367),
       giving exactly 1600 of content there.
       This page was instead running a centred max-width:1400px inside 24px of
       section padding, which lines up with nothing: at a 1512 laptop it put
       content 53px from the viewport edge while the header directly above it
       sat at 160px, and on a 1920 monitor it pushed content out to 260px while
       the header stayed at 160px. Wrong in both directions, and much tighter
       than the design at laptop sizes. */
    --agd-gutter: 160px;
    background: var(--hr-cream-500);
    font-family: 'Almarai', 'Helvetica Neue', Arial, sans-serif;
}
.agd-accent {
    color: #e8a82e;
    font-weight: 700;
}

/* .hr-btn/.hr-btn-primary primitives, re-declared and scoped here rather
   than loading home-revamp.css — same convention as summit-revamp.css. */
.agenda-revamp .hr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    gap: 8px;
    /* Figma's px-[24px]/py-[16px] is measured INCLUSIVE of the 1.5px stroke
       (its strokes are inside-aligned), which is what makes the component
       exactly 56px tall. Adding 24/16 to the border instead rendered it 59px
       and 3px wide of the design, so the stroke is subtracted here. */
    padding: 14.5px 22.5px;
    border-radius: 61px;
    font-weight: 700;
    font-size: 16px;
    border: 1.5px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease;
}
.agenda-revamp .hr-btn:hover { transform: translateY(-2px); text-decoration: none; }
.agenda-revamp .hr-btn-primary {
    background: var(--hr-yellow-500);
    color: var(--hr-cream-50);
    /* The home hero's "Culture" ring. This is NOT the solid #fff that was here
       once and was rightly removed - that drew a hard, even ring all the way
       round. Culture's is 61% white with border-bottom-width:0, so it lights
       the top and sides and leaves the bottom edge going straight from #d98500
       into the wash, which is what the render-sampling note above actually
       describes. Costs 1px of height: 14.5+24+14.5 plus 2px top and 0 bottom
       is 55px, not the 56 a 1.5px border on both sides gave - which is exactly
       what Culture measures on its own (it only reads 56 on the home page
       because a flex sibling stretches it). */
    border: 2px outset #ffffff9c;
    border-bottom-width: 0;
    box-shadow:
        inset 0 4px 6.1px rgba(255,255,255,.23),
        7px 63px 18px rgba(0,0,0,.02),
        2px 23px 14px rgba(0,0,0,.02),
        1px 10px 10px rgba(0,0,0,.03),
        0 3px 6px rgba(0,0,0,.03);
}
/* Culture holds its resting shadow on hover and lights the shared ::before
   ellipse instead; home-revamp.css records the amber drop-shadow that was here
   as invented. The translateY(-2px) on .agenda-revamp .hr-btn:hover stays -
   home's .hr-btn:hover lifts too. */
.agenda-revamp .hr-btn-primary:hover { color: var(--hr-cream-50); }

.agd-diamond {
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background: var(--hr-cream-500);
    flex-shrink: 0;
}

.agd-icon-mask {
    display: inline-block;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    flex-shrink: 0;
}

/* ---------- Hero: blue wash + brushed texture (no background image) ---------- */
.agd-hero {
    position: relative;
    min-height: 556px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 72px var(--agd-gutter) 40px;
    /* Stop percentages are the sampled y / 556 (the design frame's height),
       so the curve holds a near-flat deep blue for the top ~80px and then
       lightens steadily — a plain two-stop gradient reads noticeably paler
       through the middle than Figma's does. */
    background: linear-gradient(to bottom,
        #13527c 0%,
        #13527c 14%,
        #1f5b84 29%,
        #31688c 43%,
        #477898 58%,
        #628ba5 72%,
        #7a9db1 86%,
        var(--agd-blue-200) 100%);
    overflow: hidden;
}
/* Brushed texture over the wash — without it a plain linear-gradient() reads
   flat and plastic, which is how this hero used to look. Same tiled
   feTurbulence overlay as events-revamp.css .events-revamp::before (see there
   for the feComponentTransfer re-centering rationale) at the same 0.85/2 and
   opacity:.5, because Figma's render of THIS hero measures the same grain
   strength: ~9 stdev of per-pixel variation in the dark top band easing to ~6
   by the pale bottom, which is what a fixed-opacity overlay produces. */
.agd-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHR5cGU9J3NhdHVyYXRlJyB2YWx1ZXM9JzAnLz48ZmVDb21wb25lbnRUcmFuc2Zlcj48ZmVGdW5jUiB0eXBlPSdsaW5lYXInIHNsb3BlPScxJyBpbnRlcmNlcHQ9Jy0wLjIzMDInLz48ZmVGdW5jRyB0eXBlPSdsaW5lYXInIHNsb3BlPScxJyBpbnRlcmNlcHQ9Jy0wLjIzMDInLz48ZmVGdW5jQiB0eXBlPSdsaW5lYXInIHNsb3BlPScxJyBpbnRlcmNlcHQ9Jy0wLjIzMDInLz48L2ZlQ29tcG9uZW50VHJhbnNmZXI+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
    background-repeat: repeat;
    opacity: .5;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 0;
}
.agd-hero-scrim {
    position: absolute;
    inset: 0;
    background: transparent;
}
/* Decorative overlay flourish (Figma) - same reusable asset/pattern as every
   other revamped detail hero (event, video, podcast, press-release, about,
   bilaraby-talks, blogs, nominate, contact); this one was missing it. */
.agd-hero-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
/* Both patterns hang off the hero's BOTTOM edge at their own height (Figma:
   328.435px right, 236.331px left, in a 556px hero) — they are not full-height
   layers. Stretching them to height:100% with object-fit:cover, which is what
   this used to do, cropped each one into a hard-edged rectangle: the crop
   seams read as a pale block sitting over the wash, roughly a third of the
   hero wide on each side, with nothing between them. Percentage widths (709
   and 305.31 of the 1920 artboard) so they still scale with the viewport;
   px heights because the hero's own height is fixed, and a bottom-anchored
   layer stays seated even when a long breadcrumb grows the hero taller. */
.agd-hero-decor img {
    position: absolute;
    bottom: 0;
    mix-blend-mode: overlay;
}
.agd-hero-decor-left { left: 0; width: 15.9%; height: 236px; }
.agd-hero-decor-right { left: 63.05%; width: 36.93%; height: 328px; }
/* The mobile artboard replaces the pair with a single full-width shape that
   carries both wedges — swapped in, not resized, in the media query below. */
.agd-hero-decor-mobile { display: none; }
[dir="rtl"] .agd-hero-decor-left { left: auto; right: 0; transform: scaleX(-1); }
[dir="rtl"] .agd-hero-decor-right { left: auto; right: 63.05%; transform: scaleX(-1); }
.agd-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
}
.agd-hero-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 64px;
    padding-bottom: 40px;
    flex-wrap: wrap;
}
.agd-hero-title {
    font-size: 64px;
    line-height: 72px;
    font-weight: 700;
    color: #ffffff;
    text-transform: capitalize;
    max-width: 640px;
    margin: 0;
}
.agd-hero-copy {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    max-width: 480px;
}
.agd-hero-desc {
    font-size: 18px;
    line-height: 1.5;
    color: var(--hr-cream-600, #e3e1d4);
    margin: 0;
}
@media (max-width: 1199.98px) {
    .agenda-revamp { --agd-gutter: 40px; }
    .agd-hero-title { font-size: 44px; line-height: 54px; }
}

.agd-breadcrumb-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 24px;
    padding-bottom: 24px;
}
/* Full-bleed rule below the breadcrumb (Figma) — 100vw + centering escapes
   .agd-hero-inner's max-width so the line reaches both viewport edges rather
   than stopping at the content column; .agd-hero's own overflow:hidden clips
   it back down, so no horizontal scrollbar is introduced. */
.agd-breadcrumb-row::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    background: rgba(255, 255, 255, .2);
}
.agd-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    flex-wrap: wrap;
    letter-spacing: 0.5px;
}
/* Full strength per Figma's Breadcrumb component - only font weight marks the
   current crumb, there is no resting opacity on the others. Full note in
   press-releases-revamp.css. */
.agd-breadcrumb a,
.agd-breadcrumb span:not(.agd-breadcrumb-sep) { opacity: 1; }
.agd-breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: opacity .2s ease;
}
.agd-breadcrumb a:hover { opacity: 1; color: inherit; text-decoration: underline; }
.agd-breadcrumb-current { font-weight: 700; opacity: 1 !important; }
.agd-breadcrumb-sep {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, .4);
    flex-shrink: 0;
}
/* Shown from tablet up (hidden below 768px — see the mobile media query
   below, it has no room there and overlaps the breadcrumb) - smaller
   diamonds by default, full desktop scale from 1200px up. */
.agd-hero-divider {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 90px;
    /* Touch-gap for the 10px mobile diamonds: 10 * (sqrt(2)-1) = 4.14px. */
    gap: 4.14px;
}
.agd-hero-divider-line {
    flex: 1 1 auto;
    height: 1px;
    background: rgba(249, 247, 234, .5);
}
@media (min-width: 1200px) {
    .agd-hero-divider {
        width: 260px;
        /* BIL-610: the diamonds' rotated bounding box (28.28px) is bigger
           than their unrotated layout box (20px) flex spacing uses (4.14px
           overhang per side) - this cancels exactly that overhang so
           adjacent diamonds' corners just touch, with 0px visible gap. */
        gap: 8.3px;
        /* Bleeds the diamond row out to the viewport's right edge; it is the
           section gutter it has to cancel, not the old centring maths. */
        margin-inline-end: calc(var(--agd-gutter) * -1);
    }
    .agd-hero-divider .agd-diamond { width: 20px; height: 20px; }
}
@media (max-width: 767.98px) {
    .agenda-revamp { --agd-gutter: 24px; }
    /* The diamond cluster has no room to breathe at this width and ends up
       overlapping the breadcrumb text — drop the decoration itself here and
       keep the plain "|" separators between crumbs. */
    .agd-hero-divider { display: none; }
}
/* ---------- Session Lineup ---------- */
/* Bottom padding is a clear band for .agd-lineup-corner, which is anchored to
   this section's bottom edge. --agd-corner-h sizes the band and the flourish
   from the SAME value, so the artwork exactly fills it and can never reach up
   into the last timeline row at any viewport width.
   Why the design's own numbers can't be copied literally: Figma's flourish
   (x 0-181) does overlap the content frame's bottom 29px, but it gets away
   with it by stopping 11px short of the timeline rail horizontally - the
   1920 artboard insets that frame by 160px (node 40001286:68367 at x=160),
   putting the rail at x=192. Our container is both narrower (1400 vs 1600)
   and far less inset - only 32px of margin at a 1512 laptop - so the same
   artwork anchored to the section edge lands ~117px PAST the rail, on top of
   the last row. It looks right on a wide monitor purely because the centred
   container has drifted right of the flourish by then. Sizing the flourish to
   this band is what makes every width match that wide-monitor reading. */
.agd-lineup {
    --agd-corner-h: 120px;
    /* The flourish's OWN height, which defaults to the band so the "can never
       reach the content" guarantee above still holds by construction. Only the
       widest band overrides it, where there is room beside the content column
       for the artwork to rise past the band without meeting anything. */
    --agd-corner-size: var(--agd-corner-h);
    /* Slides the artwork left until its arc is off the section's left edge
       (.agd-lineup clips it), which is what turns the design's arc+wedge+diamond
       into the plain wedge+diamond this page wants: the arc occupies x 0-52 of
       the 181-wide vector and the diamond's left vertex is at x=59, so shifting
       by exactly 59 units drops the arc and seats the whole diamond flush
       against the edge, with nothing of it trimmed. Derived from the size rather
       than hard-coded so the two can never drift apart. */
    --agd-corner-shift: calc(var(--agd-corner-size) / 149 * -59);
    position: relative;
    padding: 80px var(--agd-gutter) var(--agd-corner-h);
    overflow: hidden;
    /* Hairline seam against the footer. There is no layout gap - the section's
       bottom and .footer-revamp's top are the same value to the decimal - but
       that value is fractional (2391.85 here), so at DPR 2 the boundary falls
       mid-device-pixel and each side rounds its own paint edge, letting a sliver
       of the cream BEHIND show through: .agd-lineup is transparent, so the seam
       exposes .agenda-revamp's --hr-cream-500. This paints 2px of the footer's
       own colour just below the section, so whatever the rounding does the pixel
       next to the footer is the footer's colour. Outset rather than inset so it
       never cuts across the flourish sitting on that same bottom edge, and it
       lands on the footer's own top padding, so it covers no content either way
       the two paint orders resolve. */
    box-shadow: 0 2px 0 var(--hr-brown-500);
}
/* Continues the hero's gradient into a fade-to-cream, so the page background
   transitions smoothly across the hero/lineup section boundary (Figma) rather
   than cutting hard at the hero's own edge.

   Curve borrowed from About Us, the same change made to .summit-listing-revamp
   and .speakers-revamp (the full derivation is on the former): its wash alpha,
   sampled down the Figma export, runs .91 / .84 / .75 / .59 / .42 / .23 / .01
   and is spent by 82% of its box, renormalised here onto 0-100%.
   The stops it replaces were the opposite failing to those two - not a late
   cliff but a front-loaded one: they reached #f0eee2, all but cream, by 36%
   (94px), then spent the remaining 166px crawling to #f9f7e9. So the blue
   disappeared in the first third and the rest of the span did nothing.

   Expressed as opaque colour rather than an alpha ramp because this fade has to
   START on exactly the hero's closing blue to stay seamless across the seam.
   Each stop is therefore blue-200 mixed toward cream-500 by the curve's own
   weight at that position (1 / .923 / .824 / .648 / .462 / .253 / 0) - the same
   numbers the two alpha ramps use, resolved against #a9bec6 and #f9f7e9.

   The DISTRIBUTION, though, has to be this page's own, because "Session Lineup"
   starts only 86px below this section's top (its 80px padding) where the listing
   has 376px of room. Two attempts bracket the problem: spreading the listing's
   even curve over all 260px ran colour 174px past the heading and behind the
   first day card; compressing that same even curve into the 76px before the
   heading cleared it but turned the whole transition into a hard 76px band.

   So the weights here are front-loaded instead of even - most of the blue is
   given up in the first 60px, then a long, very faint tail:
     y:  0    20    40    60    80   100   140   180px
     w:  1   .72   .44   .24   .09   .04   .01     0
   By the heading at 86px the weight is ~.08, which resolves to #f2f2e6 against
   this page's cream - a seven-unit difference, no blue that reads as blue - and
   it keeps decaying for another 94px after that rather than stopping dead. The
   result is lighter EARLIER and softer at the end, which is what the short run
   needs; a genuinely long even ramp like the listing's would need the heading
   pushed down (this section's padding-top), not more stops. */
.agd-lineup::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 260px;
    background: linear-gradient(to bottom,
        var(--agd-blue-200) 0%,
        #bfced0 7.69%,
        #d6deda 15.38%,
        #e6e9e1 23.08%,
        #f2f2e6 30.77%,
        #f6f5e8 38.46%,
        #f8f6e9 53.85%,
        var(--hr-cream-500) 69.23%,
        var(--hr-cream-500) 100%);
    z-index: 0;
    pointer-events: none;
}
/* Continues the hero's grain overlay (.agd-hero::before) across this fade so
   the texture doesn't cut off hard at the hero/lineup seam — masked to fade
   out over the same span as the colour wash, so it dissolves into the flat
   cream rather than speckling it. */
.agd-lineup::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 260px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHR5cGU9J3NhdHVyYXRlJyB2YWx1ZXM9JzAnLz48ZmVDb21wb25lbnRUcmFuc2Zlcj48ZmVGdW5jUiB0eXBlPSdsaW5lYXInIHNsb3BlPScxJyBpbnRlcmNlcHQ9Jy0wLjIzMDInLz48ZmVGdW5jRyB0eXBlPSdsaW5lYXInIHNsb3BlPScxJyBpbnRlcmNlcHQ9Jy0wLjIzMDInLz48ZmVGdW5jQiB0eXBlPSdsaW5lYXInIHNsb3BlPScxJyBpbnRlcmNlcHQ9Jy0wLjIzMDInLz48L2ZlQ29tcG9uZW50VHJhbnNmZXI+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
    background-repeat: repeat;
    opacity: .5;
    mix-blend-mode: overlay;
    /* The colour fade's own weights, so the grain thins at exactly the rate the
       blue does and the two finish together at 69.23%. Left on its old straight
       1->0 line it stayed near full strength through the pale tail, speckling
       cream that no longer had any wash under it. */
    -webkit-mask-image: linear-gradient(to bottom,
        rgba(0,0,0,1) 0%, rgba(0,0,0,.72) 7.69%, rgba(0,0,0,.44) 15.38%,
        rgba(0,0,0,.24) 23.08%, rgba(0,0,0,.09) 30.77%, rgba(0,0,0,.04) 38.46%,
        rgba(0,0,0,.01) 53.85%, rgba(0,0,0,0) 69.23%);
    mask-image: linear-gradient(to bottom,
        rgba(0,0,0,1) 0%, rgba(0,0,0,.72) 7.69%, rgba(0,0,0,.44) 15.38%,
        rgba(0,0,0,.24) 23.08%, rgba(0,0,0,.09) 30.77%, rgba(0,0,0,.04) 38.46%,
        rgba(0,0,0,.01) 53.85%, rgba(0,0,0,0) 69.23%);
    pointer-events: none;
    z-index: 0;
}
.agd-lineup-inner { position: relative; z-index: 1; }
/* Corner flourish — diamond + wedge. Anchored to the section's own
   bottom-left corner and taken OUT of the flow: in normal flow its 246px
   height sat below the last timeline row and pushed ~190px of dead space
   between the agenda and the footer. It lives outside .agd-lineup-inner
   (z-index:1) at z-index:0, so on the tallest viewports — where it reaches
   up past the last row's baseline — the rail, time column and text all
   paint over it instead of being covered. */
/* The Figma "Intersect" vector (node 40002817:90302) exported as-is: the arc,
   the wedge and the diamond are one two-path shape, so there is nothing to
   reassemble by hand. It replaces the old 259x246 PNG of node 40001286:68363,
   which had no arc at all, cropped its diamond off at the left edge, painted
   that diamond an off-palette #3272a0, and baked an opaque cream rectangle in
   behind everything. The SVG is transparent instead - safe here because
   .agd-lineup::before's wash only covers the section's top 260px, so this
   corner sits on flat --hr-cream-500. Its two fills are the project's own
   --hr-green-500 (#006D62) and --hr-blue-500 (#005087). */
.agd-lineup-corner {
    position: absolute;
    /* Flush with the section's real left edge (logical, so RTL mirrors it)
       and its bottom edge, so the flourish touches the footer with no gap.
       The shape's own left and bottom edges are straight and flush with its
       box, so it seats into the corner with no trimming. */
    inset-inline-start: var(--agd-corner-shift);
    bottom: 0;
    /* Height comes from the band --agd-corner-h reserves above, so the two can
       never drift apart; aspect-ratio carries the vector's exact 181:149 (the
       export has preserveAspectRatio="none", so any drift would stretch it).
       At the default 120px band that renders 146x120 rather than the artwork's
       intrinsic 181x149. */
    height: var(--agd-corner-size);
    width: auto;
    aspect-ratio: 181 / 149;
    z-index: 0;
    pointer-events: none;
}
/* Widest band only (--agd-gutter is 160px from 1200px up, putting the timeline
   rail at x=166.5 and the content box at x=160). 189px is the largest the
   artwork can be while the whole diamond still shows: at that height it is
   229.7px wide and shifted -74.8px, so 154.9px is visible and the wedge's tip
   stops 11.6px short of the rail — which is the same clearance Figma leaves
   (its 181px flourish against a rail at x=192). It stands 69px taller than the
   band and so rises behind the last row, but only across x 0-155, and nothing
   in this section is drawn left of 160px down there.
   Not applied below 1200px: the gutter collapses to 40px there, putting the
   rail at x=46.5, so anything tall enough to clear the band would cross it. */
@media (min-width: 1200px) {
    .agd-lineup { --agd-corner-size: 189px; }
}
.agd-lineup-corner-img { display: block; width: 100%; height: 100%; }
[dir="rtl"] .agd-lineup-corner-img { transform: scaleX(-1); }
.agd-lineup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.agd-lineup-head h2 {
    font-size: 40px;
    font-weight: 700;
    color: var(--hr-brown-500);
    margin: 0;
}
.agd-lineup-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
/* Segmented-control "slider" (Figma: node 40001286:68372) - one shared
   translucent track with the active day rendered as a floating white pill,
   not two separate buttons sitting side by side with a gap. */
.agd-day-tabs {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50px;
    padding: 4px;
    /* The home page's glass recipe (.home-revamp .hr-btn-ghost-light): a
       translucent white fill over a real backdrop blur. The fill was already
       translucent here but nothing was being blurred behind it, so the track
       read as flat milky plastic rather than glass. */
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}
.agd-day-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 50px;
    border: 1.5px solid transparent;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    color: #404040;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.agd-day-tab:hover { color: var(--hr-brown-500); text-decoration: none; }
/* The home page's "Discover More" pill (.home-revamp .hr-btn-ghost-dark): its
   white hairline and single soft 4px shadow, plus the two shared treatments
   that button carries from layout-revamp.css - the masked three-stop glass rim
   (::after, ring-start at white 20%) and the bottom hover ellipse (::before).
   This tab is added to both of those selector lists there rather than
   re-declaring them here.

   Two things are deliberately NOT taken from it: the label keeps its own
   yellow, and the fill stays the cream .85 this pill already used. That button
   glasses over a DARK photo, where its 20% white reads as a lit pill; this one
   sits on a 60% white track over cream, where 20% dissolves into its own track
   (which is what the fill was raised off in the first place). */
.agd-day-tab.is-active {
    padding: 10.5px 22.5px;
    border-radius: 61px;
    background: rgba(255, 254, 244, .85);
    border-color: rgba(255, 255, 255, 0.20);
    box-shadow: 0px 4px 6.1px 0px rgba(0, 0, 0, 0.06);
    color: var(--hr-yellow-500);
    transition: all 0.2s ease-in-out;
}
.agd-day-tab.is-active:hover { color: var(--hr-yellow-500); }
/* Download PDF (Figma: node 40002476:87297) - an instance of the same shared
   primary Button as .hr-btn-primary above, with the icon slot switched off.
   It carries the component's own transparent-white 1.5px stroke rather than
   the solid #fff the hero's instance uses, and the yellow is yellow/yellow-500
   (#d98500) - not the lighter #e8a82e this button used to paint - with
   cream/cream-50 text at Labels/Label XSmall/Bold (16px/24px, 700).
   The component also carries an Ellipse 262 plus-lighter glow, but it sits at
   top:59.55px inside a 56px-tall button that clips its overflow, so it never
   renders - deliberately not reproduced. */
.agd-pdf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Same inside-stroke arithmetic as .hr-btn above: Figma's px-24/py-16 plus
       its 1.5px stroke is the component's 158x56, not 158x59. */
    padding: 14.5px 22.5px;
    border: 2px outset #ffffff9c;
    border-bottom-width: 0;
    border-radius: 61px;
    background: var(--hr-yellow-500);
    color: var(--hr-cream-50);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    text-decoration: none;
    white-space: nowrap;
    cursor: default;
    /* Figma's five drop shadows (the 4px 40px 16px layer is fully
       transparent, so it is dropped) over the inset white top highlight -
       the same neutral, ambient stack .hr-btn-primary uses, not the amber
       glow that was here before. */
    box-shadow:
        inset 0 4px 6.1px rgba(255,255,255,.23),
        7px 63px 18px rgba(0,0,0,.02),
        2px 23px 14px rgba(0,0,0,.02),
        1px 10px 10px rgba(0,0,0,.03),
        0 3px 6px rgba(0,0,0,.03);
}
.agd-pdf-btn:hover { color: var(--hr-cream-50); text-decoration: none; }

/* ---------- Day summary card ---------- */
/* Figma node 40001286:68378 - a radial glow from the top-left corner (NOT a
   diagonal linear gradient), exact color stops from the source SVG. */
.agd-day-card {
    position: relative;
    /* Stacking context, so .agd-day-card-flourish's z-index:-1 stays inside the
       card - painting over its background but under the in-flow text. */
    z-index: 0;
    overflow: hidden;
    border-radius: 30px;
    /* Figma node 40001286:68378: px-[39px] py-[42px]. */
    padding: 42px 39px;
    /* CSS radial-gradient() can't express Figma's sheared/rotated ellipse
       (the gradientTransform has off-diagonal terms) - reproduced with the
       identical inline SVG gradient definition instead of approximating. */
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1600 292' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23grad)'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(168.2 34.226 -27.19 28.582 -113.26 -50.264)'><stop stop-color='rgb(179,124,165)' offset='0'/><stop stop-color='rgb(161,92,143)' offset='0.5'/><stop stop-color='rgb(142,59,120)' offset='1'/></radialGradient></defs></svg>");
    background-size: 100% 100%;
    margin-bottom: 32px;
}
/* Decorative light wash (Figma node 40001286:68379 -> 68380 -> 68381). This is
   Figma's transform chain reproduced literally rather than approximated, because
   approximating it is what got this wrong before: the net effect on the artwork
   is a VERTICAL flip plus 0.57deg, which is not the same as the horizontal
   mirror it superficially looks like, and the two put the shape in visibly
   different places.

   Outer box = the blurred, clipping frame; it is rotated 180deg, which is why
   Figma reports its origin at the card's (682.4375, 639.129) - that is the box's
   opposite corner, not a position below the card. Its own clip is what cuts the
   wash off partway across the card.

   Absolute px, not percentages: with the type now matching Figma exactly and the
   description capped at its 1077.75px, the card comes out 292px tall - the same
   as the design frame - so the design's own pixel offsets land correctly. The
   box also extends 347px below the card, so it still covers the card if the copy
   wraps to more lines and the card grows. */
.agd-day-card-flourish {
    position: absolute;
    z-index: -1;
    left: -416.44px;
    top: -383.13px;
    width: 1098.875px;
    height: 1022.256px;
    transform: rotate(180deg);
    /* Figma's declared layer blur. It has to be this large: the artwork is a
       hard-edged zigzag, and at a small radius those Vs read as distinct
       chevrons instead of the single soft wash the design shows. */
    filter: blur(50px);
    overflow: hidden;
    pointer-events: none;
}
.agd-day-card-flourish img {
    position: absolute;
    /* -191.5/-286.1 is the inner frame's offset; the extra 3.813/8.9035 is the
       centring of the 1802.909x779.423 artwork inside that 1810.535x797.23
       frame, which Figma expresses as a flex centre. */
    left: -187.687px;
    top: -277.197px;
    width: 1802.909px;
    height: 779.423px;
    max-width: none;
    /* Written rotate-then-scale to match Figma's own compose order (R x S). */
    transform: rotate(-179.43deg) scaleY(-1);
}
[dir="rtl"] .agd-day-card-flourish {
    left: auto;
    right: -416.44px;
    transform: rotate(180deg) scaleX(-1);
}
/* Diamond + ribbon decoration in the card's top-right corner - the exact
   Figma-exported asset (already includes the card's own top/bottom-right
   rounded corners at its native size), not a hand-tuned CSS approximation. */
.agd-day-card-corner {
    position: absolute;
    /* Anchored to the bottom, not the top: the asset's own rounded corners
       (baked into the SVG) are meant to hug the card's actual bottom-right
       corner. Anchoring top:0 with a capped height left a big empty gap
       below it on mobile, where the card grows much taller as its text
       wraps more - bottom:0 keeps it glued to the real corner regardless
       of how tall the card gets, with any extra height just adding empty
       space above it instead.
       The asset's own band shape tapers upward as it nears the right
       corner (~15px short of the canvas edge there, even though its left
       side already touches) - nudging the whole image down closes that
       corner gap; the card's own overflow:hidden trims the now-touching
       left side's small overshoot, which is invisible. */
    bottom: 0;
    right: 0;
    height: min(100%, 260px);
    width: auto;
    max-width: 45%;
    pointer-events: none;
}
[dir="rtl"] .agd-day-card-corner { right: auto; left: 0; transform: scaleX(-1); }

/* Bottom-left decorative vector. Glued to the card's bottom-left corner in LTR
   and mirrored to the bottom-right in RTL, so it always sits on the side the
   copy reads away from. The layer's progressive blur AND its 0.3/0.3 nested
   opacity both live inside day-card-vector.svg, built the same way as
   summit-listing-revamp/tile-flourish.svg - CSS only places it. */
.agd-day-card-vector {
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    width: min(683px, 55%);
    height: auto;
    max-width: none;
    pointer-events: none;
}
[dir="rtl"] .agd-day-card-vector {
    left: auto;
    right: 0;
    transform: scaleX(-1);
}
.agd-day-card-title {
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    color: var(--hr-cream-500);
    /* 16px is Figma's gap between the title and the meta row (node 68383). */
    margin: 0 0 16px;
}
.agd-day-card-meta {
    display: flex;
    flex-wrap: wrap;
    /* Figma node 68385 gap is 16px between the two meta items; the 24px below
       is the separate gap from this row down to the description (node 68382). */
    gap: 16px;
    margin-bottom: 24px;
}
.agd-day-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Body/Body Large/Regular - 24/32, same as the description. */
    font-size: 24px;
    line-height: 32px;
    color: var(--hr-cream-500);
    white-space: nowrap;
}
/* The two icons are NOT the same box in Figma: the clock is 24x24 (node 68387),
   the location pin is 18x20 (node 68390). */
.agd-day-card-meta-item .agd-icon-mask { width: 24px; height: 24px; }
.agd-day-card-meta-item--location .agd-icon-mask { width: 18px; height: 20px; }
.agd-day-card-desc {
    font-size: 24px;
    line-height: 32px;
    color: var(--hr-cream-500);
    opacity: .7;
    margin: 0;
    /* Figma node 68392 is exactly 1077.75px wide - keeping the fraction matters:
       it is what makes the copy break onto the same three lines as the design,
       which in turn is what keeps the card 292px tall. */
    max-width: 1077.75px;
}

/* ---------- Timeline ---------- */
/* Each row supplies its own diamond marker (::before) rather than a
   separately-positioned rail — that keeps the marker glued to its row
   regardless of how tall the row's content makes it, with no manual
   height bookkeeping between two parallel columns. */
.agd-timeline-items {
    /* Clearance reserved at the inline start for the dotted rail and its
       diamonds, before the time column starts. Figma (node 40001286:68393)
       puts the rail's centre line at x=32 and the "09:00" text at x=99 - 67px
       of breathing room - so a diamond's right tip never crowds the time.
       The rail's centre here sits at 6.5px + 9px/2 = 11px, hence 11 + 67.
       Every rail/diamond offset below is derived from this one value so the
       gap can be retuned in one place instead of re-deriving three separate
       magic numbers that all have to move together. */
    --agd-rail-gutter: 78px;
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-inline-start: var(--agd-rail-gutter);
}
.agd-timeline-items::before {
    content: "";
    position: absolute;
    inset-inline-start: 6.5px;
    top: 18px;
    bottom: 18px;
    width: 9px;
    background: repeating-linear-gradient(to bottom, var(--hr-cream-600, #e3e1d4) 0 3px, transparent 3px 6px);
}
.agd-item {
    position: relative;
    display: flex;
    gap: 40px;
    padding-block: 40px;
    border-bottom: 1px solid #e5e7eb;
}
.agd-item::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--agd-rail-gutter) * -1);
    top: 44px;
    width: 22px;
    height: 22px;
    transform: rotate(45deg);
    background: var(--agd-purple-500);
}
.agd-timeline-items > .agd-item:first-child { padding-top: 8px; }
.agd-timeline-items > .agd-item:first-child::before { top: 12px; }
/* The rail (.agd-timeline-items::before) runs the full column height
   ("bottom: 18px" from the container), which overshoots for anything but a
   short last row — its diamond sits near the row's own top, so the dashes
   were trailing on past it with no next marker to connect to. Cap them
   starting from the last diamond's own top edge, using the last item's own
   local box so this works regardless of that row's height. isolation+z-index
   keeps the diamond painted on top, so overlapping the diamond's own box
   (rather than only the sliver below it) can't notch a bite out of it. */
.agd-timeline-items > .agd-item:last-child { isolation: isolate; }
.agd-timeline-items > .agd-item:last-child::before { z-index: 1; }
.agd-timeline-items > .agd-item:last-child::after {
    content: "";
    position: absolute;
    inset-inline-start: calc(6.5px - var(--agd-rail-gutter));
    top: 44px;
    bottom: 0;
    width: 9px;
    background: var(--hr-cream-500);
    z-index: 0;
}
.agd-timeline-items > .agd-item:first-child:last-child::after { top: 12px; }
.agd-timeline-items > .agd-item-compact:last-child::after { top: 50%; margin-top: -7px; }
.agd-item-time {
    flex: 0 0 170px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
    padding-top: 8px;
}
.agd-item-time .agd-time-start { color: var(--hr-green-500); }
.agd-item-time .agd-time-end { color: var(--hr-brown-700); }
.agd-item-rule { align-self: stretch; width: 1px; background: #e5e7eb; flex-shrink: 0; }
.agd-item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.agd-item-head { display: flex; flex-direction: column; gap: 16px; }
/* overflow-wrap so a title with no spaces (e.g. "Registration/Activites/
   Networking") can still break instead of overflowing its container. */
.agd-item-title { font-size: 28px; font-weight: 700; color: var(--hr-brown-700); margin: 0; overflow-wrap: break-word; }
.agd-item-location {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    font-size: 15px;
    font-weight: 700;
    color: var(--hr-blue-500);
}
.agd-item-location .agd-icon-mask { width: 15px; height: 15px; color: var(--hr-blue-500); }
.agd-item-desc { font-size: 16px; line-height: 1.5; color: #374151; margin: 0; }

/* Speaker chip: dummy placeholder content — see the view for why. */
.agd-speakers { display: flex; flex-direction: column; gap: 16px; }
.agd-speaker-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
/* Fixed 206px, not content-width: Figma (nodes 40001286:68420 / :68429) gives
   every speaker block the same 206px box so the rule lands at x=230 and the
   topic at x=254 in EVERY row. Sized to content, each row's rule and topic
   slid left or right with that speaker's own name/role width - "Mariam Tawfig"
   pulled its topic 47px left of "Guest Speaker"'s - so the topics never lined
   up as a column. */
.agd-speaker { display: flex; align-items: center; gap: 12px; flex: 0 0 206px; min-width: 0; }
.agd-speaker-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: .667px solid var(--hr-cream-500);
    object-fit: cover;
    flex-shrink: 0;
}
/* No white-space:nowrap - with the block now a fixed 206px, a name longer
   than it would run out under the rule instead of being held inside. Every
   name in the design fits on one line at this width anyway; wrapping is only
   the escape hatch for an unusually long one. */
.agd-speaker-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; min-width: 0; }
.agd-speaker-name { font-size: 15px; font-weight: 700; color: #111827; }
.agd-speaker-role { font-size: 13px; color: #6b7280; }
.agd-speaker-rule { align-self: stretch; width: 1px; background: #e5e7eb; flex-shrink: 0; }
.agd-speaker-topic { font-size: 16px; color: #374151; flex: 1 1 auto; min-width: 160px; }

/* Parallel-track sub-rows ("Discovery Sessions" style). */
.agd-tracks { display: flex; flex-direction: column; gap: 16px; }
/* Each track stacks its own location underneath its name, rather than running
   name | rule | location across one line. Figma (node 40001286:68479) makes
   the row 60px tall with the name at y=0 h=28 and the location frame at y=36 -
   an 8px gap - and there is no divider between them; .agd-tracks' own 16px gap
   then spaces the rows (76px pitch: 0, 76, 152). The old one-line layout is
   also what forced a fixed 206px location column here, to stop each row's rule
   sliding with its own location text; stacked, there is no rule to line up and
   nothing to pad to a common width, so that column goes away with it. */
.agd-track-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
/* 28px line box, not the ~24px 16px text defaults to: Figma gives the name
   y=0 h=28 above the 24px location, which is what makes the row 60px and the
   track pitch 76px with .agd-tracks' 16px gap. */
.agd-track-name { font-size: 16px; line-height: 28px; color: #374151; min-width: 0; }

/* Compact rows: breaks, end-of-day — no location/description/speakers. */
.agd-item-compact { align-items: center; gap: 40px; padding-block: 40px; }
.agd-item-compact::before { top: 50%; margin-top: -7px; }
.agd-item-compact .agd-item-time { padding-top: 0; }
.agd-item-compact .agd-item-title { font-size: 28px; }

/* ==========================================================================
   Mobile (Figma: node 40002661:24363 "AGENDA", 402px artboard). The phone
   layout is not the desktop one reflowed — it restructures every section:
   the hero centres, the timeline stacks its time above the row instead of
   beside it, and Download PDF leaves the heading row for the page's foot.
   Values below are the artboard's own, with its 20px gutter.
   ========================================================================== */
@media (max-width: 767.98px) {
    .agenda-revamp { --agd-gutter: 20px; }

    /* ---------- Hero ---------- */
    /* Everything centres on the artboard (title, copy and button) and the
       breadcrumb keeps its desktop position at the hero's foot — the earlier
       order:-1 hoist above the title is not what this design does. */
    .agd-hero {
        min-height: 481px;
        padding-top: 140px;
        /* 0, so .agd-breadcrumb-row::after (the full-bleed hairline) lands on
           the hero's own bottom edge, where the artboard draws it. */
        padding-bottom: 0;
    }
    .agd-hero-head {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 24px;
        padding-bottom: 24px;
    }
    .agd-hero-title {
        font-size: 32px;
        line-height: 40px;
        max-width: none;
    }
    /* flex:0 0 auto, not the desktop's 1 1 320px: once .agd-hero-head is a
       column, that 320px basis is a HEIGHT, which inflated the hero by ~190px
       of dead space between the copy and the breadcrumb. */
    .agd-hero-copy {
        flex: 0 0 auto;
        align-items: center;
        max-width: none;
    }
    .agd-hero-desc { font-size: 16px; line-height: 24px; }
    /* One combined full-width shape at the hero's foot (134.328px in the 481px
       artboard), in place of the desktop pair. */
    .agd-hero-decor-left,
    .agd-hero-decor-right { display: none; }
    .agd-hero-decor-mobile { display: block; left: 0; width: 100%; height: 134px; }
    /* The hero's Register button is a smaller instance here than the 56px
       Download PDF below — 14/20 label in 12px of vertical padding (44px). */
    .agenda-revamp .hr-btn {
        padding: 10.5px 18.5px;
        font-size: 14px;
        line-height: 20px;
        align-self: center;
    }
    .agd-breadcrumb-row { padding-top: 20px; padding-bottom: 12px; }
    .agd-breadcrumb { font-size: 14px; gap: 8px; }
    /* The diamond cluster has no room to breathe at this width and ends up
       overlapping the breadcrumb text — drop the decoration itself here and
       keep the plain "|" separators between crumbs. */
    .agd-hero-divider { display: none; }

    /* ---------- Session Lineup: section shell ---------- */
    .agd-lineup { padding-top: 60px; padding-bottom: 60px; }
    /* The artboard renders this corner ~111px tall and hangs it off the left
       edge: its blue diamond is cut by the viewport, leaving only the right
       tip showing above a ~64px-wide teal wedge. Solving the artwork's own
       proportions against those two measurements gives 111px tall (135 wide)
       at -71px, which is the pair reproduced here.
       Decoupled from the section's bottom padding, which the two share as one
       token on desktop: the bottom band is the Download PDF button's row now,
       and that button is centred, so a flourish this tall can overlap the band
       — as the design has it — without ever reaching the content. */
    .agd-lineup { --agd-corner-h: 111px; }
    .agd-lineup-corner { inset-inline-start: -71px; }

    /* Download PDF moves out of the heading row and becomes a centred button
       under the timeline. display:contents dissolves the two wrapper divs so
       the heading, the day tabs and the button all become direct children of
       .agd-lineup-inner's column, which is what lets the button be ordered
       past the day card and the timeline without touching the markup (it has
       to stay inside .agd-lineup-actions for the desktop row layout). */
    .agd-lineup-inner { display: flex; flex-direction: column; }
    .agd-lineup-head,
    .agd-lineup-actions { display: contents; }
    .agd-lineup-head h2 {
        order: 1;
        font-size: 24px;
        line-height: 32px;
        text-align: center;
        /* .agd-lineup-head's own margin-bottom goes away with display:contents,
           so the section's 32px rhythm is carried on the children themselves. */
        margin-bottom: 32px;
    }
    .agd-day-tabs { order: 2; margin-bottom: 32px; }
    .agd-day-card { order: 3; }
    .agd-timeline-items { order: 4; }
    .agd-pdf-btn { order: 5; align-self: center; margin-top: 32px; }

    /* ---------- Day tabs ---------- */
    /* Full-width segmented track with the days splitting it evenly, rather
       than the desktop control that shrink-wraps its pills. flex-basis:auto
       (not the artboard's 0) so a summit with more than the design's two days
       wraps onto further rows instead of crushing each label. */
    .agd-day-tabs { display: flex; width: 100%; max-width: 100%; flex-wrap: wrap; }
    .agd-day-tab {
        flex: 1 1 auto;
        min-width: 0;
        padding: 10.5px 14.5px;
        font-size: 14px;
        line-height: 20px;
    }
    .agd-day-tab.is-active { padding: 10.5px 22.5px; }

    /* ---------- Day summary card ---------- */
    .agd-day-card { padding: 20px; margin-bottom: 32px; }
    /* Both corner decorations are subtle desktop-only accents — on mobile the
       card is much narrower/taller (more description text wrapping), so they no
       longer read as corner flourishes and aren't worth showing. */
    .agd-day-card-corner,
    .agd-day-card-vector { display: none; }
    .agd-day-card-title { font-size: 20px; line-height: 28px; margin-bottom: 12px; }
    /* The two meta items stack here instead of running across one line. */
    .agd-day-card-meta {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 4px;
        margin-bottom: 12px;
    }
    .agd-day-card-meta-item { font-size: 16px; line-height: 24px; }
    /* Both icons are the same 16px box at this size — the 24x24 clock /
       18x20 pin split is a desktop-only distinction. */
    .agd-day-card-meta-item .agd-icon-mask,
    .agd-day-card-meta-item--location .agd-icon-mask { width: 16px; height: 16px; }
    .agd-day-card-desc { font-size: 16px; line-height: 24px; max-width: none; }

    /* ---------- Timeline ---------- */
    /* The rail tucks in close: the artboard puts its centre line at x=12 with
       the row content starting at x=32, so there is no 78px time column to
       clear — the time now sits on its own line above the title. */
    .agd-timeline-items { --agd-rail-gutter: 32px; gap: 40px; }
    /* A hairline dotted rail rather than the desktop's 9px dashes, centred on
       12px, and running from the first diamond's centre to the column's foot. */
    .agd-timeline-items::before {
        inset-inline-start: 10.5px;
        width: 3px;
        top: 14px;
        bottom: 0;
    }
    /* Rows are separated by the container's 40px gap plus their own rule,
       not by symmetric vertical padding. */
    .agd-item,
    .agd-item-compact {
        flex-direction: column;
        gap: 24px;
        padding-block: 0 24px;
        border-bottom: 1px solid var(--hr-cream-600, #e3e1d4);
    }
    /* 14px square (a 19.8px marker once rotated), centred on the rail at 12px
       and on the 28px time line above it — every row alike, including the
       compact ones, whose desktop marker is centred on the whole row instead. */
    .agd-item::before,
    .agd-item-compact::before,
    .agd-timeline-items > .agd-item:first-child::before {
        inset-inline-start: calc(5px - var(--agd-rail-gutter));
        top: 7px;
        margin-top: 0;
        width: 14px;
        height: 14px;
    }
    .agd-timeline-items > .agd-item:first-child { padding-top: 0; }
    /* Matches the retuned rail above, so the dashes still stop at the last
       diamond rather than running on past it. */
    .agd-timeline-items > .agd-item:last-child::after,
    .agd-timeline-items > .agd-item-compact:last-child::after,
    .agd-timeline-items > .agd-item:first-child:last-child::after {
        inset-inline-start: calc(10.5px - var(--agd-rail-gutter));
        width: 3px;
        top: 14px;
        margin-top: 0;
        /* -1px, not 0: bottom:0 resolves to the row's PADDING box, which stops
           short of its 1px bottom rule — leaving one dash of rail poking out
           level with that rule. */
        bottom: -1px;
    }
    /* .agd-item-compact's own align-items:center (set for the desktop row
       layout) centers its stacked children once this becomes a column,
       shrink-wrapping the time label and title to their own content width
       instead of lining them up with regular rows — override back to
       stretch so every row's time starts at the same position. */
    .agd-item-compact { align-items: stretch; }
    .agd-item-time {
        flex: none;
        font-size: 20px;
        line-height: 28px;
        gap: 6px;
        padding-top: 0;
    }
    .agd-item-time .agd-time-end { color: #111827; }
    .agd-item-rule, .agd-speaker-rule { display: none; }
    /* 16px is the artboard's spacing where a description sits between the
       title block and the speakers; the title-to-description and
       description-to-tracks steps it draws are within 4px of it, so one value
       carries every row shape. */
    .agd-item-body { gap: 16px; }
    .agd-item-head { gap: 12px; }
    .agd-item-title,
    .agd-item-compact .agd-item-title { font-size: 20px; line-height: 28px; }
    .agd-item-location { font-size: 12px; }
    .agd-item-location .agd-icon-mask { width: 16px; height: 16px; }
    .agd-item-desc { font-size: 14px; line-height: 20px; }

    /* Speakers stack their topic under the speaker and carry their own rule,
       so a multi-speaker row reads as a short list; the last one drops its
       rule because the row's own border already closes the block. */
    .agd-speaker-row {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        flex-wrap: nowrap;
    }
    .agd-speakers > .agd-speaker-row:not(:last-child) {
        padding-bottom: 16px;
        border-bottom: 1px solid var(--hr-cream-600, #e3e1d4);
    }
    /* The rule is hidden here, so there is no column of rules left to line
       up - give the block its content width back rather than reserving
       206px of a phone-width row. */
    .agd-speaker { flex: 0 0 auto; gap: 8px; }
    .agd-speaker-name { font-size: 14px; line-height: 20px; }
    .agd-speaker-role { font-size: 12px; }
    .agd-speaker-topic { font-size: 14px; line-height: 20px; min-width: 0; }

    /* Parallel tracks: more air between rows than between a row's own name
       and its location, so the three read as separate tracks. */
    .agd-tracks { gap: 24px; }
    .agd-track-row { gap: 12px; }
    .agd-track-name { font-size: 14px; line-height: 20px; }

    /* One breadcrumb size site-wide on the phone, taken from the Events
       listing (.evt-breadcrumb in events-revamp.css): 12px type, 8px gaps,
       a 12px separator. This page had a 14px step. */
    .agd-breadcrumb { font-size: 12px; gap: 8px; }
    .agd-breadcrumb-sep { height: 12px; }
}

/* Note: .agd-timeline-items::before and .agd-item::before/::after use
   inset-inline-start, which already flips to the right side under
   [dir="rtl"] with no override needed — the rail stays on the
   reading-start edge in both directions. */

/* The day pills carry the artboard's own padding down to its own 402px width;
   below that the two "Day 01 · Tue 18 Aug" labels (nowrap, and already at the
   smallest label size) no longer clear it and the track wraps them onto two
   rows. Trimming the padding is what keeps them side by side as a segmented
   control on a 360/375px phone - the wrap in the block above stays as the
   fallback for a locale whose labels are longer still. */
@media (max-width: 401.98px) {
    .agd-day-tab { padding: 10.5px 8.5px; }
    .agd-day-tab.is-active { padding: 10.5px 12.5px; }
}