/*
 * NF Audios — elements: motion and effects over the light look.
 * Wind, water, frost, fire and silent thunder (assets/js/nf-elements.js draws them);
 * this file places the canvas, tints the hero with the element in the air, and gives
 * pages, sections, cards and buttons a calm way of arriving and answering a touch.
 */
@property --nf-el { syntax: '<color>'; inherits: true; initial-value: rgb(72, 138, 104); }

/* ── The canvas sits behind the hero's content ── */
.sw.sw-home, .sw.sw-hero { position: relative; isolation: isolate; transition: --nf-el 2.6s ease; }
.nf-el-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  /* the weather thins out towards the next section instead of stopping at a line */
  -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent);
}
.sw.sw-home > .bcos-wrap, .sw.sw-hero > .bcos-wrap { position: relative; z-index: 1; }
/* A wash of the element's colour, like light through weather. */
.sw.sw-home::before, .sw.sw-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 60% at 76% 42%, color-mix(in srgb, var(--nf-el) 17%, transparent), transparent 72%),
    radial-gradient(40% 50% at 8% 96%, color-mix(in srgb, var(--nf-el) 11%, transparent), transparent 70%);
  -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent);
}
/* The stage the product sits on takes the element's light too. */
.sw.sw-clean.sw-home .sw-home-media {
  transition: box-shadow 2.6s ease, background-color 2.6s ease;
  box-shadow: 0 50px 90px -50px color-mix(in srgb, var(--nf-el) 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--nf-el) 16%, transparent);
  background-color: color-mix(in srgb, var(--nf-el) 12%, #f3f2ed);
}
.sw.sw-clean.sw-home .sw-home-media .sw-img { animation: nf-float 10s ease-in-out infinite; }
.sw.sw-home .sw-home-facts li::before { background: var(--nf-el); transition: background-color 2.6s ease; }
@keyframes nf-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

/* ── The dock: what is in the air now, and a step either way ── */
.nf-el-dock {
  position: absolute; z-index: 2; left: 50%; bottom: clamp(14px, 2.4vw, 30px); translate: -50% 0;
  display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 99px;
  background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--nf-el) 24%, transparent), 0 14px 30px -18px color-mix(in srgb, var(--nf-el) 80%, #26302b);
  transition: box-shadow 2.6s ease;
}
.nf-el-dock button {
  all: unset; box-sizing: border-box; cursor: pointer; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  color: color-mix(in srgb, var(--ink, #16241c) 55%, transparent); transition: color .3s, background-color .3s, transform .3s cubic-bezier(.2, .7, .2, 1);
}
.nf-el-dock button:hover { color: var(--ink, #16241c); background: color-mix(in srgb, var(--nf-el) 14%, transparent); }
.nf-el-dock button:active { transform: scale(.92); }
.nf-el-dock button:focus-visible { outline: 2px solid var(--nf-el); outline-offset: 2px; }
.nf-el-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nf-el); margin-left: 6px; transition: background-color 2.6s ease; box-shadow: 0 0 0 4px color-mix(in srgb, var(--nf-el) 18%, transparent); animation: nf-pulse 3.6s ease-in-out infinite; }
@keyframes nf-pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-el) 20%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }
.nf-el-name { margin: 0 6px 0 8px; min-width: 6.2em; text-align: left; font-size: 12px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--nf-el) 70%, #16241c); transition: color 2.6s ease; }

/* ── Arriving: the hero settles like mist clearing ── */
@keyframes nf-clear { from { opacity: 0; filter: blur(14px); transform: translateY(18px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes nf-rise { from { opacity: 0; transform: translateY(26px) scale(.985); } to { opacity: 1; transform: none; } }
.sw.sw-home .sw-home-copy > *, .sw.sw-hero .sw-hero-in > * > * { animation: nf-clear 1.2s cubic-bezier(.2, .7, .2, 1) both; }
.sw.sw-home .sw-home-copy > :nth-child(2), .sw.sw-hero .sw-hero-in > * > :nth-child(2) { animation-delay: .12s; }
.sw.sw-home .sw-home-copy > :nth-child(3), .sw.sw-hero .sw-hero-in > * > :nth-child(3) { animation-delay: .24s; }
.sw.sw-home .sw-home-copy > :nth-child(4), .sw.sw-hero .sw-hero-in > * > :nth-child(4) { animation-delay: .36s; }
.sw.sw-home .sw-home-copy > :nth-child(n+5), .sw.sw-hero .sw-hero-in > * > :nth-child(n+5) { animation-delay: .48s; }
.sw.sw-home .sw-home-stage { animation: nf-rise 1.5s .2s cubic-bezier(.2, .7, .2, 1) both; }

/* Sections clear as they come into view; their cards follow one after another. */
.bcos-reveal.vx-w[class*="vx-w-software-"] { transition: opacity 1.1s ease, filter 1.1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.bcos-reveal.vx-w[class*="vx-w-software-"]:not(.is-in) { filter: blur(10px); transform: translateY(30px); }
.bcos-reveal.is-in :is(.sw-card, .sw-bundle, .sw-free-item) { animation: nf-rise .95s cubic-bezier(.2, .7, .2, 1) both; }
.bcos-reveal.is-in :is(.sw-card, .sw-bundle, .sw-free-item):nth-child(2) { animation-delay: .09s; }
.bcos-reveal.is-in :is(.sw-card, .sw-bundle, .sw-free-item):nth-child(3) { animation-delay: .18s; }
.bcos-reveal.is-in :is(.sw-card, .sw-bundle, .sw-free-item):nth-child(4) { animation-delay: .27s; }
.bcos-reveal.is-in :is(.sw-card, .sw-bundle, .sw-free-item):nth-child(5) { animation-delay: .36s; }
.bcos-reveal.is-in :is(.sw-card, .sw-bundle, .sw-free-item):nth-child(n+6) { animation-delay: .45s; }

/* ── Between pages: one page thins out, the next comes up through it ── */
@view-transition { navigation: auto; }
@keyframes nf-page-out { to { opacity: 0; filter: blur(8px); transform: scale(1.012); } }
@keyframes nf-page-in { from { opacity: 0; filter: blur(12px); transform: translateY(14px); } }
::view-transition-old(root) { animation: nf-page-out .32s ease both; }
::view-transition-new(root) { animation: nf-page-in .62s cubic-bezier(.2, .7, .2, 1) both; }

/* ── Answering a touch ── */
/* Cards lift on their own colour, and a ring opens where the pointer lands. */
.sw-clean .sw-card-top { transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s ease; overflow: hidden; }
.sw-clean .sw-card:hover .sw-card-top { transform: translateY(-2px); box-shadow: 0 22px 40px -30px color-mix(in srgb, var(--sw-accent) 55%, #26302b), 0 0 0 1px color-mix(in srgb, var(--sw-accent) 18%, transparent); }
.sw-clean .sw-card .sw-img { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.sw-clean .sw-card:hover .sw-img { transform: scale(1.01); }
.nf-ring { position: absolute; z-index: 1; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none; border: 1px solid color-mix(in srgb, var(--sw-accent, #2f6b4f) 70%, transparent); animation: nf-ring 1.25s cubic-bezier(.2, .7, .2, 1) forwards; }
.nf-ring::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--sw-accent, #2f6b4f) 50%, transparent); animation: nf-ring 1.25s .16s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes nf-ring { from { transform: scale(.4); opacity: .9; } to { transform: scale(9); opacity: 0; } }

/* Buttons: light crosses them once, like sun between clouds. */
.sw .bcos-btn-ink, .bcos-btn-ink.sw-btn-buy { position: relative; overflow: hidden; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; }
.sw .bcos-btn-ink::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent); transform: skewX(-18deg); }
.sw .bcos-btn-ink:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -14px color-mix(in srgb, var(--nf-el, var(--sw-accent, #2f6b4f)) 60%, #16241c); }
.sw .bcos-btn-ink:hover::after { animation: nf-sheen .9s ease forwards; }
/* A submitted button shows the spinner (bcos.css), not the sheen stretched into its place. */
.sw .bcos-btn-ink.is-busy::after, .sw .bcos-btn-ink.is-busy:hover::after { inset: 0; margin: auto; width: 15px; height: 15px; background: none; transform: none; animation: bcos-spin .7s linear infinite; }
@keyframes nf-sheen { to { left: 130%; } }

/* Play buttons breathe once they are in reach. */
.sw-card:hover .sw-play, .sw-home-tag .sw-play:hover { animation: nf-breathe 1.8s ease-in-out infinite; }
@keyframes nf-breathe { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sw-accent, #2f6b4f) 40%, transparent); } 50% { box-shadow: 0 0 0 10px transparent; } }

@media (max-width: 760px) {
  .nf-el-dock { position: relative; left: auto; bottom: auto; translate: none; margin: 0 auto 22px; display: flex; width: max-content; }
}
@media (prefers-reduced-motion: reduce) {
  .sw.sw-home .sw-home-copy > *, .sw.sw-hero .sw-hero-in > * > *, .sw.sw-home .sw-home-stage, .sw.sw-clean.sw-home .sw-home-media .sw-img,
  .bcos-reveal.is-in :is(.sw-card, .sw-bundle, .sw-free-item), .sw-card:hover .sw-play, .nf-el-dot { animation: none; }
  .bcos-reveal.vx-w[class*="vx-w-software-"]:not(.is-in) { filter: none; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .sw .bcos-btn-ink:hover::after { animation: none; }
}

/* Long product names (Murmuration) stay inside their column. */
.sw.sw-clean.sw-hero h1 { font-size: clamp(40px, 4.4vw, 68px); overflow-wrap: break-word; }

/* ═════════ Product cards: the plug-in is the picture ═════════ */
.sw-clean .sw-card-top { perspective: 1100px; }
.sw-clean .sw-card-media { aspect-ratio: 1800 / 1320; }
.sw-clean .sw-card-media .sw-img {
  padding: 5px; padding: 1.5cqw; border-radius: clamp(14px, 1.9vw, 24px); filter: none;
  transform: rotateX(var(--nf-rx, 0deg)) rotateY(var(--nf-ry, 0deg)) translateZ(0); transform-origin: 50% 55%;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), filter .5s ease;
}
.sw-clean .sw-card:hover .sw-card-media .sw-img {
  transform: rotateX(var(--nf-rx, 0deg)) rotateY(var(--nf-ry, 0deg)) scale(1.012); transition-duration: .3s, .5s;
  filter: none;
}
/* the surface it rests on: a pool of the plug-in's own colour, and a light that follows the pointer */
.sw-clean .sw-card-top {
  background:
    radial-gradient(80% 60% at 50% 100%, color-mix(in srgb, var(--sw-accent) 26%, transparent), transparent 70%),
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--sw-accent) 15%, #f6f5f0), color-mix(in srgb, var(--sw-accent) 9%, #ecebe5));
}
.sw-clean .sw-card-top::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(42% 46% at var(--nf-gx, 50%) var(--nf-gy, 30%), rgba(255, 255, 255, .28), transparent 70%); mix-blend-mode: soft-light;
}
.sw-clean .sw-card:hover .sw-card-top::after { opacity: 1; }

/* Look closer */
.nf-zoom {
  all: unset; box-sizing: border-box; cursor: pointer; position: absolute; z-index: 3; right: 12px; top: 12px; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; color: var(--ink, #16241c); background: rgba(255, 255, 255, .9);   /* no backdrop blur: two per card, and dozens of them stall Safari's rendering */
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .35); opacity: 0; transform: scale(.86); transition: opacity .3s ease, transform .3s cubic-bezier(.2, .7, .2, 1), background-color .3s;
}
.sw-card:hover .nf-zoom, .nf-zoom:focus-visible { opacity: 1; transform: none; }
.nf-zoom:hover { background: #fff; transform: scale(1.08); }
.nf-zoom:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 2px; }
@media (hover: none) { .nf-zoom { opacity: 1; transform: none; } }

.nf-view-open { overflow: hidden; }
.nf-view {
  position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; align-items: center;
  gap: 0 clamp(4px, 2vw, 24px); padding: clamp(14px, 3vw, 40px);
  background: radial-gradient(70% 60% at 50% 42%, color-mix(in srgb, var(--sw-accent) 22%, rgba(250, 250, 247, .9)), rgba(244, 244, 240, .94));
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  opacity: 0; transition: opacity .35s ease;
}
.nf-view.is-open { opacity: 1; }
.nf-view-stage { grid-column: 2; grid-row: 1; margin: 0; position: relative; width: 100%; height: 100%; min-height: 0; cursor: zoom-out; }
.nf-view-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; cursor: default;
  filter: drop-shadow(0 50px 70px rgba(0, 0, 0, .34)) drop-shadow(0 6px 10px rgba(0, 0, 0, .2));
  transform: scale(.94) translateY(14px); opacity: 0; transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .45s ease;
}
.nf-view.is-open .nf-view-img:not(.is-next) { transform: none; opacity: 1; }
.nf-view-nav, .nf-view-x {
  all: unset; box-sizing: border-box; cursor: pointer; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; font-size: 26px; line-height: 1;
  color: var(--ink, #16241c); background: rgba(255, 255, 255, .8); box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .4); transition: transform .25s, background-color .25s;
}
.nf-view-nav:hover, .nf-view-x:hover { background: #fff; transform: scale(1.07); }
.nf-view-nav:focus-visible, .nf-view-x:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 2px; }
.nf-view-nav.is-prev { grid-column: 1; grid-row: 1; } .nf-view-nav.is-next { grid-column: 3; grid-row: 1; }
.nf-view-nav[hidden] { display: none; }
.nf-view-x { position: absolute; right: clamp(12px, 2.4vw, 28px); top: clamp(12px, 2.4vw, 28px); z-index: 2; }
.nf-view-foot { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding-top: clamp(12px, 2vw, 22px); max-width: 1080px; width: 100%; margin: 0 auto; }
.nf-view-foot strong { display: block; font-family: 'Fraunces', Georgia, serif; font-size: clamp(22px, 2.6vw, 32px); font-weight: 600; letter-spacing: -.02em; color: var(--ink, #16241c); }
.nf-view-foot span { color: color-mix(in srgb, var(--ink, #16241c) 62%, transparent); font-size: 15px; }
.nf-view-dots { display: flex; gap: 8px; } .nf-view-dots[hidden] { display: none; }
.nf-view-dots button { all: unset; cursor: pointer; width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--ink, #16241c) 22%, transparent); transition: background-color .3s, transform .3s; }
.nf-view-dots button[aria-current="true"] { background: var(--sw-accent); transform: scale(1.35); }
.nf-view-foot .bcos-btn { min-height: 44px; padding: 0 22px; border-radius: 99px; text-decoration: none; display: inline-flex; align-items: center; }
@media (max-width: 640px) {
  .nf-view { grid-template-columns: minmax(0, 1fr); }
  .nf-view-stage { grid-column: 1; }
  .nf-view-nav { position: absolute; top: 44%; z-index: 2; } .nf-view-nav.is-prev { left: 8px; } .nf-view-nav.is-next { right: 8px; }
  .nf-view-foot { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-clean .sw-card-media .sw-img, .nf-view, .nf-view-img { transition: none; }
}
@media (max-width: 640px) { .nf-zoom { width: 30px; height: 30px; right: 7px; top: auto; bottom: 7px; background: rgba(255, 255, 255, .86); } .nf-zoom svg { width: 14px; height: 14px; } }

/* ═════════ Hero: one frame filled by the plug-in, one card for preview / info / price ═════════ */
.nf-el-dock { display: none !important; }
.sw-home-stage.has-deck > .sw-home-media, .sw-home-stage.has-deck > .sw-home-tag { display: none; }
.sw.sw-home .sw-home-stage.has-deck { animation: nf-rise 1.5s .2s cubic-bezier(.2, .7, .2, 1) both; }
.nf-deck { display: grid; gap: 14px; }
.nf-deck-frame, .nf-deck-info {
  border-radius: clamp(18px, 2vw, 26px); background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--sw-accent) 14%, #f3f2ec));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sw-accent) 22%, transparent), 0 40px 70px -40px color-mix(in srgb, var(--sw-accent) 72%, #1c2a22), 0 14px 26px -20px rgba(0, 0, 0, .32);
  transition: box-shadow 1.2s ease, background 1.2s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}
/* the frame: the plug-in reaches its edges, with a rim of 1.5% of the frame's width */
.nf-deck-frame { position: relative; display: block; aspect-ratio: 1800 / 1320; overflow: hidden; container-type: inline-size; }
.nf-deck-frame img {
  position: absolute; inset: 6px; inset: 1.5cqw; width: calc(100% - 12px); width: calc(100% - 3cqw); height: calc(100% - 12px); height: calc(100% - 3cqw);
  object-fit: contain; border-radius: clamp(12px, 1.5vw, 21px); transition: opacity 1.3s ease;
}
.nf-deck-frame img.is-under { opacity: 0; }
.nf-deck-frame:hover { transform: translateY(-4px); }
/* the card: play, name and line, price */
.nf-deck-info { display: grid; padding: 11px 20px 11px 11px; }
.nf-deck-row { grid-area: 1 / 1; min-width: 0; display: flex; align-items: center; gap: 14px; transition: opacity 1.1s ease; }
.nf-deck-row.is-in, .nf-deck-row.is-out { opacity: 0; }
.nf-deck-row.is-out { pointer-events: none; }
.nf-deck-name { flex: 1; min-width: 0; display: grid; text-decoration: none; color: var(--ink) !important; line-height: 1.3; }
.nf-deck-name strong { font-size: 17px; letter-spacing: -.01em; } .nf-deck-name span { font-size: 14px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nf-deck-info .sw-price { font-weight: 650; font-size: 17px; white-space: nowrap; text-decoration: none; color: var(--ink) !important; }
.nf-deck-info .sw-price s { font-weight: 400; font-size: 14px; opacity: .55; margin-right: 5px; }
.nf-deck-play { all: unset; box-sizing: border-box; cursor: pointer; flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--ink, #16241c); color: #fff; transition: transform .3s cubic-bezier(.2, .7, .2, 1), background-color .3s; }
.nf-deck-play.is-look svg { margin-left: 2px; }
.nf-deck-play:hover { transform: scale(1.08); background: color-mix(in srgb, var(--sw-accent) 70%, #16241c); }
.nf-deck-play:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 2px; }
.nf-deck-dots { display: flex; justify-content: center; gap: 7px; padding-top: 2px; }
.nf-deck-dots button { all: unset; cursor: pointer; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--ink, #16241c) 20%, transparent); transition: background-color .4s, transform .4s, width .4s; }
.nf-deck-dots button[aria-current="true"] { background: var(--sw-accent); width: 22px; border-radius: 99px; }
.nf-deck-dots button:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 3px; }
@media (max-width: 520px) { .nf-deck-info { padding: 9px 14px 9px 9px; } .nf-deck-row { gap: 11px; } .nf-deck-info .sw-price s { display: none; } .nf-deck-play { width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { .nf-deck-frame, .nf-deck-frame img, .nf-deck-info, .nf-deck-row { transition: none; } }

/* ═════════ One rim everywhere: a plug-in picture sits 1.5% of the frame's width inside its frame ═════════ */
.sw-clean .sw-card-media, .sw-clean .sw-hero-media, .sw-clean .sw-listen-media, .sw-clean .sw-home-media, .sw-inside-media,
.sw-clean .sw-feature-media, .sw-clean .sw-shots figure, .sw-clean .sw-film-slide, .shx-card-media { container-type: inline-size; }
/* the rim is the picture's own padding: a frame cannot measure itself, only what is inside it can */
.sw-clean .sw-hero-media, .sw-clean .sw-listen-media { padding: 0; border-radius: clamp(18px, 2vw, 26px); }
.sw-clean .sw-hero-media .sw-img, .sw-clean .sw-listen-media .sw-img { display: block; box-sizing: border-box; width: 100%; height: auto; padding: 6px; padding: 1.5cqw; border-radius: clamp(16px, 2vw, 26px); filter: none; }
.sw-inside-media .sw-img { padding: 6px; padding: 1.5cqw; filter: none; border-radius: clamp(14px, 2vw, 26px); }
.sw-clean .sw-feature-media .sw-img, .sw-clean .sw-shots figure img, .sw-clean .sw-film-slide img { box-sizing: border-box; padding: 6px; padding: 1.5cqw; border-radius: clamp(14px, 2vw, 28px); }
.shx-card-media img { box-sizing: border-box; object-fit: contain !important; padding: 4px; padding: 1.5cqw; border-radius: clamp(12px, 1.6vw, 20px); }
/* frames wear the soft shadow now that the picture fills them */
.sw-clean .sw-hero-media, .sw-inside-media { box-shadow: 0 0 0 1px color-mix(in srgb, var(--sw-accent) 20%, transparent), 0 40px 70px -40px color-mix(in srgb, var(--sw-accent) 70%, #1c2a22); }

/* The small pictures keep the same 1.5% rim: gallery thumbnails, "pick up where you left off", free-product tiles. */
.sw-clean .sw-film-thumb { container-type: inline-size; border: 0; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); transition: opacity .2s, box-shadow .2s; }
.sw-clean .sw-film-thumb.is-on { box-shadow: 0 0 0 2px var(--ink); }
.sw-clean .sw-film-thumb .sw-img { display: block; box-sizing: border-box; width: 100%; height: auto; padding: 2px; padding: 1.5cqw; border-radius: 10px; }
.sw-seen-row img { width: 68px; height: 50px; padding: 1px; border-radius: 9px; box-sizing: border-box; }   /* 1.5% of 68px */
.sw-clean .sw-free-media { container-type: inline-size; aspect-ratio: 1800 / 1320; padding: 0; }
.sw-clean .sw-free-media img { box-sizing: border-box; width: 100%; height: 100%; object-fit: contain; padding: 2px; padding: 1.5cqw; border-radius: 14px; }

/* ═════════ Sign in / sign up / reset: the light look, with the weather in the side panel ═════════ */
body.bcos-auth.theme-cupertino { background: #f6f6f2; }
.theme-cupertino .bcos-auth-shell { grid-template-columns: minmax(300px, 46%) 1fr; min-height: 100vh; }
.theme-cupertino .bcos-auth-aside {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: clamp(2rem, 5vw, 4rem); color: #16241c; transition: --nf-el 2.6s ease;
  background:
    radial-gradient(70% 60% at 70% 30%, color-mix(in srgb, var(--nf-el) 16%, transparent), transparent 72%),
    linear-gradient(180deg, #f3f5f1, #e9eee9);
  border-right: 1px solid color-mix(in srgb, #16241c 8%, transparent);
}
.theme-cupertino .bcos-auth-aside > :not(canvas) { position: relative; z-index: 1; }
.theme-cupertino .bcos-auth-aside img { width: min(230px, 70%); height: auto; }
.theme-cupertino .bcos-auth-aside .bcos-kicker {
  margin: 0; max-width: 12em; color: #16241c; font-family: 'Fraunces', Georgia, serif; font-size: clamp(2rem, 3.6vw, 3.4rem); font-weight: 560;
  line-height: 1.04; letter-spacing: -.03em; text-transform: none;
}
.theme-cupertino .bcos-auth-aside .bcos-kicker .bcos-dot { display: none; }
.theme-cupertino .bcos-auth-card {
  box-shadow: 0 0 0 1px color-mix(in srgb, #16241c 7%, transparent), 0 40px 80px -50px rgba(22, 36, 28, .45); border-radius: 26px;
  animation: nf-rise 1s cubic-bezier(.2, .7, .2, 1) both;
}
.theme-cupertino .bcos-auth-card h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; }
.theme-cupertino .bcos-auth-card .bcos-form :is(input[type=text], input[type=email], input[type=password], input:not([type])) { border-radius: 12px; min-height: 48px; }
.theme-cupertino .bcos-auth-card .bcos-form .bcos-btn-ink { min-height: 50px; border-radius: 99px; }
@media (max-width: 860px) {
  .theme-cupertino .bcos-auth-shell { grid-template-columns: 1fr; min-height: 0; }
  .theme-cupertino .bcos-auth-aside { min-height: 180px; padding: 1.6rem; border-right: 0; border-bottom: 1px solid color-mix(in srgb, #16241c 8%, transparent); }
  .theme-cupertino .bcos-auth-aside .bcos-kicker { font-size: 1.7rem; }
  .theme-cupertino .bcos-auth-aside img { width: 170px; }
}
@media (prefers-reduced-motion: reduce) { .theme-cupertino .bcos-auth-card { animation: none; } }
.theme-cupertino .bcos-auth-card > .bcos-brand { display: none; }            /* the logo is already in the side panel */
.theme-cupertino .bcos-auth-card { margin-block: clamp(1.5rem, 5vh, 3.5rem); }
@media (min-width: 861px) { .theme-cupertino .bcos-auth-aside { position: sticky; top: 0; height: 100vh; box-sizing: border-box; } }

/* ═════════ Switches from the console (Storefront & sales) ═════════ */
.nf-no-salebadge .sw-badge.is-sale { display: none !important; }
.nf-no-saleline .sw-sale-tag { display: none !important; }
.nf-no-was .sw-price s { display: none !important; }
.nf-motion-calm .nf-el-canvas { opacity: .5; }
.nf-motion-vivid .nf-el-canvas { filter: saturate(1.7) contrast(1.12); }
.nf-no-reveal .bcos-reveal, .nf-no-reveal .bcos-reveal.vx-w[class*="vx-w-software-"]:not(.is-in) { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
.nf-no-reveal .bcos-reveal.is-in :is(.sw-card, .sw-bundle, .sw-free-item), .nf-no-reveal .sw.sw-home .sw-home-copy > *, .nf-no-reveal .sw.sw-hero .sw-hero-in > * > *, .nf-no-reveal .sw.sw-home .sw-home-stage.has-deck { animation: none !important; }
html:has(body.nf-no-pagefx)::view-transition-old(root), html:has(body.nf-no-pagefx)::view-transition-new(root) { animation: none; }

/* Sale colours stay readable even when a sale is given a very pale colour. */
.sw-salebar.is-pale, .sw-salebar.is-pale a, .sw-salebar.is-pale a * { color: #16241c !important; }
.sw-salebar.is-pale { box-shadow: inset 0 -1px 0 rgba(22, 36, 28, .12); }
.sw-sale-tag, .sw-sale-tag strong, .sw-sale-tag .sw-count { color: color-mix(in srgb, var(--sw-sale, #2f6b4f) 55%, #16241c); }
.sw-sale-tag a { color: #16241c; }
.sw-badge.is-sale { background: color-mix(in srgb, var(--sw-sale, #2f6b4f) 72%, #16241c); color: #fff; }

/* ── Footer: logo, contact and social icons beside the link columns ── */
/* (selectors carry the theme classes so they outrank the directory footer's own link rules) */
.theme-cupertino.ftr-directory .bcos-foot-top:has(.nf-foot-brand) { grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); gap: 2.4rem 3.2rem; align-items: start; }
.theme-cupertino.ftr-directory .bcos-foot .nf-foot-brand, .bcos-foot .nf-foot-brand { display: grid; gap: 1.1rem; align-content: start; justify-items: start; padding: 0; border: 0; }
.theme-cupertino.ftr-directory .bcos-foot .nf-foot-brand a.nf-foot-logo, .bcos-foot a.nf-foot-logo { display: inline-block; padding: 0; line-height: 0; }
.bcos-foot .nf-foot-logo img { display: block; height: 40px; width: auto; }
.bcos-foot .nf-foot-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.theme-cupertino.ftr-directory .bcos-foot .nf-foot-contact li, .theme-cupertino.ftr-directory .bcos-foot .nf-foot-contact a,
.bcos-foot .nf-foot-contact li, .bcos-foot .nf-foot-contact a {
  display: flex; align-items: center; gap: .7rem; padding: 0; margin: 0; font-size: .9rem; line-height: 1.35; letter-spacing: 0; color: var(--ink-2, #2b3a31); text-decoration: none; }
.theme-cupertino.ftr-directory .bcos-foot .nf-foot-contact a:hover, .bcos-foot .nf-foot-contact a:hover { color: var(--th-accent, #2f6b4f); text-decoration: none; }
.bcos-foot .nf-foot-ic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--th-accent, #2f6b4f);
  background: color-mix(in srgb, var(--th-accent, #2f6b4f) 11%, transparent); transition: background .2s ease, color .2s ease, transform .2s ease; }
.bcos-foot .nf-foot-contact a:hover .nf-foot-ic { background: var(--th-accent, #2f6b4f); color: #fff; transform: translateY(-1px); }
.bcos-foot .nf-foot-social { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .2rem; }
.theme-cupertino.ftr-directory .bcos-foot .nf-foot-social a, .bcos-foot .nf-foot-social a {
  width: 40px; height: 40px; padding: 0; border-radius: 50%; display: grid; place-items: center; line-height: 0; color: var(--ink, #16241c);
  border: 1px solid color-mix(in srgb, var(--ink, #16241c) 16%, transparent); background: transparent; text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.theme-cupertino.ftr-directory .bcos-foot .nf-foot-social a:hover, .bcos-foot .nf-foot-social a:hover { background: var(--ink, #16241c); border-color: var(--ink, #16241c); color: #fff; transform: translateY(-2px); text-decoration: none; }
/* no "opens in a new tab" arrow on the icon buttons or the logo: the label says where they go */
.bcos-foot .nf-foot-social a::after, .bcos-foot .nf-foot-social a::before, .bcos-foot a.nf-foot-logo::after, .bcos-foot .nf-foot-contact a::after { content: none !important; display: none !important; }
.bcos-foot .nf-foot-social svg { display: block; }
.bcos-foot .nf-foot-social a:focus-visible, .bcos-foot .nf-foot-contact a:focus-visible, .bcos-foot .nf-foot-logo:focus-visible { outline: 3px solid color-mix(in srgb, var(--th-accent, #2f6b4f) 45%, transparent); outline-offset: 3px; border-radius: 99px; }
@media (max-width: 860px) {
  .theme-cupertino.ftr-directory .bcos-foot-top:has(.nf-foot-brand) { grid-template-columns: 1fr; gap: 1.8rem; }
  .theme-cupertino.ftr-directory .bcos-foot .nf-foot-brand, .bcos-foot .nf-foot-brand { width: 100%; padding-bottom: 1.6rem; border-bottom: 1px solid var(--cu-line, rgba(0,0,0,.1)); }
}
@media (prefers-reduced-motion: reduce) { .bcos-foot .nf-foot-ic, .bcos-foot .nf-foot-social a { transition: none; } }
.bcos-foot .nf-foot-social .bcos-ext, .bcos-foot .nf-foot-logo .bcos-ext { display: none; }   /* the icon button's label already says where it goes */

/* Footer: the ways to pay */
.bcos-foot .nf-foot-pay { list-style: none; margin: 26px 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; width: 100%; }
.bcos-foot .nf-foot-pay li { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 7px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); background: color-mix(in srgb, currentColor 5%, transparent); font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.bcos-foot .nf-foot-pay { gap: 7px; align-items: center; }
.bcos-foot .nf-foot-pay li.has-img { height: auto; padding: 0; border: 0; background: none; border-radius: 0; }
.bcos-foot .nf-foot-pay img { display: block; width: 48px; height: 30px; }

/* ═════════ Bag and checkout in the store's own look ═════════
   The shop pages keep their structure (bcos-shop.css); here they take the paper, the green and the type of the store. */
body.tpl-software { --nf-paper: color-mix(in srgb, var(--th-accent, #2f6b4f) 5%, #faf9f6); --nf-panel: color-mix(in srgb, var(--th-accent, #2f6b4f) 9%, #f3f2ed); --nf-hair: color-mix(in srgb, var(--ink, #16241c) 11%, transparent); --nf-green: var(--th-accent, #2f6b4f); }
body.tpl-software :is(.shx-pagehead, .shx-cartwrap, .shx-co, .shx-drawer, .shx-order, .shx-track) { --surface-2: var(--nf-paper); --surface-3: var(--nf-panel); --line: var(--nf-hair); }
/* a wash of morning light behind the page head, and a tree line where it ends */
body.tpl-software main:has(> .shx-cartwrap, > .shx-co) { position: relative; background: linear-gradient(180deg, color-mix(in srgb, var(--nf-green) 9%, #f6f5f0) 0, var(--bg, #fff) 420px); }
body.tpl-software main:has(> .shx-cartwrap, > .shx-co)::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 150px; pointer-events: none; opacity: .5;
  background: radial-gradient(40% 120% at 85% 0, color-mix(in srgb, #e3a35c 22%, transparent), transparent 70%), radial-gradient(50% 120% at 10% 0, color-mix(in srgb, var(--nf-green) 16%, transparent), transparent 70%); }
body.tpl-software main:has(> .shx-cartwrap, > .shx-co) > * { position: relative; }
body.tpl-software .shx-pagehead .bcos-kicker { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--nf-green); }
body.tpl-software .shx-pagehead .bcos-kicker .bcos-dot { display: none; }
body.tpl-software :is(.shx-pagehead, .shx-co-head) .shx-title { font-size: clamp(38px, 5vw, 58px); line-height: 1.02; }
/* panels: paper, soft edges, no hard borders */
body.tpl-software .shx-summary { background: var(--nf-paper); border-radius: 26px; box-shadow: 0 0 0 1px var(--nf-hair), 0 30px 60px -44px color-mix(in srgb, var(--nf-green) 60%, #16241c); }
body.tpl-software .shx-summary h2, body.tpl-software .shx-drawer-h h2 { font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif; font-weight: 520; font-size: 1.35rem; letter-spacing: -.02em; }
body.tpl-software .shx-sec { border: 0; background: #fff; border-radius: 24px; box-shadow: 0 0 0 1px var(--nf-hair), 0 24px 50px -44px color-mix(in srgb, var(--nf-green) 55%, #16241c); padding: 1.5rem 1.6rem 1.6rem; }
body.tpl-software .shx-sec legend { float: left; width: 100%; margin: 0 0 1.1rem; padding: 0; font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif; font-weight: 520; font-size: 1.4rem; letter-spacing: -.02em; }
body.tpl-software .shx-sec legend + * { clear: both; }
body.tpl-software .shx-sec-n { background: color-mix(in srgb, var(--nf-green) 14%, #fff); color: var(--nf-green); font-family: system-ui, sans-serif; font-weight: 700; width: 1.9rem; height: 1.9rem; }
body.tpl-software .shx-steps li { background: #fff; box-shadow: 0 0 0 1px var(--nf-hair); border-radius: 99px; }
body.tpl-software .shx-steps li.is-on, body.tpl-software .shx-steps li[aria-current] { background: var(--nf-green); color: #fff; box-shadow: none; }
/* fields */
body.tpl-software :is(.shx-f, .shx-code-row) :is(input, select, textarea) { border-radius: 14px; border-color: var(--nf-hair); background-color: #fff; transition: border-color .2s, box-shadow .2s, background-color .2s; }
body.tpl-software :is(.shx-f, .shx-code-row) :is(input, select, textarea):focus { outline: 0; border-color: var(--nf-green); background-color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--nf-green) 16%, transparent); }
body.tpl-software .shx-f { color: color-mix(in srgb, var(--ink, #16241c) 70%, transparent); }
body.tpl-software .shx-check input, body.tpl-software .shx-opt input { accent-color: var(--nf-green); }
/* ways to pay */
body.tpl-software .shx-opt:not(.is-rail) { border-color: var(--nf-hair); border-radius: 18px; background: var(--nf-paper); transition: border-color .2s, box-shadow .2s, background-color .2s; }
body.tpl-software .shx-opt:not(.is-rail):has(input:checked) { border-color: var(--nf-green); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-green) 14%, transparent); outline: 0; }
/* lines in the bag */
body.tpl-software :is(.shx-line-img, .shx-mini-img) { background: var(--nf-panel); border-radius: 16px; }
body.tpl-software .shx-line-img img { object-fit: contain; padding: 6px; }
body.tpl-software .shx-mini-img { object-fit: contain; }
body.tpl-software .shx-line-t { font-size: 1.08rem; }
body.tpl-software .shx-stepper { border-radius: 99px; border-color: var(--nf-hair); overflow: hidden; }
body.tpl-software .shx-mini-q, body.tpl-software .shx-drawer-ok i { background-color: var(--nf-green); }
body.tpl-software .shx-drawer-ok i { background: none; color: var(--nf-green); }
body.tpl-software .shx-drawer-ok { background: color-mix(in srgb, var(--nf-green) 10%, #fff); border-radius: 14px; }
body.tpl-software .shx-drawer-panel { background: var(--nf-paper); }
body.tpl-software .shx-trust { border-radius: 16px; }
body.tpl-software .shx-summary .shx-trust { background: #fff; box-shadow: 0 0 0 1px var(--nf-hair); }
body.tpl-software .shx-sum .is-grand { border-color: var(--nf-hair); }
body.tpl-software :is(.shx-cta, .shx-place) { min-height: 54px; font-size: 1.02rem; }
body.tpl-software .shx-back { color: var(--nf-green); font-weight: 600; }
body.tpl-software .shx-empty-ico { background: var(--nf-panel); color: var(--nf-green); }

/* Home headline: two lines, as written */
@media (min-width: 1000px) { .sw.sw-home .sw-home-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sw.sw-home .sw-home-title { font-size: clamp(36px, 4.1vw, 56px); line-height: 1.04; }

/* ═════════ The journey (nf-journey.js) ═════════ */
/* light in the air: over the page, under the header, never in the way */
.nf-j-air { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; }
.nf-j-on .nf-j-air { opacity: 1; }
/* the hour colours the top of the page, very lightly */
html.nf-j-on body.tpl-software::before { content: ''; position: fixed; inset: 0 0 auto 0; height: 46vh; z-index: 2; pointer-events: none; opacity: .5;
  background: radial-gradient(60% 100% at 50% -30%, rgba(var(--nf-j-air, 104,166,120), .12), transparent 72%); transition: background 1.2s ease; }
/* arriving */
.nf-rise { opacity: 0; transform: translateY(16px); filter: blur(5px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1), filter .9s ease; }
.nf-rise.is-in { opacity: 1; transform: none; filter: none; }
/* leaving, and pictures that travel */
html.nf-leaving main { opacity: .72; transition: opacity .28s ease; }
::view-transition-group(*) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
/* on and off */
.nf-j-toggle { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-size: inherit; color: inherit; opacity: .75; margin-left: 18px; }
.nf-j-toggle:hover, .nf-j-toggle:focus-visible { opacity: 1; text-decoration: underline; }
.nf-j-toggle i { width: 9px; height: 9px; border-radius: 0 80% 0 80%; background: currentColor; opacity: .45; }
.nf-j-toggle[aria-pressed="true"] i { background: var(--th-accent, #2f6b4f); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .nf-j-air { display: none !important; } .nf-rise { opacity: 1; transform: none; filter: none; } }
@media print { .nf-j-air { display: none !important; } }

/* ═════════ The closing offer ═════════ */
.sw.sw-clean.sw-close { position: relative; overflow: hidden; isolation: isolate; text-align: left; margin-top: clamp(48px, 7vw, 104px); padding: clamp(40px, 5.4vw, 76px) clamp(22px, 5vw, 72px);
  background: radial-gradient(70% 90% at 88% 108%, color-mix(in srgb, var(--sw-accent) 34%, transparent), transparent 70%), radial-gradient(60% 80% at 4% -10%, color-mix(in srgb, #e3a35c 20%, transparent), transparent 70%), color-mix(in srgb, var(--sw-accent) 9%, #f4f3ee);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sw-accent) 22%, transparent), 0 50px 90px -60px color-mix(in srgb, var(--sw-accent) 80%, #16241c); }
.sw-close-sky { position: absolute; inset: 0; z-index: -1; opacity: .9; }
/* a line of trees along the foot of the panel */
.sw.sw-clean.sw-close::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 74px; z-index: -1; pointer-events: none; opacity: .16;
  background: color-mix(in srgb, var(--sw-accent) 60%, #16241c);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 74'%3E%3Cpath d='M0 74V58l10-18 6 10 9-26 8 20 7-12 9 24 8-34 10 30 6-10 9 18 8-28 9 24 7-14 10 22 8-36 9 32 7-12 8 16 8-22 5 18v-2z'/%3E%3C/svg%3E") repeat-x bottom / 180px 74px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 74'%3E%3Cpath d='M0 74V58l10-18 6 10 9-26 8 20 7-12 9 24 8-34 10 30 6-10 9 18 8-28 9 24 7-14 10 22 8-36 9 32 7-12 8 16 8-22 5 18v-2z'/%3E%3C/svg%3E") repeat-x bottom / 180px 74px; }
.sw-close-in { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .sw-close.has-media .sw-close-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.sw-close .sw-kicker { margin: 0 0 12px; }
.sw.sw-clean.sw-close h2 { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.02; text-wrap: balance; }
.sw-close .sw-close-price { justify-content: flex-start; margin: 18px 0 4px; }
.sw-close-ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; font-size: 15.5px; color: var(--ink); }
.sw-close-ticks li { display: flex; align-items: center; gap: 10px; }
.sw-close-ticks i { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--th-accent, #2f6b4f); font-size: 10px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--sw-accent) 26%, transparent); }
.sw-close .sw-actions { justify-content: flex-start; margin-top: 28px; }
.sw-close .sw-actions .bcos-btn { min-height: 54px; padding-inline: 28px; font-size: 16.5px; }
.sw-close-media { position: relative; }
.sw-close-media .sw-img { display: block; width: 100%; height: auto; border-radius: clamp(14px, 1.8vw, 24px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 40px 70px -40px color-mix(in srgb, var(--sw-accent) 75%, #16241c); transform: rotate(1.2deg); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.sw-close:hover .sw-close-media .sw-img { transform: rotate(0deg); }
@media (max-width: 899px) { .sw-close-media { order: -1; } .sw-close-media .sw-img { transform: none; } }

/* ═════════ More bundles ═════════ */
.sw-more-bundles .vx-head { margin-bottom: clamp(22px, 3vw, 36px); }
@media (min-width: 860px) {
  .sw-more-bundles .sw-cards.sw-cols-2 > .sw-bundle:only-child { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; padding: clamp(14px, 1.6vw, 22px); gap: clamp(8px, 2vw, 28px); }
  .sw-more-bundles .sw-bundle:only-child .sw-bundle-media { height: auto; align-self: center; }
  .sw-more-bundles .sw-bundle:only-child .vx-card-body { justify-content: center; padding: clamp(14px, 2vw, 30px) clamp(14px, 2vw, 30px) clamp(14px, 2vw, 30px) 0; }
}
.sw-more-bundles .sw-bundle { position: relative; overflow: hidden; isolation: isolate; border-radius: clamp(22px, 2.6vw, 34px);
  background: radial-gradient(60% 90% at 100% 110%, color-mix(in srgb, var(--sw-accent, #2f6b4f) 22%, transparent), transparent 70%), var(--sw-paper);
  box-shadow: 0 0 0 1px var(--sw-hair), 0 40px 80px -60px color-mix(in srgb, var(--sw-accent, #2f6b4f) 70%, #16241c); transition: box-shadow .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.sw-more-bundles .sw-bundle:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sw-accent, #2f6b4f) 30%, transparent), 0 46px 84px -56px color-mix(in srgb, var(--sw-accent, #2f6b4f) 80%, #16241c); }
.sw-more-bundles .sw-bundle-media { border-radius: clamp(14px, 1.8vw, 22px); overflow: hidden; background: none; box-shadow: 0 24px 50px -34px rgba(22, 36, 28, .55); }
.sw-more-bundles .sw-bundle .sw-card-k { color: var(--th-accent, #2f6b4f); font-weight: 700; }
.sw.sw-serif .sw-more-bundles .vx-card-title, .sw-more-bundles.sw-serif .vx-card-title { font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif; font-weight: 520; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.025em; line-height: 1.05; }
.sw-more-bundles .sw-ticks li { background: #fff; box-shadow: 0 0 0 1px var(--sw-hair); }
.sw-more-bundles .sw-bundle-buy { margin-top: 14px; padding-top: 18px; border-top: 1px solid var(--sw-hair); }
.sw-more-bundles .sw-once strong { font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif; font-weight: 560; font-size: 34px; }

/* ── The journey, grown: night sky, the vine's company, the shoreline, a sprig on every kicker ── */
/* a faint aurora once it is night */
html.nf-j-on[data-nf-hour="night"] body.tpl-software::before { height: 60vh; opacity: .75;
  background: radial-gradient(50% 90% at 22% -20%, rgba(96, 214, 170, .13), transparent 70%), radial-gradient(46% 90% at 70% -24%, rgba(140, 126, 236, .14), transparent 70%), radial-gradient(60% 100% at 50% -30%, rgba(var(--nf-j-air, 112,142,228), .1), transparent 72%);
  background-size: 140% 100%, 150% 100%, 100% 100%; animation: nf-j-aurora 26s ease-in-out infinite alternate; }
@keyframes nf-j-aurora { from { background-position: 0 0, 100% 0, 0 0; } to { background-position: 100% 0, 0 0, 0 0; } }
/* dawn mist low in the window */
html.nf-j-on[data-nf-hour="dawn"] body.tpl-software::after { content: ''; position: fixed; inset: auto 0 0 0; height: 30vh; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, rgba(var(--nf-j-air, 236,176,110), .09), transparent); }
/* the shoreline */
.nf-shore { position: relative; height: 26px; margin-top: -26px; overflow: hidden; pointer-events: none; }
.nf-shore svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nf-shore path { fill: currentColor; }
.nf-shore-a { opacity: .55; animation: nf-j-tide 19s linear infinite; }
.nf-shore-b { animation: nf-j-tide 31s linear infinite reverse; transform-origin: center; }
@keyframes nf-j-tide { from { transform: translateX(0); } to { transform: translateX(-360px); } }
.nf-shore svg { width: 133.4%; }
.bcos-foot.nf-has-shore { border-top-color: transparent !important; }
/* a sprig before each kicker */
.sw .sw-kicker::before, body.tpl-software .shx-pagehead .bcos-kicker::before { content: ''; display: inline-block; width: .62em; height: .62em; margin-right: .55em; border-radius: 0 80% 0 80%; background: currentColor; opacity: .7; transform: rotate(-12deg); vertical-align: .02em; }
.nf-rise .sw-kicker::before { transform: rotate(-12deg) scale(0); transition: transform .8s .25s cubic-bezier(.3, 1.5, .5, 1); }
.nf-rise.is-in .sw-kicker::before { transform: rotate(-12deg) scale(1); }
@media (prefers-reduced-motion: reduce) { .nf-shore path, html.nf-j-on[data-nf-hour="night"] body.tpl-software::before { animation: none; } }

/* ═════════ The story (the About page; blocks in software-parts/story.php) ═════════ */
.st { --st-ink: var(--ink, #16241c); --st-green: var(--th-accent, #2f6b4f); --st-paper: color-mix(in srgb, var(--st-green) 5%, #faf9f6); position: relative; }
.st .vx-head.st-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 52px); }
.st .st-head .vx-h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.03; text-wrap: balance; }
.st h3 { font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif; font-weight: 520; letter-spacing: -.02em; }
.st-glyph { width: 100%; height: 100%; display: block; }

/* the cover */
.st-cover { min-height: min(90vh, 880px); display: grid; align-items: start; overflow: hidden; isolation: isolate; }
.st-cover-art, .st-cover-sky { position: absolute; inset: 0; z-index: -1; }
.st-cover-sky { opacity: .8; }
.st-land, .st-cover-photo { width: 100%; height: 100%; display: block; object-fit: cover; }
.st-sky-a { stop-color: color-mix(in srgb, rgb(var(--nf-j-air, 236,176,110)) 16%, #f8f4ea); } .st-sky-b { stop-color: #eef2ea; }
.st-ridge-3 { fill: color-mix(in srgb, var(--st-green) 16%, #eef0e8); } .st-ridge-2 { fill: color-mix(in srgb, var(--st-green) 30%, #e6ebe1); }
.st-bar-a { stop-color: color-mix(in srgb, var(--st-green) 78%, #16241c); } .st-bar-b { stop-color: color-mix(in srgb, var(--st-green) 46%, #dfe6da); }
.st-wave { stroke: color-mix(in srgb, var(--st-green) 70%, #16241c); stroke-width: 2; stroke-linejoin: round; opacity: .55; stroke-dasharray: 4200; stroke-dashoffset: 4200; animation: st-draw 3.4s .5s cubic-bezier(.3, .6, .2, 1) forwards; }
@keyframes st-draw { to { stroke-dashoffset: 0; } }
.st-bars rect { transform-box: fill-box; transform-origin: 50% 100%; animation: st-grow 1.5s cubic-bezier(.2, .8, .2, 1) both, st-breathe 5.5s 1.6s ease-in-out infinite alternate; }
.st-bars rect:nth-child(3n) { animation-delay: .18s, 2s; animation-duration: 1.5s, 6.7s; } .st-bars rect:nth-child(3n+1) { animation-delay: .34s, 2.6s; animation-duration: 1.5s, 4.9s; }
.st-bars rect:nth-child(7n) { animation-delay: .5s, 1.2s; animation-duration: 1.7s, 7.4s; }
@keyframes st-grow { from { transform: scaleY(.04); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes st-breathe { from { transform: scaleY(1); } to { transform: scaleY(.9); } }
.st-sun { transform-box: fill-box; transform-origin: center; animation: st-rise 3.2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes st-rise { from { transform: translateY(150px) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
.st-rings circle { stroke: color-mix(in srgb, #e0a04c 60%, transparent); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; opacity: 0; animation: st-ring 7s 2.4s ease-out infinite; }
.st-rings circle:nth-child(2) { animation-delay: 4.1s; } .st-rings circle:nth-child(3) { animation-delay: 5.8s; } .st-rings circle:nth-child(4) { animation-delay: 7.5s; }
@keyframes st-ring { 0% { transform: scale(.5); opacity: 0; } 18% { opacity: .5; } 100% { transform: scale(1.25); opacity: 0; } }
.st-cover-in { position: relative; padding-block: clamp(72px, 12vh, 150px) clamp(260px, 36vh, 380px); }
.st-cover-in::before { content: ''; position: absolute; inset: -10% -30% 10% -40%; z-index: -1; background: radial-gradient(50% 55% at 34% 42%, rgba(250, 249, 244, .88), transparent 72%); pointer-events: none; }
.st.st-cover .st-cover-title { margin: 14px 0 0; font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif; font-weight: 500; font-size: clamp(50px, 8.4vw, 124px); line-height: .95; letter-spacing: -.04em; color: var(--st-ink); text-wrap: balance; max-width: 11em; animation: st-up 1.2s .15s cubic-bezier(.2, .7, .2, 1) both; }
.st-cover-lead { max-width: 34em; margin: 26px 0 0; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.55; color: color-mix(in srgb, var(--st-ink) 82%, transparent); animation: st-up 1.2s .35s cubic-bezier(.2, .7, .2, 1) both; }
.st-cover .sw-actions { margin-top: 32px; animation: st-up 1.2s .5s cubic-bezier(.2, .7, .2, 1) both; align-items: center; }
.st-cover .sw-video { margin: 0; min-width: 260px; }
@keyframes st-up { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.st-cover-cue { position: absolute; left: 50%; bottom: 22px; width: 26px; height: 42px; margin-left: -13px; border-radius: 99px; border: 1.5px solid rgba(255, 255, 255, .8); background: rgba(22, 36, 28, .18); backdrop-filter: blur(6px); }
.st-cover-cue i { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: #fff; animation: st-cue 1.9s ease-in-out infinite; }
@keyframes st-cue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }
.st-cover.has-photo .st-cover-in::before { background: radial-gradient(50% 55% at 34% 42%, rgba(250, 249, 244, .92), transparent 74%); }

/* the letter */
.st-letter-in { max-width: 860px; scroll-margin-top: 90px; }
.st-letter-body p { margin: 0 0 1.15em; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.7; color: color-mix(in srgb, var(--st-ink) 86%, transparent); }
.st-letter-body p:first-child { font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif; font-size: clamp(24px, 2.7vw, 36px); line-height: 1.32; letter-spacing: -.015em; color: var(--st-ink); }
.st-letter-body p:first-child::first-letter { float: left; font-size: 3.1em; line-height: .86; padding: .06em .12em 0 0; color: var(--st-green); font-weight: 560; }
.st-sign { margin: 1.6em 0 0; font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif; font-style: italic; font-size: 20px; color: var(--st-green); }

/* the trail */
.st-steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: clamp(18px, 2.4vw, 30px); counter-reset: none; }
.st-steps::before { content: ''; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 2px; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--st-green) 46%, transparent) 0 7px, transparent 7px 15px); }
.st-step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: clamp(16px, 2.4vw, 30px); align-items: start; }
.st-step-n { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--st-green) 26%, transparent), 0 14px 26px -16px color-mix(in srgb, var(--st-green) 70%, #16241c); font-family: 'Fraunces', Georgia, serif; font-size: 19px; font-weight: 560; color: var(--st-green); }
.st-step-b { padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 32px); border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--st-ink) 8%, transparent); }
.st-step-b h3 { margin: 0 0 6px; font-size: clamp(22px, 2.2vw, 28px); }
.st-step-b p { margin: 0; font-size: 16.5px; line-height: 1.62; color: color-mix(in srgb, var(--st-ink) 78%, transparent); }
@media (min-width: 980px) {
  .st-steps::before { left: 50%; margin-left: -1px; }
  .st-step { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); }
  .st-step-n { grid-column: 2; grid-row: 1; }
  .st-step-b { grid-column: 1; grid-row: 1; text-align: right; }
  .st-step:nth-child(even) .st-step-b { grid-column: 3; text-align: left; }
}

/* the craft */
.st-craft-list { display: grid; gap: clamp(44px, 7vw, 104px); }
.st-craft-item { display: grid; gap: clamp(22px, 4vw, 64px); align-items: center; }
@media (min-width: 900px) { .st-craft-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); } .st-craft-item.is-flip .st-craft-pic { order: -1; } .st-craft-item.no-pic { grid-template-columns: minmax(0, 720px); } }
.st-craft-ic { display: grid; place-items: center; width: 68px; height: 68px; padding: 15px; border-radius: 22px; background: var(--st-paper); color: var(--st-green); box-shadow: 0 0 0 1px color-mix(in srgb, var(--st-green) 18%, transparent); }
.st-craft-copy h3 { margin: 20px 0 10px; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.04; }
.st-craft-copy p { margin: 0 0 .9em; font-size: 17.5px; line-height: 1.65; color: color-mix(in srgb, var(--st-ink) 80%, transparent); max-width: 34em; }
.st-craft-pic { position: relative; display: block; padding: clamp(14px, 2vw, 26px); border-radius: clamp(22px, 2.6vw, 34px); text-decoration: none;
  background: radial-gradient(80% 60% at 50% 100%, color-mix(in srgb, var(--sw-accent, #2f6b4f) 28%, transparent), transparent 70%), color-mix(in srgb, var(--sw-accent, #2f6b4f) 9%, #f3f2ed);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sw-accent, #2f6b4f) 18%, transparent), 0 44px 80px -56px color-mix(in srgb, var(--sw-accent, #2f6b4f) 80%, #16241c); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.st-craft-pic:hover { transform: translateY(-3px); }
.st-craft-pic .sw-img { display: block; width: 100%; height: auto; border-radius: clamp(12px, 1.6vw, 20px); }
.st-craft-pic span { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); padding: 7px 16px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--st-ink) 10%, transparent), 0 10px 22px -12px rgba(22, 36, 28, .4); font-size: 13.5px; font-weight: 600; color: var(--st-ink); white-space: nowrap; }

/* the numbers: a band of night */
.st.st-numbers { padding: clamp(56px, 8vw, 110px) 0; background: radial-gradient(60% 120% at 80% 0, color-mix(in srgb, var(--st-green) 46%, transparent), transparent 70%), radial-gradient(50% 100% at 8% 110%, rgba(227, 163, 92, .16), transparent 70%), #14211a; color: #f2efe4; overflow: hidden; }
.st-numbers .sw-kicker { color: #e3c58a; } .st.st-numbers .vx-h2 { color: #f6f3ea; }
.st-nums { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(22px, 3vw, 44px); }
.st-num dt { font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif; font-weight: 480; font-size: clamp(54px, 7vw, 100px); line-height: .95; letter-spacing: -.04em; color: #f6f3ea; }
.st-num dd { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid rgba(242, 239, 228, .22); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(242, 239, 228, .72); }

/* every plug-in */
.st-faces-rail { overflow: hidden; padding: 8px 0 34px; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.st-faces-row { display: inline-flex; gap: clamp(14px, 1.8vw, 24px); padding-inline: 4vw; width: max-content; animation: st-drift 110s linear infinite alternate; }
.st-faces-rail:hover .st-faces-row, .st-faces-rail:focus-within .st-faces-row { animation-play-state: paused; }
@keyframes st-drift { from { transform: translateX(0); } to { transform: translateX(calc(-100% + 100vw)); } }
.st-face { position: relative; flex: none; width: clamp(230px, 24vw, 340px); padding: 10px; border-radius: 22px; text-decoration: none; background: color-mix(in srgb, var(--sw-accent, #2f6b4f) 10%, #f6f5f0); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sw-accent, #2f6b4f) 18%, transparent); transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s; }
.st-face:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sw-accent, #2f6b4f) 34%, transparent), 0 30px 50px -34px color-mix(in srgb, var(--sw-accent, #2f6b4f) 80%, #16241c); }
.st-face .sw-img { display: block; width: 100%; height: auto; border-radius: 14px; }
.st-face span { display: block; padding: 10px 6px 4px; font-size: 14.5px; font-weight: 600; color: var(--st-ink); }
@media (hover: none) { .st-faces-rail { overflow-x: auto; } .st-faces-row { animation: none; } }

/* film */
.st-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 22px; }

/* the team */
.st-team-photo { margin: 0 0 clamp(28px, 4vw, 52px); }
.st-team-photo img { display: block; width: 100%; height: auto; border-radius: clamp(20px, 2.4vw, 32px); }
.st-team-photo figcaption { margin-top: 10px; font-size: 14px; color: color-mix(in srgb, var(--st-ink) 60%, transparent); }
.st-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(18px, 2.4vw, 30px); }
.st-person { padding: clamp(20px, 2.2vw, 28px); border-radius: 24px; background: var(--st-paper); box-shadow: 0 0 0 1px color-mix(in srgb, var(--st-ink) 8%, transparent); transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s; }
.st-person:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--st-green) 26%, transparent), 0 30px 54px -40px color-mix(in srgb, var(--st-green) 80%, #16241c); }
.st-person-pic { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; margin-bottom: 18px; background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--st-green) 20%, transparent); }
.st-person-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-person-pic.is-drawn { padding: 22px; color: var(--st-green); background: radial-gradient(circle at 30% 25%, #fff, color-mix(in srgb, var(--st-green) 12%, #fff)); }
.st-person h3 { margin: 0; font-size: 23px; }
.st-person-role { margin: 4px 0 0 !important; font-size: 12.5px !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--st-green) !important; }
.st-person p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: color-mix(in srgb, var(--st-ink) 76%, transparent); }

/* what we hold to */
.st-value-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(16px, 2vw, 26px); }
.st-value-list li { position: relative; padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 32px) clamp(54px, 5vw, 68px); border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--st-ink) 8%, transparent); }
.st-value-list li::before { content: ''; position: absolute; left: clamp(22px, 2.4vw, 30px); top: clamp(28px, 2.8vw, 38px); width: 16px; height: 16px; border-radius: 0 80% 0 80%; background: var(--st-green); transform: rotate(-12deg); opacity: .85; }
.st-value-list h3 { margin: 0 0 8px; font-size: 24px; }
.st-value-list p { margin: 0; font-size: 16px; line-height: 1.62; color: color-mix(in srgb, var(--st-ink) 78%, transparent); }

/* the closing */
.st.st-close { margin: clamp(40px, 6vw, 88px) auto clamp(40px, 6vw, 72px); width: min(1120px, calc(100% - 2.5rem)); padding: clamp(56px, 8vw, 110px) clamp(22px, 5vw, 72px) clamp(90px, 11vw, 150px); border-radius: clamp(24px, 3vw, 40px); overflow: hidden; isolation: isolate; text-align: center;
  background: radial-gradient(70% 90% at 50% 110%, color-mix(in srgb, var(--st-green) 30%, transparent), transparent 70%), radial-gradient(50% 70% at 8% -10%, rgba(227, 163, 92, .22), transparent 70%), color-mix(in srgb, var(--st-green) 8%, #f4f3ee);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--st-green) 20%, transparent), 0 50px 90px -60px color-mix(in srgb, var(--st-green) 80%, #16241c); }
.st-close-sky { position: absolute; inset: 0; z-index: -1; }
.st.st-close::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 84px; z-index: -1; opacity: .18; background: color-mix(in srgb, var(--st-green) 60%, #16241c);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 74'%3E%3Cpath d='M0 74V58l10-18 6 10 9-26 8 20 7-12 9 24 8-34 10 30 6-10 9 18 8-28 9 24 7-14 10 22 8-36 9 32 7-12 8 16 8-22 5 18v-2z'/%3E%3C/svg%3E") repeat-x bottom / 204px 84px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 74'%3E%3Cpath d='M0 74V58l10-18 6 10 9-26 8 20 7-12 9 24 8-34 10 30 6-10 9 18 8-28 9 24 7-14 10 22 8-36 9 32 7-12 8 16 8-22 5 18v-2z'/%3E%3C/svg%3E") repeat-x bottom / 204px 84px; }
.st-close-in { max-width: 760px; }
.st.st-close h2 { margin: 12px 0 18px; font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif; font-weight: 500; font-size: clamp(40px, 6vw, 80px); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
.st-close p { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; color: color-mix(in srgb, var(--st-ink) 82%, transparent); }
.st-close .sw-actions { justify-content: center; margin-top: 30px; }
@media (prefers-reduced-motion: reduce) { .st-wave { stroke-dashoffset: 0; animation: none; } .st-bars rect, .st-sun, .st-rings circle, .st-cover-title, .st-cover-lead, .st-cover .sw-actions, .st-faces-row, .st-cover-cue i { animation: none; } .st-rings circle { opacity: .3; } }
.st-value-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.st.st-close .sw-kicker { font-size: 13px; }

/* the cover with your own pictures and videos */
.st-slides { background: #16241c; }
.st-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.8s ease; }
.st-slide.is-on { opacity: 1; }
.st-slide img, .st-slide video { width: 100%; height: 100%; display: block; object-fit: cover; }
.st-slide.is-on img { animation: st-pan 16s ease-out both; }
@keyframes st-pan { from { transform: scale(1.08); } to { transform: scale(1); } }
.st-cover.has-photo .st-cover-in::before { inset: -40% -60% -20% -60%; background: linear-gradient(100deg, rgba(250, 249, 244, .93) 0, rgba(250, 249, 244, .8) 34%, rgba(250, 249, 244, 0) 66%); }
.st-cover.has-photo.is-night .st-cover-in::before { background: linear-gradient(100deg, rgba(12, 20, 16, .82) 0, rgba(12, 20, 16, .58) 38%, rgba(12, 20, 16, 0) 70%); }
.st-cover.is-night .st-cover-title, .st-cover.is-night .st-cover-lead { color: #f6f3ea; }
.st-cover.is-night .sw-kicker { color: #e3c58a; }
.st-cover.is-night .bcos-btn-ink { background: #f6f3ea; border-color: #f6f3ea; color: #16241c; }
.st-cover.has-photo .st-cover-in { padding-bottom: clamp(140px, 22vh, 240px); }
.st-cover.has-photo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: -1; background: linear-gradient(0deg, var(--bg, #fff), transparent); opacity: .9; pointer-events: none; }
.st-dots { position: absolute; right: clamp(16px, 4vw, 56px); bottom: 26px; display: flex; gap: 8px; z-index: 2; }
.st-dots button { all: unset; cursor: pointer; width: 26px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(22, 36, 28, .25); transition: background .3s, width .3s; }
.st-dots button[aria-pressed="true"] { width: 44px; background: #fff; }
.st-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 700px) { .st-cover.has-photo .st-cover-in::before { background: linear-gradient(180deg, rgba(250, 249, 244, .9) 0, rgba(250, 249, 244, .78) 60%, rgba(250, 249, 244, 0) 100%); } .st-cover.has-photo.is-night .st-cover-in::before { background: linear-gradient(180deg, rgba(12, 20, 16, .78) 0, rgba(12, 20, 16, .6) 60%, rgba(12, 20, 16, 0) 100%); } }
@media (prefers-reduced-motion: reduce) { .st-slide.is-on img { animation: none; } .st-slide { transition: none; } }
.st-cover { overflow: clip; }   /* clip, not hidden: nothing inside can scroll the cover sideways */