/* ---- FAVOURITES PAGE ---- */
  .ct-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .ct-head b{font-size:16px;font-weight:500;color:var(--ink);}
  .ct-acts{display:flex;align-items:center;gap:7px;flex-shrink:0;}
  .ct-acts i, .ct-acts em{font-style:normal;display:inline-flex;align-items:center;
    padding:6px 12px;border-radius:9px;font-size:10.5px;font-weight:500;white-space:nowrap;line-height:1.2;}
  .ct-acts i{background:#FFFFFF;color:var(--ink);border:1px solid rgba(20,15,10,.13);
    box-shadow:0 5px 12px -10px rgba(88,62,50,.9);}
  .ct-acts em{color:#FFFFFF;border:1px solid transparent;
    background:linear-gradient(94deg,#D64200 0%,#D64200 40%,#D73959 100%);box-shadow:0 8px 16px -10px rgba(232,70,10,.9);}
  .fv-note{margin:6px 0 0;font-size:11.5px;color:var(--muted);}
  .fv-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;}
  .fv-tile{display:flex;align-items:center;gap:11px;padding:13px 13px;border-radius:14px;
    background:#FFFFFF;border:1px solid rgba(30,50,90,.08);
    box-shadow:0 14px 28px -22px rgba(88,62,50,.5);}
  .fv-ico{width:30px;height:30px;border-radius:9px;flex-shrink:0;}
  .fv-tx{flex:1;min-width:0;}
  .fv-tx b{display:block;font-size:12.5px;font-weight:500;color:var(--ink);}
  .fv-tx i{display:block;font-style:normal;font-size:10.5px;color:var(--muted);margin-top:2px;}
  .fv-star{flex-shrink:0;fill:#EDB321;stroke:none;}

  /* ---- mobile menu: full page ---- */
  @media (max-width: 860px){
    .m-menu{transition:height .42s cubic-bezier(.22,1,.36,1), top .42s cubic-bezier(.22,1,.36,1),
      left .42s cubic-bezier(.22,1,.36,1), right .42s cubic-bezier(.22,1,.36,1),
      border-radius .42s cubic-bezier(.22,1,.36,1), box-shadow .42s ease !important;}
    .m-menu.on{top:0 !important;left:0 !important;right:0 !important;height:calc(var(--vh, 1vh) * 100) !important;
      height:100dvh !important;border-radius:0 !important;box-shadow:none !important;}
    /* the head keeps the nav bar's own inset so the logo and the X do not move */
    .m-menu.on .m-menu-head{margin:14px 16px 0;}
    .m-panes{display:flex;flex-direction:column;padding:34px 34px 30px !important;}
    .m-pane{display:flex;flex-direction:column;flex:1;}
    .m-pane[hidden]{display:none !important;}
    .m-row{font-size:34px !important;line-height:1.15 !important;padding:9px 0 !important;
      color:#1E1612 !important;letter-spacing:-.02em !important;}
    .m-row-more svg{width:24px !important;height:24px !important;color:#1E1612 !important;}
    .m-row-sub{padding:11px 0 !important;}
    .m-row-tx b{font-size:19px !important;color:#1E1612;}
    .m-row-tx i{font-size:13.5px !important;}
    .m-title{font-size:19px !important;color:#1E1612 !important;}
    .m-menu-cta{margin-top:auto !important;height:54px !important;font-size:17px !important;}
  }

  /* ---- FEATURE CELLS ----
     The feature cards are cells of one ruled grid rather than separate cards. Each
     cell draws its own bottom rule (--h) and right rule (--v) as backgrounds, so the
     rules fade toward the outside of the grid and are at full strength in the middle;
     a small four-point star sits on every inner crossing. The edge classes are set by
     script, because which cell is on an edge depends on how many columns fit. */
  .mp-cards, .ws-subs{gap:0 !important;--gl:#E1E3EF;--gs:#B4B9D4;}
  :is(.mp-cards .mp-card, .ws-subs .ws-sub){
    --h:linear-gradient(var(--gl),var(--gl));--v:linear-gradient(var(--gl),var(--gl));
    position:relative !important;background-color:transparent !important;border:0 !important;
    border-radius:0 !important;box-shadow:none !important;transform:none !important;
    overflow:visible !important;isolation:auto !important;padding:28px 26px 30px !important;
    background-image:var(--h), var(--v) !important;background-repeat:no-repeat !important;
    background-size:100% 1px, 1px 100% !important;
    background-position:left bottom, right top !important;}
  :is(.mp-cards .mp-card, .ws-subs .ws-sub):hover{background-color:transparent !important;transform:none !important;}
  :is(.mp-cards .mp-card, .ws-subs .ws-sub)::before{display:none !important;}
  :is(.mp-cards .mp-card, .ws-subs .ws-sub).g-l{--h:linear-gradient(90deg,transparent,var(--gl));}
  :is(.mp-cards .mp-card, .ws-subs .ws-sub).g-r{--h:linear-gradient(90deg,var(--gl),transparent);--v:none;}
  :is(.mp-cards .mp-card, .ws-subs .ws-sub).g-l.g-r{--h:linear-gradient(90deg,transparent,var(--gl) 50%,transparent);}
  :is(.mp-cards .mp-card, .ws-subs .ws-sub).g-t:not(.g-r){--v:linear-gradient(180deg,transparent,var(--gl));}
  :is(.mp-cards .mp-card, .ws-subs .ws-sub).g-b{--h:none;}
  :is(.mp-cards .mp-card, .ws-subs .ws-sub).g-b:not(.g-r){--v:linear-gradient(180deg,var(--gl),transparent);}
  :is(.mp-cards .mp-card, .ws-subs .ws-sub).g-t.g-b:not(.g-r){--v:linear-gradient(180deg,transparent,var(--gl) 50%,transparent);}
  :is(.mp-cards .mp-card, .ws-subs .ws-sub)::after{content:'' !important;display:none;position:absolute !important;
    inset:auto -11px -11px auto !important;width:22px !important;height:22px !important;z-index:3;
    opacity:1 !important;transform:none !important;border:0 !important;border-radius:0 !important;
    background:var(--gs) !important;
    -webkit-mask:radial-gradient(circle at 0 0, transparent 10.4px, #000 11px),
      radial-gradient(circle at 100% 0, transparent 10.4px, #000 11px),
      radial-gradient(circle at 0 100%, transparent 10.4px, #000 11px),
      radial-gradient(circle at 100% 100%, transparent 10.4px, #000 11px);
    -webkit-mask-composite:source-in;
    mask:radial-gradient(circle at 0 0, transparent 10.4px, #000 11px),
      radial-gradient(circle at 100% 0, transparent 10.4px, #000 11px),
      radial-gradient(circle at 0 100%, transparent 10.4px, #000 11px),
      radial-gradient(circle at 100% 100%, transparent 10.4px, #000 11px);
    mask-composite:intersect;}
  :is(.mp-cards .mp-card, .ws-subs .ws-sub).g-x::after{display:block !important;}
  @media (max-width: 860px){
    .mp-cards{margin-left:-16px !important;margin-right:-16px !important;}
    :is(.mp-cards .mp-card, .ws-subs .ws-sub){padding:18px 14px 20px 16px !important;}
  }

  @media (max-width: 860px){
    .kq-section > div:has(> a), .kq-section div:has(> a.btn-lg){display:flex !important;flex-direction:column !important;
      align-items:stretch !important;gap:10px !important;}
    .kq-section a.btn-lg{width:100% !important;box-sizing:border-box;justify-content:center;
      height:52px !important;display:inline-flex !important;align-items:center;margin:0 !important;}
  }

  /* ---- TABLET (641–860px) ----
     The tablet uses the phone layout, scaled up as a whole (the script sets `zoom` and
     these two variables). --tp is the extra inset, in layout pixels, that turns the
     phone's 16px gutter into a 48px one on screen; anything with its own full-width
     background is pulled back out by the same amount so colour still reaches the edges. */
  :root{--tp:0px;--z:1;}
  @media (min-width: 641px) and (max-width: 860px){
    /* the inset goes on the page's own root, not on body: the root clips its overflow,
       and only padding inside that box leaves room for the full-bleed sections */
    .page-root, .mp{padding-left:var(--tp) !important;padding-right:var(--tp) !important;box-sizing:border-box;}
    .fxi-section, .ai-section, .close-section, .fx-section, .mp-foot, .mp-band, .ws-band{
      margin-left:calc(var(--tp) * -1) !important;margin-right:calc(var(--tp) * -1) !important;
      padding-left:var(--tp) !important;padding-right:var(--tp) !important;}
    .p2-dark{margin-left:calc((16px + var(--tp)) * -1) !important;margin-right:calc((16px + var(--tp)) * -1) !important;
      padding-left:calc(16px + var(--tp)) !important;padding-right:calc(16px + var(--tp)) !important;}
    .nav-wrap{margin-left:calc(16px + var(--tp)) !important;margin-right:calc(16px + var(--tp)) !important;}
    .m-menu.on{height:calc(var(--vh, 1vh) * 100) !important;}
  }