/*
 * Seabound Journeys — booking panel, v4 (Sept 17 2026)
 * ------------------------------------------------------------------
 * Both providers are shown, and the hierarchy explains itself. Shore
 * Excursions Group leads: a brass-ribboned card that states WHY it is
 * highlighted on a cruise page, three reasons, the page's own bookable
 * tours as jump chips, one large brass button. Viator follows as a
 * labelled second option with its own reason to exist — outlined, not
 * brass. Per-card rows and the sticky bar keep the same order.
 *
 * Colour comes from each page's own --px-* port identity tokens, so the
 * panel reads as part of that port's page rather than a bolted-on widget,
 * with hard-coded fallbacks so it still renders correctly if sx-atmos.css
 * (which defines those tokens) is ever missing.
 *
 * The guides force a light rendering (meta color-scheme: only light) and
 * the surrounding page paints its own paper background, so these panels
 * are deliberately single-theme. Every colour is explicit.
 */

.sj-book{
  --bk-deep: var(--px-deep, #06282F);
  --bk-nav: var(--px-nav, #0C5C69);
  --bk-sky: var(--px-sky-2, #145F6E);
  --bk-accent: var(--px-accent, #F2764A);
  --bk-accent-ink: var(--px-accent-ink, #AC4426);
  --bk-eyebrow: var(--px-eyebrow, #9AD0CD);
  --bk-sub: var(--px-sub, #C6E7E3);
  --bk-brass:#B8863B;
  --bk-brass-lt:#D8AE6A;
  --bk-brass-pale:#FAEFD8;
  --bk-paper:#F7F3EC;
  --bk-ink:#12262A;
  max-width:920px;
  margin:2.6rem auto;
  padding:0 24px;
  box-sizing:border-box;
}
.sj-book *{box-sizing:border-box}

.sj-book-shell{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:
    radial-gradient(120% 140% at 8% 0%, rgba(255,255,255,.09), transparent 55%),
    linear-gradient(158deg, var(--bk-deep) 0%, var(--bk-sky) 118%);
  box-shadow:0 22px 50px -26px rgba(6,30,36,.78), 0 1px 0 rgba(255,255,255,.07) inset;
  padding:1.7rem 1.8rem 1.4rem;
}
.sj-book-shell::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(180deg,rgba(4,20,26,0) 52%,rgba(4,20,26,.34) 100%),
    repeating-linear-gradient(115deg,transparent,transparent 62px,rgba(255,255,255,.028) 62px,rgba(255,255,255,.028) 63px);
}
.sj-book-shell>*{position:relative}

/* --- entrance reveal ---------------------------------------------- */
.sj-book.will-reveal .sj-book-shell{opacity:0;transform:translateY(16px)}
.sj-book.will-reveal.is-in .sj-book-shell{
  opacity:1;transform:none;
  transition:opacity .55s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.sj-book.will-reveal .sj-pillar{opacity:0;transform:translateY(10px)}
.sj-book.will-reveal.is-in .sj-pillar{
  opacity:1;transform:none;
  transition:opacity .5s ease calc(.25s + var(--i,0)*.11s), transform .5s cubic-bezier(.22,.61,.36,1) calc(.25s + var(--i,0)*.11s);
}

/* --- header ------------------------------------------------------- */
.sj-book-eyebrow{
  font-family:"Space Mono",monospace;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bk-eyebrow);
  display:flex;align-items:center;gap:.6rem;
  margin-bottom:.55rem;
}
.sj-book-eyebrow::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.22),transparent);
}
.sj-book-head{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:clamp(1.24rem,2.5vw,1.6rem);
  font-weight:600;line-height:1.18;color:#fff;
  letter-spacing:-.012em;
  margin:0 0 .45rem;max-width:34ch;
  text-wrap:balance;
}
.sj-book-lede{
  font-family:"Newsreader",Georgia,serif;
  font-size:1rem;line-height:1.52;color:var(--bk-sub);
  max-width:64ch;margin:0 0 1.2rem;
}
.sj-book-lede b{color:#fff;font-weight:500}

/* --- the hero card (Shore Excursions Group) ----------------------- */
.sj-hero{
  position:relative;
  display:flex;flex-direction:column;gap:.95rem;
  background:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  padding:1.15rem 1.2rem 1.1rem;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 12px 30px -22px rgba(0,0,0,.6);
}
.sj-hero::after{
  /* brass hairline down the left edge — "this is the one" */
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--bk-brass-lt),var(--bk-brass));
}
/* The stated reason for the highlight. Brass-keyed so it reads as part
   of the recommendation rather than as a disclaimer. */
.sj-hero-ribbon{
  display:flex;flex-direction:column;gap:.2rem;
  margin:-.25rem -.25rem .1rem;
  padding:.62rem .75rem .66rem;
  background:linear-gradient(120deg, rgba(216,174,106,.20), rgba(216,174,106,.07));
  border:1px solid rgba(216,174,106,.34);
  border-radius:10px;
}
.sj-hero-ribbon-k{
  font-family:"Space Mono",monospace;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  /* Pale rather than --bk-brass-lt: at 9.6px this is small text, so it
     needs 4.5:1, and the mid brass fell to 3.97:1 against the darkest
     port grounds (Progreso, Curaçao, Bonaire, Falmouth, Ocho Rios). */
  color:var(--bk-brass-pale, #F1DDB4);
}
.sj-hero-ribbon-t{
  font-family:"Newsreader",Georgia,serif;
  font-size:.88rem;line-height:1.42;color:#F9F1E3;
}
.sj-hero.is-viator .sj-hero-ribbon{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.16);
}
.sj-hero.is-viator .sj-hero-ribbon-k{color:#D6E4E1}
.sj-hero.is-viator .sj-hero-ribbon-t{color:#CFDEDB}

.sj-hero-top{display:flex;align-items:center;gap:.8rem}
.sj-hero.is-viator::after{background:rgba(255,255,255,.22)}
.sj-hero.is-viator .sj-hero-mark{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3)}
.sj-hero-mark{
  flex:0 0 auto;width:42px;height:42px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--bk-brass-lt),var(--bk-brass));
  color:#1A1204;
  font-family:"Space Mono",monospace;font-size:.72rem;font-weight:700;letter-spacing:.06em;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.6);
}
.sj-hero-names{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.sj-hero-name{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:1.18rem;font-weight:600;color:#fff;letter-spacing:-.01em;line-height:1.1;
}
.sj-hero-kind{
  font-family:"Space Mono",monospace;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bk-brass-lt);
}

.sj-pillars{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;
}
.sj-pillar{
  display:flex;gap:.6rem;align-items:flex-start;
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:.7rem .75rem .72rem;
}
.sj-pillar svg{flex:0 0 auto;width:20px;height:20px;fill:var(--bk-brass-lt);margin-top:.08rem}
.sj-pillar-tx{display:flex;flex-direction:column;gap:.18rem;min-width:0}
.sj-pillar-tx b{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:.86rem;font-weight:600;color:#fff;line-height:1.2;
}
.sj-pillar-tx span{
  font-family:"Newsreader",Georgia,serif;
  font-size:.8rem;line-height:1.4;color:#B9CECB;
}

.sj-picks{display:flex;flex-direction:column;gap:.45rem}
.sj-picks-k{
  font-family:"Space Mono",monospace;
  font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:#D6E4E1;margin:0;
}
.sj-picks-row{display:flex;flex-wrap:wrap;gap:.4rem}
.sj-pick{
  font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.02em;
  color:#F3F8F6;text-decoration:none;
  background:rgba(4,20,26,.16);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:.36rem .78rem;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.sj-pick:hover{background:rgba(255,255,255,.15);border-color:var(--bk-brass-lt);transform:translateY(-1px)}
.sj-pick:focus-visible{outline:2px solid #fff;outline-offset:2px}

.sj-hero-line{
  font-family:"Newsreader",Georgia,serif;
  font-size:.94rem;line-height:1.5;color:#D6E4E1;margin:0;
}

.sj-hero-btn{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  width:100%;
  background:linear-gradient(160deg,var(--bk-brass-lt) 0%,var(--bk-brass) 70%);
  color:#1A1204;
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:1.02rem;font-weight:700;letter-spacing:-.005em;
  text-decoration:none;text-align:center;line-height:1.25;
  padding:.95rem 1.2rem;border-radius:11px;
  box-shadow:0 14px 28px -14px rgba(184,134,59,.85), 0 1px 0 rgba(255,255,255,.35) inset;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.sj-hero-btn:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(184,134,59,.95), 0 1px 0 rgba(255,255,255,.35) inset;filter:saturate(1.08)}
.sj-hero-btn:active{transform:translateY(0)}
.sj-hero-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sj-hero-btn-a{font-size:1.2em;line-height:1;transition:transform .16s ease}
.sj-hero-btn:hover .sj-hero-btn-a{transform:translateX(4px)}
/* one shimmer sweep as the panel arrives */
.sj-hero-btn::after{
  content:"";position:absolute;top:-40%;bottom:-40%;left:-30%;width:26%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-120%) skewX(-16deg);
  pointer-events:none;
}
.sj-book.is-in .sj-hero-btn::after{animation:sjSheen 1.5s cubic-bezier(.4,0,.2,1) .7s 1 both}
@keyframes sjSheen{to{transform:translateX(560%) skewX(-16deg)}}

.sj-hero.is-viator .sj-hero-btn{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4);box-shadow:none}
.sj-hero.is-viator .sj-hero-btn::after{display:none}

.sj-hero-fine{
  font-family:"Space Mono",monospace;font-size:.62rem;letter-spacing:.02em;line-height:1.5;
  color:#D6E4E1;margin:0;text-align:center;
}
.sj-hero-fine a{color:#C4D8D5;text-decoration:underline;text-underline-offset:2px}
.sj-hero-fine a:hover{color:#fff}

/* --- the second option (Viator) ------------------------------------ */
/* Deliberately a real, labelled option: its own heading row, its own
   reason to exist, its own button. Outlined rather than brass, because
   the panel has already said why the other one leads. */
.sj-alt{
  margin-top:.9rem;padding:.85rem .95rem .9rem;
  background:rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.11);
  border-radius:12px;
  display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;
}
.sj-alt-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem .6rem}
.sj-alt-k{
  font-family:"Space Mono",monospace;
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:#C9DAD7;
  border:1px solid rgba(255,255,255,.18);border-radius:4px;
  padding:.16rem .4rem;
}
.sj-alt-name{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:1.02rem;font-weight:600;color:#fff;letter-spacing:-.01em;
}
.sj-alt-kind{
  font-family:"Space Mono",monospace;
  font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:#8FA8A6;
}
.sj-alt-tx{
  margin:0;
  font-family:"Newsreader",Georgia,serif;
  font-size:.88rem;line-height:1.5;color:#B4CBC8;
}
.sj-alt-tx b{color:#E4EFEC;font-weight:500}
.sj-alt-btn{
  font-family:"Space Mono",monospace;font-size:.66rem;font-weight:700;letter-spacing:.03em;
  color:#fff;text-decoration:none;white-space:nowrap;
  border:1px solid rgba(255,255,255,.34);border-radius:8px;
  padding:.5rem .8rem;
  transition:background .15s ease,border-color .15s ease;
}
.sj-alt-btn::after{content:" \2197";opacity:.7}
.sj-alt-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
.sj-alt-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* --- footer row: the honest note + disclosure --------------------- */
.sj-book-foot{
  margin-top:1.05rem;padding-top:.85rem;
  border-top:1px solid rgba(255,255,255,.13);
  display:flex;flex-wrap:wrap;gap:.45rem 1.1rem;align-items:baseline;
}
.sj-book-verdict{
  font-family:"Newsreader",Georgia,serif;
  font-size:.86rem;line-height:1.5;color:#C9DAD7;flex:1 1 24ch;margin:0;
}
/* The shell ALWAYS paints a dark ground (including the nolocal variant), so
   this link is light, full stop. A Sept-19 edit briefly made it --sea after a
   mis-sampled contrast reading; that put a teal link on a teal ground at 1.1:1
   on every guide. Measured 5.1:1+ against the lightest foot ground in the
   fleet (Progreso). */
.sj-book-verdict a{color:#EAF2F0;text-decoration:underline;text-underline-offset:2px}
.sj-book-verdict a:hover{color:#fff}
.sj-book-disc{
  font-size:.72rem;line-height:1.5;color:#C9DAD7;font-style:italic;flex:1 1 22ch;margin:0;
}
/* Was #B3C7C4 = 4.41:1 against the panel ground, just under AA. This is the
   affiliate disclosure, so it is the last link on the page that should be
   hard to read. Lightened to clear 4.5:1. */
.sj-book-disc a{color:#E6EFED;text-decoration:underline}
.sj-book-disc a:hover{color:#fff}

/* --- compact variant (mid-article, after quick picks) ------------- */
.sj-book.is-compact .sj-book-shell{padding:1.25rem 1.3rem 1.05rem}
.sj-book.is-compact .sj-book-head{font-size:1.12rem}
.sj-book.is-compact .sj-book-lede{font-size:.9rem;margin-bottom:.9rem}
.sj-book.is-compact .sj-hero{padding:.95rem 1rem .9rem;gap:.7rem}
.sj-book.is-compact .sj-hero-line{display:none}
.sj-book.is-compact .sj-hero-ribbon{padding:.5rem .6rem .54rem}
.sj-book.is-compact .sj-hero-ribbon-t{font-size:.82rem}
.sj-book.is-compact .sj-alt{padding:.7rem .8rem .75rem}
.sj-book.is-compact .sj-alt-tx{font-size:.82rem}
.sj-book.is-compact .sj-hero-btn{font-size:.94rem;padding:.8rem 1rem}

/* --- no-local-operators variant ----------------------------------- */
/* Used on the cruise-line private destinations, where the page's own
   conclusion is that nothing here is sold by anyone but the cruise line.
   Visually distinct from the booking panel on purpose: it must not read
   as "book this island", because you can't. */
.sj-book.is-nolocal .sj-book-shell{
  background:linear-gradient(158deg,#15242A 0%,#1E3339 120%);
  box-shadow:0 14px 34px -24px rgba(6,20,24,.7);
}
.sj-book.is-nolocal .sj-book-eyebrow{color:#94A9A7}
.sj-nolocal-note{
  font-family:"Newsreader",Georgia,serif;
  font-size:.94rem;line-height:1.55;color:#BACECB;margin:0 0 1rem;max-width:64ch;
}
.sj-nolocal-note b{color:#fff;font-weight:500}
.sj-port-pick{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.9rem}
.sj-port-pick a{
  font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.03em;
  color:#D6E5E2;text-decoration:none;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;padding:.38rem .8rem;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.sj-port-pick a:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32);transform:translateY(-1px)}
.sj-port-pick a:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* --- per-excursion booking row ------------------------------------ */
/* Sits at the foot of each ranked card that is genuinely bookable
   outside the ship. Quotes the card's own price tag, then one brass
   button. The card's own argument stays the loudest thing on the card. */
.sj-rec-book{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.7rem 1rem;
  margin-top:1.05rem;padding:.9rem 1rem .85rem;
  background:linear-gradient(90deg, color-mix(in srgb, var(--px-accent-ink,#AC4426) 6%, #fff), #fff 70%);
  border:1px solid color-mix(in srgb, var(--px-accent-ink,#AC4426) 18%, var(--paper-2,#DEDBD3));
  border-left:3px solid var(--bk-brass,#B8863B);
  border-radius:10px;
}
.sj-rec-book-main{flex:1 1 26ch;min-width:0;display:flex;flex-direction:column;gap:.22rem}
.sx-rec .sj-rec-book-k,.sj-rec-book-k{
  font-family:"Space Mono",monospace;
  font-size:.66rem;line-height:1.4;letter-spacing:.11em;text-transform:uppercase;
  color:var(--px-accent-ink,#AC4426) !important;margin:0;
}
.sx-rec .sj-rec-book-price,.sj-rec-book-price{
  font-family:"Newsreader",Georgia,serif;
  font-size:.92rem;line-height:1.4;color:var(--ink,#12262A) !important;margin:0;
}
.sj-rec-book-price-k{
  font-family:"Space Mono",monospace;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted,#5b6b6b);
}
.sj-rec-book-cta{flex:0 1 auto;display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .8rem}
/* The host pages carry a `.sx-sec a{color:var(--sea)}` rule whose
   specificity (0,1,1) beats a single class, which turned this button's
   label teal-on-brass — 2.5:1 in places. Scoped and forced, the same way
   the kicker and price lines above are. */
.sx-rec .sj-rec-book .sj-rec-seg,
.sj-rec-seg{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:.9rem;font-weight:700;letter-spacing:-.005em;
  text-decoration:none;color:#1A1204 !important;
  background:linear-gradient(160deg,#D8AE6A 0%,#B8863B 75%);
  border-radius:9px;padding:.62rem 1rem;
  box-shadow:0 10px 22px -12px rgba(184,134,59,.9), 0 1px 0 rgba(255,255,255,.35) inset;
  transition:transform .15s ease, box-shadow .15s ease;
}
.sj-rec-seg:hover{transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(184,134,59,1), 0 1px 0 rgba(255,255,255,.35) inset}
.sj-rec-seg:focus-visible{outline:2px solid var(--px-accent-ink,#AC4426);outline-offset:2px}
.sj-rec-seg-a{transition:transform .15s ease}
.sj-rec-seg:hover .sj-rec-seg-a{transform:translateX(3px)}
.sj-rec-via{
  font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.02em;
  color:var(--muted,#5b6b6b) !important;text-decoration:underline;text-underline-offset:3px;
}
.sj-rec-via::after{content:" \2197";opacity:.7}
.sx-rec .sj-rec-book .sj-rec-via:hover{color:var(--ink,#12262A) !important}
.sj-rec-via:focus-visible{outline:2px solid var(--px-accent-ink,#AC4426);outline-offset:2px;border-radius:3px}
.sj-rec-guar{
  display:inline-flex;align-items:center;gap:.34rem;
  font-family:"Space Mono",monospace;font-size:.62rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted,#5b6b6b);white-space:nowrap;
}
.sj-rec-guar::before{
  content:"";width:9px;height:9px;flex:0 0 auto;border-radius:2px;
  background:linear-gradient(150deg,#D8AE6A,#B8863B);
}
/* Browsers without color-mix() still get a readable card. */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .sj-rec-book{background:#FBF9F4;border-color:#DEDBD3}
}
.sj-rec-shiponly{
  margin-top:1rem;padding-top:.8rem;
  border-top:1px dashed var(--paper-2,#DEDBD3);
  font-family:"Space Mono",monospace;font-size:.68rem;line-height:1.5;
  letter-spacing:.02em;color:var(--muted,#5b6b6b);
}

/* --- sticky booking bar ------------------------------------------- */
/* Appears once the reader is inside the ranked excursions and the
   in-page panel is off screen, so it never competes with the real card.
   Dismissible, and it stays dismissed for the session. */
.sj-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  transform:translateY(110%);
  transition:transform .34s cubic-bezier(.22,.61,.36,1);
  background:linear-gradient(180deg, rgba(6,40,47,.96), rgba(6,40,47,.99));
  border-top:1px solid rgba(216,174,106,.35);
  box-shadow:0 -10px 30px -18px rgba(0,0,0,.6);
  padding:.6rem max(14px, env(safe-area-inset-left)) calc(.6rem + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right));
}
.sj-sticky.is-in{transform:translateY(0)}
.sj-sticky-in{
  max-width:920px;margin:0 auto;
  display:flex;align-items:center;gap:.8rem;
}
.sj-sticky-txt{
  flex:1 1 auto;min-width:0;overflow:hidden;
  font-family:"Space Mono",monospace;font-size:.66rem;line-height:1.4;
  color:#BCD2CF;letter-spacing:.02em;
}
.sj-sticky-txt b{
  display:block;color:#fff;
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:.92rem;font-weight:600;letter-spacing:-.005em;
}
.sj-sticky-btns{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.sj-sticky-btns a{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:.86rem;font-weight:700;
  text-decoration:none;white-space:nowrap;
  padding:.6rem .95rem;border-radius:9px;
}
.sj-sticky-btns a.is-seg{
  background:linear-gradient(160deg,#D8AE6A 0%,#B8863B 75%);color:#1A1204;
  box-shadow:0 10px 22px -12px rgba(184,134,59,.9);
}
.sj-sticky-btns a.is-via{
  font-family:"Space Mono",monospace;font-size:.64rem;font-weight:400;
  color:#BCD2CF;text-decoration:underline;text-underline-offset:3px;padding:.3rem .1rem;
}
.sj-sticky-btns a.is-via:hover{color:#fff}
.sj-sticky-btns a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sj-sticky-x{
  flex:0 0 auto;background:none;border:0;cursor:pointer;
  color:#7E9997;font-size:1.1rem;line-height:1;padding:.4rem .2rem;
}
.sj-sticky-x:hover{color:#fff}
.sj-sticky-x:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px}

/* --- responsive --------------------------------------------------- */
@media (max-width:720px){
  .sj-book{padding:0 18px;margin:2rem auto}
  .sj-book-shell{padding:1.3rem 1.15rem 1.1rem}
  .sj-hero{padding:1rem .95rem .95rem}
  .sj-pillars{grid-template-columns:minmax(0,1fr);gap:.45rem}
  .sj-pillar{padding:.6rem .7rem}
  .sj-book-foot{flex-direction:column;gap:.55rem}
  .sj-rec-book{padding:.8rem .85rem .8rem}
  .sj-rec-book-cta{flex:1 1 100%}
  .sj-alt{padding:.75rem .8rem .8rem}
  .sj-rec-seg{flex:1 1 auto;justify-content:center}
  .sj-sticky-txt{font-size:.62rem}
  .sj-sticky-txt b{font-size:.84rem}
  .sj-sticky-btns a.is-seg{padding:.55rem .75rem;font-size:.78rem}
}
@media (max-width:480px){
  .sj-sticky-btns a.is-via{display:none}
  .sj-sticky-in{gap:.5rem}
  .sj-sticky-txt{overflow:hidden}
  .sj-sticky-txt span{display:none}
  .sj-sticky-txt b{font-size:.74rem;line-height:1.2}
  .sj-sticky-btns a.is-seg{font-size:.74rem;padding:.55rem .65rem}
  .sj-sticky-x{padding:.4rem 0}
}

@media (prefers-reduced-motion:reduce){
  .sj-sticky{transition:none}
  .sj-book.will-reveal .sj-book-shell,.sj-book.will-reveal .sj-pillar{opacity:1;transform:none;transition:none}
  .sj-book.is-in .sj-hero-btn::after{animation:none}
  .sj-hero-btn,.sj-rec-seg,.sj-pick,.sj-port-pick a,.sj-alt-btn,.sj-hero-btn-a,.sj-rec-seg-a{transition:none}
  .sj-hero-btn:hover,.sj-rec-seg:hover,.sj-pick:hover,.sj-port-pick a:hover{transform:none}
}