/* Product on the card, the whole time: name, price and button travel with it. */
.tp-item { overflow: clip; position: relative; }
.tp-item .gs-media { aspect-ratio: 1; display: block; height: auto; object-fit: cover; user-select: none; width: 100%; }
.tp-info { background: linear-gradient(transparent, rgb(0 0 0 / 74%) 42%); bottom: 0; color: #fff; display: grid; font-size: 0.875rem; gap: 0.1rem 0.5rem; grid-template-columns: minmax(0, 1fr) auto; left: 0; line-height: 1.25; padding: 2rem 0.625rem 0.625rem; position: absolute; right: 0; transition: padding 0.3s cubic-bezier(0.23, 1, 0.32, 1); z-index: 3; }
.tp-name { font-weight: 600; grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-price { grid-column: 1; }
.tp-info .tp-buy { align-self: center; background: #fff; border: 0; border-radius: 2px; color: #111; cursor: pointer; font: inherit; font-size: 0.8125rem; font-weight: 600; grid-column: 2; grid-row: 1 / span 2; line-height: 1.1; max-width: 7.5rem; min-height: 2.25rem; padding: 0.5rem 0.625rem; transition: background-color 0.15s, color 0.15s, transform 0.25s cubic-bezier(0.23, 1, 0.32, 1); }
@media (hover: hover) { .tp-info .tp-buy:hover { background: #111; color: #fff; } }
.tp-info .tp-buy:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) { .tp-item:hover .tp-buy { transform: scale(1.06); } .tp-item:hover .tp-name { text-decoration: underline; } .tp-item:hover .tp-info { padding-block-end: 1rem; } }

/* Tape, and the tilted wave */
.tp { background: var(--tp-bg, #14110f); overflow: clip; padding-block: 2rem; }
.tp.is-tilted { padding-block: calc(var(--tp-size) * 0.45); }
.tp.is-tilted .tp-band { margin-inline: -12%; transform: rotate(var(--tilt)); }
.tp-band { display: grid; gap: 0.75rem; }
.tp-row { --gs-gap: 0.75rem; position: relative; }
.tp-row .gs-slide { flex: 0 0 var(--tp-size); width: var(--tp-size); }
.tp-head { background: var(--tp-bg, #14110f); color: #fff; padding: clamp(2rem, 5vw, 4rem) var(--gutter, 1rem) 0; }
.tp-head h2 { font-family: Shoulders, Impact, sans-serif; font-size: clamp(2.6rem, 8vw, 7rem); font-weight: 900; line-height: 1; margin: 0 0 0.5rem; }
.tp-head p { margin: 0 0 0.5rem; max-width: 44rem; }
.tp-head a { color: inherit; }

/* Index */
.ix { position: relative; }
.ix-list { list-style: none; margin: 0; padding: 0; }
.ix-row { align-items: center; border-block-end: 1px solid currentcolor; display: grid; gap: 0.5rem 1rem; grid-template-columns: minmax(0, 1fr) auto auto; padding-block: 0.8rem; }
.ix-row .ix-name { font-family: Shoulders, Impact, sans-serif; font-size: clamp(1.8rem, 5vw, 4.4rem); font-weight: 800; line-height: 1.05; min-width: 0; }
.ix-row b { font-variant-numeric: tabular-nums; }
.ix-thumb { display: none; }
.ix-float { height: min(26vw, 22rem); left: 0; opacity: 0; pointer-events: none; position: fixed; top: 0; transition: opacity 0.25s; width: min(26vw, 22rem); z-index: 20; }
.ix-float.is-on { opacity: 1; }
.ix-float .gs, .ix-float .gs-track, .ix-float .gs-slide { height: 100%; }
.ix-float .gs-media { height: 100%; object-fit: cover; width: 100%; }
@media (hover: none), (max-width: 700px) {
	.ix-float { display: none; }
	.ix-row { grid-template-columns: 4.5rem minmax(0, 1fr) auto; }
	.ix-thumb { display: block; grid-row: 1 / span 2; }
	.ix-thumb img { aspect-ratio: 1; display: block; height: auto; object-fit: cover; width: 100%; }
	.ix-row .ix-name { grid-column: 2; }
	.ix-row b { grid-column: 3; grid-row: 1; }
	.ix-row .buy, .ix-row .st-btn { grid-column: 2 / -1; }
}

/* Orbit: one info block, for the product in front. */
.ob { overflow: clip; padding-block: 1rem 2rem; }
.ob-room { cursor: grab; height: clamp(26rem, 72svh, 48rem); position: relative; touch-action: pan-y; }
.ob-room:active { cursor: grabbing; }
.ob-room .gs { --gs-gap: 1.1vw; align-items: center; display: flex; inset: 0; position: absolute; }
.ob-room .gs-slide { flex: 0 0 clamp(12rem, 22vw, 26rem); width: clamp(12rem, 22vw, 26rem); }
.ob-room .gs-media { aspect-ratio: 1; display: block; height: auto; object-fit: cover; width: 100%; }
.ob-info { min-height: 6rem; text-align: center; }
.ob-line { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; justify-content: center; }
.ob-line[hidden] { display: none; }
.ob-line span { font-family: Shoulders, Impact, sans-serif; font-size: clamp(1.6rem, 4vw, 3rem); font-weight: 800; }

/* Rows with the product on the card */
.xrow { --gs-gap: 14px; --gs-per-view: 1.3; }
@media (min-width: 600px) { .xrow { --gs-per-view: 2.4; } }
@media (min-width: 1000px) { .xrow { --gs-per-view: 3.3; } }
.xrow.is-center { overflow: visible; }
.xrow-clip { overflow: clip; padding-block: 1.5rem; }
.xpanes { --gs-gap: 8px; --gs-per-view: 2; }
@media (min-width: 800px) { .xpanes { --gs-per-view: 4; } }
.way-pick { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-block: 0 1rem; }
.way-pick button { background: none; border: 1px solid currentcolor; color: inherit; cursor: pointer; font: inherit; font-size: 0.9rem; min-height: 2.5rem; padding: 0 0.8rem; }
.way-pick button[aria-pressed="true"] { background: var(--ink, #1e1e1e); color: var(--paper, #fff); }

/* Landing pages */
.ld { --paper: #fff; --ink: #1e1e1e; background: var(--paper); color: var(--ink); }
.ld-hero { padding: clamp(1.5rem, 4vw, 3.5rem) var(--gutter, 1rem) 1.5rem; }
.ld-hero h1 { font-family: Shoulders, Impact, sans-serif; font-size: clamp(2.6rem, 7.5vw, 7rem); font-weight: 900; line-height: 1.02; margin: 0 0 0.8rem; max-width: 22ch; }
.ld-hero p { font-size: 1.15rem; margin: 0; max-width: 46rem; }
.ld-demo { padding-block: 0.5rem 1.5rem; }
.ld-demo.pad { padding-inline: var(--gutter, 1rem); }
.ld-body { display: grid; gap: 1rem clamp(1.5rem, 5vw, 4rem); grid-template-columns: minmax(0, 46rem) minmax(14rem, 1fr); padding: 1.5rem var(--gutter, 1rem) 3rem; }
.ld-copy h2 { font-size: 1.6rem; line-height: 1.2; margin: 1.6rem 0 0.5rem; }
.ld-copy h2:first-child { margin-block-start: 0; }
.ld-copy p, .ld-copy li { line-height: 1.55; }
.ld-copy p { margin: 0 0 0.8rem; }
.ld-copy table { border-collapse: collapse; margin-block: 0.5rem 1rem; width: 100%; }
.ld-copy th, .ld-copy td { border-block-end: 1px solid #0003; padding: 0.45rem 0.6rem 0.45rem 0; text-align: left; vertical-align: top; }
.ld-copy details { border-block-end: 1px solid #0003; padding-block: 0.6rem; }
.ld-copy summary { cursor: pointer; font-weight: 600; }
.ld-copy details p { margin-block: 0.4rem 0; }
.ld-side h3 { font-size: 1rem; margin: 0 0 0.35rem; }
.ld-side ul { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.ld-side li { margin-block-end: 0.3rem; }
.ld-side a { color: inherit; }
.ld-checked { font-size: 0.9rem; }
.ix-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); padding: 0 var(--gutter, 1rem) 3rem; }
.ix-cards a { color: inherit; }
.ix-cards h2 { font-size: 1.15rem; margin: 0.4rem 0 0.2rem; }
.ix-cards p { margin: 0; }
@media (max-width: 780px) { .ld-body { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .tp-info, .tp-info .tp-buy { transition: none; } }

.xpad { padding-inline: var(--gutter, 1rem); }
.ld-tier { font-weight: 700; }
.st-stock { display: block; margin-block: 0 0.5rem; }
.st-stock i { background: currentcolor; display: block; height: 4px; }
.st-stock small { display: block; font-size: 0.75rem; }
.tscroll { margin-block-end: 0.5rem; overflow-x: auto; }
.cmp { border-collapse: collapse; font-size: 0.92rem; min-width: 34rem; width: 100%; }
.cmp th, .cmp td { border-block-end: 1px solid #0002; padding: 0.5rem 0.75rem 0.5rem 0; text-align: left; vertical-align: top; }
.cmp thead th { border-block-end: 2px solid currentcolor; }
.cmp tr.g th { font-size: 1rem; padding-block-start: 1.1rem; }
.cmp tbody th[scope="row"] { font-weight: 600; min-width: 9rem; }
.plans .tscroll, .plans .ld-checked { margin-block-start: 1rem; }

/* The ten designs of a product card, after the plugin's src/pro/style.scss and
   src/product-slider/style.scss. Each has its own idea of what stays on the card and
   what comes when a visitor points at it. */
.il { --il-base: var(--st-bg, #fff); --il-ink: var(--st-ink, #1e1e1e); --il-spring: cubic-bezier(0.23, 1, 0.32, 1); --il-ease: cubic-bezier(0.23, 1, 0.32, 1); }
.il .il-fig { display: flex; flex-direction: column; flex: 1; margin: 0; min-width: 0; position: relative; width: 100%; }
.il-pic, .il .il-fig > .gs { aspect-ratio: 1; display: block; flex: none; overflow: hidden; position: relative; width: 100%; }
.il-pic .gs-media { aspect-ratio: 1; display: block; height: 100%; object-fit: cover; width: 100%; }
.mg-card .il-fig .gs-media { height: 100%; }
.il-second { height: 100%; inset: 0; object-fit: cover; opacity: 0; position: absolute; transition: opacity 280ms cubic-bezier(0.23, 1, 0.32, 1); width: 100%; }
.il[data-picture="none"] .il-second, .il[data-picture="zoom"] .il-second { display: none; }
.il .il-fig figcaption { display: flex; flex: 1; flex-direction: column; font-size: 0.95rem; gap: 0.2rem; min-width: 0; padding-block-start: 0.5rem; text-align: start; }
.il-name { display: block; font-weight: 500; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-card .il-name, .st-card .il-name { font-size: inherit; margin: 0; }
.il-fig .st-price { margin: 0; }
.il-fig .st-price del { margin-inline-end: 0.3rem; }
.il-desc { display: none; font-size: 0.85rem; }
.il .il-fig .st-btn { align-self: flex-start; margin-block-start: auto; }
.il .mg-actions { display: contents; }
.il .st-row .gs-slide.st-card { display: flex; position: relative; }
.il .st-badge { z-index: 4; }
.il .mg-quick { inset: 0.5rem 0.5rem auto auto; position: absolute; z-index: 5; }
.il-tag .mg-quick { inset: 0.5rem auto auto 0.5rem; }
.mg-card .il-fig { flex: 1; }

/* A round icon button. Sticker and Studio wipe it open to its words: it has its full
   size all along and only what shows of it changes, so nothing around it moves. */
.il-tag .il-fig .st-btn, .il-corners .il-fig .st-btn, .il-bar .il-fig .st-btn { --il-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224 128a8 8 0 0 1-8 8h-80v80a8 8 0 0 1-16 0v-80H40a8 8 0 0 1 0-16h80V40a8 8 0 0 1 16 0v80h80a8 8 0 0 1 8 8Z'/%3E%3C/svg%3E"); align-items: center; border-radius: 999px; box-sizing: border-box; display: inline-flex; flex-direction: row-reverse; font-size: 0.875rem; font-weight: 500; height: 2.75rem; line-height: 1; margin: 0; min-height: 0; min-width: 0; overflow: hidden; padding: 0; white-space: nowrap; width: 2.75rem; }
.il-tag .il-fig .st-btn::before, .il-corners .il-fig .st-btn::before, .il-bar .il-fig .st-btn::before { background: currentcolor; content: ""; flex: none; height: 1.25rem; margin-inline: calc(0.75rem - 1px); -webkit-mask: var(--il-icon) center / contain no-repeat; mask: var(--il-icon) center / contain no-repeat; width: 1.25rem; }
.il-bar .il-fig .st-btn { --il-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224 128a8 8 0 0 1-8 8h-80v80a8 8 0 0 1-16 0v-80H40a8 8 0 0 1 0-16h80V40a8 8 0 0 1 16 0v80h80a8 8 0 0 1 8 8Z'/%3E%3C/svg%3E"); }
.il-tag .il-fig .st-btn, .il-corners .il-fig .st-btn { clip-path: inset(0 0 0 calc(100% - 2.75rem) round 999px); max-width: calc(100% - 1rem); padding-inline-start: 1rem; transition: clip-path 160ms var(--il-ease), scale 160ms var(--il-ease); width: auto; }
.il-tag .il-fig .st-btn:focus-visible, .il-corners .il-fig .st-btn:focus-visible { clip-path: none; }

/* On the picture and below it at once: one grid, with the picture across it. */
.il-tag .il-fig, .il-corners .il-fig, .il-dock .il-fig { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.il-tag .il-fig > .il-pic, .il-tag .il-fig > .gs, .il-corners .il-fig > .il-pic, .il-corners .il-fig > .gs, .il-dock .il-fig > .il-pic, .il-dock .il-fig > .gs { grid-area: 1 / 1; }
.il-tag .il-fig figcaption, .il-corners .il-fig figcaption, .il-dock .il-fig figcaption { display: contents; }
.il-tag .il-fig figcaption > *, .il-corners .il-fig figcaption > *, .il-dock .il-fig figcaption > * { grid-column: 1; }
.il-tag .il-desc, .il-corners .il-desc, .il-dock .il-desc { display: none; }

/* Panel */
.il-overlay .il-fig, .il-center .il-fig, .il-bar .il-fig, .il-scrim .il-fig { overflow: hidden; }
.il-overlay .il-fig figcaption { background: linear-gradient(transparent, rgb(0 0 0 / 50%) 2.5rem, rgb(0 0 0 / 78%)); color: #fff; flex: none; inset: auto 0 0; padding: 3rem 1rem 1rem; position: absolute; z-index: 3; }

/* Shelf */
.il-line .il-fig figcaption { border-block-start: 1px solid currentcolor; flex: none; margin-block-start: 0.625rem; padding-block-start: 0.5rem; }
.il-line .il-price { font-weight: 700; white-space: nowrap; }
.il-line .il-fig .st-btn { background: none; border: 0; color: inherit; font-size: 0.875em; font-weight: 400; margin-block-start: 0.25rem; min-height: 2rem; padding: 0; text-align: start; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; transition: text-underline-offset 0.2s cubic-bezier(0.23, 1, 0.32, 1); }
@media (hover: hover) { .il-line .il-fig .st-btn:hover { text-decoration-thickness: 2px; text-underline-offset: 0.4em; } }
/* Name and price on one line while they fit; the price drops below if not. */
.il-line .il-fig figcaption, .il-polaroid .il-fig figcaption, .il-ticket .il-fig figcaption, .il-bold .il-fig figcaption { align-items: baseline; flex-flow: row wrap; gap: 0.25rem 0.75rem; justify-content: space-between; }
.il-line .il-name, .il-polaroid .il-name, .il-ticket .il-name, .il-bold .il-name { flex: none; max-width: 100%; }
.il-line .il-fig .st-btn, .il-ticket .il-fig .st-btn, .il-bold .il-fig .st-btn { flex-basis: 100%; }

/* Label */
.il-center .il-fig figcaption { align-items: center; background: var(--il-base); bottom: 0.75rem; box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 18%); color: var(--il-ink); flex: none; gap: 0.125rem; inset-inline: 0.75rem; margin-inline: auto; max-width: fit-content; padding: 0.5rem 0.875rem; position: absolute; text-align: center; z-index: 3; }
.il-center .il-name { max-width: 100%; }
.il-center .il-price { font-weight: 700; }
.il-center .il-fig .st-btn { align-self: center; margin-block-start: 0.375rem; }

/* Sticker */
.il-tag .il-price { align-items: center; align-self: start; aspect-ratio: 1; background: var(--il-ink); border-radius: 50%; color: var(--il-base); display: flex; flex-direction: column; font-size: 0.875em; font-weight: 700; grid-area: 1 / 1; justify-content: center; justify-self: end; line-height: 1.1; margin: 0.5rem; min-width: 4.25rem; padding: 0.375rem; rotate: -8deg; text-align: center; transition: rotate 0.3s cubic-bezier(0.3, 1.6, 0.5, 1), scale 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); z-index: 3; }
.il-tag .il-price del { font-size: 0.8em; font-weight: 400; margin: 0; opacity: 0.75; }
@media (hover: hover) { .il-tag .il-fig:hover .il-price { rotate: 0deg; scale: 1.08; } }
.il-tag .il-name { margin-block-start: 0.5rem; }
.il-tag .il-fig .st-btn, .il-corners .il-fig .st-btn { align-self: end; grid-area: 1 / 1; justify-self: end; margin: 0.5rem; z-index: 3; }

/* Studio */
.il-corners .il-fig { grid-template-rows: auto; }
.il-corners .il-name, .il-corners .il-price { background: var(--il-base); color: var(--il-ink); grid-area: 1 / 1; justify-self: start; padding: 0.25rem 0.5rem; z-index: 3; }
.il-corners .il-name { align-self: start; font-size: 0.875em; margin: 0.5rem; max-width: calc(100% - 1rem); }
.il-corners .st-badge { inset: auto auto 3rem 0.5rem; }
.il-corners .il-price { align-self: end; font-weight: 700; margin: 0.5rem; max-width: calc(100% - 4.25rem); transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1); }
@media (hover: hover) { .il-corners .il-fig:hover .il-price { opacity: 0; } }

/* Glass bar */
.il-bar .il-fig figcaption { align-items: center; backdrop-filter: blur(12px); background: color-mix(in srgb, var(--il-base) 76%, transparent); border-radius: 999px; color: var(--il-ink); column-gap: 0.5rem; display: grid; flex: none; gap: 0 0.5rem; grid-template-columns: minmax(0, 1fr) auto; inset: auto 0.5rem 0.5rem; padding: 0.3125rem 0.3125rem 0.3125rem 0.875rem; position: absolute; transition: translate 0.3s var(--il-spring); z-index: 3; }
@media (hover: hover) { .il-bar .il-fig:hover figcaption { translate: 0 -0.25rem; } }
.il-bar .il-name, .il-bar .il-price { font-size: 0.875em; grid-column: 1; }
.il-bar .il-price { font-weight: 700; white-space: nowrap; }
.il-bar .il-fig .st-btn { align-self: center; grid-column: 2; grid-row: 1 / span 2; }

/* Feature */
.il-beside .il-fig { align-items: center; column-gap: clamp(1rem, 3vw, 2rem); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.il-beside .il-fig figcaption { flex: none; gap: 0.625rem; padding-block-start: 0; }
.il-beside .il-name { font-size: 1.5em; font-weight: 600; line-height: 1.15; white-space: normal; }
.il-beside .il-price { font-size: 1.25em; font-weight: 700; }
.il-beside .il-desc { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.il-beside .il-fig .st-btn { margin-block-start: 0.5rem; }
.il-beside .st-row { --gs-per-view: 1.15; }
@media (min-width: 1000px) { .il-beside .st-row { --gs-per-view: 2; } .il-beside .mg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .il-beside .il-fig { grid-template-columns: minmax(0, 1fr); } .il-beside .il-fig figcaption { padding-block-start: 0.5rem; } }

/* Slide-up */
.il-dock .il-fig .st-btn { align-self: end; grid-area: 1 / 1; margin: 0; text-align: center; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), translate 0.3s var(--il-spring); width: 100%; z-index: 3; }
.il-dock .il-name { margin-block-start: 0.5rem; }
.il-dock .il-price { font-weight: 700; }

/* Poster */
.il-scrim .il-fig figcaption { background: linear-gradient(transparent, rgb(0 0 0 / 78%) 45%); color: #fff; flex: none; inset: auto 0 0; padding: 3.5rem 1rem 1rem; position: absolute; z-index: 3; }
.il-scrim .il-name { font-size: 1.25em; font-weight: 700; line-height: 1.15; white-space: normal; }
.il-scrim .st-price del { opacity: 0.8; }
.il-scrim .il-fig .st-btn { background: none; border: 1px solid #fff; color: #fff; margin-block-start: 0.25rem; transition: background 0.2s cubic-bezier(0.23, 1, 0.32, 1), color 0.2s cubic-bezier(0.23, 1, 0.32, 1); }
.il-scrim .il-fig .st-btn:focus-visible { background: #fff; color: #111; }
@media (hover: hover) { .il-scrim .il-fig .st-btn:hover { background: #fff; color: #111; } }
.il-scrim .il-pic .gs-media { transition: scale 280ms var(--il-spring); }
.il-overlay .il-name, .il-center .il-desc { font-weight: 500; }

/* Frame */
.il-frame .il-fig, .il-polaroid .il-fig, .il-ticket .il-fig, .il-outline .il-fig, .il-bold .il-fig { box-sizing: border-box; }
.il-frame .il-fig { border: 1px solid color-mix(in srgb, currentcolor 25%, transparent); padding: 0.75rem; transition: border-color 0.2s cubic-bezier(0.23, 1, 0.32, 1); }
.il-frame .il-fig figcaption { align-items: center; gap: 0.25rem; padding-block-start: 0.75rem; text-align: center; }
.il-frame .il-name { max-width: 100%; }
.il-frame .il-fig .st-btn { align-self: center; }
@media (hover: hover) { .il-frame .il-fig:hover { border-color: currentcolor; } }

/* Print */
.il-polaroid .gs-slide, .il-polaroid .st-card, .il-polaroid.dg-cards > * { box-sizing: border-box; padding: 0.75rem 0.5rem; }
.il-polaroid .il-fig { background: #fff; box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 18%); color: #111; padding: 0.625rem 0.625rem 0.875rem; rotate: -1.5deg; transition: rotate 0.3s cubic-bezier(0.3, 1.6, 0.5, 1), scale 0.3s cubic-bezier(0.23, 1, 0.32, 1); }
.il-polaroid .st-card:nth-child(even) .il-fig { rotate: 1.5deg; }
@media (hover: hover) { .il-polaroid .il-fig:hover, .il-polaroid .st-card:nth-child(even) .il-fig:hover { rotate: 0deg; scale: 1.02; } }
.il-polaroid .gs-gl .il-fig, .il-polaroid .gs-gl .st-card:nth-child(even) .il-fig { rotate: none; scale: 1; }
.il-polaroid .il-fig figcaption { padding-block-start: 0.625rem; }
.il-polaroid .il-price { font-weight: 700; white-space: nowrap; }

/* Ticket */
.il-ticket .il-fig { background: color-mix(in srgb, currentcolor 7%, transparent); }
.il-ticket .il-fig figcaption { border-block-start: 2px dashed color-mix(in srgb, currentcolor 45%, transparent); padding: 0.75rem; position: relative; }
.il-ticket .il-fig figcaption::before, .il-ticket .il-fig figcaption::after { background: var(--il-base); border-radius: 50%; content: ""; height: 1rem; inset-block-start: -0.5625rem; position: absolute; width: 1rem; }
.il-ticket .il-fig figcaption::before { inset-inline-start: -0.5rem; }
.il-ticket .il-fig figcaption::after { inset-inline-end: -0.5rem; }
.il-ticket .il-price { font-weight: 700; white-space: nowrap; }
.il-ticket .il-fig .st-btn { text-align: center; }

/* Curtain and Spotlight: what is on the picture only while pointed at. */
.il-curtain .il-fig, .il-spotlight .il-fig { overflow: hidden; }
.il-curtain .il-fig .st-btn { align-self: flex-start; }
.il-spotlight .il-fig .st-btn { align-self: center; }
@media (hover: hover) {
	.il-curtain .il-fig figcaption { background: var(--il-ink); color: var(--il-base); flex: none; gap: 0.5rem; inset: 0; justify-content: center; padding: 1rem; position: absolute; transform: translateY(100%); transition: transform 280ms var(--il-spring); z-index: 3; }
	.il-curtain .il-fig:hover figcaption, .il-curtain .il-fig:focus-within figcaption { transform: none; }
	.il-curtain .il-name { font-size: 1.25em; font-weight: 600; line-height: 1.15; white-space: normal; }
	.il-curtain .il-fig .st-btn { background: var(--il-base); border-color: var(--il-base); color: var(--il-ink); margin-block-start: 0.25rem; }
	.il-spotlight .il-fig figcaption { align-items: center; background: rgb(0 0 0 / 62%); color: #fff; flex: none; gap: 0.375rem; inset: 0; justify-content: center; opacity: 0; padding: 1rem; position: absolute; text-align: center; transition: opacity 0.25s cubic-bezier(0.23, 1, 0.32, 1); z-index: 3; }
	.il-spotlight .il-fig:hover figcaption, .il-spotlight .il-fig:focus-within figcaption { opacity: 1; }
	.il-spotlight .il-name { font-size: 1.125em; font-weight: 600; max-width: 100%; white-space: normal; }
	.il-spotlight .il-fig .st-btn { background: #fff; border-color: #fff; color: #111; margin-block-start: 0.25rem; }
}

/* Outline */
.il-outline .il-fig { border: 1.5px solid currentcolor; }
.il-outline .il-fig figcaption { border-block-start: 1.5px solid currentcolor; gap: 0.25rem; padding: 0.75rem; }
.il-outline .il-price { font-size: 1.375em; font-weight: 700; line-height: 1.2; }
.il-outline .il-fig .st-btn { align-self: stretch; background: none; border: 1.5px solid currentcolor; box-sizing: border-box; color: inherit; margin-block-start: 0.5rem; text-align: center; transition: background 0.2s cubic-bezier(0.23, 1, 0.32, 1), color 0.2s cubic-bezier(0.23, 1, 0.32, 1); width: 100%; }
.il-outline .il-fig .st-btn:focus-visible { background: var(--il-ink); border-color: var(--il-ink); color: var(--il-base); }
@media (hover: hover) { .il-outline .il-fig .st-btn:hover { background: var(--il-ink); border-color: var(--il-ink); color: var(--il-base); } }

/* Editorial */
.il-editorial .il-fig figcaption { gap: 0.25rem; padding-block-start: 0; position: relative; z-index: 3; }
.il-editorial .il-name { background: var(--il-base); color: var(--il-ink); font-size: 1.5em; font-weight: 700; line-height: 1.1; margin-block-start: -1.5rem; margin-inline-end: 1.5rem; overflow: visible; padding: 0.5rem 0.75rem 0.25rem 0; white-space: normal; }
.il-editorial .il-price { font-size: 0.9375em; }
.il-editorial .il-fig .st-btn { background: none; border: 0; color: inherit; font-size: 0.875em; font-weight: 400; min-height: 2rem; padding: 0; text-decoration: underline; text-underline-offset: 0.25em; }

/* Spine */
.il-spine .il-fig { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.il-spine .il-fig > .il-pic, .il-spine .il-fig > .gs { grid-area: 1 / 1; }
.il-spine .il-fig figcaption { display: contents; }
.il-spine .il-fig figcaption > * { grid-column: 1; }
.il-spine .il-price { align-self: end; background: var(--il-ink); color: var(--il-base); font-weight: 700; grid-area: 1 / 1; justify-self: end; padding: 0.75rem 0.375rem; rotate: 180deg; transition: padding 0.3s var(--il-spring); white-space: nowrap; writing-mode: vertical-rl; z-index: 3; }
.il-spine .il-price del { margin: 0 0 0.35rem; }
@media (hover: hover) { .il-spine .il-fig:hover .il-price { padding-block: 1.5rem; } }
.il-spine .il-name { margin-block-start: 0.5rem; }
.il-spine .il-fig .st-btn { align-self: start; justify-self: start; margin-block-start: 0.375rem; }
.il-spine .il-desc { display: none; }

/* Round */
.il-round .il-pic, .il-round .il-fig > .gs { border-radius: 50%; }
.il-round .il-pic .gs-media { transition: scale 280ms var(--il-spring); }
@media (hover: hover) { .il-round .il-fig:hover .gs-media { scale: 1.08; } }
.il-round .il-fig figcaption { align-items: center; gap: 0.25rem; padding-block-start: 0.75rem; text-align: center; }
.il-round .il-name { max-width: 100%; }
.il-round .il-price { font-weight: 700; }
.il-round .il-fig .st-btn { align-self: center; border-radius: 999px; margin-block-start: 0.375rem; }

/* Joined */
.il-joined .il-fig figcaption { display: grid; gap: 0.5rem 0; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; padding-block-start: 0.625rem; }
.il-joined .il-name { grid-column: 1 / -1; }
.il-joined .il-price { align-items: center; align-self: end; border: 1px solid currentcolor; border-inline-end: 0; box-sizing: border-box; column-gap: 0.25rem; display: flex; flex-wrap: wrap; font-weight: 700; line-height: 1.2; min-height: 100%; padding: 0.25rem 0.75rem; }
.il-joined .il-fig .st-btn { align-content: center; align-self: stretch; margin: 0; white-space: nowrap; }

/* Offset */
.il-offset .il-fig figcaption { background: var(--il-base); box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 14%); color: var(--il-ink); flex: none; gap: 0.25rem; margin-block-start: -2.5rem; margin-inline-start: 1.5rem; padding: 0.75rem; position: relative; transition: translate 0.3s var(--il-spring); z-index: 3; }
@media (hover: hover) { .il-offset .il-fig:hover figcaption { translate: 0 -0.375rem; } }
.il-offset .il-price { font-weight: 700; }
.il-offset .il-fig .st-btn { margin-block-start: 0.375rem; }

/* Bold */
.il-bold .gs-slide, .il-bold .st-card, .il-bold.dg-cards > * { box-sizing: border-box; padding: 0.125rem 0.5rem 0.5rem 0.125rem; }
.il-bold .il-fig { border: 2px solid var(--il-ink); box-shadow: 0.375rem 0.375rem 0 var(--il-ink); transition: box-shadow 0.15s cubic-bezier(0.23, 1, 0.32, 1), translate 0.15s cubic-bezier(0.23, 1, 0.32, 1); }
@media (hover: hover) { .il-bold .il-fig:hover { box-shadow: 0.125rem 0.125rem 0 var(--il-ink); translate: 0.25rem 0.25rem; } }
.il-bold .il-pic, .il-bold .il-fig > .gs { border-block-end: 2px solid var(--il-ink); box-sizing: border-box; }
.il-bold .il-fig figcaption { padding: 0.625rem; }
.il-bold .il-name, .il-bold .il-price { font-weight: 700; }
.il-bold .il-price { white-space: nowrap; }
.il-bold .il-fig .st-btn { text-align: center; }
@media (hover: none) { .il-bold .il-fig:hover { box-shadow: 0.375rem 0.375rem 0 var(--il-ink); translate: none; } .il-offset .il-fig:hover figcaption { translate: none; } .il-spine .il-fig:hover .il-price { padding-block: 0.75rem; } }

/* What waits for the pointer, where there is one. */
@media (hover: hover) {
	.il-fig:hover .il-second { opacity: 1; }
	.il[data-picture="zoom"] .il-pic .gs-media { transition: scale 280ms var(--il-spring); }
	.il[data-picture="zoom"] .il-fig:hover .gs-media { scale: 1.06; }
	.il-scrim .il-fig:hover .il-pic .gs-media { scale: 1.05; }
	.il-tag .il-fig:hover .st-btn, .il-corners .il-fig:hover .st-btn { clip-path: inset(0 round 999px); transition: clip-path 220ms var(--il-ease), scale 160ms var(--il-ease); }
	.il-overlay .il-fig .st-btn, .il-center .il-fig .st-btn { border-block-width: 0; display: block; margin-block-start: 0; max-height: 0; min-height: 0; opacity: 0; overflow: hidden; padding-block: 0; transition: max-height 0.3s cubic-bezier(0.23, 1, 0.32, 1), margin 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), padding 0.3s cubic-bezier(0.23, 1, 0.32, 1); }
	.il-overlay .il-fig:hover .st-btn, .il-overlay .il-fig:focus-within .st-btn, .il-center .il-fig:hover .st-btn, .il-center .il-fig:focus-within .st-btn { margin-block-start: 0.375rem; max-height: 4rem; opacity: 1; padding-block: 0.5rem; }
	.il-dock .il-fig .st-btn { opacity: 0; translate: 0 0.5rem; }
	.il-dock .il-fig:hover .st-btn, .il-dock .il-fig:focus-within .st-btn { opacity: 1; translate: 0; }
	/* Details only when pointed at. */
	.il.is-hover .il-fig figcaption > *, .il.is-hover .il-fig .mg-actions .st-btn { opacity: 0; transition: opacity 0.25s cubic-bezier(0.23, 1, 0.32, 1); }
	.il.is-hover.il-overlay .il-fig figcaption { transform: translateY(100%); transition: transform 280ms var(--il-spring); }
	.il.is-hover.il-center .il-fig figcaption, .il.is-hover.il-bar .il-fig figcaption, .il.is-hover.il-scrim .il-fig figcaption { opacity: 0; transition: opacity 0.25s cubic-bezier(0.23, 1, 0.32, 1), translate 0.3s cubic-bezier(0.23, 1, 0.32, 1); }
	.il.is-hover .il-fig:hover figcaption > *, .il.is-hover .il-fig:focus-within figcaption > *, .il.is-hover .il-fig:hover .mg-actions .st-btn, .il.is-hover .il-fig:focus-within .mg-actions .st-btn { opacity: 1; }
	.il.is-hover .il-fig:hover figcaption, .il.is-hover .il-fig:focus-within figcaption { opacity: 1; transform: none; }
	.il.is-hover.il-corners .il-fig:hover .il-price { opacity: 0; }
}
@media (hover: none) { .il-tag .il-price { rotate: -8deg; } .il-corners .il-fig:hover .il-price { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .il-fig figcaption, .il-fig figcaption *, .il-fig img { transition: none !important; } }

/* Arranged as a grid: the same cards, without a slider. */
.il.as-grid .gs-track { display: grid; gap: 1.5rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); transform: none !important; }
.il.as-grid .gs-slide { flex: none; margin: 0 !important; transform: none !important; width: auto !important; }
.il.as-grid .st-row { cursor: auto; overflow: visible; }
@media (min-width: 720px) { .il.as-grid .gs-track { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .il.as-grid .gs-track { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.il-beside.as-grid .gs-track { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .il-beside.as-grid .gs-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pick-note { flex-basis: 100%; font-size: 0.82rem; opacity: 0.75; }

/* The designs on show: every one on a real card. */
.dg-sec { padding: clamp(1.5rem, 4vw, 3.5rem) var(--gutter, 1rem); }
.dg-head { align-items: end; display: grid; gap: 0.5rem 2rem; margin-block-end: 1.25rem; }
@media (min-width: 900px) { .dg-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.dg-head h2 { font-size: clamp(1.9rem, 4.4vw, 3.6rem); line-height: 1.02; margin: 0; }
.dg-head p { margin: 0; max-width: 60ch; }
.dg-wall { display: grid; gap: 2rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .dg-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .dg-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dg-tile { display: flex; flex-direction: column; min-width: 0; }
.dg-tile .il { flex: 1; display: flex; }
.dg-tile.is-wide { grid-column: span 2; }
.dg-tile h3 { font-size: 1rem; font-weight: 700; margin: 0 0 0.4rem; }
.dg-tile h3 a { color: inherit; }
.dg-tile h3 small { font-weight: 400; opacity: 0.7; }
.dg-tile .il-fig { font-size: 0.95rem; }
.dg-note { align-content: center; background: #16130f; color: #fff; display: grid; gap: 0.5rem; padding: 1.25rem; }
.dg-note p { margin: 0; }
.dg-note a { color: inherit; }
@media (max-width: 719px) { .dg-tile.is-wide, .dg-note { grid-column: 1 / -1; } }
@media (max-width: 460px) { .dg-tile:not(.is-wide) .il-fig { font-size: 0.875rem; } }
.dg-band { padding-block: 1.5rem; }
.dg-band + .dg-band { border-block-start: 1px solid #1e1e1e22; }
.dg-band-head { display: grid; gap: 0.1rem 1.5rem; margin-block-end: 0.9rem; }
@media (min-width: 800px) { .dg-band-head { align-items: baseline; grid-template-columns: 14rem minmax(0, 1fr) auto; } }
.dg-band-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin: 0; }
.dg-band-head h2 a { color: inherit; text-decoration: none; }
@media (hover: hover) { .dg-band-head h2 a:hover { text-decoration: underline; } }
.dg-band-head p { margin: 0; }
.dg-cards { display: grid; gap: 1rem; grid-auto-flow: column; grid-auto-columns: 68%; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.dg-cards > * { display: flex; min-width: 0; scroll-snap-align: start; }
@media (min-width: 600px) { .dg-cards { grid-auto-columns: calc((100% - 2rem) / 2.5); } }
@media (min-width: 1000px) { .dg-cards { grid-auto-columns: auto; grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; } }
.il-beside.dg-cards { grid-auto-columns: 92%; }
@media (min-width: 1000px) { .il-beside.dg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dg-all { background: var(--st-bg, #fff); padding-block: 0.6rem; position: sticky; top: var(--bar-h, 3.5rem); z-index: 6; }
.il-wall { display: grid; gap: 1.5rem 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); padding: 0 var(--gutter, 1rem) 3rem; }
.il-wall h2 { font-size: 1.1rem; margin: 0.6rem 0 0; }
.il-wall h2 small { font-weight: 400; }
.il-wall h2 a { color: inherit; }
.il-wall .is-wide { grid-column: span 2; }
@media (max-width: 560px) { .il-wall .is-wide { grid-column: auto; } }
.ld-hero h1 { font-size: clamp(2.2rem, 5vw, 4.6rem); max-width: 26ch; }
.ld-hero { padding-block: clamp(1rem, 2.5vw, 2.25rem) 1rem; }
.ld-hero p { font-size: 1.05rem; }
.ld, .xpad, .il, .ix, .tp, .ob { --st-accent: #1e1e1e; --st-on: #fff; --st-ink: #1e1e1e; --st-bg: #fff; }
.tp, .xrow-clip { --st-accent: #1e1e1e; }
.ix-cards .buy { background: var(--st-accent); border: 0; color: var(--st-on); }
.plans-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.plan { border: 1px solid #0003; display: grid; gap: 0.4rem; grid-template-rows: auto auto 1fr auto; padding: 1rem; }
.plan h2 { font-size: 1.15rem; margin: 0; }
.plan p { margin: 0; }
.plan-price { font-family: Shoulders, Impact, sans-serif; font-size: 3rem; font-weight: 900; line-height: 1; }
.plan-price small { font-family: inherit; font-size: 1rem; font-weight: 600; }
.plan .st-btn { text-align: center; text-decoration: none; }
.plan-soon { border: 1px dashed #0006; font-size: 0.9rem; padding: 0.5rem; text-align: center; }

/* The sample cart */
.cart-btn { align-items: center; background: #1b1712; border: 0; border-radius: 2rem; color: #fff; cursor: pointer; display: inline-flex; font: inherit; font-size: 1.25rem; gap: 0.35rem; line-height: 1; min-height: 2.25rem; padding: 0.3rem 0.65rem; position: relative; transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1); }
@media (hover: hover) { .cart-btn:hover { transform: scale(1.06); } }
.cart-btn:focus-visible { outline: 2px solid #1b1712; outline-offset: 2px; }
.cart-btn svg { display: block; }
.cart-btn [data-cart] { background: none !important; color: inherit !important; display: inline-block; font-size: 0.9rem; font-variant-numeric: tabular-nums; font-weight: 700; min-width: 1em; padding: 0 !important; text-align: center; }
.cart-btn.has-items { background: #e8341c; }
.cart-btn.is-bumped svg { animation: bag-jump 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
.cart-btn.is-bumped [data-cart] { animation: count-roll 0.35s cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes bag-jump { 30% { transform: translateY(-6px) rotate(-10deg) scale(1.15); } 60% { transform: translateY(1px) rotate(6deg); } }
@keyframes count-roll { from { opacity: 0; transform: translateY(0.7em); } }
.sd { background: #fff; border: 0; color: #1b1712; height: 100dvh; inset: 0 0 0 auto; margin: 0; max-height: none; max-width: min(100vw, 26rem); padding: 0; position: fixed; transform: translateX(100%); transition: transform 280ms cubic-bezier(0.23, 1, 0.32, 1), overlay 280ms allow-discrete, display 280ms allow-discrete; width: 100%; }
.sd[open] { transform: none; }
@starting-style { .sd[open] { transform: translateX(100%); } }
.sd::backdrop { background: #0006; }
.sd-in { display: grid; font-family: Schibsted, system-ui, sans-serif; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.sd-head { align-items: center; border-block-end: 1px solid #0002; display: flex; justify-content: space-between; padding: 0.75rem 1rem; }
.sd-head h2 { font-size: 1.15rem; margin: 0; }
.sd-close { background: none; border: 0; color: inherit; cursor: pointer; font-size: 1.4rem; line-height: 0; min-height: 2.5rem; min-width: 2.5rem; }
.sd-items { list-style: none; margin: 0; overflow-y: auto; padding: 0.5rem 1rem; }
.sd-empty { display: none; margin: 0; padding: 1rem; }
.sd.is-empty .sd-empty { display: block; grid-row: 2; }
.sd.is-empty .sd-items { display: none; }
.sd-item { align-items: center; border-block-end: 1px solid #0001; display: grid; gap: 0.15rem 0.75rem; grid-template-columns: 4rem minmax(0, 1fr) auto; padding-block: 0.6rem; }
.sd-item img, .sd-noimg { aspect-ratio: 1; display: block; grid-row: 1 / span 2; height: auto; object-fit: cover; width: 4rem; }
.sd-name { font-weight: 600; }
.sd-price { font-variant-numeric: tabular-nums; font-weight: 700; }
.sd-qty { align-items: center; display: inline-flex; gap: 0.35rem; grid-column: 2 / -1; }
.sd-qty button { background: none; border: 1px solid #0003; color: inherit; cursor: pointer; line-height: 0; min-height: 2rem; min-width: 2rem; }
.sd-foot { border-block-start: 1px solid #0002; padding: 0.75rem 1rem 1rem; }
.sd-total { display: flex; font-size: 1.1rem; justify-content: space-between; margin: 0 0 0.4rem; }
.sd-note { font-size: 0.82rem; margin: 0 0 0.6rem; }
.sd-more { color: inherit; font-size: 0.9rem; }
@media (prefers-reduced-motion: reduce) { .sd { transition: none; } .cart-btn.is-bumped svg, .cart-btn.is-bumped [data-cart] { animation: none; } }

/* The dashboard widget, as a labelled sample */
.dw { background: #fff; border: 1px solid #c3c4c7; color: #1d2327; font: 13px/1.5 system-ui, sans-serif; max-width: 34rem; }
.dw-head { border-block-end: 1px solid #c3c4c7; font-size: 14px; font-weight: 600; margin: 0; padding: 0.6rem 0.75rem; }
.dw-sample { background: #fcf0e3; font-weight: 600; margin: 0; padding: 0.35rem 0.75rem; }
.dw-figs { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); padding: 0.75rem; }
.dw-figs b { display: block; font-size: 1.3rem; }
.dw-bars { align-items: end; display: flex; gap: 2px; height: 4rem; padding-inline: 0.75rem; }
.dw-bars i { background: #2271b1; display: block; flex: 1; }
.dw-lists { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); padding: 0.75rem; }
.dw-lists h4 { font-size: 13px; margin: 0 0 0.25rem; }
.dw-lists ol { margin: 0; padding-inline-start: 1.1rem; }
.xpad > .dw { margin-block-end: 0.5rem; }
.cmp-two { min-width: 0; }

.tp-item img { cursor: zoom-in; }
/* The one headline scale of the inner pages: big enough to lead, small enough to leave room for what the page shows. */
.ix h1, .article h1, .block-hero h1, .block-hero.tight h1, .ld-hero h1 { font-size: clamp(2.4rem, 4.6vw, 4.4rem); line-height: 1; margin-block-end: 0.5em; max-width: 24ch; }
.ix p, .block-hero p, .ld-hero p { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.4; margin-block-start: 0; }
.ix, .block-hero, .ld-hero { padding-block-end: clamp(1.5rem, 3vw, 2.5rem); }
.verdict h2, .settings h2, .steps h2, .rel h2, .faq h2, .store-sec h2, .backend h2, .store-band h2, .fam-head h2, .tp-head h2, .article h2, .pat-spec h2, .demo-wrap > h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.05; margin-block-end: 0.6em; }
.fx-transition h1 { --big: min(10vw, 20svh); }
.fx-speed h1 { --big: min(11vw, 18svh); }
.fx-pointer h1 { --big: clamp(3rem, 7vw, 7rem); }
.fx-layout h1 { --big: min(9vw, 16svh); }
.fx-many h1 { --big: min(10vw, 16svh); }
.fx h1 { line-height: 1; margin-block-end: 0.3em; }

/* The shared control: plain underlined words, as on the home page hero. */
.demo-bar { display: grid; font-size: 0.85rem; gap: 0.2rem; margin-block-end: 0.6rem; }
.pick { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0.15rem 0.8rem; }
.pick-l { font-weight: 700; min-width: 3.4rem; }
.opt { background: none; border: 0; border-block-end: 2px solid transparent; color: inherit; cursor: pointer; font: inherit; min-height: 1.75rem; opacity: 0.7; padding: 0.1rem 0; }
.opt small { font-size: 0.72em; font-weight: 700; opacity: 0.8; }
@media (hover: hover) { .opt:hover { opacity: 1; } }
.opt[aria-pressed="true"] { border-block-end-color: currentcolor; opacity: 1; }
.opt:focus-visible { outline: 2px solid currentcolor; outline-offset: 1px; }
.tp .demo-bar, .ob .demo-bar { padding-inline: var(--gutter, 1rem); }
.tp .demo-bar { color: #fff; position: relative; z-index: 2; }
.tp.is-tilted .demo-bar { margin-block: calc(var(--tp-size) * -0.3) calc(var(--tp-size) * 0.3); }
@media (max-width: 700px) {
	.pick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
	.opt, .pick-l { flex: none; white-space: nowrap; }
}


.ld-hero.has-fan { align-items: center; display: grid; gap: 1.5rem clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 1fr) minmax(14rem, 26rem); }
.hero-fan { aspect-ratio: 16 / 10; position: relative; }
.hero-fan picture { display: contents; }
.hero-fan img { aspect-ratio: 1; box-shadow: 0 0.5rem 1.5rem #0003; height: auto; left: 30%; object-fit: cover; position: absolute; top: 4%; transform-origin: 50% 110%; width: 44%; }
.hero-fan > :nth-child(1) img, .hero-fan > img:nth-child(1) { transform: rotate(-16deg) translateX(-42%); }
.hero-fan > :nth-child(2) img, .hero-fan > img:nth-child(2) { z-index: 2; }
.hero-fan > :nth-child(3) img, .hero-fan > img:nth-child(3) { transform: rotate(16deg) translateX(42%); }
@media (max-width: 760px) { .ld-hero.has-fan { grid-template-columns: minmax(0, 1fr); } .hero-fan { margin-inline: auto; max-width: 20rem; width: 100%; } }
.plans-tape { margin-block: clamp(2rem, 4vw, 3.5rem); overflow: hidden; }
.compat-bar { margin: 0 0 2.5rem; }
.compat-track { display: flex; gap: 3px; height: 1.5rem; }
.compat-bar .c-tested { background: #16130f; }
.compat-bar .c-read-docs { background: #e8a20a; }
.compat-bar .c-not-tested { background: #d9d4cb; }
.compat-bar figcaption { display: flex; flex-wrap: wrap; font-size: 0.95rem; gap: 0.4rem 1.5rem; margin-block-start: 0.6rem; }
.compat-bar figcaption i { display: inline-block; height: 0.7rem; margin-inline-end: 0.4rem; width: 0.7rem; }

/* Sales pages */
.why-list { display: grid; gap: 0.5rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); list-style: none; margin: 1rem 0 0; padding: 0; }
.why-list b { display: block; }
.buy-box { align-items: center; background: #1b1712; color: #fff; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; margin-block: 1.5rem; padding: 1.25rem; }
.buy-box h2 { margin: 0 0 0.25rem; }
.buy-box p { margin: 0; max-width: 34rem; }
.buy-do { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.buy-box .st-btn { --st-accent: #fff; --st-on: #1b1712; align-items: center; display: inline-flex; text-decoration: none; }
.buy-box .st-btn.ghost { background: none; border-color: #fff; color: #fff; }
.choose-them { border-inline-start: 3px solid currentcolor; margin-block: 1rem; padding-inline-start: 0.75rem; }
.vs-list { list-style: none; padding: 0; }
.vs-list li { margin-block-end: 0.6rem; }
.vs-list a { font-weight: 600; }
.ld-small { font-size: 0.8rem; margin-block-start: 1.5rem; opacity: 0.8; }
.ld-copy .cmp a { color: inherit; }

/* The header: no background, only type, inverted against what lies under it. The sheet
   of links is a sibling and not a child, as a blended parent would blend it too. */
:root { --bar-h: 3.75rem; scroll-padding-top: calc(var(--bar-h) + 0.5rem); }
html { background: #fff; }
.bar, .bar nav a, .bar .mark, .bar .cart-btn, .bar .nav-dl, .bar .menu-btn { color: #fff; }
.bar { align-items: center; backdrop-filter: none; background: none; border: 0; box-shadow: none; display: flex; flex-wrap: nowrap; font-size: 0.95rem; font-weight: 600; gap: 1.25rem; height: var(--bar-h); inset: 0 0 auto;  padding: 0 var(--gutter, 1rem); position: fixed; z-index: 60; }
.bar .mark { align-items: center; display: inline-flex; font-weight: 700; gap: 0.5rem; min-width: 0; text-decoration: none; white-space: nowrap; }
.bar .mark img { border-radius: 0; box-shadow: none; filter: brightness(0) invert(1); flex: none; height: 1.5rem; object-fit: contain; width: 1.5rem; }
.bar > nav { display: block; margin-inline: auto; }
.bar > nav ul { display: flex; gap: 0 1.5rem; list-style: none; margin: 0; padding: 0; }
.bar > nav a, .bar .nav-dl { text-decoration: none; text-underline-offset: 0.25em; white-space: nowrap; }
.bar > nav a[aria-expanded="true"], .bar > nav a[aria-current] { text-decoration: underline; }
@media (hover: hover) { .bar > nav a:hover, .bar .nav-dl:hover { text-decoration: underline; } }
.bar a:focus-visible, .bar button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.bar .nav-dl { font-weight: 700; }
.bar .menu-btn { display: none; font-weight: 700; padding: 0.6rem 0.2rem; text-decoration: none; }
.bar .cart-btn { align-items: center; background: none; border: 0; box-shadow: none; cursor: pointer; display: inline-flex; font: inherit; font-size: 1.05rem; gap: 0.3rem; min-height: 2.75rem; padding: 0 0.1rem; }
.bar .cart-btn [data-cart] { background: none !important; color: inherit; font-variant-numeric: tabular-nums; min-width: 0; padding: 0; }
@media (max-width: 1000px) {
	.bar > nav, .bar .nav-dl { display: none; }
	.bar .menu-btn { display: block; margin-inline-start: auto; }
}
.nav-sheet { background: #fff; box-shadow: 0 1rem 2.5rem #0002; color: #1b1712; display: grid; gap: 1.25rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); inset: 0 0 auto; max-height: 100dvh; overflow-y: auto; padding: calc(var(--bar-h) + 0.75rem) var(--gutter, 1rem) 1.75rem; position: fixed; z-index: 55; }
.nav-sheet[hidden] { display: none; }
.nav-group { display: none; }
.nav-group.is-on { display: block; }
.nav-sheet:not(.is-all) { grid-template-columns: minmax(0, 1fr); }
.nav-sheet:not(.is-all) .nav-group h2 { display: none; }
.nav-sheet:not(.is-all) .nav-group ul { display: grid; gap: 0.5rem 2rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.nav-group h2 { font-size: 0.95rem; margin: 0 0 0.4rem; opacity: 0.65; }
.nav-group ul { list-style: none; margin: 0; padding: 0; }
.nav-group a { color: inherit; display: block; padding: 0.45rem 0; text-decoration: none; }
.nav-group a b { display: block; font-size: 1.05rem; }
.nav-group a span { display: block; font-size: 0.875rem; opacity: 0.72; }
.nav-group a[aria-current] b { text-decoration: underline; text-underline-offset: 0.2em; }
@media (hover: hover) { .nav-group a:hover b { text-decoration: underline; text-underline-offset: 0.2em; } }
.nav-group a:focus-visible { outline: 2px solid currentcolor; outline-offset: 2px; }
.nav-more { display: none; }
.nav-sheet.is-all .nav-more { display: block; }
@media (max-width: 600px) { .nav-sheet.is-all { grid-template-columns: minmax(0, 1fr); } }
/* The page starts under the header. */
.page main > .ld > .ld-hero:first-child, .page main > .ix:first-child, .page main > .article:first-child, .page main > div:not(.ld):first-child > section:first-child { padding-block-start: calc(var(--bar-h) + 1.25rem); }
body > main > section:first-child:not(.ix) { box-sizing: border-box; padding-block-start: calc(var(--bar-h) + 0.25rem); }

/* The controls beside a demo. */
.demo-bar { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0.3rem 2rem; }
.pick[data-rail="Effect"], .pick[data-rail="Hover"], .pick[data-rail="Transition"] { flex-basis: 100%; }
.opt > span { pointer-events: none; }
.pick.is-thumbs { align-items: stretch; display: grid; flex-basis: 100%; gap: 0.35rem; grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); margin-block: 0.3rem; width: 100%; }
.pick.is-thumbs .pick-l { grid-column: 1 / -1; }
.pick.is-thumbs .opt { border: 1px solid #1e1e1e33; border-radius: 0.3rem; display: grid; font-size: 0.8rem; gap: 0.2rem; justify-items: center; line-height: 1.15; min-height: 2.75rem; opacity: 0.8; padding: 0.35rem 0.25rem; text-align: center; }
.pick.is-thumbs .opt svg { display: block; height: 2.6rem; width: auto; }
.pick.is-thumbs .opt small { display: block; font-size: 0.85em; }
.pick.is-thumbs .opt[aria-pressed="true"] { border-color: currentcolor; box-shadow: inset 0 0 0 1px currentcolor; opacity: 1; }
@media (max-width: 600px) {
	.pick.is-thumbs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
	.pick.is-thumbs .pick-l { align-self: center; }
	.pick.is-thumbs .opt { flex: none; width: 4.75rem; }
}
@media (hover: hover) { .bar .cart-btn:hover { transform: none; } }
.bar .cart-btn.has-items { background: none; }
.dg-tile .st-card, .dg-cards .st-card { display: flex; flex: 1; min-width: 0; }
.dg-tile .il > .st-card { width: 100%; }
@media (max-width: 999px) { .dg-all { position: static; } }
@media (max-width: 600px) {
	.dg-wall { gap: 1rem; grid-auto-columns: 78%; grid-auto-flow: column; grid-template-columns: none; overflow-x: auto; padding-block-end: 0.5rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
	.dg-tile { scroll-snap-align: start; }
	.dg-tile.is-wide, .dg-note { grid-column: auto; }
}

/* The second picture through a real transition, on the one card being pointed at. */
.il-morph { inset: 0; pointer-events: none; position: absolute; z-index: 1; }
.il-morph .gs-track, .il-morph .gs-slide { height: 100%; }
.il-morph .gs-media { height: 100%; object-fit: cover; width: 100%; }
.il[data-second-fx] .il-second { opacity: 0 !important; }
.pick[hidden] { display: none; }
/* The header leaves when scrolling down and comes back when scrolling up. */
html[data-bar="back"] .bar { transition: translate 0.28s cubic-bezier(0.23, 1, 0.32, 1); }
.bar { translate: 0 calc(var(--bar-off, 0) * -1px); }
.dg-all { transition: top 0.28s cubic-bezier(0.23, 1, 0.32, 1); }
.dg-all { top: calc(var(--bar-h, 3.5rem) - var(--bar-off, 0) * 1px); }
@media (prefers-reduced-motion: reduce) { .bar, .dg-all { transition: none; } }

/* The quick view: an × at the top right, and the picture flying in (src/quick.js). */
.qv { background: #fff; border: 0; color: #16130f; max-height: 90vh; max-width: min(92vw, 56rem); overflow: auto; padding: 0; width: 100%; }
.qv[open] { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.qv::backdrop { background: #000b; }
.qv-pic img { aspect-ratio: 1; display: block; height: 100%; object-fit: cover; width: 100%; }
.qv-body { align-self: center; padding: clamp(1.25rem, 4vw, 2.5rem); }
.qv-body h3 { font-size: 1.6rem; line-height: 1.15; margin: 0 0 0.4rem; }
.qv-price { font-size: 1.2rem; font-weight: 700; margin: 0 0 0.75rem; }
.qv-text { line-height: 1.5; margin: 0 0 1.25rem; }
.qv .st-btn { background: #16130f; border-color: #16130f; color: #fff; min-height: 2.75rem; padding-inline: 1.5rem; width: 100%; }
.qv-close { align-items: center; background: #fff; border: 0; border-radius: 50%; box-shadow: 0 1px 4px #0003; color: #16130f; cursor: pointer; display: flex; font-size: 1.5rem; height: 2.75rem; justify-content: center; line-height: 1; position: absolute; right: 0.5rem; top: 0.5rem; width: 2.75rem; z-index: 2; }
.qv-close:focus-visible { outline: 2px solid #16130f; outline-offset: 2px; }
.qv-flight { margin: 0; object-fit: cover; pointer-events: none; position: fixed; z-index: 3; }
@media (max-width: 620px) { .qv[open] { grid-template-columns: minmax(0, 1fr); } .qv-pic img { height: auto; } }

/* Motion in general: a press answers at once; nothing moves for those who asked not to. */
:where(button, a.st-btn, a.download, a.big-link) { transition: scale 160ms cubic-bezier(0.23, 1, 0.32, 1); }
button:active:not(:disabled), a.st-btn:active, a.download:active, a.big-link:active { scale: 0.97; }
.nav-sheet:not([hidden]) { transition: opacity 180ms cubic-bezier(0.23, 1, 0.32, 1), translate 180ms cubic-bezier(0.23, 1, 0.32, 1); }
@starting-style { .nav-sheet:not([hidden]) { opacity: 0; translate: 0 -0.4rem; } }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
	button:active:not(:disabled), a.st-btn:active, a.download:active, a.big-link:active { scale: 1; }
}

/* Adding to the cart: a short busy state, then a check that draws itself beside its word. */
.is-adding { cursor: progress; opacity: 0.7; }
.add-text { display: inline-grid; justify-items: center; vertical-align: middle; }
.add-l, .add-done { grid-area: 1 / 1; transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1), translate 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.add-done { align-items: center; display: inline-flex; gap: 0.3em; opacity: 0; translate: 0 0.35em; }
.is-added .add-l { opacity: 0; translate: 0 -0.35em; }
.is-added .add-done { opacity: 1; transition-duration: 220ms; translate: 0; }
.add-check { display: block; flex: none; }
.add-check path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-added .add-check path { stroke-dashoffset: 0; transition: stroke-dashoffset 240ms cubic-bezier(0.23, 1, 0.32, 1) 30ms; }
/* A plus or a bag turns into a check. */
.il-tag .il-fig .st-btn.is-added, .il-corners .il-fig .st-btn.is-added, .il-bar .il-fig .st-btn.is-added { --il-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E"); }
.il-tag .il-fig .st-btn.is-added::before, .il-corners .il-fig .st-btn.is-added::before, .il-bar .il-fig .st-btn.is-added::before { animation: icon-in 200ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes icon-in { from { opacity: 0; scale: 0.6; } }
.il-tag .add-check, .il-corners .add-check, .il-bar .add-check { display: none; }
/* The panel's buttons. */
.sd-do { display: grid; gap: 0.35rem; justify-items: center; margin-block-end: 0.5rem; }
.sd-checkout { box-sizing: border-box; width: 100%; }
.sd-view { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; font-size: 0.9rem; min-height: 2.25rem; padding: 0.2rem; text-decoration: underline; text-underline-offset: 0.2em; }
.sd-view:focus-visible, .sd-checkout:focus-visible { outline: 2px solid currentcolor; outline-offset: 2px; }
.sd-told { background: #0000000d; font-size: 0.85rem; line-height: 1.4; margin: 0 0 0.5rem; padding: 0.5rem 0.65rem; }
.sd.is-empty .sd-do, .sd.is-empty .sd-told { display: none; }
.sd-spoken { clip-path: inset(50%); height: 1px; margin: 0; overflow: hidden; position: fixed; white-space: nowrap; width: 1px; }

/* Home hero: the price and the button are on the picture. */
.hero { grid-template: "title stage" auto "tags stage" 1fr / minmax(16rem, 1fr) auto; }
.hero-head { grid-area: title; }
.hero-stage { align-self: start; grid-area: stage; position: relative; }
.hero-slider { grid-area: auto; }
.hero .tags { align-self: end; }
.hero .ticket { align-items: center; background: var(--paper); color: var(--ink); column-gap: 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; inset: auto 0.75rem 0.75rem; padding: 0.75rem 0.75rem 0.75rem 1rem; position: absolute; z-index: 2; }
.hero .ticket-name { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero .price { font-size: clamp(1.75rem, 3vw, 2.75rem); grid-column: 1; margin: 0; }
.hero .buy { grid-column: 2; grid-row: 1 / span 2; min-height: 3rem; padding-inline: 1.5rem; transition: scale 160ms cubic-bezier(0.23, 1, 0.32, 1); white-space: nowrap; }
.hero .buy:active { scale: 0.97; transform: none; }
.hero-controls { display: flex; gap: 0.35rem; inset: 0.75rem 0.75rem auto auto; position: absolute; z-index: 2; }
.hero-controls .pause { background: var(--paper); border: 0; color: var(--ink); min-height: 2.75rem; padding-block: 0.4rem; }
@media (max-width: 780px) {
	.hero { grid-template: "title" auto "stage" auto "tags" auto / minmax(0, 1fr); }
	.hero { --title: 13vw; }
	.hero-stage { width: 100%; }
	.hero .ticket { column-gap: 0.75rem; }
	.hero .ticket-name { font-size: 0.9rem; }
	.hero .buy { padding-inline: 1rem; }
	.hero-controls .pause { min-height: 2.5rem; }
}

.demo-bar.is-under { margin-block: 0.9rem 0; }
@media (max-width: 1279px) {
	.pick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
	.pick:not(.is-thumbs) .opt, .pick-l { flex: none; white-space: nowrap; }
	.pick.is-thumbs { display: flex; flex-wrap: nowrap; }
	.pick.is-thumbs .pick-l { align-self: center; }
	.pick.is-thumbs .opt { flex: none; width: 4.75rem; }
}
/* The room the controls will take, so that the copy under a row does not jump. */
@media (scripting: enabled) {
	html[data-controls="all"] .il > .st-row[data-demo]:last-child, .il[data-rails-all] > .st-row[data-demo]:last-child { margin-block-end: 18.5rem; }
}
@media (scripting: enabled) and (min-width: 1280px) {
	html[data-controls="all"] .il > .st-row[data-demo]:last-child, .il[data-rails-all] > .st-row[data-demo]:last-child { margin-block-end: 27rem; }
}

/* What lies on the picture belongs to the picture: a row that stretches the
   card must not stretch the box these are placed in. */
.il-overlay .il-fig, .il-center .il-fig, .il-bar .il-fig, .il-scrim .il-fig, .il-curtain .il-fig, .il-spotlight .il-fig { flex: none; }
.dg-tile .il-overlay, .dg-tile .il-center, .dg-tile .il-bar, .dg-tile .il-scrim, .dg-tile .il-curtain, .dg-tile .il-spotlight { align-self: start; }
.il-overlay .st-card, .il-center .st-card, .il-bar .st-card, .il-scrim .st-card, .il-curtain .st-card, .il-spotlight .st-card { align-items: flex-start; }

/* The tilted wave: its heading and row are one dark band, and the shade reaches
   past the picture's edge, so no light hairline shows when it is rotated. */
.wave-band { background: rgb(20 17 15); }
.tp-info { bottom: -1px; left: -1px; right: -1px; }

/* The sticker follows the card's width. */
.il-tag .il-fig { container-type: inline-size; }
.il-tag .il-fig .st-price { font-size: clamp(0.72rem, 4.4cqi, 1rem); min-width: clamp(3rem, 19cqi, 4.25rem); padding: 0.25rem; }

/* The stretching row: the plugin's Panel. Name and price on the picture, and the
   button opens when a card is pointed at. A finger has it all the time. */
#row .product figure { overflow: hidden; position: relative; }
#row .product figcaption { background: var(--paper); bottom: 0; color: var(--ink); display: grid; gap: 0 0.75rem; grid-template-columns: minmax(0, 1fr) auto; left: 0; padding: 0.5rem 0.75rem; position: absolute; right: 0; z-index: 3; }
#row .product .buy { grid-column: 1 / -1; width: 100%; }
@media (hover: hover) {
	#row .product .buy { border-width: 0; max-height: 0; opacity: 0; overflow: hidden; padding-block: 0; transition: max-height 220ms cubic-bezier(0.23, 1, 0.32, 1), margin 220ms cubic-bezier(0.23, 1, 0.32, 1), opacity 160ms ease, padding 220ms cubic-bezier(0.23, 1, 0.32, 1); }
	#row .product figure:hover .buy, #row .product figure:focus-within .buy { margin-block-start: 0.5rem; max-height: 4rem; opacity: 1; padding-block: 0.6rem; }
}

/* Coverflow arrows, on either side of the covers. */
.stage { position: relative; }
.flow-step { background: var(--paper); border: 0; color: var(--ink); min-height: 3rem; min-width: 3rem; position: absolute; top: calc(50% - 3rem); transition: scale 160ms cubic-bezier(0.23, 1, 0.32, 1); z-index: 4; }
.flow-step:active { scale: 0.94; }
.flow-prev { left: var(--gutter, 1rem); }
.flow-next { right: var(--gutter, 1rem); }
.stage { cursor: grab; }
#row .product figcaption { bottom: 0.5rem; left: 0.5rem; right: 0.5rem; }

/* All the plans in one row, where they fit. */
@media (min-width: 1100px) { .plans-row { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.mg-live { display: none; }

/* The header: at the top of a page no background, in the colour of what is
   under it. Anywhere else, when it comes back on scrolling up, it has a
   background, so it never runs over the text. */
:root { --bar-ink: #1b1712; }
.bar { background: #fff; box-shadow: 0 1px 0 #0002; color: #1b1712; mix-blend-mode: normal; transition: translate 0.28s cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms ease, box-shadow 200ms ease, color 200ms ease; }
.bar nav a, .bar .mark, .bar .cart-btn, .bar .nav-dl, .bar .menu-btn { color: inherit; }
.bar .mark img { filter: none; }
.bar a:focus-visible, .bar button:focus-visible { outline-color: currentcolor; }
html[data-bar-top] .bar { background: transparent; box-shadow: none; color: var(--bar-ink); }

/* The changing grid: the old text goes before the new one comes. */
.gs-panes .product figcaption, .gs-panes .product .buy { opacity: clamp(0, calc((var(--gs-near, 1) - 0.5) * 2), 1); }

/* The ticker's card designs. The button is on the card and comes when pointed at. */
.tick-styles { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-block-start: 1rem; padding-inline: var(--gutter); }
.tick-styles > span { font-weight: 700; }
#tick .product figure { container-type: inline-size; overflow: hidden; position: relative; }
#tick .product figcaption { display: grid; gap: 0.1rem 0.5rem; grid-template-columns: minmax(0, 1fr) auto; z-index: 3; }
#tick .product .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tick .product .buy { font-size: 0.875rem; grid-column: 1 / -1; padding: 0.45rem 0.75rem; }
@media (hover: hover) {
	#tick .product .buy { opacity: 0; transition: opacity 160ms ease, translate 220ms cubic-bezier(0.23, 1, 0.32, 1); translate: 0 0.4rem; }
	#tick .product figure:hover .buy, #tick .product figure:focus-within .buy { opacity: 1; translate: 0; }
}
#tick[data-card="poster"] .product figcaption { background: linear-gradient(transparent, rgb(0 0 0 / 76%) 38%); bottom: 0; color: #fff; left: 0; padding: 3rem 0.75rem 0.75rem; position: absolute; right: 0; }
#tick[data-card="poster"] .product .p { color: #fff; }
#tick[data-card="poster"] .product .buy { background: #fff; border-color: #fff; color: #111; margin-block-start: 0.4rem; width: 100%; }
#tick[data-card="glass"] .product figcaption { backdrop-filter: blur(12px); background: rgb(255 255 255 / 80%); border-radius: 0.75rem; bottom: 0.5rem; color: #111; left: 0.5rem; padding: 0.4rem 0.6rem; position: absolute; right: 0.5rem; }
#tick[data-card="glass"] .product .p { color: #111; }
#tick[data-card="glass"] .product .buy { background: #111; border-color: #111; border-radius: 999px; color: #fff; margin-block-start: 0.35rem; width: 100%; }
@media (hover: hover) {
	#tick[data-card="glass"] .product .buy { display: none; }
	#tick[data-card="glass"] .product figure:hover .buy, #tick[data-card="glass"] .product figure:focus-within .buy { display: block; }
}
#tick[data-card="sticker"] .product figcaption { padding-block-start: 0.5rem; }
#tick[data-card="sticker"] .product .p { align-items: center; aspect-ratio: 1; background: var(--ink); border-radius: 50%; color: var(--paper); display: flex; font-size: clamp(0.85rem, 6cqi, 1.2rem); justify-content: center; min-width: clamp(3rem, 22cqi, 4.25rem); position: absolute; right: 0.5rem; rotate: -8deg; top: 0.5rem; }
#tick[data-card="sticker"] .product .buy { background: var(--ink); border-color: var(--ink); border-radius: 999px; color: var(--paper); position: absolute; right: 0.5rem; top: calc(100cqi - 3rem); width: auto; }
#tick[data-card="shelf"] .product figcaption { border-block-start: 1px solid currentcolor; margin-block-start: 0.5rem; padding-block-start: 0.4rem; }
#tick[data-card="shelf"] .product .buy { background: none; border: 0; color: inherit; justify-self: start; padding: 0.2rem 0; text-decoration: underline; text-underline-offset: 0.25em; width: auto; }

/* The settings beside a demo: small and tidy, like the block sidebar they show. */
.inspector { align-self: start; background: #fff; border: 1px solid #0000001f; box-shadow: 0 0.5rem 1.5rem #0000000f; color: #1e1e1e; font-size: 0.875rem; padding: 0; }
.inspector fieldset { border: 0; display: grid; gap: 0.35rem; margin: 0; min-width: 0; padding: 1rem 1rem 0.75rem; }
.inspector legend { float: left; font-size: 0.8125rem; font-weight: 700; margin-block-end: 0.5rem; padding: 0; width: 100%; }
.inspector label { align-items: baseline; display: flex; font-size: 0.8125rem; font-weight: 500; justify-content: space-between; margin-block-start: 0.5rem; }
.inspector output { color: #1e1e1eb3; font-variant-numeric: tabular-nums; }
.inspector select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%231e1e1e'%3E%3Cpath d='M213.7 101.7l-80 80a8 8 0 0 1-11.4 0l-80-80a8 8 0 0 1 11.4-11.4L128 164.7l74.3-74.4a8 8 0 0 1 11.4 11.4Z'/%3E%3C/svg%3E") no-repeat right 0.6rem center / 0.875rem; border: 1px solid #0000004d; border-radius: 4px; color: inherit; cursor: pointer; font: inherit; font-size: 0.875rem; height: 2.5rem; padding-inline: 0.65rem 2rem; transition: border-color 160ms ease; width: 100%; }
@media (hover: hover) { .inspector select:hover { border-color: #1e1e1e; } }
.inspector input[type="range"] { accent-color: #1e1e1e; margin: 0; width: 100%; }
.inspector [data-about] { font-size: 0.8125rem; line-height: 1.4; margin: 0.5rem 0 0; }
.inspector-note { border-block-start: 1px solid #0000001a; color: #1e1e1eb3; font-size: 0.75rem; margin: 0; padding: 0.6rem 1rem; }

/* The home page: the two ways in, what is in each, and how it works. */
.act { background: var(--ink, var(--char)); border: 2px solid var(--ink, var(--char)); color: var(--paper, #fff); display: inline-block; font-weight: 700; padding: 0.7rem 1.25rem; text-align: center; text-decoration: none; transition: scale 120ms ease, opacity 160ms ease; }
.act.ghost { background: none; color: var(--ink, var(--char)); }
.act:active { scale: 0.97; }
@media (hover: hover) { .act:hover { opacity: 0.85; } }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block-start: 1.25rem; }
.hero-note { font-size: 0.875rem; margin: 0.75rem 0 0; opacity: 0.85; }
.inside { --ink: #1b1712; --paper: #fff; padding: clamp(3rem, 6vw, 5.5rem) var(--gutter); }
.inside > h2, .home-how > h2, .plans > h2, .last-cta > h2 { font-size: clamp(2.4rem, 5.5vw, 4.75rem); line-height: 0.95; margin-block-end: clamp(1.25rem, 3vw, 2.25rem); max-width: 18ch; }
.in-cols { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.in-col { --cta-ink: #1b1712; align-content: start; border: 2px solid #1b1712; display: grid; gap: 1.25rem; grid-template-rows: auto auto 1fr auto; padding: clamp(1.25rem, 2.5vw, 2rem); }
.in-col.is-pro { --ink: #fff; --paper: #1b1712; background: #1b1712; color: #fff; }
.in-col header { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.in-col h3 { font-family: Shoulders, Impact, sans-serif; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 900; line-height: 1; margin: 0; }
.in-price { font-weight: 600; margin: 0; }
.in-nums { display: grid; gap: 0.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.in-nums div { display: flex; flex-direction: column; }
.in-nums dd { font-family: Shoulders, Impact, sans-serif; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; line-height: 1; margin: 0; }
.in-nums dt { font-size: 0.8125rem; line-height: 1.25; }
.in-list { display: grid; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.in-list li { display: grid; gap: 0.6rem; grid-template-columns: 1.05rem minmax(0, 1fr); line-height: 1.35; }
.in-list svg { height: 1.05rem; margin-block-start: 0.15rem; width: 1.05rem; }
.in-list a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.in-col .act { justify-self: start; }
.in-more { font-weight: 600; margin: 1rem 0 0; }
.home-how { padding: clamp(3rem, 6vw, 5.5rem) var(--gutter); }
.home-how ol { display: grid; gap: 1.5rem var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); list-style: none; margin: 0; padding: 0; counter-reset: step; }
.home-how li { border-block-start: 2px solid #1b1712; counter-increment: step; padding-block-start: 0.75rem; }
.home-how li::before { content: counter(step); font-family: Shoulders, Impact, sans-serif; font-size: 2.5rem; font-weight: 800; line-height: 1; }
.home-how h3 { margin: 0.4rem 0 0.3rem; }
.home-how p { margin: 0; max-width: 34ch; }
.plans > .lede { margin: 0 0 1.5rem; max-width: 40rem; }
.plans h2.again { margin-block-start: clamp(3rem, 6vw, 5rem); }
.more-links { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); list-style: none; margin: 0; padding: 0 var(--gutter); }
.more-links a { border-block-start: 2px solid #1b1712; display: grid; gap: 0.25rem; height: 100%; padding: 0.75rem 1rem 1.25rem 0; text-decoration: none; }
.more-links b { font-size: 1.15rem; }
.more-links span { font-size: 0.9rem; line-height: 1.35; }
@media (hover: hover) { .more-links a:hover b { text-decoration: underline; text-underline-offset: 0.2em; } }
.last-cta { --ink: #fff; --paper: #1b1712; background: #1b1712; color: #fff; padding: clamp(3rem, 7vw, 6rem) var(--gutter); }
.last-cta p { margin: 1.5rem 0 0; }
.plans h2.again { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1; margin-block-end: 0.75rem; }
.core-compare { margin-block-start: 1rem; }
.core-compare summary { cursor: pointer; font-weight: 700; }
.core-compare[open] summary { margin-block-end: 1rem; }

/* A guide's example, wider than its text. */
.article h1 { max-width: 42rem; }
.article > .art-demo { margin-block: 2rem; max-width: 72rem; }
.art-try { font-weight: 600; margin: 0 auto 0.75rem; max-width: 42rem; }

/* Pro has one colour, on every page. */
:root { --pro: #0f3fd0; }
.pro-badge, .dg-tile h3 small.pro-badge, .opt small { background: var(--pro); border-radius: 999px; color: #fff; display: inline-block; font-size: 0.72rem; font-weight: 700; line-height: 1; opacity: 1; padding: 0.22em 0.6em; vertical-align: 0.12em; }
.sticker.pro { background: var(--pro); box-shadow: 0 0 0 2px #fff; color: #fff; }
.in-col.is-pro .act { background: var(--pro); border-color: var(--pro); color: #fff; }

/* The card designs on the home page: one row, and a choice above it. */
.dp-pick { display: grid; gap: 0.6rem; margin-block-end: 1rem; padding-inline: var(--gutter); }
.dp-group { align-items: baseline; display: flex; gap: 0.75rem; }
.dp-group > span { flex: none; }
.dp-free { font-size: 0.875rem; font-weight: 700; min-width: 2.6rem; }
.dp-idea { margin: 0 0 1rem; max-width: 48rem; padding-inline: var(--gutter); }
.dp-row.dg-cards { align-items: start; display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-inline: var(--gutter); }
.dp-row.il-beside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dp-row.il-beside > :nth-child(n + 3) { display: none; }
.dp-all { font-weight: 600; margin: 1rem 0 0; padding-inline: var(--gutter); }
@media (max-width: 760px) { .dp-row.dg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dp-row.il-beside { grid-template-columns: minmax(0, 1fr); } }

/* Tilted, a shade clipped to the picture leaves the picture's edge as a light hairline. */
.tp-item { overflow: visible; }

/* The section has its own gutter already. */
.dp-pick, .dp-idea, .dp-row.dg-cards, .dp-all { padding-inline: 0; }

/* Offset: the panel in the middle, half on the picture. */
.il-offset .il-fig figcaption { align-items: center; margin-inline: 1rem; text-align: center; }
.il-offset .il-fig .st-btn { align-self: center; }

/* Controls that look like controls: a bordered button, filled when it is on. */
.tag, .pick:not(.is-thumbs) .opt { align-items: center; background: none; border: 1px solid color-mix(in srgb, currentcolor 28%, transparent); border-radius: 6px; color: inherit; cursor: pointer; display: inline-flex; font: inherit; font-size: 0.8125rem; font-weight: 500; gap: 0.35rem; line-height: 1.2; min-height: 2rem; opacity: 1; padding: 0.25rem 0.7rem; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, scale 120ms ease; white-space: nowrap; }
@media (hover: hover) { .tag:hover, .pick:not(.is-thumbs) .opt:hover { background: color-mix(in srgb, currentcolor 9%, transparent); border-color: color-mix(in srgb, currentcolor 45%, transparent); opacity: 1; } }
.tag:active, .pick:not(.is-thumbs) .opt:active { scale: 0.97; }
.tag[aria-pressed="true"], .pick:not(.is-thumbs) .opt[aria-pressed="true"] { background: var(--ink, #1b1712); border-color: var(--ink, #1b1712); color: var(--paper, #fff); }
.tag:focus-visible, .opt:focus-visible { outline: 2px solid currentcolor; outline-offset: 2px; }
.tag-rail { gap: 0.35rem; }
.pick:not(.is-thumbs) { gap: 0.35rem; }

.dp-pick { border: 1px solid #0000001f; border-radius: 10px; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); margin-block-end: 1rem; padding: 1rem; }
.dp-control { display: grid; gap: 0.5rem; align-content: start; }
.dp-control h3 { font-size: 0.875rem; font-weight: 700; margin: 0; }
.dp-group { align-items: flex-start; gap: 0.6rem; }
.dp-free, .dp-tier { align-items: center; display: flex; flex: none; font-size: 0.75rem; font-weight: 700; min-height: 2rem; min-width: 2.25rem; }
.dp-free { color: #1b1712b3; }

.dp { --ink: #1b1712; --paper: #fff; }

/* Quick view: a plain close button, without a shadow. */
.qv-close { background: #fff; border: 1px solid #00000024; border-radius: 6px; box-shadow: none; font-size: 1.25rem; height: 2.25rem; transition: background-color 120ms ease, scale 120ms ease; width: 2.25rem; }
@media (hover: hover) { .qv-close:hover { background: #f1f1ef; } }
.qv-close:active { scale: 0.97; }

/* The ticker: nothing waits for the button; it opens with a quick bounce. */
#tick .product figcaption { align-items: center; }
#tick[data-card="poster"] .product figcaption { padding-block-start: 2.5rem; }
#tick .product .p { line-height: 1; }
@media (hover: hover) {
	#tick:not([data-card="sticker"]) .product .buy { border-block-width: 0; display: block; margin-block: 0; max-height: 0; opacity: 0; overflow: hidden; padding-block: 0; transition: max-height 260ms cubic-bezier(0.34, 1.56, 0.64, 1), margin 260ms cubic-bezier(0.34, 1.56, 0.64, 1), padding 260ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 120ms ease; translate: none; }
	#tick:not([data-card="sticker"]) .product figure:hover .buy, #tick:not([data-card="sticker"]) .product figure:focus-within .buy { margin-block-start: 0.4rem; max-height: 3rem; opacity: 1; padding-block: 0.45rem; }
	#tick[data-card="glass"] .product .buy { display: block; }
	#tick[data-card="glass"] .product figure:hover .buy, #tick[data-card="glass"] .product figure:focus-within .buy { display: block; }
}

/* Quick view: more than one picture is a slider. */
.qv-pic { min-width: 0; overflow: hidden; position: relative; }
.qv-gs { --gs-per-view: 1; --gs-gap: 0px; height: 100%; }
.qv-gs .gs-track, .qv-gs .gs-slide { height: 100%; }
.qv-step { align-items: center; background: #fff; border: 1px solid #00000024; border-radius: 6px; color: #16130f; cursor: pointer; display: flex; font-size: 1.25rem; height: 2.25rem; justify-content: center; line-height: 1; position: absolute; top: calc(50% - 1.125rem); width: 2.25rem; z-index: 2; }
.qv-step[hidden] { display: none; }
.qv-prev { left: 0.75rem; }
.qv-next { right: 0.75rem; }

/* Compatibility: one card per name, the answer first. */
.cc-sum { display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin: 0 0 1.25rem; }
.cc-sum dd { font-family: Shoulders, Impact, sans-serif; font-size: 3rem; font-weight: 800; line-height: 1; margin: 0; }
.cc-sum dt { font-size: 0.875rem; }
.cc-jump { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-block-end: 2rem; }
.cc-jump .tag { text-decoration: none; }
.cc-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); margin-block-end: 2.5rem; }
.cc { align-content: start; border: 1px solid #0000001f; border-radius: 8px; display: grid; gap: 0.5rem; padding: 0.9rem 1rem; }
.cc header { display: grid; gap: 0.35rem; justify-items: start; }
.cc h3 { font-size: 1.05rem; margin: 0; }
.cc p { font-size: 0.9rem; line-height: 1.4; margin: 0; }
.cc details { font-size: 0.875rem; }
.cc summary { cursor: pointer; font-weight: 600; }
.cc ul { margin: 0.5rem 0 0; padding-inline-start: 1.1rem; }
.cp { border-radius: 999px; font-size: 0.72rem; font-weight: 700; padding: 0.15em 0.6em; }
.cp-ok { background: #d9f2df; color: #0d4a22; }
.cp-docs { background: #fbf0cf; color: #5c4300; }
.cp-no { background: #ececea; color: #44423d; }

/* Pricing: each feature with its live example. */
.pf { padding-inline: var(--gutter); }
.pf > h2 { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1; margin: clamp(2.5rem, 5vw, 4rem) 0 1.5rem; }
.pf-row { align-items: center; border-block-start: 2px solid #1b1712; display: grid; gap: 1.5rem clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.pf-text { align-self: start; display: grid; gap: 0.5rem; justify-items: start; }
.pf-text h3 { font-size: 1.5rem; line-height: 1.15; margin: 0; }
.pf-text p { margin: 0; }
.pf-free { border: 1px solid #1b171266; border-radius: 999px; font-size: 0.72rem; font-weight: 700; padding: 0.15em 0.6em; }
.pf-demo { min-width: 0; overflow: hidden; }
.pf-demo .store-sec { padding: 0; }
@media (max-width: 860px) { .pf-row { grid-template-columns: minmax(0, 1fr); } }
.pf-demo .per { --per-l: 3 !important; }

.free-badge, .dg-tile h3 small.free-badge { background: #e4e4e1; border-radius: 999px; color: #3d3b36; display: inline-block; font-size: 0.72rem; font-weight: 700; line-height: 1; opacity: 1; padding: 0.22em 0.6em; vertical-align: 0.12em; }

/* Sticker in the ticker: a small button inside the picture's corner, popping in. */
#tick[data-card="sticker"] .product .buy { border: 0; box-shadow: none; font-size: 0.8125rem; line-height: 1.2; outline-offset: 2px; padding: 0.45rem 0.8rem; right: 0.6rem; top: calc(100cqi - 2.55rem); }
@media (hover: hover) {
	#tick[data-card="sticker"] .product .buy { opacity: 0; scale: 0.85; transform-origin: 100% 100%; transition: opacity 120ms ease, scale 240ms cubic-bezier(0.34, 1.56, 0.64, 1); translate: none; }
	#tick[data-card="sticker"] .product figure:hover .buy, #tick[data-card="sticker"] .product figure:focus-within .buy { opacity: 1; scale: 1; }
}

/* The admin screen beside the receipt. */
.till-shot { margin: 2rem 0 0; min-width: 0; }
.till-shot img { border-radius: 6px; display: block; height: auto; width: 100%; }
.till-shot figcaption { font-size: 0.8125rem; margin-block-start: 0.5rem; opacity: 0.8; }

/* Product Stage on the home page. */
.home-stage { --ink: #1b1712; --paper: #fff; padding-block: clamp(3rem, 6vw, 5.5rem); }
.home-stage .band-head { padding-inline: var(--gutter); }
.home-stage .sticker.free { background: #e4e4e1; color: #3d3b36; }
.home-stage .band-head h2 { font-size: clamp(2.4rem, 5.5vw, 4.75rem); line-height: 0.95; }

/* Air between the bar and the main heading. */
body > main > section.hero:first-child:not(.ix) { padding-block-start: calc(var(--bar-h) + clamp(1.25rem, 3vw, 3rem)); }

/* The Panel's button, as in the plugin. */
.il-overlay .il-fig .st-btn { background: #fff; border-color: #fff; color: #111; }