/*
 * SecDev Slider
 * ─────────────────────────────────────────────────────────────────────────────
 * A horizontal accordion hero. Two things move and nothing else:
 *
 *   the panel   animates flex-grow, so the one that closes gives up exactly what
 *               the one that opens takes and the rail's width never changes
 *   the label   is a single element that rotates between 90deg and 0deg, so it
 *               turns in front of the reader instead of being swapped for a copy
 *
 * The heading, paragraph and button never animate and never reflow. The panel
 * widening is what uncovers them. To make that true their column is sized from
 * --railw, the rail's measured width, which only changes when the window does —
 * never while a panel is opening.
 *
 * THERE IS NOT ONE MEDIA QUERY IN THIS FILE, ON PURPOSE.
 * Elementor Pro lets the site owner move its breakpoints and add extra ones. A
 * hard-coded query would sit at a width the panel's own values no longer use, and
 * the two would disagree. So every decision that changes with screen size is a
 * custom property, and Elementor distributes it across whatever breakpoints the
 * site actually has.
 *
 * Fonts are never requested here. Loading one from a third party would break
 * WordPress.org's rule on remote files, and in the EU embedding Google Fonts has
 * been ruled a GDPR breach. Choose faces with the Typography controls; Elementor
 * can serve them from your own server.
 */

.sdl{
  /* layout */
  --sdl-dir:row; --sdl-order:0; --sdl-npos:static; --sdl-nalign:center;
  --sdl-nx:0px; --sdl-ny:0px; --sdl-nw:72px; --sdl-gap:24px;
  --sdl-valign:center; --sdl-talign:start;
  --sdl-text-align:var(--sdl-talign,start);
  --sdl-copy-ms:0; --sdl-copy-me:auto;
  --sdl-pt:15px; --sdl-pr:16px; --sdl-pb:15px; --sdl-pl:16px;
  --sdl-cols:1; --sdl-rowgap:0px; --sdl-grid-rowgap:var(--sdl-rowgap); --sdl-rowgap-inside:0px; --sdl-colgap:24px;
  /* Filling: by rows is the default and is what a grid does on its own.
     Filling by columns needs a row count instead of a column count, because
     that is the only way the browser knows where to break each column. Both
     are written per device by the panel, so a layout can fill by columns on a
     desktop and fall back to a plain single column on a phone. */
  --sdl-rows:4; --sdl-flow:row;
  --sdl-tcols:repeat(var(--sdl-cols),minmax(0,1fr)); --sdl-trows:none;
  --sdl-titlegap:10px; --sdl-xmax:none;
  --sdl-titlecol:320px; --sdl-link-titlebasis:var(--sdl-titlecol); --sdl-splitgap:30px;

  /* rules */
  --sdl-rule:rgba(255,255,255,.09); --sdl-rulew:1px; --sdl-rules:solid;
  --sdl-rule-top:0px; --sdl-rule-bottom:var(--sdl-rulew);
  --sdl-rule-inset-start:0px; --sdl-rule-inset-end:0px;
  --sdl-divider-pad-top:0px; --sdl-divider-pad-right:0px;
  --sdl-divider-pad-bottom:0px; --sdl-divider-pad-left:0px;
  --sdl-divider-margin-top:0px; --sdl-divider-margin-right:0px;
  --sdl-divider-margin-bottom:0px; --sdl-divider-margin-left:0px;
  --sdl-divider-line-width:var(--sdl-rulew);
  --sdl-divider-space:calc(var(--sdl-divider-margin-top) + var(--sdl-divider-pad-top) + var(--sdl-divider-line-width) + var(--sdl-divider-pad-bottom) + var(--sdl-divider-margin-bottom));
  --sdl-divider-top-space:0px; --sdl-divider-bottom-space:var(--sdl-divider-space);
  --sdl-last-divider-display:block;

  /* number */
  --sdl-ncol:#EEF2F9; --sdl-nop:.13; --sdl-ncol-h:#D9A32B; --sdl-nop-h:1;

  /* copy */
  --sdl-tcol:#EEF2F9; --sdl-tcol-h:#D9A32B;
  --sdl-xcol:#EEF2F9; --sdl-xcol-h:#EEF2F9;

  /* the hover wash — the -rtl pair mirrors it, and the panel writes both */
  --sdl-wash:rgba(217,163,43,.14); --sdl-washstop:65%;
  --sdl-washangle:90deg; --sdl-washorigin:left center;
  --sdl-washangle-rtl:270deg; --sdl-washorigin-rtl:right center;
  --sdl-washfrom:scaleX(0); --sdl-washto:scaleX(1);

  /* movement */
  --sdl-shift:5px;
  /* Keep moving copy inside the clipped row. The absolute value reserves
     enough room for positive and negative responsive shifts alike. */
  --sdl-shift-space:max(var(--sdl-shift),calc(-1 * var(--sdl-shift)));
  --sdl-lift:0px;
  --sdl-speed:.5s; --sdl-ease:cubic-bezier(.16,.84,.28,1);

  /* surface */
  --sdl-rowbg:transparent; --sdl-rowbg-h:transparent;

  /* extras */
  --sdl-icon:22px; --sdl-iconcol:#D9A32B; --sdl-iconcol-h:var(--sdl-iconcol);
  --sdl-imgw:64px; --sdl-imgr:0px;
  --sdl-badgecol:#12161F; --sdl-badgebg:#D9A32B; --sdl-metacol:#9CACC6;
  --sdl-btncol:#12161F; --sdl-btnbg:#D9A32B;
  --sdl-btncol-h:var(--sdl-btncol); --sdl-btnbg-h:var(--sdl-btnbg);

  display:grid;
  grid-auto-flow:var(--sdl-flow);
  grid-template-columns:var(--sdl-tcols);
  grid-template-rows:var(--sdl-trows);
  /* Only consulted while filling by columns, when the columns are implicit. */
  grid-auto-columns:minmax(0,1fr);
  gap:var(--sdl-grid-rowgap) var(--sdl-colgap);
  align-items:stretch;
  position:relative;
  isolation:isolate;
}
.sdl *,.sdl *::before,.sdl *::after{box-sizing:border-box}

/* ── per-layout baselines ──
   The panel's own defaults write these too, but carrying them here means a
   block still reads correctly if Elementor has yet to emit its stylesheet,
   and it documents what each layout is supposed to look like. */
.sdl--numbered{
  --sdl-nw:72px; --sdl-gap:24px; --sdl-valign:center;
  --sdl-pt:15px; --sdl-pr:16px; --sdl-pb:15px; --sdl-pl:16px;
  --sdl-nop:.13; --sdl-xcol:#EEF2F9; --sdl-xcol-h:#EEF2F9;
  --sdl-wash:rgba(217,163,43,.14); --sdl-washstop:65%; --sdl-shift:5px;
}
.sdl--areas{
  --sdl-nw:0px; --sdl-gap:30px; --sdl-valign:baseline; --sdl-nalign:baseline;
  --sdl-pt:30px; --sdl-pr:0px; --sdl-pb:30px; --sdl-pl:10px;
  --sdl-nop:.16; --sdl-titlegap:10px;
  --sdl-xcol:#9CACC6; --sdl-xcol-h:#9CACC6; --sdl-xmax:70ch;
  --sdl-wash:rgba(217,163,43,.12); --sdl-washstop:70%; --sdl-shift:0px;
  margin-top:34px;
}
.sdl--links{
  --sdl-nw:0px; --sdl-gap:30px; --sdl-valign:baseline; --sdl-nalign:baseline;
  --sdl-pt:34px; --sdl-pr:26px; --sdl-pb:34px; --sdl-pl:0px;
  --sdl-nop:.05; --sdl-titlegap:0px;
  --sdl-xcol:#9CACC6; --sdl-xcol-h:#EEF2F9; --sdl-xmax:52ch;
  --sdl-wash:rgba(217,163,43,.12); --sdl-washstop:70%; --sdl-shift:6px;
}
.sdl--numbered-standard,
.sdl--areas,
.sdl--links{
  --sdl-grid-rowgap:0px;
  --sdl-rowgap-inside:var(--sdl-rowgap);
  overflow:visible;
}
.sdl-hover-clip{overflow:hidden}
.sdl .sdl-hover-surface{
  position:absolute;
  z-index:0;
  display:block;
  pointer-events:none;
  background:var(--sdl-rowbg-h);
  transform:var(--sdl-washfrom);
  transform-origin:var(--sdl-washorigin);
  opacity:0;
  transition:transform var(--sdl-speed) var(--sdl-ease),opacity var(--sdl-speed) var(--sdl-ease);
}
.sdl .sdl-hover-surface.is-active{transform:var(--sdl-washto);opacity:1}
.sdl.has-wash .sdl-hover-surface{background:linear-gradient(var(--sdl-washangle),var(--sdl-wash),transparent var(--sdl-washstop)),var(--sdl-rowbg-h)}
.sdl.sdl-hover-layer-ready .sdl-row{z-index:1}
@media (hover: hover){.sdl.sdl-hover-layer-ready .sdl-row:hover{background:transparent}}
.sdl.sdl-hover-layer-ready.has-wash .sdl-row::before{display:none}

/* ── the row ── */
.sdl .sdl-row{
  position:relative; overflow:hidden; display:flex;
  width:100%; min-width:0; max-width:100%;
  flex-direction:var(--sdl-dir);
  align-items:var(--sdl-valign);
  gap:var(--sdl-gap);
  padding:calc(var(--sdl-pt) + var(--sdl-divider-top-space,0px)) var(--sdl-pr) calc(var(--sdl-pb) + var(--sdl-divider-bottom-space,0px) + var(--sdl-rowgap-inside,0px)) var(--sdl-pl);
  background:var(--sdl-rowbg);
  text-decoration:none;
  transition:background var(--sdl-speed) var(--sdl-ease),
             transform var(--sdl-speed) var(--sdl-ease),
             border-color var(--sdl-speed) var(--sdl-ease);
}
.sdl.sdl--numbered-standard .sdl-row,
.sdl.sdl--areas .sdl-row,
.sdl.sdl--links .sdl-row{overflow:visible}
.sdl .sdl-row.is-link{cursor:pointer; color:inherit}
@media (hover: hover){.sdl .sdl-row:hover{background:var(--sdl-rowbg-h); transform:translateY(var(--sdl-lift))}}

/* Dividers are independent from Item borders. Their full padding and margin
   box is reserved by the row, so a line cannot overlap its content. */
.sdl .sdl-divider{
  display:none;
  position:absolute;
  z-index:2;
  inset-inline-start:calc(var(--sdl-rule-inset-start,0px) + var(--sdl-divider-margin-left,0px) + var(--sdl-divider-pad-left,0px));
  inset-inline-end:calc(var(--sdl-rule-inset-end,0px) + var(--sdl-divider-margin-right,0px) + var(--sdl-divider-pad-right,0px));
  height:0;
  pointer-events:none;
}
.sdl[dir="rtl"] .sdl-divider{
  inset-inline-start:calc(var(--sdl-rule-inset-start,0px) + var(--sdl-divider-margin-right,0px) + var(--sdl-divider-pad-right,0px));
  inset-inline-end:calc(var(--sdl-rule-inset-end,0px) + var(--sdl-divider-margin-left,0px) + var(--sdl-divider-pad-left,0px));
}
.sdl--numbered-standard .sdl-divider,
.sdl--areas .sdl-divider,
.sdl--links .sdl-divider{display:block}
.sdl--numbered-standard .sdl-divider--top,
.sdl--areas .sdl-divider--top,
.sdl--links .sdl-divider--top{
  inset-block-start:0;
  border-top:var(--sdl-rule-top) var(--sdl-rules) var(--sdl-rule);
}
.sdl--numbered-standard .sdl-divider--bottom,
.sdl--areas .sdl-divider--bottom,
.sdl--links .sdl-divider--bottom{
  inset-block-end:0;
  border-bottom:var(--sdl-rule-bottom) var(--sdl-rules) var(--sdl-rule);
}
.sdl--numbered-standard .sdl-row:last-child .sdl-divider--bottom,
.sdl--numbered-standard .sdl-row--column-last .sdl-divider--bottom,
.sdl--areas .sdl-row:last-child .sdl-divider--bottom,
.sdl--areas .sdl-row--column-last .sdl-divider--bottom,
.sdl--links .sdl-row:last-child .sdl-divider--bottom,
.sdl--links .sdl-row--column-last .sdl-divider--bottom{
  display:var(--sdl-last-divider-display,block);
}

/* ── the wash that sweeps in ── */
.sdl.has-wash .sdl-row::before{
  content:""; position:absolute; inset-inline:0; inset-block-start:var(--sdl-hover-outer-top,0px); inset-block-end:0; pointer-events:none; z-index:0;
  border-radius:inherit;
  background:linear-gradient(var(--sdl-washangle),var(--sdl-wash),transparent var(--sdl-washstop));
  transform:var(--sdl-washfrom);
  transform-origin:var(--sdl-washorigin);
  opacity:1;
  transition:transform var(--sdl-speed) var(--sdl-ease), opacity var(--sdl-speed) var(--sdl-ease);
}
@media (hover: hover){.sdl.has-wash .sdl-row:hover::before{transform:var(--sdl-washto)}}
/* the fade variant has nothing to scale, so it changes opacity instead */
.sdl.has-wash .sdl-row::before{opacity:var(--sdl-washop,1)}

/* ── the number ──
   No line height is set here: that belongs to the typography control, and a
   value in this file would quietly win against it. */
.sdl .sdl-n{
  position:var(--sdl-npos); z-index:var(--sdl-nz,1); flex:none;
  order:var(--sdl-order);
  align-self:var(--sdl-nalign);
  min-width:var(--sdl-nw);
  color:var(--sdl-ncol);
  opacity:var(--sdl-nop);
  transform:translate(var(--sdl-nx),var(--sdl-ny));
  transition:opacity var(--sdl-speed) var(--sdl-ease), color var(--sdl-speed) var(--sdl-ease);
}
@media (hover: hover){.sdl .sdl-row:hover .sdl-n{color:var(--sdl-ncol-h); opacity:var(--sdl-nop-h)}}
.sdl .sdl-marker-icon{display:inline-flex; align-items:center; justify-content:center; line-height:1}
.sdl .sdl-marker-icon svg,.sdl .sdl-marker-icon i{
  display:block; width:1em; height:1em; font-size:1em; fill:currentColor;
}

/* ── the copy ── */
.sdl .sdl-body{
  position:relative; z-index:1; flex:1 1 auto; width:100%; min-width:0; max-width:100%;
  transition:transform var(--sdl-speed) var(--sdl-ease);
}
.sdl--numbered-standard .sdl-body,
.sdl--areas .sdl-body,
.sdl--links .sdl-body{
  /* The row clips the hover wash. Reserve the horizontal travel inside the
     body so that moving copy never clips its first or last characters. Using
     logical inline edges keeps the same protection in LTR and RTL. */
  padding-inline:var(--sdl-shift-space);
}
@media (hover: hover){.sdl .sdl-row:hover .sdl-body{transform:translateX(var(--sdl-shift))}}

.sdl .sdl-title{
  margin:0 0 var(--sdl-titlegap); max-width:100%; min-width:0;
  text-align:var(--sdl-title-align,var(--sdl-text-align));
  overflow-wrap:anywhere; word-break:normal;
  color:var(--sdl-tcol);
  transition:color var(--sdl-speed) var(--sdl-ease);
}
@media (hover: hover){.sdl .sdl-row:hover .sdl-title{color:var(--sdl-tcol-h)}}

.sdl .sdl-text{
  margin:0; width:100%; color:var(--sdl-xcol); max-width:var(--sdl-xmax); min-width:0;
  margin-inline-start:var(--sdl-copy-ms);
  margin-inline-end:var(--sdl-copy-me);
  text-align:var(--sdl-text-align);
  overflow-wrap:anywhere; word-break:normal;
  transition:color var(--sdl-speed) var(--sdl-ease);
}
.sdl .sdl-text > :first-child{margin-top:0}
.sdl .sdl-text > :last-child{margin-bottom:0}
@media (hover: hover){.sdl .sdl-row:hover .sdl-text{color:var(--sdl-xcol-h)}}
.sdl .sdl-text a{overflow-wrap:anywhere; word-break:break-word}

/* ── the optional extras ── */
.sdl .sdl-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.sdl .sdl-badge{
  display:inline-block; color:var(--sdl-badgecol); background:var(--sdl-badgebg);
  padding:4px 10px; border-radius:6px; line-height:1.3;
}
.sdl .sdl-meta{color:var(--sdl-metacol); line-height:1.3}

.sdl .sdl-media{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.sdl .sdl-icon{display:inline-flex; color:var(--sdl-iconcol);
  transition:color var(--sdl-speed) var(--sdl-ease)}
@media (hover: hover){.sdl .sdl-row:hover .sdl-icon{color:var(--sdl-iconcol-h)}}
.sdl .sdl-icon svg,.sdl .sdl-icon i{width:var(--sdl-icon); height:var(--sdl-icon);
  font-size:var(--sdl-icon); fill:currentColor}
.sdl .sdl-img{display:block; width:var(--sdl-imgw); height:auto; border-radius:var(--sdl-imgr)}

.sdl .sdl-btn{
  display:inline-block; margin-top:14px; text-decoration:none; cursor:pointer;
  color:var(--sdl-btncol); background:var(--sdl-btnbg);
  transition:background var(--sdl-speed) var(--sdl-ease), color var(--sdl-speed) var(--sdl-ease);
}
@media (hover: hover){.sdl .sdl-btn:hover{color:var(--sdl-btncol-h); background:var(--sdl-btnbg-h)}}

/* ── deep links: title beside text when a column width is set ── */
.sdl--links .sdl-body{
  display:flex; flex-wrap:wrap; width:100%; min-width:0; max-width:100%;
  gap:var(--sdl-titlegap) var(--sdl-splitgap); align-items:baseline;
}
/* the title column is a preference, not a floor: it gives way rather than
   letting a long heading run past the edge of a narrow screen */
.sdl--links .sdl-title{flex:0 1 var(--sdl-link-titlebasis); width:var(--sdl-link-titlebasis);
  max-width:100%; min-width:0; margin-bottom:0; overflow-wrap:anywhere}
.sdl--links .sdl-text{flex:1 1 200px; width:100%; min-width:0; max-width:var(--sdl-xmax); overflow-wrap:anywhere}
.sdl--links .sdl-top,.sdl--links .sdl-media,.sdl--links .sdl-btn{flex:1 1 100%}

/* ── keyboard focus must be visible, since rows can be links ── */
.sdl .sdl-row.is-link:focus-visible{outline:2px solid var(--sdl-ncol-h); outline-offset:2px}

/* ── right to left ──
   The rows are plain flex, so the writing direction already reorders them.
   What stays physical is anything expressed as an X offset or an origin: the
   marker nudge, the hover shift, and the sweep. Padding is deliberately left
   alone — the panel's Padding control means left and right literally, in both
   directions, so that it stays predictable. */
[dir="rtl"] .sdl .sdl-n,
.sdl[dir="rtl"] .sdl-n{transform:translate(calc(-1 * var(--sdl-nx)),var(--sdl-ny))}

@media (hover: hover){[dir="rtl"] .sdl .sdl-row:hover .sdl-body,
.sdl[dir="rtl"] .sdl-row:hover .sdl-body{transform:translateX(calc(-1 * var(--sdl-shift)))}}

[dir="rtl"] .sdl.has-wash .sdl-row::before,
.sdl[dir="rtl"].has-wash .sdl-row::before{
  background:linear-gradient(var(--sdl-washangle-rtl),var(--sdl-wash),transparent var(--sdl-washstop));
  transform-origin:var(--sdl-washorigin-rtl);
}
[dir="rtl"] .sdl.has-wash .sdl-hover-surface,
.sdl[dir="rtl"].has-wash .sdl-hover-surface{
  background:linear-gradient(var(--sdl-washangle-rtl),var(--sdl-wash),transparent var(--sdl-washstop)),var(--sdl-rowbg-h);
  transform-origin:var(--sdl-washorigin-rtl);
}

/* ── respect a reduced-motion preference ── */
@media (prefers-reduced-motion: reduce){
  .sdl .sdl-row,.sdl .sdl-body,.sdl .sdl-n,.sdl .sdl-title,
  .sdl .sdl-text,.sdl .sdl-icon,.sdl .sdl-btn,.sdl.has-wash .sdl-row::before,.sdl .sdl-hover-surface{
    transition:none !important;
  }
  .sdl .sdl-row:hover{transform:none}
  .sdl .sdl-row:hover .sdl-body,
  [dir="rtl"] .sdl .sdl-row:hover .sdl-body,
  .sdl[dir="rtl"] .sdl-row:hover .sdl-body{transform:none}
}

/* ── the marker box: the icon keeps the colour it was given ──
   The faint opacity belongs to the oversized number, not to an icon, so an
   icon marker is drawn at full strength and takes its own colour. */
.sdl .sdl-marker-icon{
  opacity:1; color:var(--sdl-mic,#D9A32B); font-size:var(--sdl-mis,32px);
}
@media (hover: hover){.sdl .sdl-row:hover .sdl-marker-icon{color:var(--sdl-mic-h,var(--sdl-mic,#D9A32B))}}
.sdl .sdl-marker-icon img{width:1em; height:1em; display:block}

/* ═══════════════════════════════════════════════════════════════
   Numbered List variations

   Structural treatments of the numbered list, not separate widgets. Standard
   is the unmodified .sdl--numbered layout above, so existing content is
   pixel-for-pixel familiar after an update.

   Two rules govern this block.

   1  Not one `!important`. There used to be forty-eight, and they were the
      reason the panel appeared to do nothing: `font-size: … !important` beats
      whatever Elementor writes, so the Typography control existed and was
      dead. These rules sit at the same specificity as the base rules above
      and win on document order alone, which is all they ever needed. Anything
      Elementor writes now wins, because Elementor writes at wrapper
      specificity and that is higher than both.

   2  Every number in here is a variable with the reference value as its
      fallback. The fallback is what a fresh widget looks like; the control
      is what changes it. A literal with no variable in front of it is a
      control somebody cannot reach.
   ═══════════════════════════════════════════════════════════════ */

/* ── shared panel: all five treatments draw the list inside one surface ── */
.sdl--numbered-circle,
.sdl--numbered-timeline,
.sdl--numbered-rule,
.sdl--numbered-sidebar{
  --sdl-reference-panel:#12161F;
  --sdl-reference-rule:rgba(255,255,255,.09);
  --sdl-reference-accent:#D9A32B;
  --sdl-reference-text:#EEF2F9;
  --sdl-reference-muted:#9CACC6;
  display:grid;
  padding:var(--sdl-v-panel-pt,26px) var(--sdl-v-panel-pr,22px) var(--sdl-v-panel-pb,26px) var(--sdl-v-panel-pl,22px);
  background:var(--sdl-v-panel-bg,#12161F);
  border:var(--sdl-v-panel-border-width,1px) var(--sdl-v-panel-border-style,solid) var(--sdl-v-panel-border,rgba(255,255,255,.09));
  border-radius:var(--sdl-v-panel-radius,14px);
  color:var(--sdl-v-panel-text,var(--sdl-reference-text));
}
.sdl--numbered-steps{
  --sdl-reference-panel:#12161F;
  --sdl-reference-rule:rgba(255,255,255,.09);
  --sdl-reference-accent:#D9A32B;
  --sdl-reference-text:#EEF2F9;
  --sdl-reference-muted:#9CACC6;
  display:block;
  padding:var(--sdl-v-panel-pt,26px) var(--sdl-v-panel-pr,22px) var(--sdl-v-panel-pb,26px) var(--sdl-v-panel-pl,22px);
  background:var(--sdl-v-panel-bg,#12161F);
  border:var(--sdl-v-panel-border-width,1px) var(--sdl-v-panel-border-style,solid) var(--sdl-v-panel-border,rgba(255,255,255,.09));
  border-radius:var(--sdl-v-panel-radius,14px);
  color:var(--sdl-v-panel-text,var(--sdl-reference-text));
}

/*
 * No font-family, size or line-height on the panel. They used to be here as
 * literals, which quietly overrode every Typography control in the widget for
 * anything that inherits. Each element carries its own Typography instead.
 */

.sdl--numbered-circle.has-wash .sdl-row::before,
.sdl--numbered-timeline.has-wash .sdl-row::before,
.sdl--numbered-rule.has-wash .sdl-row::before,
.sdl--numbered-sidebar.has-wash .sdl-row::before{display:none}

/* ── 03 · circled number ───────────────────────────────────────────────── */
.sdl--numbered-circle{
  --sdl-divider-line-width:var(--sdl-v-row-rule-width,1px);
  --sdl-divider-top-space:0px;
  --sdl-divider-bottom-space:var(--sdl-divider-space);
  --sdl-last-divider-display:none;
}
.sdl--numbered-circle .sdl-row{
  align-items:center;
  gap:var(--sdl-v-gap,20px);
  padding:calc(var(--sdl-v-row-pt,14px) + var(--sdl-divider-top-space,0px)) var(--sdl-v-row-pr,16px) calc(var(--sdl-v-row-pb,14px) + var(--sdl-divider-bottom-space,0px)) var(--sdl-v-row-pl,16px);
  margin-bottom:var(--sdl-v-item-space,0px);
  overflow:visible;
  background:var(--sdl-v-row-bg,transparent);
  cursor:pointer;
}
.sdl--numbered-circle .sdl-row:last-child,
.sdl--numbered-circle .sdl-row--column-last{margin-bottom:0}
.sdl--numbered-circle .sdl-divider--bottom{
  display:block;
  inset-block-end:calc(var(--sdl-divider-margin-bottom,0px) + var(--sdl-divider-pad-bottom,0px));
  border-bottom:var(--sdl-v-row-rule-width,1px) var(--sdl-v-row-rule-style,solid) var(--sdl-v-row-rule,var(--sdl-reference-rule));
}
.sdl--numbered-circle .sdl-row:last-child .sdl-divider--bottom,
.sdl--numbered-circle .sdl-row--column-last .sdl-divider--bottom{
  display:var(--sdl-last-divider-display,block);
}
.sdl--numbered-circle .sdl-row::after,
.sdl--numbered-rule .sdl-row::after,
.sdl--numbered-sidebar .sdl-row::after{
  content:"";
  position:absolute;
  inset-inline:0;
  inset-block-start:100%;
  height:var(--sdl-v-item-space,0px);
  background:var(--sdl-v-row-bg,transparent);
  pointer-events:auto;
  transition:background var(--sdl-speed) var(--sdl-ease);
}
@media (hover: hover){.sdl--numbered-circle .sdl-row:hover::after,
.sdl--numbered-rule .sdl-row:hover::after,
.sdl--numbered-sidebar .sdl-row:hover::after{
  background:var(--sdl-v-row-bg-hover,rgba(217,163,43,.06));
}}
.sdl--numbered-circle .sdl-row:last-child::after,
.sdl--numbered-rule .sdl-row:last-child::after,
.sdl--numbered-sidebar .sdl-row:last-child::after,
.sdl--numbered-circle .sdl-row--column-last::after,
.sdl--numbered-rule .sdl-row--column-last::after,
.sdl--numbered-sidebar .sdl-row--column-last::after{display:none}
.sdl--numbered-circle .sdl-n{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  order:0;
  align-self:center;
  width:var(--sdl-v-marker-size,46px);
  height:var(--sdl-v-marker-size,46px);
  min-width:var(--sdl-v-marker-size,46px);
  border:var(--sdl-v-marker-border-width,1px) var(--sdl-v-marker-border-style,solid) var(--sdl-v-marker-border,rgba(255,255,255,.16));
  border-radius:var(--sdl-v-marker-radius,50%);
  background:var(--sdl-v-marker-bg,transparent);
  color:var(--sdl-v-marker-text,#9CACC6);
  opacity:1;
  transform:none;
  transition:background var(--sdl-speed) var(--sdl-ease),border-color var(--sdl-speed) var(--sdl-ease),color var(--sdl-speed) var(--sdl-ease);
}
.sdl--numbered-circle .sdl-marker-icon{font-size:var(--sdl-v-icon-size,15px); transform:rotate(var(--sdl-v-icon-rotate,0deg))}
@media (hover: hover){.sdl--numbered-circle .sdl-row:hover{background:var(--sdl-v-row-bg-hover,rgba(217,163,43,.06)); transform:none}}
@media (hover: hover){.sdl--numbered-circle .sdl-row:hover .sdl-n{
  color:var(--sdl-v-marker-text-hover,#12161F);
  background:var(--sdl-v-marker-bg-hover,#D9A32B);
  border-color:var(--sdl-v-marker-border-hover,#D9A32B);
  opacity:1;
}}
@media (hover: hover){.sdl--numbered-circle .sdl-row:hover .sdl-body{transform:none}}

/* ── 07 · timeline ─────────────────────────────────────────────────────── */
.sdl--numbered-timeline{padding-inline-start:calc(var(--sdl-v-panel-pl,22px) + var(--sdl-v-rail-inset,8px))}
.sdl--numbered-timeline.sdl--marker-none{padding-inline-start:var(--sdl-v-panel-pl,22px)}
.sdl--numbered-timeline .sdl-row{
  align-items:flex-start;
  gap:var(--sdl-v-gap,22px);
  padding:var(--sdl-v-row-pt,0px) var(--sdl-v-row-pr,16px) var(--sdl-v-item-space,30px) var(--sdl-v-row-pl,16px);
  overflow:visible;
  border:0;
  background:var(--sdl-v-row-bg,transparent);
  cursor:pointer;
}
.sdl--numbered-timeline .sdl-row:last-child,
.sdl--numbered-timeline .sdl-row--column-last{padding-bottom:0}
.sdl--numbered-timeline .sdl-n{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  order:0;
  align-self:flex-start;
  width:var(--sdl-v-marker-size,38px);
  height:var(--sdl-v-marker-size,38px);
  min-width:var(--sdl-v-marker-size,38px);
  border:var(--sdl-v-marker-border-width,1px) var(--sdl-v-marker-border-style,solid) var(--sdl-v-marker-border,rgba(255,255,255,.16));
  border-radius:var(--sdl-v-marker-radius,50%);
  background:var(--sdl-v-marker-bg,#12161F);
  color:var(--sdl-v-marker-text,#9CACC6);
  opacity:1;
  transform:none;
  transition:background var(--sdl-speed) var(--sdl-ease),border-color var(--sdl-speed) var(--sdl-ease),color var(--sdl-speed) var(--sdl-ease);
}
.sdl--numbered-timeline .sdl-marker-icon{font-size:var(--sdl-v-icon-size,13px); transform:rotate(var(--sdl-v-icon-rotate,0deg))}
.sdl--numbered-timeline .sdl-row:not(:last-child) .sdl-n::after{
  content:"";
  position:absolute;
  z-index:0;
  inset-inline-start:50%;
  top:calc(var(--sdl-v-marker-size,38px) - 1px);
  height:var(--sdl-timeline-rail-span,calc(var(--sdl-v-item-space,30px) + 1px));
  width:var(--sdl-v-rail-width,1px);
  background:var(--sdl-v-rail,rgba(255,255,255,.09));
  transform:translateX(-50%);
}
.sdl--numbered-timeline[dir="rtl"] .sdl-row:not(:last-child) .sdl-n::after{transform:translateX(50%)}
.sdl--numbered-timeline .sdl-row--column-last .sdl-n::after{display:none}
@media (hover: hover){.sdl--numbered-timeline .sdl-row:hover{background:var(--sdl-v-row-bg-hover,transparent); transform:none}}
@media (hover: hover){.sdl--numbered-timeline .sdl-row:hover .sdl-n{
  color:var(--sdl-v-marker-text-hover,#12161F);
  background:var(--sdl-v-marker-bg-hover,#D9A32B);
  border-color:var(--sdl-v-marker-border-hover,#D9A32B);
  opacity:1;
}}
.sdl--numbered-timeline .sdl-body{padding-block-start:var(--sdl-v-body-offset,8px)}
.sdl--numbered-timeline .sdl-row--marker-none .sdl-body{padding-block-start:0}
@media (hover: hover){.sdl--numbered-timeline .sdl-row:hover .sdl-body{transform:none}}

/* ── 08 · horizontal steps ─────────────────────────────────────────────────
   The buttons are real tabs; the selected item's copy appears below, and
   wrapping keeps the rail usable on a narrow phone. */
.sdl--numbered-steps .sdl-step-tabs{
  display:grid;
  grid-template-columns:repeat(var(--sdl-v-step-columns,auto-fit),minmax(var(--sdl-v-step-min,var(--sdl-v-step-basis,70px)),1fr));
  gap:var(--sdl-v-step-gap,4px);
  padding:var(--sdl-v-step-divider-pad-top,0px) var(--sdl-v-step-divider-pad-right,0px) var(--sdl-v-step-divider-pad-bottom,0px) var(--sdl-v-step-divider-pad-left,0px);
  margin:var(--sdl-v-step-divider-margin-top,0px) var(--sdl-v-step-divider-margin-right,0px) var(--sdl-v-step-divider-margin-bottom,0px) var(--sdl-v-step-divider-margin-left,0px);
  border-bottom:var(--sdl-v-step-rule-width,1px) var(--sdl-v-step-rule-style,solid) var(--sdl-v-step-rule,rgba(255,255,255,.09));
}
.sdl--numbered-steps .sdl-step-tab{
  min-width:0;
  padding:var(--sdl-v-step-pt,12px) var(--sdl-v-step-pr,4px) var(--sdl-v-step-pb,12px) var(--sdl-v-step-pl,4px);
  background:transparent;
  border:0;
  border-bottom:var(--sdl-v-step-active-width,2px) var(--sdl-v-step-active-style,solid) transparent;
  border-radius:0;
  color:var(--sdl-v-step-normal,#9CACC6);
  cursor:pointer;
  transition:color var(--sdl-speed) var(--sdl-ease),border-color var(--sdl-speed) var(--sdl-ease);
}
@media (hover: hover){.sdl--numbered-steps .sdl-step-tab:hover{color:var(--sdl-v-step-hover,#EEF2F9)}}
.sdl--numbered-steps .sdl-step-tab[aria-selected="true"]{
  color:var(--sdl-v-step-active,#D9A32B);
  border-bottom-color:var(--sdl-v-step-active,#D9A32B);
}
.sdl--numbered-steps .sdl-step-tab:focus-visible{
  outline:var(--sdl-v-step-focus-width,2px) solid var(--sdl-v-step-focus,var(--sdl-v-step-active,#D9A32B));
  outline-offset:2px;
}
.sdl--numbered-steps .sdl-step-tab-marker{display:inline-flex; align-items:center; justify-content:center}
.sdl--numbered-steps .sdl-step-tab-marker.is-icon{font-size:var(--sdl-v-icon-size,20px); transform:rotate(var(--sdl-v-icon-rotate,0deg))}
.sdl--numbered-steps .sdl-step-tab-marker svg,
.sdl--numbered-steps .sdl-step-tab-marker i{display:block; width:1em; height:1em; fill:currentColor}
.sdl--numbered-steps .sdl-step-panels{min-width:0}
.sdl--numbered-steps .sdl-step-panel{
  min-height:var(--sdl-v-step-panel-min,96px);
  padding:var(--sdl-v-step-panel-pt,26px) var(--sdl-v-step-panel-pr,16px) var(--sdl-v-step-panel-pb,26px) var(--sdl-v-step-panel-pl,16px);
}
.sdl--numbered-steps .sdl-step-panel[hidden]{display:none}
.sdl--numbered-steps .sdl-step-panel .sdl-row{
  min-height:0;
  padding:0;
  gap:0;
  overflow:visible;
  border:0;
  background:transparent;
}
.sdl--numbered-steps .sdl-step-panel .sdl-n{display:none}
@media (hover: hover){.sdl--numbered-steps .sdl-step-panel .sdl-row:hover .sdl-body{transform:none}}
.sdl--numbered-steps.has-wash .sdl-step-panel .sdl-row::before{display:none}

/* ── 10 · number on divider ────────────────────────────────────────────── */
.sdl--numbered-rule{
  --sdl-divider-line-width:var(--sdl-v-row-rule-width,1px);
  --sdl-divider-top-space:var(--sdl-divider-space);
  --sdl-divider-bottom-space:0px;
}
.sdl--numbered-rule .sdl-row{
  position:relative;
  overflow:visible;
  padding:calc(var(--sdl-v-row-pt,26px) + var(--sdl-divider-top-space,0px)) var(--sdl-v-row-pr,16px) calc(var(--sdl-v-row-pb,18px) + var(--sdl-divider-bottom-space,0px)) var(--sdl-v-row-pl,16px);
  margin-bottom:var(--sdl-v-item-space,0px);
  background:var(--sdl-v-row-bg,transparent);
  cursor:pointer;
}
.sdl--numbered-rule .sdl-divider--top{
  display:block;
  inset-block-start:calc(var(--sdl-divider-margin-top,0px) + var(--sdl-divider-pad-top,0px));
  border-top:var(--sdl-v-row-rule-width,1px) var(--sdl-v-row-rule-style,solid) var(--sdl-v-row-rule,var(--sdl-reference-rule));
}
.sdl--numbered-rule .sdl-row:last-child,
.sdl--numbered-rule .sdl-row--column-last{margin-bottom:0}
.sdl--numbered-rule .sdl-n{
  position:absolute;
  z-index:3;
  inset-block-start:calc(-1 * var(--sdl-v-rule-lift,11px));
  inset-inline-start:var(--sdl-v-rule-start,16px);
  order:0;
  align-self:auto;
  min-width:0;
  padding:0 var(--sdl-v-rule-pad,10px);
  background:var(--sdl-v-rule-chip-bg,#12161F);
  color:var(--sdl-v-marker-text,#9CACC6);
  opacity:1;
  transform:none;
}
.sdl--numbered-rule .sdl-marker-icon{font-size:var(--sdl-v-icon-size,15px); transform:rotate(var(--sdl-v-icon-rotate,0deg))}
@media (hover: hover){.sdl--numbered-rule .sdl-row:hover{background:var(--sdl-v-row-bg-hover,rgba(217,163,43,.05)); transform:none}}
@media (hover: hover){.sdl--numbered-rule .sdl-row:hover .sdl-n{color:var(--sdl-v-marker-text-hover,#D9A32B); opacity:1}}
@media (hover: hover){.sdl--numbered-rule .sdl-row:hover .sdl-body{transform:none}}

/* ── 12 · boxed number and side bar ────────────────────────────────────── */
.sdl--numbered-sidebar .sdl-row{
  flex-direction:var(--sdl-v-sidebar-row-direction,row);
  align-items:var(--sdl-v-sidebar-row-align,center);
  gap:var(--sdl-v-gap,18px);
  padding:var(--sdl-v-row-pt,15px) var(--sdl-v-row-pr,16px) var(--sdl-v-row-pb,15px) var(--sdl-v-row-pl,16px);
  margin-bottom:var(--sdl-v-item-space,6px);
  overflow:visible;
  border:0;
  background:var(--sdl-v-row-bg,transparent);
  cursor:pointer;
}
.sdl--numbered-sidebar .sdl-row:last-child,
.sdl--numbered-sidebar .sdl-row--column-last{margin-bottom:0}
.sdl--numbered-sidebar .sdl-sidebar{
  position:var(--sdl-v-sidebar-position,absolute);
  order:var(--sdl-v-sidebar-order,0);
  inset-block-start:var(--sdl-v-sidebar-inset-bs,0);
  inset-block-end:var(--sdl-v-sidebar-inset-be,calc(-1 * var(--sdl-v-item-space,6px)));
  inset-inline:var(--sdl-v-sidebar-inset-inline,0);
  width:var(--sdl-v-sidebar-box-width,auto);
  height:var(--sdl-v-sidebar-box-height,auto);
  flex:var(--sdl-v-sidebar-box-flex,0 1 auto);
  align-self:stretch;
  display:block;
  overflow:hidden;
  pointer-events:none;
}
.sdl--numbered-sidebar .sdl-row:last-child .sdl-sidebar,
.sdl--numbered-sidebar .sdl-row--column-last .sdl-sidebar{inset-block-end:0}
.sdl--numbered-sidebar .sdl-sidebar::before{
  content:"";
  position:absolute;
  display:block;
  inset-block-start:var(--sdl-v-sidebar-line-bs,calc(50% + var(--sdl-v-sidebar-y,0px)));
  inset-inline-start:var(--sdl-v-sidebar-line-is,var(--sdl-v-sidebar-x,0px));
  width:var(--sdl-v-sidebar-line-width,var(--sdl-v-sidebar-width,2px));
  height:var(--sdl-v-sidebar-line-height,var(--sdl-v-sidebar-height,100%));
  background:var(--sdl-v-sidebar,rgba(255,255,255,.09));
  pointer-events:none;
  opacity:1;
  transform:var(--sdl-v-sidebar-line-transform,translateY(-50%));
  transform-origin:center;
  transition:background var(--sdl-speed) var(--sdl-ease);
}
.sdl--numbered-sidebar .sdl-n{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  order:0;
  align-self:var(--sdl-v-sidebar-row-align,center);
  width:var(--sdl-v-sidebar-marker-size,auto);
  height:var(--sdl-v-sidebar-marker-size,auto);
  min-width:var(--sdl-v-sidebar-marker-size,0);
  padding:var(--sdl-v-marker-pt,6px) var(--sdl-v-marker-pr,11px) var(--sdl-v-marker-pb,6px) var(--sdl-v-marker-pl,11px);
  border:var(--sdl-v-marker-border-width,1px) var(--sdl-v-marker-border-style,solid) var(--sdl-v-marker-border,rgba(255,255,255,.16));
  border-radius:var(--sdl-v-marker-radius,6px);
  background:var(--sdl-v-marker-bg,transparent);
  color:var(--sdl-v-marker-text,#9CACC6);
  opacity:1;
  transform:none;
  transition:background var(--sdl-speed) var(--sdl-ease),border-color var(--sdl-speed) var(--sdl-ease),color var(--sdl-speed) var(--sdl-ease);
}
.sdl--numbered-sidebar .sdl-row:not(:last-child) .sdl-n,
.sdl--numbered-sidebar .sdl-row:not(:last-child) .sdl-body{
  inset-block-start:var(--sdl-v-sidebar-row-offset,calc(var(--sdl-v-item-space,6px) / 2));
}
.sdl--numbered-sidebar .sdl-row--column-last .sdl-n,
.sdl--numbered-sidebar .sdl-row--column-last .sdl-body{inset-block-start:0}
.sdl--numbered-sidebar .sdl-marker-icon{font-size:var(--sdl-v-icon-size,15px); transform:rotate(var(--sdl-v-icon-rotate,0deg))}
.sdl--numbered-sidebar .sdl-body{order:var(--sdl-v-sidebar-body-order,0)}
.sdl--numbered-sidebar[dir="rtl"]{--sdl-v-sidebar-center-x:50%}
@media (hover: hover){.sdl--numbered-sidebar .sdl-row:hover{
  background:var(--sdl-v-row-bg-hover,rgba(217,163,43,.06));
  transform:none;
}}
@media (hover: hover){.sdl--numbered-sidebar .sdl-row:hover .sdl-sidebar::before{
  background:var(--sdl-v-sidebar-hover,#D9A32B);
}}
@media (hover: hover){.sdl--numbered-sidebar .sdl-row:hover .sdl-n{
  color:var(--sdl-v-marker-text-hover,#12161F);
  background:var(--sdl-v-marker-bg-hover,#D9A32B);
  border-color:var(--sdl-v-marker-border-hover,#D9A32B);
  opacity:1;
}}
@media (hover: hover){.sdl--numbered-sidebar .sdl-row:hover .sdl-body{transform:none}}

/* Touch devices have no persistent hover. A tap selects one row and keeps
   the exact hover presentation until another row is tapped. Desktop remains
   governed only by :hover because these rules require a coarse touch pointer. */
@media (hover:none) and (pointer:coarse){
  .sdl .sdl-row.is-touch-active{
    background:var(--sdl-rowbg-h);
    transform:translateY(var(--sdl-lift));
  }
  .sdl.sdl-hover-layer-ready .sdl-row.is-touch-active{background:transparent}
  .sdl.has-wash .sdl-row.is-touch-active::before{transform:var(--sdl-washto)}
  .sdl .sdl-row.is-touch-active .sdl-n{color:var(--sdl-ncol-h);opacity:var(--sdl-nop-h)}
  .sdl .sdl-row.is-touch-active .sdl-body{transform:translateX(var(--sdl-shift))}
  .sdl .sdl-row.is-touch-active .sdl-title{color:var(--sdl-tcol-h)}
  .sdl .sdl-row.is-touch-active .sdl-text{color:var(--sdl-xcol-h)}
  .sdl .sdl-row.is-touch-active .sdl-icon{color:var(--sdl-iconcol-h)}
  .sdl .sdl-row.is-touch-active .sdl-marker-icon{color:var(--sdl-mic-h,var(--sdl-mic,#D9A32B))}

  [dir="rtl"] .sdl .sdl-row.is-touch-active .sdl-body,
  .sdl[dir="rtl"] .sdl-row.is-touch-active .sdl-body{
    transform:translateX(calc(-1 * var(--sdl-shift)));
  }

  .sdl--numbered-circle .sdl-row.is-touch-active::after,
  .sdl--numbered-rule .sdl-row.is-touch-active::after,
  .sdl--numbered-sidebar .sdl-row.is-touch-active::after{
    background:var(--sdl-v-row-bg-hover,rgba(217,163,43,.06));
  }
  .sdl--numbered-circle .sdl-row.is-touch-active,
  .sdl--numbered-sidebar .sdl-row.is-touch-active{
    background:var(--sdl-v-row-bg-hover,rgba(217,163,43,.06));
    transform:none;
  }
  .sdl--numbered-timeline .sdl-row.is-touch-active{
    background:var(--sdl-v-row-bg-hover,transparent);
    transform:none;
  }
  .sdl--numbered-rule .sdl-row.is-touch-active{
    background:var(--sdl-v-row-bg-hover,rgba(217,163,43,.05));
    transform:none;
  }
  .sdl--numbered-circle .sdl-row.is-touch-active .sdl-n,
  .sdl--numbered-timeline .sdl-row.is-touch-active .sdl-n,
  .sdl--numbered-sidebar .sdl-row.is-touch-active .sdl-n{
    color:var(--sdl-v-marker-text-hover,#12161F);
    background:var(--sdl-v-marker-bg-hover,#D9A32B);
    border-color:var(--sdl-v-marker-border-hover,#D9A32B);
    opacity:1;
  }
  .sdl--numbered-rule .sdl-row.is-touch-active .sdl-n{
    color:var(--sdl-v-marker-text-hover,#D9A32B);
    opacity:1;
  }
  .sdl--numbered-sidebar .sdl-row.is-touch-active .sdl-sidebar::before{
    background:var(--sdl-v-sidebar-hover,#D9A32B);
  }
  /* The steps layout cancels the body shift on hover; the tap state has to
     cancel it too, or a tap moves text that a pointer leaves still. */
  .sdl--numbered-steps .sdl-step-panel .sdl-row.is-touch-active .sdl-body{transform:none}
  .sdl--numbered-circle .sdl-row.is-touch-active .sdl-body,
  .sdl--numbered-timeline .sdl-row.is-touch-active .sdl-body,
  .sdl--numbered-rule .sdl-row.is-touch-active .sdl-body,
  .sdl--numbered-sidebar .sdl-row.is-touch-active .sdl-body{
    transform:none;
  }
}

@media (hover:none) and (pointer:coarse) and (prefers-reduced-motion:reduce){
  .sdl .sdl-row.is-touch-active,
  .sdl .sdl-row.is-touch-active .sdl-body{transform:none}
}