/* Layout system, after interfere.com, interfere.com/product/designers, elevenlabs.io and
   lovable.dev/for-work (D-45, D-50). Loads after site.css and keeps its grey wireframe look: bars, soft panels,
   thin lines. Each block names its source in its template. */

:root {
  --warm: #f9f9f8;
  --dark: #2a2a2a;
}

/* ---------- Page frame: guide lines down both sides of the content, after elevenlabs.io ---------- */

.site-main { position: relative; }
.site-main::before, .site-main::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); pointer-events: none; }
.site-main::before { left: calc((100cqw - min(100cqw, 1200px)) / 2); }
.site-main::after { right: calc((100cqw - min(100cqw, 1200px)) / 2); }
.sec + .sec::before { width: min(1200px, 100%); }

/* ---------- Text and small parts ---------- */

.ticks { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks .tick { margin-top: 3px; }
.ticks li > .b { margin-top: 6px; }
.ticks.sm { gap: 8px; }
.ticks.sm .tick { width: 15px; height: 15px; margin-top: 2px; }
.ticks.sm .tick::after { left: 5px; top: 3px; width: 3px; height: 6px; }
.ticks.sm .tx { font-size: 14px; line-height: 1.45; color: #6a6a6a; }
.st-label { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; }

/* ---------- Section heading in one row: heading left, intro and button right (elevenlabs.io) ---------- */

.sh-split { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 48px; }
.sh-l, .sh-r { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sh-r { width: 100%; max-width: 460px; justify-self: end; }
/* Only a button on the right: it lines up with the right edge, as on elevenlabs.io. */
.sh-r:not(:has(p, .stack)) { align-items: flex-end; }
.sh-split .tx-h2 { font-size: 36px; }
.sh-split .st-h2 .b-h2 { height: 22px; }

/* ---------- Heroes ---------- */

/* Two columns, picture on thin grid lines (interfere.com/product/designers) */
.hero-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.hs-copy { display: flex; flex-direction: column; gap: 22px; }
.hs-copy .tx-h1 { font-size: 52px; }
.hs-copy .row { margin-top: 4px; }
.hs-media { position: relative; margin-right: calc(-1 * var(--bleed)); min-width: 0; }
.gridbg { position: relative; isolation: isolate; padding: 56px 0 56px 56px; }
.gridbg::before { content: ""; position: absolute; inset: 0; z-index: -1; border-left: 1px solid var(--line);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 25% 25%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); }
.gridbg .frame, .gridbg .img-hero { border-radius: 18px 0 0 18px; border-right: 0; }
.gridbg .frame-body { min-height: 380px; }
.gridbg .img-hero { min-height: 400px; background: #fff; }
.v-fact .fact-card { margin: 0; display: flex; flex-direction: column; gap: 22px; padding: 36px; border-radius: 22px 0 0 22px; border-right: 0; background: #fff; box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .35); }
.v-fact .fact-big { height: 64px; }
.fact-doc { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.fact-doc .arrow { margin: 0; }
.v-fact .fact-tx { font-size: 26px; line-height: 1.25; letter-spacing: -.015em; font-weight: 500; color: #2e2e2e; }

/* Heading row, then tabs over the product (elevenlabs.io) */
.showcase { margin-top: 56px; padding: 6px; border: 1px solid var(--line); border-radius: 22px; background: var(--soft); }
.showcase::before { display: none; }
.sc-tabs { display: flex; gap: 4px; padding: 0 0 6px; }
.sc-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 14px; color: #7a7a7a; font-weight: 550; white-space: nowrap; }
.sc-tab:hover { color: #4a4a4a; }
.sc-tab.on { background: #fff; color: #4a4a4a; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px var(--line); }
.showcase .frame { box-shadow: none; border-radius: 16px; }
.showcase .frame-body { min-height: 460px; }

.proof-row { margin-top: 48px; padding: 0; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof-row .row-label { margin: 0 24px; }
.proof-row .row-items { gap: 0; }
.proof-row .row-it { padding: 26px 22px; border-left: 1px solid var(--line); min-height: 84px; }
.proof-row .row-items .row-it:first-child { border-left: 0; }

/* Hub: NemTilmeld in the middle, the tools around it (lovable.dev/for-work) */
.v-logos .hs-media { margin-right: 0; }
.hub { position: relative; aspect-ratio: 1; width: min(100%, 460px); margin: 0 auto; }
.hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub-lines line { stroke: #d4d4d4; stroke-width: 1.5; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.hub-core { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 26px; background: var(--dark); display: grid; place-items: center; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .45); }
.hub-core .sq-lg { background: #444; border-color: #555; }
.hub-core .sq-lg::after { background: #8a8a8a; }
.hub-node { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 17px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; box-shadow: 0 12px 24px -16px rgba(0, 0, 0, .3); }
.n0 { left: 87.5%; top: 50%; } .n1 { left: 76.5%; top: 76.5%; } .n2 { left: 50%; top: 87.5%; } .n3 { left: 23.5%; top: 76.5%; }
.n4 { left: 12.5%; top: 50%; } .n5 { left: 23.5%; top: 23.5%; } .n6 { left: 50%; top: 12.5%; } .n7 { left: 76.5%; top: 23.5%; }

/* Four facts with a line under each (lovable.dev/for-work), in the trust hero and the proof strip */
.trust-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-col { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 190px; padding: 24px 22px 28px; }
.trust-col + .trust-col { border-left: 1px solid var(--line); }
.trust-col::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, #dadada, #a8a8a8); }
.trust-col .sq-md { margin-bottom: auto; background: #fff; }
.trust-col .tx-h3 { font-size: 19px; line-height: 1.3; hyphens: auto; overflow-wrap: break-word; }
.hero-trust { margin-top: 64px; }
.sec-strip { padding: 96px 0; background: var(--warm); }

/* ---------- Steps ---------- */

/* Accordion beside the product (interfere.com/product/designers) */
.stp-row { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 72px; align-items: center; }
.stp-copy { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.stp-copy .sh { margin-bottom: 8px; }
.stp-list { border-top: 1px solid var(--line); }
.stp-it { position: relative; border-bottom: 1px solid var(--line); }
.stp-it[open]::before { content: ""; position: absolute; left: 0; top: -1px; width: 55%; height: 2px; background: #6f6f6f; }
.stp-sum { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; }
.stp-sum::-webkit-details-marker { display: none; }
.stp-it:not([open]) .stp-sum .tx { color: #8a8a8a; font-weight: 500; }
.stp-ic { width: 8px; height: 8px; border: solid #a8a8a8; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); flex: none; margin-top: -4px; transition: transform .2s; }
.stp-it[open] .stp-ic { transform: rotate(-135deg); margin-top: 4px; }
.stp-body { display: flex; flex-direction: column; gap: 14px; padding: 0 0 22px; }
.stp-copy .steps-note, .stp-copy .steps-also { margin-top: 0; }
.stp-media { min-width: 0; margin-right: calc(-1 * var(--bleed)); }
.stp-media .frame { border-radius: 18px 0 0 18px; border-right: 0; }
.stp-media .frame-body { min-height: 440px; }

/* Phases side by side, each a heading over a line (lovable.dev/for-work: Build, Run, Govern) */
.phases { gap: 40px; }
.phase { display: flex; flex-direction: column; gap: 20px; }
.phase-h { display: flex; align-items: center; gap: 16px; }
.phase-h .tx-h2 { font-size: 26px; flex: none; }
.phase-h .b-h2 { flex: none; }
.phase-line { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #c9c9c9, #ededed); }

/* ---------- Features as a bento grid (elevenlabs.io) ---------- */

.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.bento-it { grid-column: span 2; gap: 12px; padding: 24px; background: var(--warm); overflow: hidden; }
.bento-it.lg { grid-column: span 3; }
.bento-it .sq-lg { background: #fff; margin-bottom: 14px; }
.bento-vis { margin: -24px -24px 10px; height: 240px; overflow: hidden; padding: 28px 0 0 28px; border-bottom: 1px solid var(--line); background: radial-gradient(70% 90% at 30% 100%, #ececec, #f6f6f6 70%); }
.bento-vis .frame { border-radius: 14px 0 0 0; border-right: 0; border-bottom: 0; box-shadow: 0 20px 40px -30px rgba(0, 0, 0, .3); }
.bento-it .tx-quote { font-size: 15px; padding: 12px 14px; background: #fff; }
.bento-it .tx-link { margin-top: auto; padding-top: 10px; }

/* ---------- Feature rows ---------- */

.feature .ticks { padding-top: 20px; border-top: 1px solid var(--line); }
.phone-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.feature-phone { display: flex; justify-content: center; padding: 40px 0; background: radial-gradient(50% 50% at 50% 50%, #efefef, transparent 70%); }
.phone { width: 280px; height: 560px; padding: 12px; border-radius: 42px; border: 1px solid var(--line-2); background: #fff; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .35); overflow: hidden; }
.phone .frame { height: 100%; border-radius: 30px; box-shadow: none; }
.phone .frame-body { grid-template-columns: 1fr; min-height: 100%; }
.phone .fr-side { display: none; }
.phone .fr-cols { grid-template-columns: 1fr; }
.phone .fr-col:nth-child(n+2) { display: none; }

/* A band with the copy and one button, no picture (elevenlabs.io closing band) */
.sec-split.v-band, .sec-split.v-proof { padding: 56px 0; }
.band { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 40px 44px; border-radius: 22px; background: var(--warm); border: 1px solid var(--line); }
.band-copy { display: flex; flex-direction: column; gap: 14px; max-width: 640px; min-width: 0; }
.band .tx-h2 { font-size: 28px; }

/* One line of customer proof: logos, a line, the way in (elevenlabs.io) */
.proofbar { display: flex; align-items: center; gap: 24px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
a.proofbar:hover { border-color: #cfcfcf; }
.pb-logos { display: flex; gap: 6px; flex: none; }
.pb-logos .sq-md { width: 44px; height: 44px; border-radius: 12px; }
.pb-copy { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pb-copy .tx-h2 { font-size: 20px; }
.proofbar > .tx-missing { flex: 1; }
.proofbar .arrow { margin: 0; }
.sec-quote:has(.proofbar) { padding: 40px 0; }

/* ---------- Pillars: tall cards with a line drawing (elevenlabs.io "Safety, built in") ---------- */

.pillars { gap: 16px; }
.pillar { display: flex; flex-direction: column; min-height: 380px; border: 1px solid var(--line); border-radius: 18px; background: var(--warm); overflow: hidden; }
.pillar-vis { flex: 1; display: grid; place-items: center; min-height: 220px; }
.pillar-tx { display: flex; flex-direction: column; gap: 10px; padding: 0 24px 26px; }

/* ---------- Tiles: icon and name, a statement, the way in (lovable.dev/for-work) ---------- */

.tiles { gap: 14px; }
.tiles .tile { min-height: 170px; gap: 14px; padding: 20px; background: var(--warm); }
.tile-hd { display: flex; align-items: center; gap: 10px; }
.tile-hd .sq-md { width: 26px; height: 26px; border-radius: 7px; background: #fff; }
.tile-hd .tx-h3 { font-size: 15px; }
.tile-st { font-size: 17px; line-height: 1.4; font-weight: 500; letter-spacing: -.01em; color: #4e4e4e; }
.tiles .arrow { margin-top: auto; align-self: flex-end; }
.tiles .tx-link { margin-top: auto; }

/* ---------- Cells with shared borders (elevenlabs.io logo grid) ---------- */

.cells { --c: 4; display: grid; grid-template-columns: repeat(var(--c), minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cells.c2 { --c: 2; } .cells.c3 { --c: 3; } .cells.c5 { --c: 5; } .cells.c6 { --c: 3; }
.cell-it { display: flex; flex-direction: column; gap: 16px; padding: 26px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.cell-it .logo-tile { height: 56px; border: 0; background: transparent; place-items: center start; }
.cells .stat { border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; }

/* One number as a dark banner (lovable.dev/for-work) */
.stat-banner { display: flex; flex-direction: column; gap: 22px; padding: 52px 56px; border-radius: 22px; background: var(--dark) radial-gradient(80% 140% at 100% 0%, #4a4a4a, transparent 60%); }
.stat-banner .b { background: #545454; }
.stat-banner .b-num { height: 60px; background: #8c8c8c; }
.stat-num { font-size: 72px; line-height: 1; letter-spacing: -.03em; font-weight: 500; color: #fff; }
.stat-p { max-width: 640px; font-size: 18px; line-height: 1.55; color: #cfcfcf; }

/* ---------- Checklist: heading left, ticks in two columns (interfere.com/product/designers) ---------- */

.checks-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.checks-hd { display: flex; flex-direction: column; gap: 16px; }
.checks-hd .sh { margin-bottom: 0; }
.checks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }

/* ---------- Quote: picture left, quote right (elevenlabs.io customer stories) ---------- */

.tquote { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--warm); }
a.tquote:hover { border-color: #cfcfcf; }
.tq-img { min-height: 340px; border: 0; border-right: 1px solid var(--line); border-radius: 0; }
.tq-img::after { display: none; }
.tq-img .logo-chip { position: absolute; left: 24px; bottom: 24px; width: 110px; height: 34px; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.tq-body { display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 48px 52px; }
.tq-body .qmark { margin: 0; }
.tq-q { gap: 14px; }

/* ---------- Related question as an article teaser, and update cards (elevenlabs.io) ---------- */

.teaser { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
a.teaser:hover { border-color: #cfcfcf; box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .25); }
.teaser-img { min-height: 170px; border-radius: 12px; }
.teaser-tx { display: flex; flex-direction: column; gap: 12px; padding-right: 16px; }
.teaser .tx-h2 { font-size: 24px; }
.sec-related:has(.teaser) { padding: 64px 0; }

.updates { gap: 18px; }
.update { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.update-img { min-height: 170px; border-radius: 16px; background: linear-gradient(135deg, #ededed, #f8f8f8); }
.update-date { position: absolute; left: 12px; top: 12px; z-index: 1; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
a.update:hover .update-img { border-color: #cfcfcf; }
.updates-missing { margin-bottom: 28px; }

/* ---------- Statement in grey with words picked out (interfere.com: "Interfere finds issues in your app…") ---------- */

.sec-intro .tx-statement { max-width: 760px; font-size: 32px; line-height: 1.3; letter-spacing: -.02em; font-weight: 500; color: #8a8a8a; }
.sec-intro .b-st { background: #e6e6e6; }
.sec-intro .b-st.hl { background: #cfcfcf; }

/* ---------- Packages: the middle one dark (lovable.dev/for-work) ---------- */

.pkg.hl { background: var(--dark); border-color: var(--dark); }
.pkg.hl .b { background: #545454; }
.pkg.hl .b-num { background: #8c8c8c; }
.pkg.hl .tick { background: #4a4a4a; }
.pkg.hl .tick::after { border-color: #cfcfcf; }
.pkg.hl .btn-dark { background: #fff; border-color: #fff; }
.pkg.hl .btn-dark .b { background: #bdbdbd; }

/* ---------- Shortcut banner: the button drops under the question when it doesn't fit ---------- */

.banner { flex-wrap: wrap; }
.banner .grow { flex: 1 1 220px; min-width: 0; }

/* ---------- Closing call to action, centred on a soft glow that fades down from the top (interfere.com) ---------- */

.sec-cta { overflow: hidden; background: radial-gradient(40% 60% at 25% 0%, #efefef, transparent 70%), radial-gradient(40% 60% at 75% 0%, #f1f1f1, transparent 70%), linear-gradient(#fafafa, #fff); }
.sec-cta .cta-end { position: relative; z-index: 1; }
.sec-cta .tx-h2 { font-size: 44px; }

/* ---------- Screens of the product, one per page (components/mock.tpl) ---------- */

.mock { display: flex; flex-direction: column; gap: 14px; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .35); min-width: 0; }
.mk-hd { display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; }
.mk-hd.row { flex-direction: row; }
.mock-cta { align-self: stretch; margin-top: 4px; }
.mk-clock, .mk-lock { width: 12px; height: 12px; flex: none; border: 1.5px solid #a8a8a8; border-radius: 50%; position: relative; }
.mk-clock::after { content: ""; position: absolute; left: 4px; top: 1px; width: 3px; height: 4px; border: solid #a8a8a8; border-width: 0 0 1.5px 1.5px; }
.mk-lock { border-radius: 3px; width: 11px; height: 9px; margin-top: 3px; }
.mk-lock::before { content: ""; position: absolute; left: 1px; top: -6px; width: 6px; height: 6px; border: 1.5px solid #a8a8a8; border-bottom: 0; border-radius: 4px 4px 0 0; }
.mk-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); flex: none; }
.mk-pill.on { background: #e9e9e9; border-color: #d4d4d4; }
.mk-chip { height: 24px; padding: 0 10px; display: inline-flex; align-items: center; }

/* Form: each field with its deletion rule */
.mk-field { display: flex; align-items: flex-end; gap: 12px; }
.mk-f { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mk-input { display: flex; align-items: center; height: 38px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 9px; }
.mk-del { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border-radius: 9px; background: var(--soft); border: 1px dashed #d2d2d2; flex: none; }
.mk-field.hl .mk-input { border-color: #b9b9b9; }
.mk-field.hl .mk-del { background: #ececec; border-style: solid; border-color: #c4c4c4; }
.mk-field.hl .mk-del .b { background: #b0b0b0; }

/* Checkout: order lines, payment methods, pay */
.mk-line { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mk-total { border-bottom: 0; }
.mk-methods { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.mk-method { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; border: 1px solid var(--line-2); border-radius: 10px; }
.mk-method.on { border-color: #8a8a8a; box-shadow: 0 0 0 1px #8a8a8a; }

/* Course series: dates with their places */
.mk-date { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.mk-day { width: 52px; height: 52px; border-radius: 11px; background: var(--soft); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; flex: none; }
.mk-seats { width: 90px; height: 6px; border-radius: 999px; background: #ececec; overflow: hidden; flex: none; }
.mk-seats i { display: block; height: 100%; background: #a9a9a9; border-radius: inherit; }

/* Participant list: search, filters, rows */
.mk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 6px; }
.mk-search { display: flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 9px; flex: 1 1 160px; }
.mk-bar .btn { margin-left: auto; }
.mk-row { display: grid; grid-template-columns: 24px minmax(0, 1.6fr) auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.mk-th { grid-template-columns: 24px minmax(0, 1.6fr) 60px minmax(0, 1fr); padding-top: 4px; }
.mk-th > :first-child { width: 14px; }
.mk-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mk-who .avatar { width: 26px; height: 26px; }

/* Invitation being written */
.mk-to { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mk-subj { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mk-body { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mk-body > .stack { flex: 1 0 100%; }
.mk-merge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: #ececec; border: 1px dashed #bdbdbd; }
.mk-att { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: 10px; }
.mk-att .file { width: 22px; height: 28px; }
.mk-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); }
.mk-sched { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); }

/* Accounts under one overview */
.mk-top { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--soft); position: relative; }
.mk-branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 28px; position: relative; }
.mk-branches::before { content: ""; position: absolute; top: 0; left: 16.6%; right: 16.6%; height: 16px; border: 1.5px dashed #cfcfcf; border-bottom: 0; border-radius: 8px 8px 0 0; }
.mk-branches::after { content: ""; position: absolute; top: -14px; left: 50%; height: 14px; border-left: 1.5px dashed #cfcfcf; }
.mk-branch { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.mk-ev { display: flex; align-items: center; gap: 8px; }

/* Users, roles, two-factor */
.mk-user { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mk-user:last-child { border-bottom: 0; }
.mk-2fa { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); }

/* Where the screens sit */
.gridbg > .mock { margin-right: 56px; }
.gridbg > .phone { margin: 0 auto; transform: translateX(-28px); }
.hero-split .phone .mock { height: 100%; border: 0; box-shadow: none; padding: 22px 16px; border-radius: 30px; }
.feature-mock { min-width: 0; padding: 40px; border-radius: 24px; background: var(--warm); border: 1px solid var(--line); }
.stp-mock { min-width: 0; padding: 40px; border-radius: 24px; background: var(--warm); border: 1px solid var(--line); }
.stage-media { margin-top: 64px; }
.stage-bg { padding: 48px 8% 0; border-radius: 26px 26px 0 0; border: 1px solid var(--line); border-bottom: 0; background: radial-gradient(60% 90% at 50% 100%, #ececec, var(--warm) 70%); overflow: hidden; }
.stage-bg > .mock { border-radius: 18px 18px 0 0; border-bottom: 0; }

/* Steps in a row, numbered and joined by a line */
.stepper { list-style: none; gap: 32px; position: relative; }
.st-it { position: relative; display: flex; flex-direction: column; gap: 12px; }
.st-n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid #bdbdbd; font-weight: 600; color: #6a6a6a; position: relative; z-index: 1; margin-bottom: 8px; }
.st-it:first-child .st-n { background: var(--ink); border-color: var(--ink); color: #fff; }
.st-it:not(:last-child)::before { content: ""; position: absolute; top: 20px; left: 48px; right: -24px; border-top: 1.5px dashed #cfcfcf; }

/* Checklist on a dark panel (lovable.dev/for-work) */
.dark-panel { padding: 56px; border-radius: 26px; background: var(--dark) radial-gradient(70% 120% at 100% 0%, #444, transparent 60%); }
.dark-panel .tx, .dark-panel .tx-p { color: #e9e9e9; }
.dark-panel .tx-h2 { color: #fff; }
.dark-panel .tick { background: #4a4a4a; }
.dark-panel .tick::after { border-color: #e0e0e0; }
.dark-panel .b { background: #555; }

/* ---------- Narrow canvas ---------- */

@container site (max-width: 1240px) {
  .site-main::before, .site-main::after { display: none; }
}

@container site (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-it { grid-column: span 1; }
  .bento-it.lg { grid-column: span 2; }
  .cells.c5, .cells.c6 { --c: 3; }
}

@container site (max-width: 760px) {
  .sh-split, .hero-split, .stp-row, .checks-row, .tquote, .teaser, .phone-row { grid-template-columns: minmax(0, 1fr); }
  .sh-split { gap: 18px; margin-bottom: 32px; }
  .sh-r, .sh-r:not(:has(p, .stack)) { justify-self: start; max-width: none; align-items: flex-start; }
  .sh-split .tx-h2, .sec-cta .tx-h2 { font-size: 28px; }
  .hero-split, .stp-row, .checks-row { gap: 32px; }
  .hs-copy .tx-h1 { font-size: 36px; }
  .gridbg { padding: 24px 0 24px 24px; }
  .gridbg .frame-body, .stp-media .frame-body { min-height: 280px; }
  .gridbg .img-hero { min-height: 240px; }
  .v-fact .fact-card { padding: 24px; }
  .v-fact .fact-tx { font-size: 21px; }
  .sc-tabs { overflow-x: auto; scrollbar-width: none; }
  .sc-tab { flex: none; }
  .showcase .frame-body { min-height: 300px; }
  .proof-row .row-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .proof-row .row-it { padding: 18px 14px; min-height: 0; }
  .proof-row .row-items .row-it:nth-child(odd) { border-left: 0; }
  .proof-row .row-items .row-it:nth-child(n+3) { border-top: 1px solid var(--line); }
  .trust-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-col { min-height: 150px; padding: 20px 16px 24px; }
  .trust-col:nth-child(odd) { border-left: 0; }
  .trust-col:nth-child(n+3) { border-top: 1px solid var(--line); }
  .trust-col .tx-h3 { font-size: 16px; }
  .sec-strip { padding: 56px 0; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento-it, .bento-it.lg { grid-column: span 1; }
  .bento-vis { height: 180px; }
  .phone { width: 240px; height: 480px; }
  .band { flex-direction: column; align-items: flex-start; gap: 24px; padding: 28px 24px; }
  .band .tx-h2 { font-size: 24px; }
  .proofbar { flex-wrap: wrap; gap: 16px; }
  .pillar { min-height: 0; }
  .pillar-vis { min-height: 170px; }
  .cells, .cells.c3, .cells.c5, .cells.c6 { --c: 2; }
  .cell-it { padding: 20px 16px; }
  .checks-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tq-img { min-height: 200px; border-right: 0; border-bottom: 1px solid var(--line); }
  .tq-body { padding: 28px 24px; }
  .teaser { padding: 12px; gap: 16px; }
  .teaser-img { min-height: 140px; }
  .teaser-tx { padding: 0 8px 8px; }
  .stat-banner { padding: 32px 24px; }
  .stat-num { font-size: 52px; }
  .tr > :nth-child(2) { padding: 16px 6px; }
  .sec-cta::after { height: 100px; }
}

/* Screens, the stepper and the dark panel on a narrow canvas */
@container site (max-width: 760px) {
  .mock { padding: 18px; gap: 12px; }
  .gridbg > .mock { margin-right: 20px; }
  .gridbg > .phone { transform: none; }
  .feature-mock, .stp-mock { padding: 16px; border-radius: 18px; }
  .stage-media { margin-top: 40px; }
  .stage-bg { padding: 20px 16px 0; }
  .mk-methods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-row, .mk-th { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .mk-row > :last-child, .mk-th > :last-child { display: none; }
  .mk-seats { width: 56px; }
  .mk-branches { grid-template-columns: minmax(0, 1fr); }
  .mk-branches::before, .mk-branches::after { display: none; }
  .mk-branches { padding-top: 0; }
  .stepper { gap: 28px; }
  .st-it:not(:last-child)::before { display: none; }
  .dark-panel { padding: 28px 22px; }
}

/* ======================================================================================
   Home and Product copy sections of interfere.com and elevenlabs.io as they are (D-47):
   the same structure, proportions and parts, with NemTilmeld's copy and grey bars.
   ====================================================================================== */

/* ---------- Home hero: interfere.com ---------- */

.sec-hero.v-interfere { padding-bottom: 0; }
.ih { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.ih .tx-h1 { font-size: 64px; line-height: 1.04; letter-spacing: -.035em; font-weight: 500; }
.ih-r { display: flex; flex-direction: column; align-items: flex-end; gap: 22px; padding-top: 8px; text-align: right; }
.ih-r .tx-p { max-width: 440px; }
.ih-r .row { justify-content: flex-end; }
.ih-stage { position: relative; margin-top: 56px; padding: 0 0 80px; overflow: hidden; background: radial-gradient(60% 70% at 15% 30%, #efefef, transparent 70%), radial-gradient(50% 60% at 85% 20%, #f2f2f2, transparent 70%); }
.ih-shot { margin-right: calc(-1 * var(--bleed)); }
.ih-shot .appwin, .iv-shot .appwin { width: max(100%, 1080px); border-radius: 16px 0 0 16px; border-right: 0; box-shadow: 0 50px 100px -60px rgba(0, 0, 0, .4); }
.ih-cap { margin-top: 16px; }
.ih-trust { display: flex; align-items: center; gap: 40px; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ih-label { flex: none; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.ih-logos { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.ih-logo { display: flex; align-items: center; gap: 10px; }
.ih-logo .tx { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: #4a4a4a; }
a.ih-trust:hover .ih-label { border-color: #cfcfcf; }

/* ---------- The customer row under each product block on elevenlabs.io ---------- */

.sec-shortcut.v-row { padding: 32px 0; }
.crow { display: flex; align-items: center; gap: 16px; padding: 14px 0; }
.cr-logos { display: flex; gap: 8px; flex: none; }
.cr-logos .sq-md { width: 44px; height: 44px; border-radius: 12px; }
.cr-logos .sq-md:first-child { background: #e2e2e2; }
.cr-tx { flex: 1; min-width: 0; }
.crow .btn { border-radius: 999px; }
a.crow:hover .tx-h3 { color: #2a2a2a; }

/* ---------- Interfere's statement and three columns ---------- */

.is-big { max-width: 720px; font-size: 32px; line-height: 1.3; letter-spacing: -.02em; font-weight: 500; color: #4e4e4e; margin-bottom: 56px; }
.is-cols { gap: 24px; }
.is-col { display: flex; flex-direction: column; gap: 10px; }
.is-snip { position: relative; height: 220px; overflow: hidden; margin-bottom: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--soft); padding: 20px 20px 0; }
.is-snip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(transparent, var(--soft)); }
.is-snip .mock { box-shadow: none; }
.is-col .tx-h3 { font-size: 16px; }
.is-col .tx-p { font-size: 15px; }

/* ---------- The "Trusted by" grid on elevenlabs.io ---------- */

.sec-tiles.v-grid { padding-bottom: 0; }
.eg-hd { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.eg-h { font-size: 18px; line-height: 1.35; font-weight: 500; color: #4a4a4a; max-width: 560px; }
.eg { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--warm); }
.eg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 1px solid var(--line); }
.eg-cell { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 112px; padding: 22px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; transition: background .15s; }
.eg-grid > :nth-last-child(-n+4) { border-bottom: 0; }
a.eg-cell:hover { background: var(--warm); }
.eg-cell .tx-h3 { font-size: 16px; }

/* ---------- Interfere's testimonial panel, one story at a time ---------- */

.tm-in { display: flex; flex-direction: column; align-items: center; gap: 28px; min-height: 340px; justify-content: center; padding: 64px 18%; border: 1px solid var(--line); border-radius: 22px; text-align: center;
  background: radial-gradient(50% 80% at 10% 100%, #efefef, transparent 70%), radial-gradient(50% 80% at 90% 100%, #f1f1f1, transparent 70%), #fbfbfb; }
a.tm-in:hover { border-color: #d6d6d6; }
.tm-in .qmark { margin: 0; }
.tm-q { font-size: 26px; line-height: 1.35; letter-spacing: -.01em; color: #4a4a4a; }
.tm-bars { width: 100%; align-items: center; gap: 14px; }
.tm-by { display: flex; align-items: center; gap: 12px; text-align: left; }
.tm-by .avatar { width: 44px; height: 44px; }
.tm-by .stack { gap: 4px; }
.tm-tabs { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.tm-tab { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 8px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; color: #7a7a7a; }
.tm-tab .sq-md { width: 28px; height: 28px; border-radius: 50%; }
.tm .tour-r:nth-of-type(1):checked ~ .tm-tabs .tm-tab:nth-child(1),
.tm .tour-r:nth-of-type(2):checked ~ .tm-tabs .tm-tab:nth-child(2),
.tm .tour-r:nth-of-type(3):checked ~ .tm-tabs .tm-tab:nth-child(3) { border-color: #bdbdbd; color: #3f3f3f; background: var(--soft); }
.tm .tour-r:nth-of-type(1):focus-visible ~ .tm-tabs .tm-tab:nth-child(1),
.tm .tour-r:nth-of-type(2):focus-visible ~ .tm-tabs .tm-tab:nth-child(2),
.tm .tour-r:nth-of-type(3):focus-visible ~ .tm-tabs .tm-tab:nth-child(3) { outline: 2px solid #9a9a9a; outline-offset: 2px; }

/* ---------- Interfere's "Secure by design" panel ---------- */

.sp { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); padding: 40px 0; border: 1px solid var(--line); border-radius: 20px; background: var(--soft); }
.sp-l { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 0 40px; }
.sp-l .tx-h2 { font-size: 28px; }
.sp-col { display: flex; flex-direction: column; gap: 10px; padding: 0 28px; border-left: 1px solid var(--line-2); }
.sp-ic { margin-bottom: 14px; }
.sp-ic { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #fff; color: #6f6f6f; box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .2); }
.sp-ic .fi { width: 22px; height: 22px; }
.sp-col .tx-h3 { font-size: 16px; }
.sp-col .tx-p { font-size: 14px; }

/* ---------- Interfere's "The Latest" ---------- */

.latest { gap: 28px; margin-top: 36px; }
.lt-it { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.lt-kick { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #9a9a9a; min-height: 16px; }
.lt-it .tx-link { margin-top: 4px; }
a.lt-it:hover .tx-h3 { color: #2a2a2a; }

/* ---------- Interfere's product rows: heading and text on the left, the app running off the right edge ---------- */

.sec-steps.v-interfere { overflow: hidden; }
.ivs { margin-top: 120px; }
.iv { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 64px; align-items: start; padding-block: 96px; border-top: 1px solid var(--line); }
.iv:first-child { padding-top: 0; border-top: 0; }
.iv:last-child { padding-bottom: 0; }
.iv-copy { display: flex; flex-direction: column; gap: 16px; padding-top: 32px; }
.iv-h { font-size: 28px; line-height: 1.2; letter-spacing: -.02em; font-weight: 500; color: #3f3f3f; }
.iv-copy .tx-p { max-width: 360px; }
.iv-more { margin-top: 12px; }
.iv-shot { min-width: 0; margin-right: calc(-1 * var(--bleed)); overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }

/* ---------- Interfere's lists: each item under a line, a chevron that moves on hover ---------- */

.ln-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; margin-top: 36px; }
.ln-it { display: flex; flex-direction: column; gap: 6px; padding: 18px 0 28px; border-top: 1px solid var(--line); transition: border-color .15s; }
.ln-h { display: flex; align-items: center; gap: 8px; }
.ln-h .tx-h3 { font-size: 16px; transition: color .15s; }
.ln-chev.fi { width: 16px; height: 16px; color: #a8a8a8; transition: transform .15s, color .15s; }
a.ln-it:hover { border-color: #9a9a9a; }
a.ln-it:hover .tx-h3 { color: #1f1f1f; }
a.ln-it:hover .ln-chev, a.eg-cell:hover .ln-chev { color: #3f3f3f; transform: translateX(4px); }
.eg-cell .ln-chev { margin-left: 8px; }

/* ---------- Home's closing: interfere.com, centred on a soft glow, no tiles ---------- */

.sec-cta.v-plain { padding: 140px 0 160px; }
.sec-cta.v-plain .tx-h2 { font-size: 52px; line-height: 1.08; letter-spacing: -.03em; }

/* ---------- Tabs that switch a pane without a page load: a hidden radio per tab, the label is the tab ---------- */

.tour-r { position: absolute; opacity: 0; pointer-events: none; }
.tour-pane { display: none; }
.tour-r:nth-of-type(1):checked ~ .tour-panes .tour-pane:nth-child(1),
.tour-r:nth-of-type(2):checked ~ .tour-panes .tour-pane:nth-child(2),
.tour-r:nth-of-type(3):checked ~ .tour-panes .tour-pane:nth-child(3),
.tour-r:nth-of-type(4):checked ~ .tour-panes .tour-pane:nth-child(4),
.tour-r:nth-of-type(5):checked ~ .tour-panes .tour-pane:nth-child(5) { display: block; }

/* ---------- Product hero and panel: elevenlabs.io ---------- */

.eh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.eh-l { display: flex; flex-direction: column; gap: 22px; }
.eh-l .tx-h1 { font-size: 52px; line-height: 1.08; letter-spacing: -.03em; }
.eh-r { display: flex; flex-direction: column; gap: 14px; padding-top: 10px; }
.ep { margin-top: 48px; padding: 4px; border: 1px solid var(--line); border-radius: 16px; background: var(--soft); }
.ep-tabs { display: flex; gap: 4px; padding: 0 0 4px; }
.ep-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 12px; color: #7a7a7a; font-weight: 550; cursor: pointer; white-space: nowrap; }
.ep-tab:hover { color: #4a4a4a; }
.ep .tour-r:nth-of-type(1):checked ~ .ep-tabs .ep-tab:nth-child(1),
.ep .tour-r:nth-of-type(2):checked ~ .ep-tabs .ep-tab:nth-child(2),
.ep .tour-r:nth-of-type(3):checked ~ .ep-tabs .ep-tab:nth-child(3),
.ep .tour-r:nth-of-type(4):checked ~ .ep-tabs .ep-tab:nth-child(4),
.ep .tour-r:nth-of-type(5):checked ~ .ep-tabs .ep-tab:nth-child(5) { background: #fff; color: #4a4a4a; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px var(--line); }
.ep .tour-r:nth-of-type(1):focus-visible ~ .ep-tabs .ep-tab:nth-child(1),
.ep .tour-r:nth-of-type(2):focus-visible ~ .ep-tabs .ep-tab:nth-child(2),
.ep .tour-r:nth-of-type(3):focus-visible ~ .ep-tabs .ep-tab:nth-child(3),
.ep .tour-r:nth-of-type(4):focus-visible ~ .ep-tabs .ep-tab:nth-child(4),
.ep .tour-r:nth-of-type(5):focus-visible ~ .ep-tabs .ep-tab:nth-child(5) { outline: 2px solid #9a9a9a; outline-offset: 2px; }
.ep-stage { display: grid; place-items: center; min-height: 420px; padding: 44px 16%; border-radius: 12px; background: #fff; }
.ep-stage .mock { width: 100%; }
.ep-foot { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 14px 16px 10px; }
.ep-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.ep-chip { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; color: #7a7a7a; }
.ep-chip:hover { background: #fff; color: #4a4a4a; }

/* ---------- Product steps: "Two platforms built on the same research foundation" on elevenlabs.io ---------- */

.pf-cols { gap: 32px; margin-bottom: 40px; }
.pf-col { display: flex; flex-direction: column; gap: 8px; }
.pf-col .tx-h3 { font-size: 16px; }
.pf-col .tx-p { font-size: 15px; }
.pf-shot { padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--soft); }
.pf-shot .frame { box-shadow: none; border-radius: 12px; }
.pf-shot .frame-body { min-height: 360px; }

/* ---------- Product features: the bento of elevenlabs.io, caption at the bottom ---------- */

.sec-features .sh-l .row { margin-top: 6px; }
.sec-features .bento-it { justify-content: flex-end; }
.sec-features .bento-it .tx-h3 { font-size: 15px; font-weight: 500; color: #8a8a8a; }
.sec-features .bento-it.lg { min-height: 520px; }
.sec-features .bento-vis { height: 300px; }

/* ---------- Feature rows of interfere.com: text at the top, a two-column list at the bottom ---------- */

.ir { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: stretch; }
.ir-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 24px 0; }
.ir-top { display: flex; flex-direction: column; gap: 18px; }
.ir-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.ir-list .tx { font-size: 14px; line-height: 1.45; color: #6a6a6a; }
.ir-shot { min-width: 0; margin-right: calc(-1 * var(--bleed)); padding: 40px 0 40px 40px; border: 1px solid var(--line); border-right: 0; border-radius: 18px 0 0 18px; background: var(--soft); }
.ir-shot .mock { border-radius: 14px 0 0 14px; border-right: 0; }
.ir-shot .frame { border-radius: 14px 0 0 14px; border-right: 0; }

/* ---------- The closing band of elevenlabs.io ---------- */

.sec-cta.v-band, .sec-split.v-band { background: none; }
.sec-cta.v-band { padding: 48px 0; }
.sec-cta.v-band::after { display: none; }
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cb-l { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.cta-band .tx-h2 { font-size: 30px; }

@container site (max-width: 1100px) {
  .eg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eg-grid > :nth-last-child(-n+4) { border-bottom: 1px solid var(--line); }
  .eg-grid > :nth-last-child(-n+2) { border-bottom: 0; }
  .sp { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .sp-l { grid-column: 1 / -1; padding: 0 28px; }
  .sp-col:nth-child(2) { border-left: 0; }
  .ln-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iv { gap: 40px; }
}

@container site (max-width: 760px) {
  .ih, .eh, .ir, .iv { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ivs { margin-top: 64px; }
  .iv { padding-block: 48px; }
  .iv-copy { padding-top: 0; }
  .iv-h { font-size: 24px; }
  .ln-grid { grid-template-columns: minmax(0, 1fr); }
  .sec-intro .tx-statement { font-size: 24px; }
  .ih .tx-h1 { font-size: 40px; }
  .ih-r { align-items: flex-start; text-align: left; }
  .ih-r .row { justify-content: flex-start; }
  .ih-stage { margin-top: 32px; padding-bottom: 40px; }
  .ih-shot .appwin, .iv-shot .appwin { width: 640px; }
  .ih-trust { flex-direction: column; align-items: flex-start; gap: 20px; }
  .ih-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; }
  .ih-logo .tx { font-size: 14px; }
  .crow { flex-wrap: wrap; }
  .cr-tx { flex-basis: calc(100% - 160px); }
  .is-big { font-size: 24px; margin-bottom: 32px; }
  .eg-hd { flex-direction: column; align-items: flex-start; }
  .eg-grid { grid-template-columns: minmax(0, 1fr); }
  .eg-grid > :nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .eg-grid > :last-child { border-bottom: 0; }
  .eg-cell:empty { display: none; }
  .tm-in { padding: 40px 22px; min-height: 0; }
  .tm-q { font-size: 20px; }
  .sp { grid-template-columns: minmax(0, 1fr); padding: 28px 0; }
  .sp-l { padding: 0 22px; }
  .sp-col { border-left: 0; border-top: 1px solid var(--line-2); padding: 24px 22px 0; }
  .eh-l .tx-h1 { font-size: 36px; }
  .ep-tabs { overflow-x: auto; scrollbar-width: none; }
  .ep-tab { flex: none; padding: 0 12px; }
  .ep-stage { min-height: 0; padding: 16px; }
  .ep-foot { flex-direction: column; }
  .pf-shot .frame-body { min-height: 260px; }
  .sec-features .bento-it.lg { min-height: 0; }
  .sec-features .bento-vis { height: 200px; }
  .ir-list { grid-template-columns: minmax(0, 1fr); }
  .ir-shot { padding: 20px 0 20px 20px; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .cta-band .tx-h2 { font-size: 24px; }
  .sec-cta.v-plain .tx-h2 { font-size: 34px; }
}

/* ---------- Product: elevenlabs.io/studio, section by section (D-48) ---------- */

/* Headline row, then the app window on a glowing panel with a switch under it */
.sec-hero.v-studio { padding-top: 0; }
.sh-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; padding-top: 120px; }
.shh-l { display: flex; flex-direction: column; gap: 24px; }
.shh-l .tx-h1 { font-size: 48px; line-height: 1.1; letter-spacing: -.025em; }
.shh-r { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; }
.sp-stage { position: relative; margin-top: 56px; padding-bottom: 26px; }
.sp-glow { height: 560px; overflow: hidden; padding: 56px 12% 0; border-radius: 20px; background: radial-gradient(70% 80% at 0% 0%, #d9d9d9, transparent 60%), radial-gradient(70% 90% at 100% 100%, #cfcfcf, transparent 60%), #e8e8e8; }
.sp-screen .appwin { border-radius: 14px 14px 0 0; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35); }
.sp-switch { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: #fff; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .25); max-width: calc(100% - 24px); overflow-x: auto; scrollbar-width: none; }
.sp-sw { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; color: #7a7a7a; cursor: pointer; white-space: nowrap; }
.sp-stage .tour-r:nth-of-type(1):checked ~ .sp-switch .sp-sw:nth-child(1),
.sp-stage .tour-r:nth-of-type(2):checked ~ .sp-switch .sp-sw:nth-child(2),
.sp-stage .tour-r:nth-of-type(3):checked ~ .sp-switch .sp-sw:nth-child(3),
.sp-stage .tour-r:nth-of-type(4):checked ~ .sp-switch .sp-sw:nth-child(4),
.sp-stage .tour-r:nth-of-type(5):checked ~ .sp-switch .sp-sw:nth-child(5) { background: var(--soft); color: #3f3f3f; box-shadow: inset 0 0 0 1px var(--line-2); }
.sp-stage .tour-r:nth-of-type(1):focus-visible ~ .sp-switch .sp-sw:nth-child(1),
.sp-stage .tour-r:nth-of-type(2):focus-visible ~ .sp-switch .sp-sw:nth-child(2),
.sp-stage .tour-r:nth-of-type(3):focus-visible ~ .sp-switch .sp-sw:nth-child(3),
.sp-stage .tour-r:nth-of-type(4):focus-visible ~ .sp-switch .sp-sw:nth-child(4),
.sp-stage .tour-r:nth-of-type(5):focus-visible ~ .sp-switch .sp-sw:nth-child(5) { outline: 2px solid #9a9a9a; outline-offset: 2px; }

/* "All your creative tools, in one seamless timeline": a large card and a small one, then the rest */
.sb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sb-it { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 380px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #f5f5f4; }
.sb-it.s0, .sb-it.s3 { grid-column: span 2; }
.sb-tx { display: flex; flex-direction: column; gap: 10px; max-width: 380px; padding: 28px 28px 0; }
.sb-h { font-size: 22px; line-height: 1.25; font-weight: 500; letter-spacing: -.01em; color: #3f3f3f; }
.sb-vis { height: 200px; overflow: hidden; padding: 0 28px; }
.sb-vis .mock { border-radius: 14px 14px 0 0; border-bottom: 0; box-shadow: 0 20px 40px -30px rgba(0, 0, 0, .3); }
.sb-note { margin-top: 28px; text-align: center; }

/* "Introducing Studio 4.0": a small label, a large centred statement, a chip per feature */
.sec-features.v-studio { padding-bottom: 0; }
.si { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; padding-bottom: 72px; }
.si-kick { font-size: 15px; color: #8a8a8a; }
.si-big { font-size: 34px; line-height: 1.25; letter-spacing: -.02em; font-weight: 500; color: #3f3f3f; }
.si-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; max-width: 620px; }
.si-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 2px; color: #5a5a5a; font-size: 15px; }
.si-chip:hover { color: #2a2a2a; }

/* The feature cells stacked on the left, the screen staying in view on the right */
.ss { border-top: 1px solid var(--line); }
.ss-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ss-cells { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.ss-cell { display: flex; flex-direction: column; gap: 12px; min-height: 320px; padding: 48px 32px; border-bottom: 1px solid var(--line); }
.ss-cell:last-child { border-bottom: 0; }
.ss-h { font-size: 22px; line-height: 1.25; font-weight: 500; letter-spacing: -.01em; color: #3f3f3f; }
.ss-cell .tx-p { max-width: 420px; }
.ss-cell .tx-link { margin-top: auto; padding-top: 8px; }
a.ss-cell:hover .ss-h { color: #1f1f1f; }
.ss-media { border-right: 1px solid var(--line); }
.ss-sticky { position: sticky; top: 64px; display: grid; place-items: center; height: calc(100vh - 64px); max-height: 720px; padding: 40px; background: radial-gradient(60% 60% at 50% 50%, #efefef, transparent 70%); }
.ss-sticky .mock { width: 100%; max-width: 460px; }

/* "Built for every creator": a row of cards, a picture on each */
.cr-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.cr-card { display: flex; flex-direction: column; gap: 14px; scroll-snap-align: start; }
.cr-img { aspect-ratio: 1; min-height: 0; border-radius: 16px; background: radial-gradient(60% 60% at 40% 40%, #dedede, #f2f2f2); }
.cr-card .tx-p { padding: 0 6px; }

/* The video panel */
.vid { position: relative; height: 560px; border-radius: 20px; background: #1d1d1d; }
.vid-hd { position: absolute; left: 24px; top: 24px; width: 200px; display: flex; flex-direction: column; gap: 8px; }
.vid .b { background: #4a4a4a; }
.vid-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.vid-play::after { content: ""; position: absolute; left: 26px; top: 21px; border: 11px solid transparent; border-left: 16px solid #d8d8d8; border-right: 0; }

/* "Everything in Studio, available through our API": one proof point per code line */
.sec-strip.v-api { background: none; }
.api { max-width: 720px; margin: 0 auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 20px 40px -32px rgba(0, 0, 0, .25); overflow: hidden; }
.api-bar { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fafafa; }
.api-bar i { width: 9px; height: 9px; border-radius: 50%; background: #dddddd; }
.api-lines { list-style: none; padding: 18px 0; font-family: var(--mono); }
.api-lines li { display: flex; align-items: center; gap: 18px; min-height: 30px; padding: 0 20px; }
.api-n { width: 16px; text-align: right; color: #b5b5b5; font-size: 13px; }
.api-tx { font: 14px/1.5 var(--mono); color: #4a4a4a; }

/* The questions: heading left, accordion with chevrons right */
.sfaq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 48px; align-items: start; }
.sfaq-h .tx-h2 { font-size: 40px; line-height: 1.1; }
.sfaq-list { border-top: 1px solid var(--line); }
.sfaq-it { border-bottom: 1px solid var(--line); }
.sfaq-q { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 4px; cursor: pointer; }
.sfaq-q::-webkit-details-marker { display: none; }
.sfaq-q .tx { font-size: 17px; color: #3f3f3f; }
.sfaq-it[open] .stp-ic { transform: rotate(-135deg); margin-top: 4px; }
.sfaq-a { display: flex; flex-direction: column; gap: 10px; padding: 0 4px 20px; max-width: 640px; }

@container site (max-width: 1100px) {
  .cr-rail { grid-auto-columns: calc((100% - 16px) / 2); }
}

@container site (max-width: 760px) {
  .sh-hero, .ss-in, .sfaq { grid-template-columns: minmax(0, 1fr); }
  .sh-hero { gap: 20px; padding-top: 40px; }
  .shh-l .tx-h1 { font-size: 34px; }
  .sp-glow { height: 340px; padding: 24px 16px 0; }
  .sb { grid-template-columns: minmax(0, 1fr); }
  .sb-it.s0, .sb-it.s3 { grid-column: auto; }
  .sb-it { min-height: 0; }
  .sb-tx { padding: 22px 20px 0; }
  .sb-vis { height: 160px; padding: 0 20px; }
  .si-big { font-size: 24px; }
  .si { padding-bottom: 40px; }
  .ss-cells { border: 0; }
  .ss-cell { min-height: 0; padding: 32px 4px; }
  .ss-media { display: none; }
  .cr-rail { grid-auto-columns: 78%; }
  .vid { height: 260px; }
  .sfaq { gap: 24px; }
  .sfaq-h .tx-h2 { font-size: 28px; }
  .api-lines li { gap: 12px; padding: 0 12px; }
  .api-tx { font-size: 13px; }
}

/* ---------- An app window at the proportions of a real screen (components/appwin.tpl) ---------- */

.appwin { display: flex; flex-direction: column; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.aw-bar { flex: none; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #fafafa; }
.aw-bar > i { width: 9px; height: 9px; border-radius: 50%; background: #dddddd; }
.aw-url { display: inline-flex; align-items: center; height: 20px; margin: 0 auto; padding: 0 16px; border-radius: 6px; background: #f0f0f0; }
.aw-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 17% minmax(0, 1fr); }
.aw-side { display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; border-right: 1px solid var(--line); background: var(--soft); }
.aw-main { min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 16px; padding: 3.5% 6%; background: #fcfcfc; }
.aw-main .mock { width: 100%; max-width: 620px; margin: 0 auto; box-shadow: 0 16px 32px -24px rgba(0, 0, 0, .25); }
.ss-sticky .appwin { width: 100%; max-width: 560px; }
.ss-sticky .aw-main .mock { padding: 16px; gap: 10px; }

/* ---------- Sector pages: elevenlabs.io/telecommunications (D-49) ---------- */

/* Painted above the page's guide lines, which stop at the picture. */
.sec-hero.v-industry { position: relative; z-index: 1; padding: 0; }
.ind { position: relative; height: 560px; background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .55)), linear-gradient(120deg, #6a6a6a, #3d3d3d 60%, #4f4f4f); }
.ind-in { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding-top: 180px; padding-bottom: 40px; }
.ind-h { display: flex; justify-content: space-between; gap: 40px; }
.ind-h .tx-h1 { color: #fff; font-size: 48px; }
.ind-h .b-h1 { height: 40px; background: rgba(255, 255, 255, .55); }
.ind-p { max-width: 460px; }
.ind-p .tx-p { color: #f0f0f0; }
.ind-p .b { background: rgba(255, 255, 255, .45); }
.ind-logos { border-bottom: 1px solid var(--line); }
.ind-logos .wrap { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; height: 92px; }
.ind-logo { display: flex; justify-content: center; }
.ind-logo .b { margin: 0 auto; }

/* "Hear it from…": wide picture cards with the headline over the picture */
.tsr { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; overflow-x: auto; scrollbar-width: none; }
.tsr-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 3 / 2; padding: 22px; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .45)), linear-gradient(135deg, #8a8a8a, #5a5a5a); }
.tsr-logo { width: 44px; height: 44px; border-radius: 10px; background: rgba(255, 255, 255, .85); }
.tsr-tx { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.tsr-tx .stack { flex: 1; max-width: 360px; }
.tsr-tx .b { background: rgba(255, 255, 255, .6); }
.tsr-tx .btn { flex: none; border-radius: 999px; }

/* "AI you can run as infrastructure": two columns of points with a line icon */
.inf-hd { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: 48px; }
.inf-hd .tx-h2 { font-size: 36px; }
.inf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; }
.inf-it { display: flex; flex-direction: column; gap: 10px; }
.inf-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border: 1px solid var(--line-2); border-radius: 12px; color: #6f6f6f; }
.inf-ic .fi { width: 22px; height: 22px; }
.sec-strip.v-infra { background: none; }

/* Questions as rows that open their article */
a.sfaq-link { display: flex; border-bottom: 1px solid var(--line); }
a.sfaq-link .stp-ic { transform: rotate(-45deg); margin: 0; }

/* Sector pages and stories, once the copy exists: the list in the hero, names standing in for logos, text over the story pictures */
.ind:has(.ind-list) { height: auto; min-height: 560px; }
.ind-list { margin-top: 18px; }
.ind-list .tick { filter: invert(1); }
.ind-logo .tx { text-align: center; color: #8a8a8a; }
.tsr-tx .tx-h3, .tsr-tx .tx-sm, .tsr-tx .tx-p { color: #fff; }
.tsr-tx .stack { gap: 6px; }
.lw-cell .tx { text-align: center; padding: 0 12px; }
.chip .tx { font-size: 14px; color: inherit; }

@container site (max-width: 760px) {
  .appwin { aspect-ratio: 4 / 3; }
  .aw-body { grid-template-columns: minmax(0, 1fr); }
  .aw-side, .aw-url { display: none; }
  .aw-main { padding: 12px; }
  .ind { height: 460px; }
  .ind-in { padding-top: 100px; }
  .ind-h { flex-direction: column; gap: 8px; }
  .ind-h .tx-h1 { font-size: 34px; }
  .ind-logos .wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); height: auto; padding-block: 16px; row-gap: 20px; }
  .tsr { grid-auto-columns: 86%; }
  .tsr-card { aspect-ratio: 4 / 5; }
  .inf { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .inf-hd .tx-h2 { font-size: 28px; }
}

/* Security pages, each laid out after a page of elevenlabs.io: /safety, /enterprise, /agents, /about, /pricing.
   Every class here is used only by the Security variants in hero, pillars, tiles, docs, split and text. */

/* Hero, mark (/safety): drawing, heading, text and buttons centred, then the facts in a band of cells */
.smk { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.smk .tx-p { max-width: 560px; }
.smk-art { position: relative; margin-bottom: 12px; }
.smk-art::after { content: ""; position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(closest-side, #efefef, transparent); z-index: -1; }
.smk-facts { margin-top: 80px; }
/* The cells run from one frame line of the page to the other, not to the text margin. */
.smk-facts .wrap { padding: 0; }
.smk-facts .eg-grid { border-left: 0; }
.smk-facts .eg-cell:last-child { border-right: 0; }
.smk-facts .eg-cell { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; }
.smk-ic { width: 20px; height: 20px; flex: none; color: #7a7a7a; }
.smk-facts .eg-grid > :nth-last-child(-n+4) { border-bottom: 0; }

/* Hero, map: one wide panel with the land, two sites and the facts as tags */
.map { position: relative; margin-top: 64px; height: 460px; border: 1px solid var(--line); border-radius: 22px; background: var(--warm); overflow: hidden;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; }
.map-land { position: absolute; left: 50%; top: 40px; width: 340px; height: 380px; transform: translateX(-30%); background: #e4e4e4;
  clip-path: polygon(30% 0, 52% 6%, 58% 22%, 70% 26%, 66% 44%, 78% 52%, 100% 58%, 92% 74%, 70% 72%, 62% 88%, 44% 100%, 26% 92%, 22% 74%, 8% 66%, 0 44%, 12% 30%, 18% 12%); }
.map-pin { position: absolute; display: grid; place-items: center; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #fff; color: #5a5a5a; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .35), 0 0 0 1px var(--line); }
.map-pin .fi { width: 20px; height: 20px; }
.map-pin.p1 { left: 36%; top: 18%; }
.map-pin.p2 { left: 44%; top: 24%; }
.map-tags { position: absolute; left: 32px; bottom: 32px; display: flex; flex-direction: column; gap: 10px; }
.map-ic { width: 16px; height: 16px; flex: none; color: #7a7a7a; }
.map-tag { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .3); }
.map-tag .tx { font-size: 16px; font-weight: 500; color: #3e3e3e; }

/* Hero, empty (/studio panel): the list with no rows */
.em-glow { height: auto; margin-top: 64px; padding: 56px 12% 56px; }
.em-list { border-radius: 18px; }
.em-list .frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: #e0e0e0; }
.em-th { display: flex; gap: 48px; padding: 16px 24px; background: var(--soft); border-bottom: 1px solid var(--line); }
.em-body { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 72px 24px; text-align: center; }
.em-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--soft); color: #9a9a9a; }
.em-ic .fi { width: 26px; height: 26px; }
.em-body .fact-tx, .lg-card .fact-tx { font-size: 26px; line-height: 1.25; letter-spacing: -.015em; font-weight: 500; color: #2e2e2e; }

/* Hero, login: the sign-in step with the code */
.lg-card { display: flex; flex-direction: column; gap: 18px; max-width: 420px; margin: 40px 0 40px 40px; padding: 36px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .35); }
.lg-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); color: #6a6a6a; }
.lg-ic .fi { width: 20px; height: 20px; }
/* The code field: three digits typed (a dot each), the cursor in the fourth box, two still empty. */
.lg-code { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.lg-code span { position: relative; height: 52px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; }
.lg-code span.on::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #6a6a6a; }
.lg-code span.at { border-color: #8a8a8a; box-shadow: 0 0 0 3px #ececec; }
.lg-code span.at::after { content: ""; position: absolute; left: 50%; top: 14px; bottom: 14px; width: 1.5px; background: #6a6a6a; }
.lg-btn { align-self: stretch; }

/* Hero, top: the fact under the picture */
.stage-cap { margin: 28px auto 0; }

/* Pillars, tabs (/safety "Our Safety Principles") */
.pt-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 64px; align-items: center; margin-top: 48px; }
.pt-tabs { display: flex; flex-direction: column; gap: 6px; grid-column: 1; grid-row: 1; }
.pt-in .tour-panes { grid-column: 2; grid-row: 1; }
.pt-ic { width: 22px; height: 22px; flex: none; }
.pt-tab { display: flex; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; color: #a8a8a8; }
.pt-tab .tx { font-size: 24px; line-height: 1.3; color: inherit; font-weight: 450; }
.pt-in .tour-r:nth-of-type(1):checked ~ .pt-tabs .pt-tab:nth-child(1),
.pt-in .tour-r:nth-of-type(2):checked ~ .pt-tabs .pt-tab:nth-child(2),
.pt-in .tour-r:nth-of-type(3):checked ~ .pt-tabs .pt-tab:nth-child(3) { color: #3a3a3a; }
.pt-in .tour-r:focus-visible + * { outline: 0; }
.pt-pane { display: flex; flex-direction: column; gap: 24px; }
.pt-vis { display: grid; place-items: center; height: 300px; border: 1px solid var(--line); border-radius: 22px; background: var(--warm); }

/* Tiles, cells (/safety programme cards) */
.cl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cl-it { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 18px; background: var(--warm); border: 1px solid var(--line); }
.cl-it .row { margin-top: 10px; }

/* Docs, certs (/enterprise security block) */
.ct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 64px; align-items: start; }
.ct-l { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 100px; }
.ct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.ct-it { display: flex; flex-direction: column; gap: 10px; min-height: 220px; padding: 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ct-ic { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: auto; border-radius: 50%; border: 1px solid var(--line-2); color: #7a7a7a; }
.ct-ic .fi { width: 28px; height: 28px; stroke-width: 1.5; }

/* Docs, paper: the agreement as a sheet */
.pp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.pp-copy { display: flex; flex-direction: column; gap: 22px; }
.pp-sheet { padding: 40px; border-radius: 22px; background: var(--warm); border: 1px solid var(--line); }
.pp-page { display: flex; flex-direction: column; gap: 18px; padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .35); }
.pp-hd { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pp-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--soft); color: #6f6f6f; }
.pp-ic .fi { width: 18px; height: 18px; }
.pp-mark { padding: 12px; border-radius: 6px; background: #f1f1f1; box-shadow: inset 3px 0 0 #9a9a9a; }

/* Docs, plan (/pricing wide Enterprise card) */
.pl-it { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; padding: 36px 40px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, #fff, var(--warm)); }
.pl-l, .pl-r { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pl-l .tx-h2 { font-size: 30px; }
.pl-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: #6a6a6a; }
.pl-ic .fi { width: 22px; height: 22px; }

/* Split, join (/about "Join us"): copy left, team collage right */
.jn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.jn-copy { display: flex; flex-direction: column; gap: 22px; }
.jn-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jn-pics .img { min-height: 0; aspect-ratio: 4 / 3; border-radius: 14px; }

/* Text, mission (/safety): heading left, text right */
.ms { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.ms-r { display: flex; flex-direction: column; gap: 18px; }

/* Text, cols (/agents): a column per item, a drawing over each */
.cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 48px; }
.cs-it { display: flex; flex-direction: column; gap: 20px; }
.cs-vis { display: grid; place-items: center; height: 180px; border-bottom: 1px solid var(--line); }

/* Text, rows (/enterprise questions block): heading left, rows between lines right */
.rw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 64px; align-items: start; }
.rw-l { display: flex; flex-direction: column; gap: 18px; }
.rw-list { border-top: 1px solid var(--line); }
.rw-it { display: flex; flex-direction: column; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--line); }

@container site (max-width: 760px) {
  .smk-facts { margin-top: 48px; }
  .smk-facts .eg-grid { grid-template-columns: minmax(0, 1fr); }
  .smk-facts .eg-grid > .eg-cell:not(:last-child) { border-bottom: 1px solid var(--line); }
  .smk-facts .eg-cell { min-height: 72px; border-right: 0; }
  .map { height: 420px; margin-top: 40px; }
    .map-tag .tx { font-size: 14px; }
  .em-glow { margin-top: 40px; padding: 24px 16px; }
  .em-th { gap: 20px; overflow: hidden; }
  .em-th > :nth-child(3) { display: none; }
  .em-body { padding: 48px 16px; }
  .em-body .fact-tx, .lg-card .fact-tx { font-size: 21px; }
  .lg-card { margin: 24px 0; padding: 24px; }
  .lg-code span { height: 42px; }
  .pt-in, .ct, .pp, .jn, .ms, .rw { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pt-in .tour-panes { grid-column: 1; grid-row: 2; }
  .pt-tab .tx { font-size: 19px; }
  .pt-vis { height: 220px; }
  .pl-it { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; }
  .cl-grid, .ct-grid, .cs-grid { grid-template-columns: minmax(0, 1fr); }
  .ct-l { position: static; }
  .ct-it { min-height: 0; }
  .pp-sheet { padding: 20px; }
  .jn-pics { height: 260px; }
  .cs-grid { gap: 24px; }
  .cs-vis { height: 140px; }
}

/* A section's further blocks ($sec.parts, section.tpl) sit a section's gap from the block next to them. */
.sec > :not(.sec-note) + .sec-part, .sec > .sec-part + * { margin-top: 96px; }
@container site (max-width: 760px) { .sec > :not(.sec-note) + .sec-part, .sec > .sec-part + * { margin-top: 64px; } }

/* ---------- Icons: Feather (feathericons.com, MIT), the same set everywhere ----------
   The small icons the templates name by class (tick, arrow, cross, ext, the chevron of an accordion, the clock and
   lock in the product screens) are Feather icons drawn as a mask, so they take the colour of their element.
   Icons that carry a meaning of their own are written into the templates with {icon name="…"} (dev/smarty.php). */

:root {
  --fi-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --fi-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3C/svg%3E");
  --fi-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
  --fi-ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
  --fi-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --fi-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
  --fi-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E");
}
.fi { display: inline-block; width: 20px; height: 20px; flex: none; vertical-align: middle; }
.tick::after, .arrow::after, .cross::after, .ext, .stp-ic, .mk-clock, .mk-lock { -webkit-mask: var(--fi) center / contain no-repeat; mask: var(--fi) center / contain no-repeat; }
.tick { display: inline-grid; place-items: center; background: #ececec; color: #6f6f6f; }
.tick::after { --fi: var(--fi-check); position: static; width: 11px; height: 11px; border: 0; transform: none; background: currentColor; }
.ticks.sm .tick::after { width: 9px; height: 9px; }
.pkg.hl .tick, .dark-panel .tick { color: #e0e0e0; }
.arrow { display: inline-grid; place-items: center; color: #9a9a9a; }
.arrow::after { --fi: var(--fi-arrow); position: static; width: 13px; height: 13px; border: 0; transform: none; background: currentColor; }
.cross { display: inline-grid; place-items: center; color: #b0b0b0; }
.cross::after { content: ""; --fi: var(--fi-x); width: 10px; height: 10px; background: currentColor; }
.ext { --fi: var(--fi-ext); width: 12px; height: 12px; border: 0; border-radius: 0; background: #9a9a9a; }
.stp-ic { --fi: var(--fi-chev); width: 18px; height: 18px; margin: 0; border: 0; transform: none; background: #9a9a9a; }
.stp-it[open] .stp-ic, .sfaq-it[open] .stp-ic { transform: rotate(180deg); margin: 0; }
a.sfaq-link .stp-ic { transform: rotate(-90deg); margin: 0; }
.mk-clock, .mk-lock { width: 14px; height: 14px; margin: 0; border: 0; border-radius: 0; background: #9a9a9a; }
.mk-clock { --fi: var(--fi-clock); }
.mk-lock { --fi: var(--fi-lock); }
.mk-clock::after, .mk-lock::before { display: none; }

/* ---------- Illustration tile: one Feather icon on a white tile, in place of abstract line drawings (D-54) ---------- */

.ill { display: inline-grid; place-items: center; width: 56px; height: 56px; flex: none; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: #6a6a6a; box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .35); }
.ill .fi { width: 26px; height: 26px; stroke-width: 1.6; }
.ill-lg { width: 88px; height: 88px; border-radius: 22px; }
.ill-lg .fi { width: 38px; height: 38px; }
.ill-xl { width: 112px; height: 112px; border-radius: 28px; }
.ill-xl .fi { width: 48px; height: 48px; stroke-width: 1.4; }
.fact-file { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--soft); color: #6f6f6f; }
.fact-file .fi { width: 18px; height: 18px; }
@container site (max-width: 760px) {
  .map-land { width: 240px; height: 270px; top: 24px; transform: translateX(-40%); }
  .map-pin.p2 { left: 52%; top: 30%; }
  .ill-xl { width: 88px; height: 88px; }
  .ill-xl .fi { width: 38px; height: 38px; }
}

/* ---------- Generic wireframe text where NemTilmeld's content is still missing (D-55) ---------- */

.pkg-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pkg-tag { flex: none; padding: 4px 10px; border-radius: 999px; background: #ececec; color: #4a4a4a; font-size: 12px; font-weight: 600; }
.pkg.hl .tx, .pkg.hl .tx-h2, .pkg.hl .tx-h3 { color: #f2f2f2; }
.pkg.hl .tx-sm { color: #cfcfcf; }
.pkg.hl .pkg-tag { background: #fff; color: #2a2a2a; }
.pkg.hl .btn-dark .btn-tx { color: #2a2a2a; }
.pkg-note { margin-top: 20px; }
.wf-gen { color: #9a9a9a; }
.tm-q.wf-gen { color: #9a9a9a; }
.stat-x { font-size: 40px; line-height: 1; font-weight: 500; letter-spacing: -.02em; color: #3a3a3a; }
.logo-chip .tx { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8a8a8a; }
.logo-chip { display: inline-grid; place-items: center; }
.pb-logo { display: inline-grid; place-items: center; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8a8a8a; }
.tsr-gen { color: rgba(255, 255, 255, .75); }
.tsr-logo { display: inline-grid; place-items: center; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8a8a8a; }

/* Sector heroes: generic wireframe content. A label marks where the picture goes, and the heading keeps its distance from the text. */
.ind-in { gap: 40px; }
.ind-ft { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.ind-p > .tx-p:first-child, .ind-p > .stack:first-child { margin-top: 0; }
.ind-list { margin-top: 24px; }
.ind-list li .tx.wf-gen { color: rgba(255, 255, 255, .7); }
.img-note { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 8px 14px; border: 1px dashed rgba(255, 255, 255, .5); border-radius: 999px; color: rgba(255, 255, 255, .85); }
.img-note .fi { width: 16px; height: 16px; }
.img-note .tx { color: inherit; }
.ind-logo .tx { color: #9a9a9a; }
@container site (max-width: 760px) {
  .ind-in { gap: 28px; }
  .ind-ft { flex-direction: column; align-items: flex-start; }
}
/* The same label on light pictures (hero pictures, the Join collage) and small on the story cards. */
.img.has-note::after { display: none; }
.img-note.light { border-color: #b5b5b5; color: #7a7a7a; background: rgba(255, 255, 255, .7); }
.img-hero .img-note, .jn-pics .img-note { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.jn-pics { position: relative; }
.tsr-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.img-note.sm { padding: 6px 10px; gap: 6px; }
.img-note.sm .tx { font-size: 12px; }
.img-note.sm .fi { width: 14px; height: 14px; }
.jn-pics .img::after { display: none; }