/* ============================================================
   Coupon deals — eight cards on the page, and the floating panel
   that keeps three of them within reach.

   There is no container around the set. Each card is its own small
   pane of tinted glass: one lit top edge, a short contact shadow, and
   a slow light drifting behind the row. The depth is meant to come
   from that light, not from stacked outlines. The hero dock stays the
   reference for the corner radius and the finish of the logo tiles.
   ============================================================ */

.cdk-sec{
  /* One size for every tile. The cards are stacked on a single spot in the
     carousel and have to share one height, so Apex is distinguished by its
     border, its halo and its gold code — not by being physically bigger. */
  --cdk-tile:64px;
  --cdk-gold:#F0CE80;
  --cdk-ink:#EDE8DF;
  --cdk-dim:#9BAABF;
  position:relative;z-index:1;
  /* The background runs straight through from the hero, so the gap above the
     title is the only thing marking the join. 22px is enough to mark it. */
  padding:16px 24px 12px;
  font-family:Archivo,Arial,sans-serif;
  color:var(--cdk-ink);
  scroll-margin-top:95px;
  /* The glow reaches past the shell on purpose; clipping only the one axis
     keeps it off the document's horizontal scroll without flattening the
     shadows the cards cast downward. */
  overflow-x:clip;overflow-y:visible;
}
.cdk-shell{position:relative;max-width:1282px;margin:0 auto}

/* ---------- the light behind the row ----------------------------- */

/* One layer, moved with transform so no filter is recomputed per frame.
   deals.js only lets it run while the section is on screen. */
.cdk-glow{
  position:absolute;z-index:0;
  left:-7%;right:-7%;top:-18px;bottom:38px;
  overflow:hidden;pointer-events:none;
}
.cdk-glow span{
  position:absolute;left:50%;top:54%;
  width:880px;height:340px;margin:-170px 0 0 -440px;
  border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(106,136,188,.30) 0%,rgba(106,136,188,.12) 44%,rgba(106,136,188,0) 72%);
  animation:cdk-drift 19s ease-in-out infinite alternate;
  animation-play-state:paused;
  will-change:transform;
}
.cdk-sec.is-live .cdk-glow span{animation-play-state:running}

/* A warm pool on the partner's side. It does not move: one thing drifting
   reads as light, two read as a screensaver. */
.cdk-glow::before{
  content:'';position:absolute;left:6%;top:50%;
  width:340px;height:210px;margin-top:-105px;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(228,180,88,.15) 0%,rgba(228,180,88,0) 70%);
}

@keyframes cdk-drift{
  from{transform:translate3d(-56px,-8px,0) scale(1)}
  to  {transform:translate3d(56px,10px,0) scale(1.07)}
}

/* ---------- the title, behind the cards -------------------------- */

/* A real H2, set in the same voice as the hero wordmark: Archivo at
   "wdth" 84 / "wght" 900, the exact variation axes .title uses, with the
   same -.008em tracking and .84 leading. The character comes from the
   variable font itself — there is no scaleX and no crushed tracking
   standing in for a condensed cut.
   It is deliberately set well under the wordmark's size so it reads as the
   heading of this section and not as a second hero. */
.cdk-title{
  position:relative;z-index:1;
  /* The overlap is in em, so the cards cross the same part of the letterform
     at every size. At -.17em they clip the descenders and the very feet of
     the letters — the whole phrase stays readable at a glance. */
  margin:0 0 -.22em;
  text-align:center;
  font-size:clamp(31px,3.5vw,50px);
  font-weight:900;line-height:.84;letter-spacing:-.008em;
  font-variation-settings:"wdth" 84,"wght" 900;
  /* Solid white. No gradient, no transparency, no clip mask: those were
     dulling the letters where the cards cross them. */
  color:#FFFFFF;
  /* Depth comes from the cards crossing the feet of the letters and from a
     soft ground shadow, never from dropping the text to a grey. */
  text-shadow:0 14px 32px rgba(6,10,18,.6);
  pointer-events:none;
  -webkit-user-select:none;user-select:none;
}

/* ---------- the stage -------------------------------------------- */

/* Two arrangements live here, and they are the same height on purpose.

   Without .cf-on — the class coverflow.js adds once it has taken over —
   the track is a plain horizontal scroller of eight readable cards. That
   is what a reader gets if the script is blocked or never arrives, which
   is why none of the offer markup is generated.

   With .cf-on the same cards are stacked on one spot and placed by
   transform. Because the stage is already var(--cf-h) tall before the
   script runs, the swap costs nothing: the section does not change height
   and nothing below it moves. */
.cdk-cf{
  /* Wide enough that the ticket breathes, narrow enough that the two
     neighbours are genuinely on screen rather than implied. It tracks the
     viewport so a 1024px screen does not get a card built for 1440. */
  --cf-w:clamp(460px,41vw,540px);
  /* 22 of padding, a 64px head row, a 16px gap, a 46px action row and
     22 of padding again: 170, and the stage is 178. The 196 this was wants
     a taller ticket than the card now carries. */
  --cf-h:178px;      /* every card, so the stage never reflows       */
  --cf-step:58%;     /* centre to centre, as a share of the card     */
  --cf-tilt:25deg;   /* per step away from the middle                */
  --cf-sink:132px;   /* per step, into the screen                    */
  --cf-fade:.46;     /* per step, off full opacity                   */
  --cf-shrink:.15;   /* per step, off full scale                     */
  --cf-blur:1.1px;   /* per step, out of focus                       */
  position:relative;z-index:2;
  height:var(--cf-h);
  /* the fallback's own scrolling; .cf-on turns it off again below */
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.cdk-cf::-webkit-scrollbar{display:none}
.cdk-cf__track{
  display:flex;gap:12px;height:100%;
  margin:0;padding:0;list-style:none;
}
.cdk-cf__track > *{flex:0 0 min(var(--cf-w),84vw)}

.cf-on .cdk-cf{
  /* Clip sideways, not vertically. The cards on the far side of the ring run
     well past the edge of the stage — on a phone the second one out is
     entirely off screen — and left visible they would widen the document and
     give the whole page a horizontal scrollbar. overflow:hidden would clip
     both axes and take the active card's ground shadow with it, so the two
     axes are set apart: clip across, visible down. overflow-clip-margin keeps
     the active card's own side shadow out of the cut; the cards it lets bleed
     past the edge are at the far end of the ring and already transparent. */
  overflow-x:clip;
  overflow-y:visible;
  overflow-clip-margin:30px;
  /* Shallow on purpose. The brief asks for depth, not for a turntable: at
     1200px the side cards tilt without their text shearing. */
  perspective:1200px;
  perspective-origin:50% 50%;
  /* The page still scrolls vertically under a thumb that starts on a card;
     only a clearly sideways gesture is read as a swipe, in coverflow.js. */
  touch-action:pan-y;
  outline-offset:6px;
}
.cf-on .cdk-cf__track{display:block;position:relative}

/* --o is the signed distance from the middle, --oa its absolute value, and
   coverflow.js publishes nothing else. The curve, the depth, the fade and
   the reduced-motion variant are therefore all decided here, once, instead
   of being assembled into transform strings in JavaScript. */
.cf-on .cdk-cf__track > *{
  position:absolute;top:0;left:50%;
  width:var(--cf-w);height:var(--cf-h);
  transform:
    translateX(calc(-50% + var(--o,0) * var(--cf-step)))
    translateZ(calc(var(--oa,0) * var(--cf-sink) * -1))
    rotateY(calc(var(--o,0) * var(--cf-tilt) * -1))
    scale(calc(1 - var(--oa,0) * var(--cf-shrink)));
  opacity:calc(1 - var(--oa,0) * var(--cf-fade));
  /* Depth of field, and the one thing that makes a sliver of a card read as
     a card. What is actually on screen beside the offer is 50-odd pixels of
     the next one, and 50 pixels of a card is never a card — it is whichever
     glyph happens to land there, the tail of a discount or half a logo,
     sitting at full sharpness next to the thing the reader is meant to be
     looking at. Thrown out of focus it becomes an edge with something behind
     it. The middle card resolves to blur(0): the active one is never soft. */
  filter:blur(calc(var(--oa,0) * var(--cf-blur,0px)));
  transition:transform .42s cubic-bezier(.22,.71,.25,1),
             opacity .42s ease,
             filter .42s ease,
             box-shadow .42s ease,border-color .42s ease;
}
/* Beyond reach: gone, untouchable, and — set in coverflow.js with inert and
   tabindex — out of the tab order too. */
.cf-on .cdk-cf__track > .is-far{opacity:0;pointer-events:none}

/* One layout only, while coverflow.js lays the ring out for the first time.
   The opening arrangement has to be a position the cards are already in, not
   a move they make from the flex row — see the hand-over at the foot of that
   file. !important because it has to beat the transition shorthand the rule
   above sets on the same elements. */
.cf-set .cdk-cf__track > *{transition:none!important}

/* ---------- navigation ------------------------------------------- */

.cdk-cf__nav{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:4px 0 0;
}
/* [hidden] has to be restated: the display:flex above would otherwise beat
   the browser's own [hidden]{display:none} and show controls that cannot
   work yet. visibility, not display, so the row still takes up its height
   before coverflow.js reveals it — the buttons are neither visible nor
   focusable, and nothing on the page moves when they arrive. */
.cdk-cf__nav[hidden]{visibility:hidden}
.cdk-cf__arrow{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;
  border-radius:50%;
  border:1px solid rgba(240,206,128,.22);
  background:rgba(31,38,54,.6);
  color:#CBB47C;
  cursor:pointer;
  transition:border-color .16s,background-color .16s,color .16s;
}
.cdk-cf__arrow svg{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* A 30px circle is small for a thumb, so the target is grown with a
   pseudo-element instead of with padding that would change the look. */
.cdk-cf__arrow::after{content:'';position:absolute;inset:-8px;border-radius:50%}
.cdk-cf__count{
  margin:0;min-width:52px;text-align:center;
  font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.06em;color:var(--cdk-dim);
  font-variant-numeric:tabular-nums;
}
.cdk-cf__count b{font-weight:600;color:var(--cdk-gold)}
.cdk-cf__count span{margin:0 3px;opacity:.5}

/* ---------- one card --------------------------------------------- */

.cdk__slot{
  --lift:0px;
  position:relative;
  /* A column that centres its two rows. The card's height is fixed by the
     stage, so when a long firm name takes a second line the ticket grows
     into the slack instead of pushing the card — nothing below moves and
     the section never changes height as the reader moves through the ring. */
  display:flex;flex-direction:column;justify-content:center;
  padding:22px 24px;
  border-radius:22px;
  /* Three layers and one border, in this order: a dome of light gathered at
     the top centre, a vertical sheen, then the glass itself. The surface is
     more opaque than the page so the card reads as a solid object sitting on
     the background rather than a tint of it. */
  background:
    radial-gradient(104% 62% at 50% -6%,rgba(255,252,246,.12) 0%,rgba(255,252,246,0) 70%),
    linear-gradient(180deg,rgba(237,232,223,.055) 0%,rgba(237,232,223,0) 34%),
    rgba(26,33,48,.84);
  backdrop-filter:saturate(165%) blur(14px);
  -webkit-backdrop-filter:saturate(165%) blur(14px);
  /* Gold, but barely: enough for the eight cards to read as one warm set
     under the hero's light, far enough below the partner's .34 that the
     hierarchy is never in doubt. Still one border — the depth comes from the
     reflection and the shadow, not from a second frame. */
  border:1px solid rgba(240,206,128,.15);
  /* A short contact shadow holds the card on the page; the wide one gives it
     air underneath. */
  box-shadow:
    0 2px 5px -2px rgba(4,7,12,.7),
    0 20px 38px -22px rgba(4,7,12,.95);
  transform:translateY(var(--lift));
  transition:transform .26s cubic-bezier(.2,.7,.3,1),
             box-shadow .26s ease,border-color .26s ease;
}

/* The one edge that catches the light. Inset from the corners so it stops
   before the radius instead of ringing the whole card. */
.cdk__slot::before{
  content:'';position:absolute;z-index:1;left:20px;right:20px;top:0;height:1px;
  background:linear-gradient(90deg,
    rgba(237,232,223,0),rgba(255,250,238,.44) 32%,rgba(255,250,238,.2) 70%,rgba(237,232,223,0));
  transition:opacity .26s ease,filter .26s ease;
}

/* ---------- the light pass ---------------------------------------- */

/* The one thing borrowed from the reference composition, and the only part
   of it that needed rewriting rather than reproducing: a single warm band
   that crosses the card once when it reaches the middle. No rainbow, no
   dispersion — the demo's spectrum would have tinted eight firms' logos,
   which are trademarks and have to stay their own colours. It is a
   background layer at z-index 0, so it passes under the logo, the name,
   the discount and the code, never over them, and it cannot be clicked. */
.cdk__slot::after{
  content:'';position:absolute;inset:0;z-index:0;
  border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(104deg,
    rgba(255,255,255,0) 36%,
    rgba(255,248,232,.11) 46%,
    rgba(240,206,128,.16) 50%,
    rgba(255,248,232,.09) 54%,
    rgba(255,255,255,0) 64%);
  background-size:250% 100%;
}
.cf-on .cdk__slot.is-active::after{animation:cdk-pass .8s ease-out}
@keyframes cdk-pass{
  from{opacity:0;background-position:118% 0}
  26%{opacity:1}
  to{opacity:0;background-position:-28% 0}
}

/* ---------- the ticket ------------------------------------------- */

/* Horizontal, as the brief asks: logo and firm on the left, the discount
   dominant on the right, the two actions on a row of their own underneath.

   Not a link. The card used to be one, with a pseudo-element stretched over
   its whole upper half, and that was defensible while the code button was
   the only other thing on it. It is not defensible now: a card carrying two
   explicit actions must not also be a third, invisible one. On the ring a
   side card is a target that brings itself forward, and leaving this
   surface inert is what makes those two meanings — select, and go — stay
   apart. External navigation happens in .cdk__buy and nowhere else. */
.cdk__head{
  position:relative;z-index:1;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;column-gap:16px;
  color:inherit;
}

/* Square app icon, macOS corner, its own ground and contact shadow: the
   same finish as .dock__link in the hero. */
.cdk__tile{
  width:var(--cdk-tile);height:var(--cdk-tile);
  border-radius:22.3%;overflow:hidden;
  background:var(--tile,#232A3A);
  border:1px solid rgba(237,232,223,.09);
  box-shadow:0 7px 18px -6px rgba(0,0,0,.55),inset 0 1px 0 rgba(237,232,223,.1);
}
.cdk__tile img{
  width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none;-webkit-user-drag:none;
}

/* Left-aligned now, and allowed two lines: a 452px ticket has the room the
   152px column never had, so "Funded Futures Network" is written out in
   full instead of being cut. */
.cdk__id{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;
  min-width:0;text-align:left;
}
/* Legible, and deliberately not competing with the figure: the name is the
   label, the discount is the news. */
.cdk__name{
  max-width:100%;
  font-size:16px;line-height:1.25;font-weight:500;letter-spacing:-.018em;color:#E7EDF6;
  /* "PropShopTrader" is one unbreakable word. On the narrowest phone its
     column is a little shorter than the word, and without this the name is
     silently cut off at the edge. Breaking inside a word is the last resort
     the layout below is tuned to avoid — but a broken word is still readable
     and a cut one is not. */
  overflow-wrap:break-word;
}
.cdk__partner{
  font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cdk-gold);
}

/* The dominant figure on the card. "% off" rides its baseline at a third of
   the size so the number carries the card on its own. */
.cdk__off{
  display:flex;align-items:baseline;gap:4px;
  font-size:46px;line-height:1;font-weight:600;letter-spacing:-.05em;color:#fff;
  font-variant-numeric:tabular-nums;
}
.cdk__off i{font-size:13px;font-weight:400;font-style:normal;letter-spacing:0;color:var(--cdk-dim)}

/* ---------- the two actions -------------------------------------- */

/* Copy the code, or go and look at the accounts. Side by side, the same
   height, and each one does only its own job.

   Both tracks are minmax(max-content, Nfr). max-content as the floor is
   what guarantees no code is ever cut and no label ever clipped: a track
   cannot go under the width of what it holds, whatever the card does. The
   1.3 : 1 above that floor is the ratio of the slack, not of the buttons —
   the code is the thing a reader has to take in character by character, so
   it gets the larger share, and "View accounts" is a fixed phrase that only
   needs enough room to sit comfortably. */
.cdk__act{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:minmax(max-content,1.3fr) minmax(max-content,1fr);
  align-items:stretch;gap:10px;
  margin-top:16px;
}

/* One shape for both, so neither reads as the louder of the two. */
.cdk__code,
.cdk__buy{
  min-height:46px;
  display:flex;align-items:center;justify-content:center;
  border-radius:13px;
  border:1px solid rgba(237,232,223,.14);
  box-shadow:inset 0 1px 0 rgba(237,232,223,.09);
  transition:border-color .16s,background-color .16s,color .16s;
}

.cdk__code{
  gap:9px;padding:0 14px;
  background:linear-gradient(180deg,rgba(237,232,223,.08),rgba(237,232,223,.02));
  color:#E9DFC6;
  font:500 13px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.08em;
  cursor:pointer;
}
/* Selectable, so the manual fallback has something to select. No ellipsis:
   the track above is wide enough by construction, and a code that has been
   shortened by one character is worse than no code at all. */
.cdk__code-txt{white-space:nowrap;-webkit-user-select:text;user-select:text}
/* Says which of the two buttons copies, and it is the only thing on the
   card that has to. Drawn rather than typed so it keeps its weight against
   the monospace next to it at any size. */
.cdk__copy{
  flex:none;width:13px;height:13px;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.72;
}
.cdk__code:active{transform:translateY(.5px)}
.cdk__code.is-copied{color:#CFE8CC;border-color:rgba(150,205,150,.4)}
.cdk__code.is-copied .cdk__copy{opacity:0}

/* The one way out of the card. Quieter glass than the code button and no
   arrow beside the words: it is a destination, not a sales push. */
.cdk__buy{
  padding:0 15px;
  background:rgba(237,232,223,.035);
  color:#D8E2EF;
  font-size:13px;font-weight:500;letter-spacing:-.008em;
  text-decoration:none;text-align:center;
  white-space:nowrap;
}
.cdk__buy:active{transform:translateY(.5px)}
/* Two spellings of one label, so the short screens get the short phrase
   without a script deciding it. The accessible name is on the anchor, so it
   stays "View <firm> accounts" at every width. */
.cdk__buy-s{display:none}

/* ---------- the partner card ------------------------------------- */

/* Warmer glass, a brighter gold border, a warm halo, a gold discount and a
   gold code. Nothing that reads as a rank, a medal or an award — the card
   is a paid placement and says so in its own label. */
.cdk__slot--partner{
  --lift:-5px;
  background:
    radial-gradient(118% 82% at 50% -8%,rgba(255,240,206,.15) 0%,rgba(255,240,206,0) 62%),
    linear-gradient(180deg,rgba(247,222,160,.085) 0%,rgba(237,232,223,.013) 50%),
    rgba(34,40,56,.76);
  border-color:rgba(240,206,128,.34);
  /* Same two shadows as every other card, plus one wide warm pool that reads
     as light spilling around this card rather than as an outline on it. The
     halo is the last layer so it sits furthest back. */
  /* Same two shadows as every other card, plus one warm pool that reads as
     light spilling around this card. Kept well under a glow: the accent is
     the border, the gold figure and the gold button, not a lamp behind the
     card. */
  box-shadow:
    0 2px 5px -2px rgba(4,7,12,.7),
    0 24px 42px -24px rgba(4,7,12,.95),
    0 8px 30px -16px rgba(214,163,56,.26);
}
.cdk__slot--partner::before{
  background:linear-gradient(90deg,
    rgba(240,206,128,0),rgba(255,241,206,.62) 32%,rgba(255,241,206,.28) 70%,rgba(240,206,128,0));
}
.cdk__slot--partner .cdk__tile{
  border-color:rgba(240,206,128,.4);
  box-shadow:0 10px 24px -8px rgba(214,163,56,.36),0 7px 18px -6px rgba(0,0,0,.5),
             inset 0 1px 0 rgba(255,238,198,.2);
}
.cdk__slot--partner .cdk__off{color:var(--cdk-gold)}
.cdk__slot--partner .cdk__off i{color:rgba(240,206,128,.7)}
.cdk__slot--partner .cdk__code{
  color:#1B2333;
  border-color:rgba(255,238,195,.5);
  background:linear-gradient(180deg,#F7DEA0,#DCB258);
  box-shadow:inset 0 1px 0 rgba(255,250,236,.6),0 4px 12px -6px rgba(0,0,0,.5);
}
.cdk__slot--partner .cdk__code.is-copied{color:#1B2333;border-color:rgba(255,238,195,.5)}
/* The partner's accent is the gold code button, so the link beside it only
   warms its edge. Filling both would put two solid golds on one card and
   leave the reader with no idea which of them is the offer. */
.cdk__slot--partner .cdk__buy{border-color:rgba(240,206,128,.3);color:#E7DCC4}

/* ---------- motion ------------------------------------------------ */

/* One short rise the first time the cards come into view. backwards, not
   forwards: once it has played the card returns to its own resting style,
   so hover still owns the transform afterwards. */
@keyframes cdk-rise{from{opacity:0;transform:translateY(16px)}}
.cdk-sec.is-seen .cdk__slot{
  animation:cdk-rise .55s cubic-bezier(.2,.7,.3,1) backwards;
  animation-delay:calc(var(--i,0) * 42ms);
}

/* In the carousel the placement is a transform, and an animation on the
   same property would win and pile all eight cards on the centre spot for
   half a second. So the entrance fades instead of rising, and it is one
   pass over the whole stage rather than a stagger of eight — the cards are
   stacked, so a stagger would not be legible anyway. */
.cdk-sec.cf-on.is-seen .cdk__slot{animation:none}
@keyframes cdk-fade{from{opacity:0}}
.cdk-sec.cf-on.is-seen .cdk-cf{animation:cdk-fade .5s ease backwards}

/* A card set back is a target, so it says so. The middle one is a link and
   keeps the pointer its anchor gives it. */
.cf-on .cdk__slot:not(.is-active){cursor:pointer}

@media (hover:hover) and (pointer:fine){
  /* The contact shadow travels with the card and loosens as it rises; the
     wide one deepens. That is what makes four pixels read as a lift.
     In the carousel the placement already owns transform, so --lift does
     nothing there and the hover reads as light on the edges instead. */
  .cdk__slot:hover{
    --lift:-4px;
    border-color:rgba(237,232,223,.15);
    box-shadow:
      0 4px 9px -3px rgba(4,7,12,.65),
      0 28px 48px -24px rgba(4,7,12,1);
  }
  .cdk__slot:hover::before{filter:brightness(1.4)}
  .cdk__slot--partner:hover{
    --lift:-8px;
    border-color:rgba(240,206,128,.38);
    box-shadow:
      0 5px 11px -3px rgba(4,7,12,.65),
      0 32px 54px -26px rgba(4,7,12,1),
      0 14px 32px -18px rgba(214,163,56,.44);
  }
  /* A card set back brightens a little under the pointer, enough to say it
     can be brought forward. Not enough to compete with the middle one. */
  .cf-on .cdk__slot:not(.is-active):hover{opacity:calc(1 - var(--oa,0) * .2)}
  .cdk__code:hover{
    border-color:rgba(240,206,128,.45);
    background:linear-gradient(180deg,rgba(240,206,128,.14),rgba(240,206,128,.04));
    color:#F6E6C2;
  }
  .cdk__slot--partner .cdk__code:hover{
    background:linear-gradient(180deg,#FBE7B2,#E3BC66);color:#1B2333;
  }
  .cdk__buy:hover{
    border-color:rgba(237,232,223,.3);
    background:rgba(237,232,223,.085);
    color:#F2F6FB;
  }
  .cdk__slot--partner .cdk__buy:hover{border-color:rgba(240,206,128,.5);color:#F6E6C2}
  .cdk-cf__arrow:hover{
    border-color:rgba(240,206,128,.5);
    background:rgba(240,206,128,.12);
    color:#F6E6C2;
  }
}

/* ---------- focus and the note ------------------------------------ */

.cdk-sec :focus-visible{outline:2px solid var(--cdk-gold);outline-offset:3px;border-radius:10px}
/* Both actions are real elements with their own box, so the ring the rule
   above draws already sits where it should; there is no stretched
   pseudo-element left on the card to redirect it to. */

/* The commercial relationship in one line, no link. The link belongs in the
   footer and on the transparency page — repeated under the offers it reads
   as a disclaimer attached to a specific coupon, which it is not.

   Two spellings of the same statement. The long one is the statement; the
   short one exists only because a phone cannot set 84 characters on one
   legible line, and shrinking the type until it fitted would be the wrong
   trade. Neither is truncated. */
.cdk-note{
  position:relative;z-index:2;
  margin:6px auto 0;
  font-size:11.5px;line-height:1.6;color:#8D9CB2;text-align:center;
}
.cdk-note__short{display:none}

/* ============================================================
   Floating panel — three of the eight, kept within reach.
   Built by deals.js from the cards above: same codes, same links,
   no duplicated id. A small glass notification, not a second
   version of the section.
   ============================================================ */

.fdk{
  position:fixed;z-index:35;
  left:0;right:0;bottom:0;
  display:flex;justify-content:center;
  padding:0 16px calc(16px + env(safe-area-inset-bottom,0px));
  pointer-events:none;
  opacity:0;transform:translateY(14px);
  transition:opacity .26s ease,transform .26s cubic-bezier(.2,.7,.3,1);
  font-family:Archivo,Arial,sans-serif;
}
.fdk.is-on{opacity:1;transform:none}
.fdk.is-on .fdk__bar{pointer-events:auto}

.fdk__bar{
  --cdk-gold:#F0CE80;
  position:relative;
  width:min(680px,100%);
  padding:6px 12px 7px;
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(237,232,223,.07) 0%,rgba(237,232,223,0) 42%),
    rgba(19,24,34,.88);
  backdrop-filter:saturate(180%) blur(28px);
  -webkit-backdrop-filter:saturate(180%) blur(28px);
  border:1px solid rgba(237,232,223,.1);
  box-shadow:0 22px 44px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(237,232,223,.1);
  color:#EDE8DF;
}

/* The header is a caption, not a banner: one short line, set small enough
   that the offers below it are plainly the subject of the panel. */
.fdk__title{
  margin:0 0 5px;
  font-size:9.5px;line-height:1.1;font-weight:650;letter-spacing:.15em;
  text-transform:uppercase;color:#9FB0C7;
}

/* Outside the scroller, so it never slides away from under the thumb. */
.fdk__close{
  position:absolute;top:6px;right:9px;
  width:26px;height:26px;
  display:grid;place-items:center;
  border:1px solid rgba(237,232,223,.14);border-radius:50%;
  background:rgba(237,232,223,.05);
  color:#B9C5D6;font:300 17px/1 Archivo,Arial,sans-serif;
  cursor:pointer;transition:color .16s,border-color .16s;
}
/* 26px of circle, 44px of thumb. */
.fdk__close::after{content:'';position:absolute;inset:-9px}
.fdk__close:hover{color:#fff;border-color:rgba(237,232,223,.3)}

.fdk__scroll{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.fdk__scroll::-webkit-scrollbar{display:none}

/* Spacing separates the three, not three more frames. The hairline between
   them is a rule in the gap, not a border on a card — nothing gains an
   outline, and the gold pool under the partner still reads as one zone. */
.fdk__row{display:flex;align-items:stretch;gap:8px;margin:0;padding:0;list-style:none}
.fdk__slot{
  position:relative;flex:1 0 186px;min-width:0;
  display:flex;align-items:center;gap:9px;
  padding:2px 7px;border-radius:12px;
  scroll-snap-align:start;
}
.fdk__slot + .fdk__slot::before{
  content:'';position:absolute;left:-4px;top:5px;bottom:5px;width:1px;
  background:rgba(237,232,223,.09);
}
.fdk__go{
  display:flex;align-items:center;gap:9px;flex:1 1 auto;min-width:0;
  text-decoration:none;color:inherit;
}
.fdk__go::after{content:'';position:absolute;inset:0;border-radius:12px}
.fdk__tile{
  flex:0 0 auto;width:32px;height:32px;
  border-radius:10px;overflow:hidden;
  background:var(--tile,#232A3A);
  border:1px solid rgba(237,232,223,.09);
  box-shadow:0 5px 14px -4px rgba(0,0,0,.5),inset 0 1px 0 rgba(237,232,223,.09);
}
.fdk__tile img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.fdk__off{
  font-size:15px;line-height:1;font-weight:550;letter-spacing:-.03em;color:#fff;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.fdk__off i{font-size:9.5px;font-weight:400;font-style:normal;letter-spacing:0;
  color:#93A3B9;margin-left:2px}

.fdk__code{
  position:relative;z-index:2;flex:0 0 auto;
  min-width:94px;min-height:32px;
  display:flex;align-items:center;justify-content:center;
  padding:0 9px;
  border-radius:9px;
  border:1px solid rgba(237,232,223,.14);
  background:linear-gradient(180deg,rgba(237,232,223,.08),rgba(237,232,223,.02));
  box-shadow:inset 0 1px 0 rgba(237,232,223,.08);
  color:#E9DFC6;
  font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  cursor:pointer;
  transition:border-color .16s,background-color .16s;
}
.fdk__code span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  -webkit-user-select:text;user-select:text}
.fdk__code:hover{border-color:rgba(240,206,128,.42)}
.fdk__code.is-copied{color:#CFE8CC;border-color:rgba(150,205,150,.4)}

/* Light pooled under the partner's tile, not a box drawn around it. */
.fdk__slot--partner{
  background:radial-gradient(124px 56px at 24px 50%,
    rgba(240,206,128,.15) 0%,rgba(240,206,128,0) 72%);
}
.fdk__slot--partner .fdk__tile{
  border-color:rgba(240,206,128,.42);
  box-shadow:0 6px 16px -5px rgba(214,163,56,.36),0 5px 14px -4px rgba(0,0,0,.5),
             inset 0 1px 0 rgba(255,238,198,.18);
}
.fdk__slot--partner .fdk__off{color:var(--cdk-gold)}
.fdk__slot--partner .fdk__off i{color:rgba(240,206,128,.72)}
.fdk__slot--partner .fdk__code{
  color:#1B2333;border-color:rgba(255,238,195,.55);
  background:linear-gradient(180deg,#F7DEA0,#DCB258);
  box-shadow:inset 0 1px 0 rgba(255,250,236,.6),0 3px 9px -5px rgba(0,0,0,.5);
}
.fdk__slot--partner .fdk__code:hover{background:linear-gradient(180deg,#FBE7B2,#E3BC66)}
.fdk__slot--partner .fdk__code.is-copied{color:#1B2333}

.fdk__note{
  margin:5px 0 0;
  font-size:10.5px;line-height:1.35;color:#8A99AF;text-align:center;
}
.fdk__note a{color:#B9A572;text-underline-offset:2px}

.fdk :focus-visible{outline:2px solid #F0CE80;outline-offset:2px}
.fdk__go:focus-visible{outline:none}
.fdk__go:focus-visible::after{outline:2px solid #F0CE80;outline-offset:2px}

/* The panel floats, but it does not sit on top of the end of the page: the
   footer grows by its height while it is up, and anchored jumps stop above
   it rather than under it. deals.js sets --fdk-space. */
html{scroll-padding-bottom:calc(var(--fdk-space,0px) + 16px)}
body.has-fdk .ft{padding-bottom:calc(25px + var(--fdk-space,0px))!important}

/* ============================================================
   Responsive
   ============================================================ */

/* The carousel is the layout at every width — there is no second
   arrangement to switch to, so these blocks only retune the geometry. The
   native horizontal scroller that used to live here is gone: the eight
   cards no longer sit side by side, so there is nothing left to scroll. */
@media (max-width:1100px){
  .cdk-cf{--cf-h:170px;--cf-sink:92px}
  .cdk__slot{padding:20px 22px}
  .cdk__off{font-size:42px}
  /* Everything at this width is reached by thumb, whatever the pointer
     media query claims about the device. */
  .cdk__act{margin-top:14px}
  .cdk__code,.cdk__buy{min-height:46px}
  .fdk__code{min-height:44px}
}

/* ---- phones ------------------------------------------------------- */

/* The brief's rule for this width: take the perspective down, not the type.
   A phone loses the depth cue long before it loses the words, so the tilt
   and the sink are roughly halved while the name, the figure and the code
   stay close to the sizes they have on a laptop. */
@media (max-width:640px){
  /* The tile is the one thing on the card with no information in its size,
     so it is where the height comes from: 54px to 44px is ten pixels the
     card does not have to be tall for, and the logo is still plainly a
     logo. The type is untouched. */
  .cdk-sec{padding:14px 12px 8px;--cdk-tile:44px}
  /* Less overlap rather than a fainter title: the words stay readable and
     the cards still sit in front of them. */
  .cdk-title{font-size:clamp(28px,8.4vw,38px);margin-bottom:-.06em}
  .cdk-glow{left:-18%;right:-18%;bottom:46px}
  .cdk-glow::before{left:2%;width:250px}

  /* 84% of the stage, so there is a real sliver of the previous card on the
     left and the next on the right — the same amount on each side, because
     places are measured round the ring and the two neighbours are at equal
     and opposite offsets. */
  .cdk-cf{
    --cf-w:min(84%,380px);
    /* Measured, not chosen: 12px of padding, a 44px head row the tile sets,
       a 10px gap, a 44px action row, 12px of padding. 122px, with nothing
       left over — which is the point. 152px was the card built around a
       54px tile and an 18px gap, and it was about a fifth taller than the
       content it carried. Everything here came off the spacing and the
       logo; the name, the figure and the code set at the sizes they had. */
    --cf-h:122px;
    --cf-step:78%;
    --cf-tilt:8deg;
    --cf-sink:34px;
    /* Dimmer than on a laptop, and for a reason that only exists here. A
       phone has room for about 35px of the next card, and 35px of a card is
       never a card: it is whichever glyph happens to fall there — the tail
       of a discount, half a logo. At .54 that fragment was the brightest
       thing on the screen after the offer itself. At .44 it reads as what it
       is, an edge with something behind it, and the eye goes to the middle. */
    --cf-fade:.56;
    --cf-shrink:.12;
    /* Softer than on a laptop, where the neighbour is wide enough to be read
       as a card in its own right. Here it is a sliver, and the sliver is the
       whole of what the blur has to do. */
    --cf-blur:1.6px;
  }
  /* Flatter still: the depth cue a phone can actually use is the scale and
     the fade, not the rotation, and a strong perspective at this width
     shears the type on the one card that has to stay readable. */
  .cf-on .cdk-cf{perspective:860px}
  .cdk__slot{padding:12px 14px;border-radius:19px}
  .cdk__slot::before{left:14px;right:14px}
  .cdk__head{column-gap:12px}
  .cdk__name{font-size:14.5px;line-height:1.2}
  .cdk__off{font-size:36px}
  .cdk__off i{font-size:11.5px}
  .cdk__act{gap:8px;margin-top:10px}
  .cdk__code,.cdk__buy{min-height:44px;border-radius:12px}
  .cdk__code{padding:0 13px;gap:8px;font-size:12.5px;letter-spacing:.09em}
  .cdk__copy{width:12px;height:12px}
  .cdk__buy{padding:0 12px;font-size:12.5px}
  .cdk-cf__nav{margin-top:3px}
  /* Loose, so the long statement gets the whole width to try to fit on one
     line before the short one takes over below. */
  .cdk-note{font-size:11px;line-height:1.65;max-width:none;margin-top:5px}

  /* Small phones. The card takes a larger share of a stage that has less of
     it to give, which buys the name column the ~20px it needs to keep
     "PropShopTrader" on one line. The neighbours still show ~20px each side
     — less, but present and equal. Nothing here touches the type sizes:
     the room comes from the card, the logo and the gaps. */
  @media (max-width:420px){
    .cdk-sec{--cdk-tile:42px}
    .cdk-cf{--cf-w:min(88%,380px);--cf-step:82%}
    .cdk__slot{padding:12px 12px}
    .cdk__slot::before{left:12px;right:12px}
    .cdk__head{column-gap:11px}
    .cdk__buy{padding:0 11px}

    /* Measured, not guessed: the long statement sets 368px wide at 11px,
       and a 420px viewport leaves it 396px of column. Below 420 it would
       wrap to two lines, so the short statement takes over — the type size
       does not move, because shrinking a legal line until it fits is how
       you end up with a legal line nobody reads. */
    .cdk-note__long{display:none}
    .cdk-note__short{display:inline}
  }

  /* The smallest phones, and the only width where the label has to give
     ground. 374px is where "View accounts" stops fitting beside the longest
     code in the set without one of them being squeezed; above it both set
     in full. The accessible name on the link is unchanged either way. */
  @media (max-width:374px){
    .cdk__buy-l{display:none}
    .cdk__buy-s{display:inline}
  }

  .fdk{padding:0 8px calc(8px + env(safe-area-inset-bottom,0px))}
  .fdk__bar{border-radius:16px;padding:6px 8px 7px}
  /* The cross needs its own lane: the title is indented so the two never
     meet, and the scroller below starts clear of both. */
  .fdk__title{margin-bottom:5px;padding-right:30px}
  .fdk__close{top:5px;right:6px}

  /* The three offers used to be laid out as if there were room for three.
     A 178px slot has to hold a logo, a discount and a code button with a
     94px floor — that is 190px of content, so every slot was over its own
     width and the code was squeezed to an ellipsis.

     Here each offer takes about two thirds of the panel. Two are on screen
     at once, the second one visibly cut, which is what tells a thumb there
     is more to the right; mandatory snap means a flick always lands on a
     whole offer rather than between two. */
  .fdk__scroll{scroll-snap-type:x mandatory}
  .fdk__row{gap:8px}
  .fdk__slot{flex:0 0 64%;min-width:206px;padding:3px 6px;scroll-snap-align:start}
  /* No hairline in the gap. At one offer per page the rule is only ever
     visible mid-swipe, where it reads as a crack across the panel. */
  .fdk__slot + .fdk__slot::before{display:none}
  .fdk__go{gap:8px}
  .fdk__tile{width:34px;height:34px;border-radius:11px}
  .fdk__off{font-size:16px}
  /* Takes the slack instead of fighting for a fixed 94px: the slot is wide
     enough now that the code sets in full, and the one that does not can
     still ellipsise without pushing the logo off the row. */
  .fdk__code{
    flex:1 1 auto;min-width:98px;
    min-height:44px;padding:0 8px;font-size:11px;border-radius:10px;
  }
  .fdk__note{margin-top:5px;font-size:10px}
}

/* And on a touch screen that is still showing the wide layout. */
@media (pointer:coarse){
  .cdk__code,.cdk__buy{min-height:44px}
  .fdk__code{min-height:44px}
}

@media (prefers-reduced-motion:reduce){
  .cdk-glow span{animation:none}
  .cdk-sec.is-seen .cdk__slot{animation:none}
  .cdk-sec.cf-on.is-seen .cdk-cf{animation:none}
  .cdk__slot,.cdk__slot::before,.cdk__code,.cdk__buy,.fdk,.fdk__code,.fdk__close{transition:none}
  .fdk__scroll{scroll-behavior:auto}

  /* The carousel still works, it just stops moving: cards change place
     instantly and the light pass never runs. The depth itself is kept —
     it is composition, not animation, and it is what tells the reader
     which card is the live one. */
  .cf-on .cdk-cf__track > *{transition:none}
  .cdk__slot::after{display:none}
  .cdk-cf__arrow{transition:none}
}

/* Clear titles and compact Apex brand treatment. */
.cdk-title{margin-bottom:24px;line-height:1.15;text-shadow:none}
.cdk__slot--partner{background:radial-gradient(ellipse at 55% 120%,#143875 0,transparent 70%),#070d1b;border-color:#d9b66c70}
.cdk__slot--partner::before{inset:-100% 12% 15%;height:auto;border:1px solid #2863cd45;border-radius:50%;background:none;transform:rotate(-25deg);pointer-events:none}
.cdk__slot--partner .cdk__head{grid-template-columns:minmax(0,1fr) auto;gap:16px}
.cdk__slot--partner .cdk__tile{width:150px;max-width:100%;height:64px;border:0;border-radius:0;background:none;box-shadow:none}
.cdk__slot--partner .cdk__tile img{object-fit:contain}
.cdk__slot--partner .cdk__id{display:none}
.cdk__slot--partner .cdk__off{display:flex;flex-direction:column;gap:6px;color:#669dff}
.cdk__slot--partner .cdk__off small{font-size:9px;letter-spacing:.18em;color:#b3c4e0;font-weight:600}
.cdk__slot--partner .cdk__off>span{display:flex;align-items:baseline;gap:2px}
.cdk__slot--partner .cdk__off b{background:linear-gradient(#a7caff,#2469f8);background-clip:text;-webkit-background-clip:text;color:transparent}
.cdk__slot--partner .cdk__off i{color:#72a5ff;font-weight:700}
.cdk__slot--partner .cdk__code{background:#f5f6ff;color:#2163ed;border-color:#f5f6ff}
.cdk__slot--partner .cdk__buy{background:#fcaf00;color:#101725;border-color:#fcaf00}
@media(max-width:600px){.cdk-title{margin-bottom:22px}.cdk__slot--partner .cdk__tile{width:125px;height:56px}.cdk__slot--partner .cdk__off{font-size:40px}}

.cdk__slot--partner{overflow:hidden}

.cdk-title{font-size:clamp(24.8px,2.8vw,40px);margin-bottom:18px}
.cdk-sec{padding-bottom:4px}
@media(max-width:600px){.cdk-title{font-size:clamp(22.4px,6.72vw,30.4px)}}

/* Compact floating offer tray. */
.fdk__bar{width:min(900px,100%);padding:14px 16px 12px;border:1px solid #dbb76866;border-radius:18px;background:linear-gradient(120deg,#182338f5,#0d1421fa);box-shadow:0 16px 50px #0007,inset 0 1px #ffffff0a}
.fdk__title{font-size:10px;color:#f0ce80;margin:0 44px 14px 2px;letter-spacing:.14em}
.fdk__close{top:5px;right:7px;width:36px;height:36px;background:none;border-color:transparent;font-size:23px}
.fdk__close::after{inset:-4px}
.fdk__row{gap:12px}
.fdk__slot{flex:1 0 240px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:12px;border:1px solid #dbb76828;border-radius:11px;background:#ffffff03}
.fdk__slot+.fdk__slot::before{display:none}
.fdk__go{gap:10px;position:relative;min-height:38px}
.fdk__go::after{inset:0}
.fdk__tile{width:38px;height:38px;border-radius:9px;box-shadow:none}
.fdk__info{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex:1;min-width:0}
.fdk__name{font-size:11px;color:#dce3ed;line-height:1.3;max-width:95px}
.fdk__off{font-size:19px;font-weight:700}
.fdk__off i{font-size:10px}
.fdk__code{width:100%;min-height:36px;border-radius:6px;background:#0c1421;border-color:#dbb76847;box-shadow:none;font-size:11px;letter-spacing:.03em}
.fdk__slot--partner{background:radial-gradient(ellipse at bottom right,#15366c66,transparent 80%),#101b30;border-color:#638ed34a}
.fdk__slot--partner .fdk__code{background:#edf2ff;border-color:#edf2ff;color:#2255b7;box-shadow:none}
.fdk__slot--partner .fdk__code:hover{background:#fff}
.fdk__slot--partner .fdk__off{color:#86b1ff}
.fdk__slot--partner .fdk__off i{color:#a6bde4}
.fdk__note{margin:10px 0 0;font-size:10px;line-height:1.5}
@media(max-width:640px){.fdk{padding:0 10px calc(10px + env(safe-area-inset-bottom,0px))}.fdk__bar{padding:12px;border-radius:14px}.fdk__slot{flex:0 0 245px;padding:10px;gap:8px}.fdk__code{min-height:44px}.fdk__scroll{scroll-snap-type:x mandatory}.fdk__title{margin-bottom:12px}.fdk__note{font-size:9px}}

/* Slim offer dock: one line per offer, no nested cards. */
.fdk__bar{width:min(820px,100%);padding:10px 14px 8px;border-radius:14px;background:linear-gradient(120deg,#172033f5,#0d1421fa);border-color:#dbb76850}
.fdk__title{font-size:8px;letter-spacing:.16em;margin:0 36px 8px 2px;color:#cbb477}
.fdk__close{top:2px;right:5px;width:30px;height:30px;font-size:21px}
.fdk__close::after{inset:-7px}
.fdk__row{gap:0}
.fdk__slot,.fdk__slot--partner{display:flex;flex:1 0 250px;align-items:center;gap:9px;padding:3px 12px;border:0;border-radius:0;background:none}
.fdk__slot:first-child{padding-left:0}
.fdk__slot:last-child{padding-right:0}
.fdk__slot+.fdk__slot{border-left:1px solid #dbb76826}
.fdk__go{flex:1;gap:8px;min-height:36px}
.fdk__tile{width:30px;height:30px;border-radius:8px}
.fdk__info{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}
.fdk__name{font-size:9px;max-width:none;white-space:nowrap}
.fdk__off{font-size:15px;letter-spacing:-.02em}
.fdk__off i{font-size:9px}
.fdk__code{width:auto;min-width:100px;min-height:34px;padding:0 9px;font-size:10px;border-radius:7px;letter-spacing:0;background:#ffffff04;border-color:#dbb76838}
.fdk__slot--partner .fdk__code{background:#f0ce80;border-color:#f0ce80;color:#172033}
.fdk__slot--partner .fdk__code:hover{background:#f7dda1}
.fdk__note{margin:7px 0 0;font-size:8px;color:#93a0b4}
@media(max-width:640px){.fdk__bar{padding:9px 12px 7px;border-radius:12px}.fdk__slot,.fdk__slot--partner{flex:0 0 270px;padding:0 12px;gap:10px}.fdk__slot:first-child{padding-left:0}.fdk__go{min-height:44px}.fdk__code{min-height:44px}.fdk__title{margin-bottom:4px}.fdk__note{font-size:9px;line-height:1.35;margin-top:6px}.fdk__name{font-size:10px}}

/* Three miniature offer cards, Apex in the centre. */
.fdk__bar{width:min(570px,100%);padding:10px 12px 8px;border-radius:16px;background:#0e1523f2}
.fdk__title{margin:0 34px 12px 2px;font-size:8px}
.fdk__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end;padding:3px 2px}
.fdk__scroll{overflow:visible}
.fdk__slot,.fdk__slot:first-child,.fdk__slot:last-child{display:flex;flex-direction:column;gap:8px;padding:12px 8px 9px;min-width:0;border:1px solid #92a8d15c;border-radius:10px;background:linear-gradient(160deg,#27314366,#111724);box-shadow:0 0 10px #92a8d10c}
.fdk__slot+.fdk__slot{border-left:1px solid #92a8d15c}
.fdk__slot--partner{padding-top:16px!important;border-color:#f0ce8099!important;background:radial-gradient(ellipse at top,#35405d,#10192b 80%);box-shadow:0 0 16px #e9b84418;transform:translateY(-3px)}
.fdk__go{flex:none;width:100%;flex-direction:column;align-items:center;gap:8px;text-align:center;min-height:0}
.fdk__tile{width:38px;height:38px;border-radius:10px;box-shadow:none}
.fdk__info{width:100%;align-items:center;gap:7px}
.fdk__name{font-size:10px;line-height:1.2;white-space:nowrap;max-width:100%;color:#dce3ed}
.fdk__off{font-size:22px;line-height:1}
.fdk__off i{font-size:10px}
.fdk__slot--partner .fdk__off{color:#f0ce80}
.fdk__slot--partner .fdk__off i{color:#d4bc86}
.fdk__code{width:100%;min-width:0;min-height:32px;padding:0 4px;font-size:9px;border-radius:6px}
.fdk__note{font-size:8px;margin:7px auto 0;max-width:490px}
@media(max-width:640px){.fdk__bar{width:min(420px,100%);padding:8px}.fdk__row{gap:6px}.fdk__slot,.fdk__slot:first-child,.fdk__slot:last-child{padding:9px 4px 5px;gap:7px}.fdk__slot--partner{padding-top:13px!important}.fdk__tile{width:30px;height:30px;border-radius:8px}.fdk__go{min-height:0;gap:7px}.fdk__name{font-size:9px;white-space:normal;min-height:22px;display:flex;align-items:center;justify-content:center}.fdk__off{font-size:19px}.fdk__off i{font-size:9px}.fdk__code{min-height:44px;font-size:8px;letter-spacing:-.2px}.fdk__title{margin-bottom:8px}.fdk__note{font-size:8px}}

/* Standalone floating cards: no enclosing panel. */
.fdk__bar{width:min(550px,100%);padding:30px 4px 0;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.fdk__title{display:none}
.fdk__close{top:0;right:5px;width:28px;height:28px;border:1px solid #dbb76838;background:#101725eb;color:#c6cfdf;backdrop-filter:blur(12px);font-size:19px}
.fdk__row{gap:12px;padding:5px 1px;align-items:end}
.fdk__slot,.fdk__slot:first-child,.fdk__slot:last-child{padding:14px 10px 10px;gap:10px;border-radius:14px;border:1px solid #a9b7d03b;background:linear-gradient(155deg,#283246f5 0%,#101724fa 58%);box-shadow:0 12px 28px #0005,inset 0 1px #ffffff0d;backdrop-filter:blur(18px)}
.fdk__slot+.fdk__slot{border-left:1px solid #a9b7d03b}
.fdk__slot--partner{padding-top:20px!important;background:radial-gradient(ellipse at 50% 0,#7c602235,transparent 75%),linear-gradient(150deg,#24304a,#0c1425 75%);border-color:#e8c7749c!important;box-shadow:0 12px 32px #0007,0 0 22px #e9bd5414,inset 0 1px #ffe4a333;transform:translateY(-5px)}
.fdk__tile{width:42px;height:42px;border-radius:11px;border-color:#ffffff15;box-shadow:0 4px 10px #0003}
.fdk__info{gap:9px}
.fdk__name{font-size:10px;letter-spacing:.01em;color:#c3ccdb}
.fdk__off{font-size:25px;font-weight:650;letter-spacing:-.045em}
.fdk__off i{font-size:9px;margin-left:3px;color:#9daabd}
.fdk__code{min-height:34px;background:#080f1a55;border:1px solid #c2ccd52b;border-radius:7px;color:#e0e5ed;font-size:10px}
.fdk__slot--partner .fdk__code{background:linear-gradient(120deg,#f5dda1,#d9b560);border-color:#f5dda180;color:#182030}
.fdk__note{max-width:520px;margin:7px auto 0;padding:5px 10px;border-radius:7px;background:#101725e8;color:#a7b3c6;font-size:8px;backdrop-filter:blur(12px)}
@media(max-width:640px){.fdk__bar{padding:29px 0 0}.fdk__row{gap:7px}.fdk__slot,.fdk__slot:first-child,.fdk__slot:last-child{padding:11px 5px 6px;gap:8px;border-radius:11px}.fdk__slot--partner{padding-top:16px!important}.fdk__tile{width:32px;height:32px;border-radius:9px}.fdk__name{font-size:9px}.fdk__off{font-size:22px}.fdk__info{gap:6px}.fdk__code{min-height:44px;font-size:8px}.fdk__note{margin-top:5px;font-size:8px;padding:4px 6px}}

/* Five-offer composition on desktop; compact three-offer view on mobile. */
@media(min-width:641px){
.cdk-shell{max-width:1500px}
.cdk-cf{--cf-w:clamp(360px,36vw,540px);--cf-step:48%;--cf-tilt:8deg;--cf-sink:35px;--cf-fade:.20;--cf-shrink:.16;--cf-blur:.25px}
}
.cdk__slot:not(.cdk__slot--partner){--offer-accent:102,160,214;background:radial-gradient(ellipse at 90% 0,rgba(var(--offer-accent),.18),transparent 70%),linear-gradient(135deg,#182336,#0b1320);border-color:rgba(var(--offer-accent),.38);overflow:hidden}
.cdk__slot[data-firm="Lucid Trading"]{--offer-accent:187,199,230}
.cdk__slot[data-firm="Bulenox"]{--offer-accent:30,167,206}
.cdk__slot[data-firm="FundedNext Futures"]{--offer-accent:137,112,234}
.cdk__slot[data-firm="Take Profit Trader"]{--offer-accent:85,184,139}
.cdk__slot[data-firm="Top One Futures"]{--offer-accent:110,182,230}
.cdk__slot[data-firm="Funded Futures Network"]{--offer-accent:217,183,106}
.cdk__slot:not(.cdk__slot--partner)::before{inset:-150% -10% 25% 22%;height:auto;background:none;border:1px solid rgba(var(--offer-accent),.17);border-radius:50%;transform:rotate(-24deg)}
.cdk__slot:not(.cdk__slot--partner) .cdk__off{color:#edf3ff;text-shadow:0 2px 22px rgba(var(--offer-accent),.22)}
.cdk__slot:not(.cdk__slot--partner) .cdk__code{background:rgba(var(--offer-accent),.07);border-color:rgba(var(--offer-accent),.28)}
.cdk__slot:not(.cdk__slot--partner) .cdk__buy{background:rgba(var(--offer-accent),.12);border-color:rgba(var(--offer-accent),.3);color:#edf2fb}

/* Solid surfaces preserve depth without showing text through cards. */
.cf-on .cdk-cf__track > .cdk__slot:not(.is-far){opacity:1;filter:none}
.cf-on .cdk__slot:not(.is-active):hover{opacity:1}

.cdk-cf__arrow{position:relative}

/* Luminous Apex code, with a quiet static highlight. */
.cdk__slot--partner .cdk__code{background:linear-gradient(115deg,#fffefa 0%,#fff4c8 42%,#fffdf4 65%,#ecd293 100%);border:1px solid #fff1bf;color:#183b86;box-shadow:inset 0 1px 0 #fff,0 0 18px #e9c76c30,0 3px 10px #0002;font-weight:600}
.cdk__slot--partner .cdk__code:hover{background:linear-gradient(115deg,#fff,#fff1b8,#fff);color:#163a83;box-shadow:0 0 24px #e9c76c50}

/* Compact premium offer cards. */
.fdk__row{gap:12px;padding-top:19px}
.fdk__slot,.fdk__slot:first-child,.fdk__slot:last-child{position:relative;padding:15px 10px 10px;border-radius:15px;border-color:#a9b7d02b;background:radial-gradient(ellipse at 50% -30%,#40506e66,transparent 75%),linear-gradient(150deg,#182231,#0c131f);box-shadow:0 15px 30px #0005,inset 0 1px #ffffff12}
.fdk__slot--partner{background:radial-gradient(ellipse at 50% -35%,#b28b3638,transparent 80%),linear-gradient(150deg,#202a3d,#0d1524)!important;border-color:#dbb96d9c!important;box-shadow:0 15px 35px #0006,0 0 24px #e0b85710,inset 0 1px #ffedb32e;transform:translateY(-5px)}
.fdk__weekly{position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:5px 10px;border:1px solid #b6934966;border-radius:20px;background:linear-gradient(120deg,#302b21,#182130);color:#f5d794;font-size:7px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;box-shadow:0 3px 10px #0003}
.fdk__tile{width:40px;height:40px;border:1px solid #ffffff18;box-shadow:0 4px 12px #0003}
.fdk__slot--partner .fdk__tile{border-color:#e4c77466}
.fdk__name{font-size:10px;color:#b8c4d5}
.fdk__off{font-size:26px;letter-spacing:-.045em}
.fdk__slot--partner .fdk__off{background:linear-gradient(135deg,#fff0bd,#d7ae52);background-clip:text;-webkit-background-clip:text;color:transparent}
.fdk__code{min-height:35px;border-radius:8px;background:linear-gradient(135deg,#1c2738,#111b2a);border-color:#9babca38;box-shadow:inset 0 1px #ffffff08;font-size:10px;transition:border-color .2s,box-shadow .2s}
.fdk__code:hover{border-color:#e5c58199;box-shadow:0 0 12px #d8ba6015}
.fdk__slot--partner .fdk__code{background:linear-gradient(115deg,#fff1bc,#ebcf87 48%,#d8b35c);border:1px solid #ffe7a7;box-shadow:inset 0 1px #fff9df,0 3px 12px #e2bf6418;color:#182234;font-weight:600}
.fdk__note{background:none;font-size:8px;color:#a2afc1}
@media(max-width:640px){.fdk__row{gap:7px}.fdk__slot,.fdk__slot:first-child,.fdk__slot:last-child{padding:13px 5px 6px;border-radius:12px}.fdk__weekly{font-size:6px;letter-spacing:.06em;padding:4px 6px;top:-10px}.fdk__tile{width:32px;height:32px}.fdk__name{font-size:9px}.fdk__off{font-size:23px}.fdk__code{min-height:44px;font-size:8px}}

/* A compact overlapping trio, with Apex in the foreground. */
.fdk__row{gap:0;isolation:isolate}
.fdk__slot:first-child{transform:translateX(9px);z-index:1;padding-right:18px}
.fdk__slot:last-child{transform:translateX(-9px);z-index:1;padding-left:18px}
.fdk__slot--partner{z-index:2;transform:translateY(-5px);box-shadow:0 12px 30px #0007,0 0 20px #e0b85712,inset 0 1px #ffedb32e}
@media(max-width:640px){.fdk__row{gap:0}.fdk__slot:first-child{transform:translateX(4px);padding-right:9px}.fdk__slot:last-child{transform:translateX(-4px);padding-left:9px}}

/* Miniature versions of the main offer tickets. */
.fdk__slot,.fdk__slot:first-child,.fdk__slot:last-child{--mini-accent:81,139,245;background:radial-gradient(ellipse at 60% 120%,rgba(var(--mini-accent),.27),transparent 70%),#080f1d;border-color:rgba(var(--mini-accent),.3);isolation:isolate}
.fdk__slot:first-child{--mini-accent:151,171,221}
.fdk__slot:last-child{--mini-accent:27,160,195}
.fdk__slot::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(ellipse 125% 100% at 66% -5%,transparent 68%,rgba(var(--mini-accent),.28) 68.5%,transparent 69.2%)}
.fdk__slot--partner{background:radial-gradient(ellipse at 65% 120%,#163d7d,transparent 72%),#070e1d!important;border-color:#d9b66c8c!important}
.fdk__slot--partner .fdk__tile{width:126px;max-width:100%;height:40px;border:0;border-radius:0;background:none;box-shadow:none}
.fdk__slot--partner .fdk__tile img{object-fit:contain;width:100%;height:100%}
.fdk__slot--partner .fdk__name{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:#a9bdda;min-height:12px}
.fdk__slot--partner .fdk__off{font-size:30px;background:linear-gradient(180deg,#aed0ff,#397aff);background-clip:text;-webkit-background-clip:text;color:transparent;font-weight:750}
.fdk__slot--partner .fdk__off i{color:#7cacff}
.fdk__slot:first-child .fdk__off{color:#dce7ff}
.fdk__slot:last-child .fdk__off{color:#8dd9f0}
.fdk__code{background:linear-gradient(115deg,#f8faff,#d9e3f4);color:#203659;border-color:#e2eaff;box-shadow:inset 0 1px #fff,0 0 14px #91baff12}
.fdk__slot:last-child .fdk__code{background:linear-gradient(115deg,#edfbff,#c4e5ed);color:#10495d;border-color:#d9f4ff}
.fdk__slot--partner .fdk__code{background:linear-gradient(115deg,#fffef1,#fff4cb 50%,#ead39c);color:#194593;border-color:#fff1bc;letter-spacing:.025em;box-shadow:inset 0 1px #fff,0 0 16px #efd17f22}
.fdk__slot--partner .fdk__code:hover{background:#fff8db;color:#194593}
@media(max-width:640px){.fdk__slot--partner .fdk__tile{width:87px;height:32px}.fdk__slot--partner .fdk__off{font-size:25px}.fdk__slot--partner .fdk__name{font-size:7px;min-height:22px}.fdk__code{font-size:8px}}

/* A restrained champagne tint for the featured popup coupon. */
.fdk__slot--partner{background:radial-gradient(ellipse at 55% 110%,#70572755,transparent 75%),radial-gradient(ellipse at 50% -30%,#d5ad5924,transparent 65%),#0c1421!important;border-color:#e5c577b3!important}
.fdk__slot--partner::before{background:radial-gradient(ellipse 125% 100% at 66% -5%,transparent 68%,#dfbd6538 68.5%,transparent 69.2%)}
.fdk__slot--partner .fdk__off{background:linear-gradient(180deg,#fff0c0,#d5ac51);background-clip:text;-webkit-background-clip:text;color:transparent}
.fdk__slot--partner .fdk__off i{color:#d4bb84}

/* Bring the close control closer to the offer cards. */
.fdk__close{top:14px}

.cdk-title{font-size:clamp(19.84px,2.24vw,32px);color:#f0ce80}
@media(max-width:600px){.cdk-title{font-size:clamp(17.92px,5.376vw,24.32px)}}

.cdk-title{font-size:clamp(15.872px,1.792vw,25.6px);color:#fcaf00}
@media(max-width:600px){.cdk-title{font-size:clamp(14.336px,4.3008vw,19.456px)}}