/* ==========================================================================
   CollectiveXChange 2026 conference site
   Ported 2026-10-12 from the Salesforce LWR site. Design system sourced from
   Alexia's supplied artwork; component styles carried over from the cxc*
   Lightning Web Components with each one scoped under its own class.
   ========================================================================== */

:root{
  --cxc-ink:#07141B;
  --cxc-ink2:#0A1D25;
  --cxc-mint:#32DA80;
  --cxc-mint2:#38E883;
  --cxc-cream:#FFDEA4;
  --cxc-txt:#E7F0EC;
  --cxc-txt2:#93A9A0;
  --cxc-hair:rgba(50,218,128,.18);
  --cxc-ui:'Lexend',-apple-system,'Segoe UI',Roboto,sans-serif;
  --cxc-mono:'Roboto Mono',ui-monospace,Consolas,monospace;

  /* Alexia's grid artwork, one cell, so it tiles seamlessly at any width. */
  --cxc-grid-url:url("/assets/grid-sparse.svg");
  --cxc-grid-size:105.77px 103.66px;

  /* The pencil pointer. The two numbers are the hotspot on the graphite tip. */
  --cxc-cursor:url("/assets/cursor.png") 5 8, auto;
  --cxc-cursor-link:url("/assets/cursor.png") 5 8, pointer;
  --cxc-cursor-active:url("/assets/cursor-hover.png") 9 11, pointer;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  /* The only place the anchor offset is set. Keep in step with the nav. */
  scroll-padding-top:80px;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background-color:var(--cxc-ink);
  color:var(--cxc-txt);
  font-family:var(--cxc-ui);
  font-weight:300;
  line-height:1.6;
  /* Three layers, front to back: the fade to ink, solid ink below it, the grid. */
  background-image:
    linear-gradient(to bottom,
      rgba(7,20,27,0) 0%,
      rgba(7,20,27,.30) 40%,
      rgba(7,20,27,.85) 70%,
      #07141B 100%),
    linear-gradient(#07141B, #07141B),
    var(--cxc-grid-url);
  background-size:100% 185vh, 100% calc(100% - 185vh), var(--cxc-grid-size);
  background-position:top center, bottom center, top center;
  background-repeat:no-repeat, no-repeat, repeat;
}

[hidden]{ display:none !important; }

h1,h2,h3,h4{ font-family:var(--cxc-ui); letter-spacing:-.015em; color:var(--cxc-txt); }
p{ color:var(--cxc-txt); }
a{ color:var(--cxc-mint); text-decoration:none; }
a:hover{ color:var(--cxc-mint2); }
:focus-visible{ outline:2px solid var(--cxc-mint); outline-offset:3px; }
button{ font:inherit; }

/* The container every block shares. */
.wrap{
  display:block;
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
  padding-left:clamp(16px,4vw,40px);
  padding-right:clamp(16px,4vw,40px);
  font-family:var(--cxc-ui);
  font-weight:300;
}

/* The spacing Experience Builder put between components. */
main > * + *{ margin-top:1.5rem; }
main{ padding-top:1.5rem; padding-bottom:3rem; }

/* ----------------------------------------------------- the pencil cursor --
   Desktop only. A custom cursor does nothing on a touch screen. */
@media (pointer:fine){
  body{ cursor:var(--cxc-cursor); }
  body:active, a:active, button:active, summary:active, [role="button"]:active{
    cursor:var(--cxc-cursor-active);
  }
}

/* The ripple on click. The ring belongs to the click, not to hover. */
.cxc-radar{
  position:fixed;
  width:8px;
  height:8px;
  margin:-4px 0 0 -4px;
  border:1.5px solid #32DA80;
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  opacity:.9;
  animation:cxc-radar-out .55s ease-out forwards;
}
@keyframes cxc-radar-out{ to{ transform:scale(7); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .cxc-radar{ display:none; } }

/* ============================================================ navigation == */
.cxc-header{
  position:sticky;
  top:0;
  z-index:40;
  background-color:#07141B;
}

.cxc-nav .bar{
  background:rgba(7,20,27,.95);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(50,218,128,.18);
  font-family:var(--cxc-ui);
  font-weight:300;
}
.cxc-nav .inner{
  max-width:1180px;
  margin:0 auto;
  padding:0 clamp(16px,4vw,40px);
  display:flex;
  align-items:center;
  gap:10px;
  min-height:54px;
}
.cxc-nav .mark{ height:26px; width:auto; display:block; flex:none; }
.cxc-nav .row{
  display:flex;
  gap:2px;
  overflow-x:auto;
  margin-left:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.cxc-nav .row::-webkit-scrollbar{ display:none; }
.cxc-nav .item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:3px;
  font:inherit;
  font-size:12.5px;
  color:#93a9a0;
  white-space:nowrap;
  background:transparent;
  border:1px solid transparent;
  cursor:var(--cxc-cursor-link,pointer);
}
.cxc-nav .item:hover{ color:#32da80; border-color:rgba(50,218,128,.18); }
.cxc-nav .item:focus-visible{ outline:2px solid #32da80; outline-offset:2px; }
.cxc-nav .item.is-active{ color:#32da80; border-color:#32da80; background:rgba(50,218,128,.08); }

@media (max-width:860px){ .cxc-nav .lbl{ display:none; } }
@media (max-width:560px){
  .cxc-nav .mark{ height:21px; }
  .cxc-nav .inner{ gap:6px; min-height:50px; }
  .cxc-nav .item{ padding:8px 7px; }
  .cxc-nav .row{ gap:1px; }
}
@media (max-width:400px){
  .cxc-nav .mark{ height:19px; }
  .cxc-nav .item{ padding:8px 6px; }
}

/* ================================================================== hero == */
.cxc-hero .lockup{
  width:100%;
  height:auto;
  display:block;
  max-height:52vh;
  object-fit:contain;
}
.cxc-hero .lockup.on-grid{
  border:1px solid rgba(50,218,128,.18);
  border-radius:3px;
  max-height:58vh;
  margin-bottom:4px;
}

/* ================================================================= intro == */
.cxc-intro .intro{
  margin-top:26px;
  max-width:1100px;
  margin-bottom:clamp(24px,3.4vw,40px);
}
.cxc-intro .stmt-head{
  margin:0;
  font-family:var(--cxc-mono);
  font-weight:500;
  font-size:clamp(21px,4.6vw,44px);
  line-height:1.42;
  letter-spacing:-.01em;
  color:#e7f0ec;
}
.cxc-intro .hl{
  background:#32da80;
  color:#08141c;
  padding:.06em .34em .1em;
  border-radius:999px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.cxc-intro .stmt-body{
  margin:clamp(18px,3vw,34px) 0 0;
  font-family:var(--cxc-ui);
  font-weight:300;
  font-size:clamp(16px,2.6vw,26px);
  line-height:1.45;
  max-width:26em;
  color:#e7f0ec;
}
.cxc-intro .em{ font-weight:500; color:#32da80; }
@media (max-width:480px){
  .cxc-intro .intro{ margin-top:20px; }
  .cxc-intro .stmt-body{ line-height:1.5; }
}

/* ============================================================= countdown == */
.cxc-countdown .strip{
  border:1px solid rgba(50,218,128,.18);
  border-radius:3px;
  background:rgba(10,29,37,.62);
  padding:15px 17px;
}
.cxc-countdown .lab{
  display:block;
  font-family:var(--cxc-mono);
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#32da80;
  margin-bottom:8px;
}
.cxc-countdown .dot{
  width:7px; height:7px; border-radius:50%; background:#32da80;
  display:inline-block; margin-right:7px;
}
.cxc-countdown .cdrow{ display:flex; gap:20px; align-items:flex-end; flex-wrap:wrap; }
.cxc-countdown .cdu{ display:flex; flex-direction:column; }
.cxc-countdown .cdn{
  font-family:var(--cxc-mono);
  font-size:clamp(28px,6.5vw,42px);
  font-weight:600;
  color:#32da80;
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.cxc-countdown .cdl{
  font-family:var(--cxc-mono);
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#93a9a0;
  margin-top:6px;
}
.cxc-countdown .cdwhen{
  margin-left:auto;
  font-family:var(--cxc-mono);
  font-size:11px;
  color:#93a9a0;
  text-align:right;
  line-height:1.75;
}
.cxc-countdown .big{ margin:0; font-size:clamp(17px,3vw,21px); font-weight:500; color:#e7f0ec; }
.cxc-countdown .small{ margin:6px 0 0; font-size:14px; color:#93a9a0; }
@media (max-width:620px){
  .cxc-countdown .cdwhen{ margin-left:0; width:100%; text-align:left; margin-top:10px; }
}

/* ========================================================== destinations == */
.cxc-destinations .cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:9px;
}
.cxc-destinations .card{
  border:1px solid rgba(50,218,128,.18);
  border-radius:3px;
  padding:15px 13px;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:rgba(10,29,37,.5);
  text-decoration:none;
  transition:border-color .15s, background .15s;
  cursor:var(--cxc-cursor-link,pointer);
}
.cxc-destinations .card:hover,
.cxc-destinations .card:focus-visible{ border-color:#32da80; background:rgba(50,218,128,.06); }
.cxc-destinations .card:focus-visible{ outline:2px solid #32da80; outline-offset:2px; }
.cxc-destinations .ci{ color:#32da80; }
.cxc-destinations .ct{ font-size:13.5px; color:#e7f0ec; }

/* ======================================================= section heading == */
.cxc-section .sec{ padding:38px 0 0; border-top:1px solid rgba(50,218,128,.1); }
.cxc-section .eyebrow{
  display:block;
  font-family:var(--cxc-mono);
  font-size:10px;
  color:#32da80;
  letter-spacing:.16em;
  margin-bottom:9px;
}
.cxc-section h2{
  font-size:clamp(18px,3vw,24px);
  font-weight:700;
  letter-spacing:-.015em;
  margin:0;
  text-transform:uppercase;
  color:#e7f0ec;
}
.cxc-section .lead{ color:#93a9a0; font-size:14px; max-width:60ch; margin:8px 0 0; line-height:1.6; }

/* ============================================================= programme == */
.cxc-programme .sess{ border-bottom:1px solid rgba(50,218,128,.1); }
.cxc-programme .sess > summary{
  list-style:none;
  display:grid;
  grid-template-columns:56px 1fr auto 16px;
  gap:11px;
  align-items:center;
  padding:13px 2px;
  cursor:var(--cxc-cursor-link,pointer);
}
.cxc-programme .sess > summary::-webkit-details-marker{ display:none; }
.cxc-programme .sess > summary::after{
  content:'+';
  font-family:var(--cxc-mono);
  color:#93a9a0;
  font-size:15px;
  justify-self:end;
}
.cxc-programme .sess[open] > summary::after{ content:'-'; }
.cxc-programme .sess > summary:hover .st{ color:#32da80; }
.cxc-programme .sess > summary:focus-visible{ outline:2px solid #32da80; outline-offset:2px; }
.cxc-programme .t{ font-family:var(--cxc-mono); font-size:13px; font-weight:500; color:#32da80; }
.cxc-programme .st{ display:block; font-size:14.5px; line-height:1.35; color:#e7f0ec; }
.cxc-programme .sm{ display:block; font-family:var(--cxc-mono); font-size:10.5px; color:#93a9a0; margin-top:4px; }
.cxc-programme .flag{
  font-family:var(--cxc-mono);
  font-size:8.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:3px 7px;
  border-radius:2px;
  white-space:nowrap;
}
.cxc-programme .sess.ok .flag{ background:rgba(50,218,128,.16); color:#32da80; }
.cxc-programme .sess.tbc .flag{ background:rgba(255,222,164,.14); color:#ffdea4; }
.cxc-programme .sess.brk{ opacity:.6; }
.cxc-programme .sess.brk .flag{ background:rgba(147,169,160,.14); color:#93a9a0; }
.cxc-programme .body{ padding:0 2px 15px 67px; font-size:13.5px; color:#93a9a0; }
.cxc-programme .desc{ margin:0 0 12px; line-height:1.6; color:#93a9a0; }
.cxc-programme .grp{ margin-bottom:10px; }
.cxc-programme .rl{
  display:block;
  font-family:var(--cxc-mono);
  font-size:9px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#248e4f;
  margin-bottom:6px;
}
.cxc-programme .ppl{ display:flex; flex-wrap:wrap; gap:6px; }
.cxc-programme .pl{
  font-size:12px;
  border:1px solid rgba(50,218,128,.18);
  border-radius:3px;
  padding:4px 9px;
  color:#93a9a0;
}
.cxc-programme .pl.on{ background:rgba(50,218,128,.09); border-color:#32da80; color:#e7f0ec; }
.cxc-programme .pl.pr{
  border-style:dashed;
  border-color:rgba(255,222,164,.4);
  color:#ffdea4;
  background:rgba(255,222,164,.05);
}
.cxc-programme .pl.tbc{ border-style:dashed; color:#93a9a0; }
.cxc-programme button.pl{ font:inherit; font-size:12px; background:none; cursor:var(--cxc-cursor-link,pointer); }
.cxc-programme button.pl:hover,
.cxc-programme button.pl:focus-visible{ border-color:#32da80; color:#fff; }
.cxc-programme button.pl:focus-visible{ outline:2px solid #32da80; outline-offset:2px; }
.cxc-programme .notice{ font-size:13.5px; color:#93a9a0; margin:10px 0 0; }
@media (max-width:600px){
  .cxc-programme .sess > summary{ grid-template-columns:48px 1fr 16px; gap:9px; }
  .cxc-programme .flag{ grid-column:2; justify-self:start; margin-top:3px; }
  .cxc-programme .body{ padding-left:2px; }
}

/* ============================================================== speakers == */
.cxc-speakers .lead{ color:#93a9a0; font-size:14px; margin:0 0 16px; max-width:60ch; }
.cxc-speakers .strip{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:9px;
  padding:4px 0 10px;
}
.cxc-speakers .card{
  border:1px solid rgba(50,218,128,.18);
  border-radius:3px;
  padding:12px 10px;
  background:rgba(10,29,37,.55);
  text-align:center;
  font:inherit;
  color:inherit;
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:center;
  cursor:var(--cxc-cursor-link,pointer);
}
.cxc-speakers .card:hover,
.cxc-speakers .card:focus-visible{ border-color:#32da80; }
.cxc-speakers .card:focus-visible{ outline:2px solid #32da80; outline-offset:2px; }
.cxc-speakers .ph{
  width:46px;
  height:46px;
  border-radius:3px;
  border:1px solid rgba(50,218,128,.18);
  display:grid;
  place-items:center;
  font-family:var(--cxc-mono);
  font-size:13px;
  color:#32da80;
  background:rgba(50,218,128,.07);
}
.cxc-speakers .ph-img{ object-fit:cover; padding:0; border:0; filter:grayscale(100%); }
.cxc-speakers .nm{ font-size:12.5px; line-height:1.3; color:#e7f0ec; }
.cxc-speakers .rl{
  font-family:var(--cxc-mono);
  font-size:9px;
  color:#93a9a0;
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1.4;
}
.cxc-speakers .notice{ font-size:13.5px; color:#93a9a0; margin:10px 0 0; }
@media (max-width:480px){ .cxc-speakers .strip{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* The speaker panel. */
.cxc-speaker-ovl{
  position:fixed;
  inset:0;
  background:rgba(7,20,27,.82);
  z-index:60;
  display:grid;
  place-items:start center;
  padding:20px;
  overflow:auto;
  font-family:var(--cxc-ui);
  font-weight:300;
}
.cxc-speaker-ovl .card-panel{
  background:#0a1d25;
  border:1px solid #32da80;
  border-radius:3px;
  max-width:520px;
  width:100%;
  padding:20px;
  margin:auto;
}
.cxc-speaker-ovl .top{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.cxc-speaker-ovl .who{ display:flex; align-items:center; gap:14px; }
.cxc-speaker-ovl h3{ margin:0; font-size:18px; font-weight:500; color:#e7f0ec; }
.cxc-speaker-ovl .prole{
  font-family:var(--cxc-mono);
  font-size:10px;
  color:#93a9a0;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin:4px 0 0;
}
.cxc-speaker-ovl .pph{
  width:64px;
  height:64px;
  border-radius:4px;
  object-fit:cover;
  flex:none;
  display:block;
  filter:grayscale(100%);
}
.cxc-speaker-ovl .pph-initials{
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(50,218,128,.09);
  border:1px solid rgba(50,218,128,.28);
  color:#32da80;
  font-family:var(--cxc-mono);
  font-size:20px;
  letter-spacing:.04em;
  filter:none;
}
.cxc-speaker-ovl .x{
  font:inherit;
  font-family:var(--cxc-mono);
  font-size:10px;
  background:transparent;
  color:#93a9a0;
  border:1px solid rgba(50,218,128,.18);
  border-radius:3px;
  padding:6px 9px;
  flex:none;
  cursor:var(--cxc-cursor-link,pointer);
}
.cxc-speaker-ovl .x:hover{ border-color:#32da80; color:#e7f0ec; }
.cxc-speaker-ovl .li{ margin:14px 0 0; }
.cxc-speaker-ovl .li a{
  font-size:13px;
  color:#32da80;
  text-decoration:none;
  border-bottom:1px solid rgba(50,218,128,.4);
  padding-bottom:1px;
  cursor:var(--cxc-cursor-link,pointer);
}
.cxc-speaker-ovl .li a:hover{ color:#fff; border-bottom-color:#fff; }
.cxc-speaker-ovl .chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }
.cxc-speaker-ovl .chip{
  font-family:var(--cxc-mono);
  font-size:9.5px;
  letter-spacing:.04em;
  padding:4px 9px;
  border-radius:2px;
  border:1px solid rgba(50,218,128,.18);
  color:#93a9a0;
}

/* =========================================================== convened by == */
.cxc-convened .panel{
  border:1px solid rgba(50,218,128,.18);
  border-radius:3px;
  padding:18px;
  background:rgba(10,29,37,.5);
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:18px;
}
.cxc-convened .marklink{
  display:block;
  flex:none;
  line-height:0;
  opacity:.95;
  transition:opacity .15s;
  border-radius:2px;
}
.cxc-convened .marklink:hover,
.cxc-convened .marklink:focus-visible{ opacity:1; }
.cxc-convened .marklink:focus-visible{ outline:2px solid #32da80; outline-offset:3px; }
.cxc-convened .mark{ height:34px; width:auto; display:block; }
.cxc-convened .strap{ margin:0; font-size:13.5px; color:#93a9a0; flex:1; min-width:220px; line-height:1.6; }
.cxc-convened .lead{ color:#93a9a0; font-size:14px; max-width:60ch; margin:22px 0 0; line-height:1.6; }
.cxc-convened .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:9px;
  margin-top:16px;
}
.cxc-convened .logo{
  text-decoration:none;
  color:inherit;
  border:1px solid rgba(50,218,128,.18);
  border-radius:3px;
  padding:14px 10px;
  text-align:center;
  background:rgba(10,29,37,.5);
  display:grid;
  place-items:center;
  min-height:96px;
  transition:border-color .15s, color .15s;
}
.cxc-convened .mk{ display:block; max-width:100%; height:auto; opacity:.86; transition:opacity .15s; }
.cxc-convened .nm{ font-size:11.5px; color:#93a9a0; line-height:1.4; }
.cxc-convened .logo[href]{ cursor:var(--cxc-cursor-link,pointer); }
.cxc-convened .logo[href]:hover,
.cxc-convened .logo[href]:focus-visible{ border-color:#32da80; }
.cxc-convened .logo[href]:hover .mk,
.cxc-convened .logo[href]:focus-visible .mk{ opacity:1; }
.cxc-convened .logo[href]:focus-visible{ outline:2px solid #32da80; outline-offset:2px; }
@media (max-width:640px){
  .cxc-convened .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cxc-convened .panel{ gap:10px; }
}
@media (max-width:600px){ .cxc-convened .mark{ height:26px; } }

/* ============================================================== showcase == */
.cxc-showcase .lead{ color:#93a9a0; font-size:14px; max-width:60ch; margin:18px 0 0; line-height:1.6; }
.cxc-showcase .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:9px;
  margin-top:16px;
}
.cxc-showcase .logo{
  appearance:none;
  font:inherit;
  border:1px solid rgba(50,218,128,.18);
  border-radius:3px;
  padding:15px 9px;
  text-align:center;
  font-size:11.5px;
  color:#93a9a0;
  background:rgba(10,29,37,.5);
  line-height:1.4;
  display:grid;
  place-items:center;
  min-height:86px;
  transition:border-color .15s, color .15s;
  cursor:var(--cxc-cursor-link,pointer);
}
.cxc-showcase .logo:hover{ border-color:#32da80; color:#e7f0ec; }
.cxc-showcase .mk{ display:block; max-width:100%; height:auto; opacity:.86; transition:opacity .15s; }
.cxc-showcase .logo:hover .mk,
.cxc-showcase .logo:focus-visible .mk{ opacity:1; }
@media (max-width:640px){ .cxc-showcase .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* The stand artwork pop-up. */
.cxc-art-ovl{
  position:fixed;
  inset:0;
  background:rgba(7,20,27,.86);
  z-index:60;
  display:grid;
  place-items:center;
  padding:20px;
  overflow:auto;
  font-family:var(--cxc-ui);
  font-weight:300;
}
.cxc-art-ovl .art-panel{
  background:#0a1d25;
  border:1px solid #32da80;
  border-radius:3px;
  max-width:620px;
  width:100%;
  padding:14px;
  margin:auto;
}
.cxc-art-ovl .top{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:12px; }
.cxc-art-ovl .who{
  font-family:var(--cxc-mono);
  font-size:10.5px;
  color:#93a9a0;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.cxc-art-ovl .x{
  appearance:none;
  background:none;
  border:1px solid rgba(50,218,128,.4);
  border-radius:3px;
  color:#32da80;
  font:inherit;
  font-size:12px;
  padding:5px 12px;
  cursor:var(--cxc-cursor-link,pointer);
}
.cxc-art-ovl .x:hover{ border-color:#32da80; background:rgba(50,218,128,.14); color:#fff; }
.cxc-art-ovl .art{ display:block; width:100%; height:auto; border-radius:2px; transition:opacity .15s; }
.cxc-art-ovl .artlink{ display:block; line-height:0; border-radius:2px; cursor:var(--cxc-cursor-link,pointer); }
.cxc-art-ovl .artlink:focus-visible{ outline:2px solid #32da80; outline-offset:3px; }
.cxc-art-ovl .artlink:hover .art,
.cxc-art-ovl .artlink:focus-visible .art{ opacity:.92; }
.cxc-art-ovl .hint{
  margin:10px 0 2px;
  text-align:center;
  font-family:var(--cxc-mono);
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#93a9a0;
}

/* ========================================================= plan your day == */
.cxc-plan .lead{ color:#93a9a0; font-size:14px; max-width:60ch; margin:18px 0 0; line-height:1.6; }
.cxc-plan .row{ display:grid; gap:9px; margin-top:18px; }
.cxc-plan .row-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cxc-plan .row-3{ grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:9px; }
.cxc-plan .box{
  border:1px solid rgba(50,218,128,.18);
  border-radius:3px;
  padding:15px;
  background:rgba(10,29,37,.5);
}
.cxc-plan .box:hover{ border-color:rgba(50,218,128,.38); }
.cxc-plan .lbl{
  display:block;
  font-family:var(--cxc-mono);
  font-size:9.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#32da80;
  margin-bottom:7px;
}
.cxc-plan .box p{ margin:0; font-size:13.5px; color:#93a9a0; line-height:1.6; }
.cxc-plan .gbtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:10px 0 2px;
  padding:10px 14px;
  border:1px solid rgba(50,218,128,.4);
  border-radius:3px;
  background:rgba(50,218,128,.08);
  color:#32da80;
  font-size:13.5px;
  text-decoration:none;
  cursor:var(--cxc-cursor-link,pointer);
}
.cxc-plan .gbtn:hover,
.cxc-plan .gbtn:focus-visible{ border-color:#32da80; background:rgba(50,218,128,.16); color:#fff; }
.cxc-plan .gbtn:focus-visible{ outline:2px solid #32da80; outline-offset:2px; }
@media (max-width:700px){
  .cxc-plan .row-2,
  .cxc-plan .row-3{ grid-template-columns:minmax(0,1fr); }
}

/* ================================================================ footer == */
.cxc-footer{ background-color:#07141B; min-height:24px; }