/* ==========================================================================
   LinkTwin bio landing page (home-bio-6.php), Site 6 look.
   Built on the Landing 6 kit (the25-landing6.css): this file only holds the
   sections the kit does not have. Every selector is scoped under
   .l6-page--bio; classes are b6-*, plus the l6-reels block of the kit partial
   partials/landing6/reels.php (forked from the homepage's h6-reels with the
   values kept, so the carousel matches it without loading the25-home6.css).
   Behaviour: js/the25-site6-bio.js.
   Verify at 1440, 1180, 1024, 768 and 390.
   ========================================================================== */

/* ==========================================================================
   Shared bits: buttons, text links, chips
   ========================================================================== */

.l6-page--bio .b6-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 22px;
    border: 0;
    border-radius: 12px;
    font-family: var(--l6-text);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 160ms ease;
}

.l6-page--bio .b6-btn--blue {
    background: var(--l6-blue);
    color: #fff;
}

.l6-page--bio .b6-btn--blue:hover {
    background: var(--l6-blue-deep);
    color: #fff;
}

.l6-page--bio .b6-btn--white {
    background: #fff;
    color: var(--l6-ink);
}

.l6-page--bio .b6-btn--white:hover {
    background: #dfe9f7;
    color: var(--l6-ink);
}

.l6-page--bio .b6-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--l6-blue-deep);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

.l6-page--bio .b6-link i {
    font-size: 0.8em;
}

/* ==========================================================================
   Hero: kicker, claim form, the live phone and where its taps land
   ========================================================================== */

/* Plain type led in by a short route line, as on the homepage */
.l6-page--bio .b6-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.2;
}

/* The kicker sits inside the <h1> (it carries "link in bio", which the headline
   does not say), so it takes back the body typeface and plain tracking. */
.l6-page--bio .l6-display .b6-kicker {
    font-family: var(--l6-text);
    letter-spacing: 0;
}

/* The headline's highlight (<em>) is a line of its own in the hero's light
   blue, on the bio landing ("as good as your work.") and the template
   gallery ("Make it yours."). The size comes down a step from the kit's. */
.l6-page--bio .l6-hero .l6-display {
    font-size: clamp(2.3rem, 3.8vw, 3.9rem);
}

.l6-page--bio .l6-display em {
    display: block;
    color: var(--l6-sky);
    font-style: normal;
}

.l6-page--bio .b6-kicker::before {
    content: "";
    flex: none;
    width: 32px;
    height: 2px;
    border-radius: 2px;
    background: var(--l6-sky);
}

.l6-page--bio .b6-hero-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
}

/* The claim form: the kit's one neo-brutal signature (ink border, hard
   offset shadow), here around "linktwin.bio/@" + the handle. */
.l6-page--bio .b6-claim-wrap {
    margin-top: 30px;
    scroll-margin-top: 110px;
}

.l6-page--bio .b6-claim {
    margin: 0;
}

.l6-page--bio .b6-claim-field {
    display: flex;
    align-items: center;
    min-height: 62px;
    border: 1.5px solid #fff;
    border-radius: 14px;
    background: var(--l6-paper);
    box-shadow: 4px 4px 0 var(--l6-blue);
    transition: box-shadow 160ms ease, transform 160ms ease;
}

.l6-page--bio .b6-claim-field:focus-within {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--l6-mint);
}

.l6-page--bio .b6-claim-prefix {
    flex: none;
    margin: 0;
    padding-left: 18px;
    color: var(--l6-muted);
    font-size: 0.98rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: text;
}

.l6-page--bio .b6-claim-input {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    min-height: 60px;
    padding: 14px 8px 14px 1px;
    border: 0 !important; /* the25-public.css borders every text input */
    border-radius: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: var(--l6-ink);
    font-family: var(--l6-text);
    font-size: 0.98rem;
    font-weight: 700;
}

/* The field shows the focus (its shadow turns and it lifts), not the input */
.l6-page--bio .b6-claim-input:focus-visible {
    outline: 0;
}

.l6-page--bio .b6-claim-input::placeholder {
    color: #7d8799;
    font-weight: 400;
}

.l6-page--bio .b6-claim-submit {
    flex: none;
    min-height: 50px;
    margin: 5px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: var(--l6-blue);
    color: #fff;
    font-family: var(--l6-text);
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 160ms ease;
}

.l6-page--bio .b6-claim-submit:hover {
    background: var(--l6-blue-deep);
}

.l6-page--bio .b6-claim-submit:focus-visible {
    outline: 3px solid var(--l6-ink);
    outline-offset: 2px;
}

/* On the blue final panel */
.l6-page--bio .b6-claim-wrap--final {
    margin-top: 0;
}

.l6-page--bio .b6-claim-wrap--final .b6-claim-field {
    border-color: var(--l6-ink);
    box-shadow: 4px 4px 0 var(--l6-ink);
}

.l6-page--bio .b6-claim-wrap--final .b6-claim-field:focus-within {
    box-shadow: 5px 5px 0 #fff;
}

.l6-page--bio .b6-claim-wrap--final .b6-claim-submit {
    background: var(--l6-ink);
}

.l6-page--bio .b6-claim-wrap--final .b6-claim-submit:hover {
    background: #1d3354;
}

.l6-page--bio .b6-login {
    margin-top: 10px;
    color: #fff;
    font-size: 0.92rem;
}

.l6-page--bio .b6-login a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Phone: a real bio page in an iframe, laid out at 390 x 844 and scaled
   to --pw (the screen width in px, unitless) -------------------------------- */

.l6-page--bio .b6-phone {
    --pw: 290;
    position: relative;
    flex: none;
    width: calc(var(--pw) * 1px + 20px);
    padding: 10px;
    border-radius: 46px;
    background: #0a1222;
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.16),
        0 40px 80px rgba(3, 9, 26, 0.5);
}

.l6-page--bio .b6-phone-screen {
    position: relative;
    width: calc(var(--pw) * 1px);
    height: calc(var(--pw) * 844px / 390);
    overflow: hidden;
    border-radius: 36px;
    background: #fff;
}

.l6-page--bio .b6-phone-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 390px;
    height: 844px;
    border: 0;
    opacity: 0;
    visibility: hidden;
    transform: scale(calc(var(--pw) / 390));
    transform-origin: 0 0;
    transition: opacity 320ms ease, visibility 0s linear 320ms;
}

.l6-page--bio .b6-phone-frame.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 320ms ease;
}

/* ---- Stage: phone, the route beside it, chips under both ------------------ */

/* The tapped link, drawn like a button on the bio page */

/* The hand-off: a dashed path that runs down into the app */

@keyframes b6-flow {
    to { background-position: 0 12px; }
}

/* What the visitor got done */

/* Replayed by the script when a chip changes the page */

@keyframes b6-swap {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Why
   ========================================================================== */

.l6-page--bio .b6-why-more {
    margin-top: 14px;
    color: var(--l6-ink);
    font-weight: 700;
}

/* ==========================================================================
   Three outcomes: art inside the kit's spotlight cards
   ========================================================================== */

.l6-page--bio .b6-art {
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

.l6-page--bio .b6-art-video {
    position: relative;
    width: min(100%, 228px);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
    box-shadow: 0 12px 24px rgba(13, 27, 46, 0.18);
}

.l6-page--bio .b6-art-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.l6-page--bio .b6-art-video > i {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding-left: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--l6-ink);
    font-size: 13px;
    transform: translate(-50%, -50%);
}

.l6-page--bio .b6-art-video em {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 700;
}

.l6-page--bio .b6-art-chan {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px 5px 5px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 6px 14px rgba(13, 27, 46, 0.1);
    color: var(--l6-ink);
    font-size: 0.8rem;
}

.l6-page--bio .b6-art-chan img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
}

.l6-page--bio .b6-art-chan em {
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--l6-haze);
    color: var(--l6-body);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 700;
}

.l6-page--bio .b6-art-product {
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(100%, 250px);
    padding: 8px 14px 8px 8px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(13, 27, 46, 0.12);
    color: var(--l6-ink);
}

.l6-page--bio .b6-art-product img {
    flex: none;
    width: 58px;
    height: 58px;
    border-radius: 10px;
    object-fit: cover;
}

.l6-page--bio .b6-art-product b {
    display: block;
    font-size: 0.84rem;
    line-height: 1.25;
}

.l6-page--bio .b6-art-product small {
    display: block;
    margin-top: 2px;
    font-size: 0.84rem;
    font-weight: 700;
}

.l6-page--bio .b6-art-stores {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.l6-page--bio .b6-art-stores li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--l6-ink);
    font-size: 0.74rem;
    font-weight: 700;
}

.l6-page--bio .b6-art-stores img {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
}

.l6-page--bio .b6-art-signup {
    display: flex;
    align-items: center;
    width: min(100%, 250px);
    padding: 5px 5px 5px 14px;
    border: 1px solid var(--l6-line);
    border-radius: 12px;
    background: #fff;
    color: #7d8799;
    font-size: 0.8rem;
}

.l6-page--bio .b6-art-signup span {
    flex: 1;
}

.l6-page--bio .b6-art-signup b {
    padding: 7px 12px;
    border-radius: 8px;
    background: var(--l6-ink);
    color: #fff;
    font-size: 0.76rem;
}

.l6-page--bio .b6-art-days {
    display: flex;
    gap: 6px;
}

.l6-page--bio .b6-art-days i,
.l6-page--bio .b6-art-actions i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--l6-line);
    border-radius: 9px;
    background: #fff;
    color: var(--l6-muted);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 700;
}

.l6-page--bio .b6-art-days i.is-open {
    border-color: var(--l6-blue);
    color: var(--l6-blue);
}

.l6-page--bio .b6-art-actions {
    display: flex;
    gap: 8px;
}

.l6-page--bio .b6-art-actions i {
    border-radius: 50%;
    color: var(--l6-blue);
}

.l6-page--bio .b6-tag-ico {
    color: var(--l6-blue);
    font-size: 1.05rem;
}

.l6-page--bio .b6-uses .l6-check-list {
    margin-top: 16px;
}

.l6-page--bio .b6-uses .l6-card-cta {
    margin-top: auto;
    padding-top: 18px;
    color: var(--l6-blue-deep);
    font-weight: 700;
    text-decoration: none;
}

.l6-page--bio .b6-uses .l6-card-cta:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ==========================================================================
   Make it yours: the studio. The editor's controls on the left, a sample page
   in a phone on the right. A look is seven variables on .b6-studio, printed
   in the markup for the opening look and set by the script after that:
     --b6-d-bg, -accent, -card, -text   a palette's four colours
     --b6-d-on                          label colour on the accent
     --b6-d-font                        heading font stack
     --b6-d-f                           corner roundness, 0 to 1
   The colours and the roundness are registered, so a new look fades in
   (browsers without @property switch at once).
   ========================================================================== */

@property --b6-d-bg {
    syntax: "<color>";
    inherits: true;
    initial-value: #fde8d8;
}

@property --b6-d-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #ef7434;
}

@property --b6-d-card {
    syntax: "<color>";
    inherits: true;
    initial-value: #ffffff;
}

@property --b6-d-text {
    syntax: "<color>";
    inherits: true;
    initial-value: #3a2a20;
}

@property --b6-d-on {
    syntax: "<color>";
    inherits: true;
    initial-value: #000000;
}

@property --b6-d-f {
    syntax: "<number>";
    inherits: true;
    initial-value: 0.6;
}

/* Heading on the left, the three numbers on its baseline to the right */
.l6-page--bio .b6-design-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px clamp(32px, 5vw, 72px);
    align-items: end;
    margin-bottom: clamp(32px, 4vw, 48px);
}

.l6-page--bio .b6-design-head .l6-head {
    margin-bottom: 0;
}

.l6-page--bio .b6-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    width: min(100%, 440px);
    margin: 0 0 6px;
}

.l6-page--bio .b6-facts dt {
    color: var(--l6-ink);
    font-family: var(--l6-display);
    font-size: clamp(2rem, 3vw, 2.7rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.l6-page--bio .b6-facts dd {
    margin: 6px 0 0;
    color: var(--l6-muted);
    font-size: 0.9rem;
    line-height: 1.35;
}

.l6-page--bio .b6-studio {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
    overflow: hidden;
    border: 1px solid var(--l6-line);
    border-radius: 28px;
    background: var(--l6-paper);
    box-shadow: 0 1px 0 rgba(13, 27, 46, 0.04), 0 24px 56px rgba(13, 27, 46, 0.09);
    transition:
        --b6-d-bg 420ms ease,
        --b6-d-accent 420ms ease,
        --b6-d-card 420ms ease,
        --b6-d-text 420ms ease,
        --b6-d-on 420ms ease,
        --b6-d-f 320ms ease;
}

/* ---- Controls ------------------------------------------------------------ */

.l6-page--bio .b6-studio-controls {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: clamp(24px, 3.2vw, 44px);
}

.l6-page--bio .b6-ctl-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    color: var(--l6-ink);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.2;
}

/* The current value, as the editor shows it beside each label */
.l6-page--bio .b6-ctl-label span {
    color: var(--l6-muted);
    font-size: 0.9rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.l6-page--bio .b6-swatches,
.l6-page--bio .b6-fontchips {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.l6-page--bio .b6-swatches {
    gap: 10px;
}

/* One palette: its background and its accent, split on the diagonal */
.l6-page--bio .b6-swatch {
    display: block;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bg) 50%, var(--ac) 50%);
    box-shadow: inset 0 0 0 1px rgba(13, 27, 46, 0.16);
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.l6-page--bio .b6-swatch:hover {
    transform: translateY(-2px);
}

.l6-page--bio .b6-swatch[aria-pressed="true"] {
    box-shadow:
        inset 0 0 0 1px rgba(13, 27, 46, 0.16),
        0 0 0 3px var(--l6-paper),
        0 0 0 5px var(--l6-ink);
}

.l6-page--bio .b6-swatch:focus-visible,
.l6-page--bio .b6-well input:focus-visible,
.l6-page--bio .b6-fontchip:focus-visible {
    outline: 3px solid var(--l6-blue);
    outline-offset: 4px;
}

/* The palette's four colours, each a native colour picker */
.l6-page--bio .b6-wells {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.l6-page--bio .b6-well {
    display: grid;
    gap: 6px;
    margin: 0;
    color: var(--l6-muted);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
}

.l6-page--bio .b6-well input {
    width: 100%;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(13, 27, 46, 0.16) !important; /* the25-public.css borders every input */
    border-radius: 11px;
    background: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.l6-page--bio .b6-well input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.l6-page--bio .b6-well input::-webkit-color-swatch {
    border: 0;
    border-radius: 10px;
}

.l6-page--bio .b6-well input::-moz-color-swatch {
    border: 0;
    border-radius: 10px;
}

.l6-page--bio .b6-fontchips {
    gap: 8px;
}

/* Each chip is set in its own family */
.l6-page--bio .b6-fontchip {
    min-height: 46px;
    padding: 0 16px;
    border: 1px solid var(--l6-line);
    border-radius: 12px;
    background: var(--l6-paper);
    color: var(--l6-ink);
    font-size: 1.08rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.l6-page--bio .b6-fontchip:hover {
    border-color: var(--l6-ink);
}

.l6-page--bio .b6-fontchip[aria-pressed="true"] {
    border-color: var(--l6-ink);
    background: var(--l6-ink);
    color: #fff;
}

/* Corner roundness: a square at one end of the slider, a circle at the other */
.l6-page--bio .b6-range-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.l6-page--bio .b6-range-end {
    flex: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--l6-ink);
}

.l6-page--bio .b6-range-end--round {
    border-radius: 50%;
}

.l6-page--bio .b6-range {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0 !important; /* the25-public.css borders every input */
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.l6-page--bio .b6-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(to right, var(--l6-blue) var(--fill, 60%), var(--l6-line) var(--fill, 60%));
}

.l6-page--bio .b6-range::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: var(--l6-line);
}

.l6-page--bio .b6-range::-moz-range-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--l6-blue);
}

.l6-page--bio .b6-range::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    margin-top: -9px;
    border: 2px solid var(--l6-ink);
    border-radius: 50%;
    background: var(--l6-paper);
    box-shadow: 2px 2px 0 var(--l6-ink);
    -webkit-appearance: none;
    appearance: none;
}

.l6-page--bio .b6-range::-moz-range-thumb {
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    border: 2px solid var(--l6-ink);
    border-radius: 50%;
    background: var(--l6-paper);
    box-shadow: 2px 2px 0 var(--l6-ink);
}

.l6-page--bio .b6-design-list {
    margin-top: auto;
    padding-top: 26px;
    border-top: 1px solid var(--l6-line);
}

/* ---- Stage: takes the accent of the current look, lit from the top -------- */

.l6-page--bio .b6-studio-stage {
    display: grid;
    place-items: center;
    padding: clamp(32px, 4vw, 52px) 24px;
    overflow: hidden;
    background: var(--b6-d-accent);
    background:
        radial-gradient(72% 56% at 50% 28%, color-mix(in oklab, var(--b6-d-accent) 84%, #fff), transparent),
        color-mix(in oklab, var(--b6-d-accent) 76%, var(--l6-navy));
}

.l6-page--bio .b6-studio-stage .b6-phone {
    --pw: 296;
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.16),
        0 34px 70px rgba(3, 9, 26, 0.55);
}

/* ---- The sample page, at the size of a real bio page (390 x 844) ---------- */

.l6-page--bio .b6-d-page {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 390px;
    height: 844px;
    overflow: hidden;
    background: var(--b6-d-bg);
    background: linear-gradient(160deg, var(--b6-d-bg), color-mix(in srgb, var(--b6-d-bg) 70%, #fff));
    color: var(--b6-d-text);
    font-family: var(--l6-text);
    font-size: 15px;
    line-height: 1.35;
    transform: scale(calc(var(--pw) / 390));
    transform-origin: 0 0;
}

.l6-page--bio .b6-d-page b {
    font-family: var(--b6-d-font, inherit);
    font-weight: 700;
}

.l6-page--bio .b6-d-cover {
    position: relative;
    flex: none;
    height: 208px;
}

.l6-page--bio .b6-d-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 28%;
}

/* The photo runs out into the page colour */
.l6-page--bio .b6-d-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 52%, var(--b6-d-bg));
}

.l6-page--bio .b6-d-profile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -58px;
    padding: 0 30px;
    text-align: center;
}

.l6-page--bio .b6-d-avatar {
    width: 92px;
    height: 92px;
    border: 4px solid var(--b6-d-card);
    border-radius: 50%;
    object-fit: cover;
}

.l6-page--bio .b6-d-name {
    margin-top: 10px;
    font-size: 27px;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.l6-page--bio .b6-d-tagline {
    max-width: 300px;
    margin-top: 5px;
    color: color-mix(in srgb, var(--b6-d-text) 74%, transparent);
    font-size: 14.5px;
}

.l6-page--bio .b6-d-socials {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.l6-page--bio .b6-d-socials i {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--b6-d-accent);
    color: var(--b6-d-on);
    font-size: 18px;
}

.l6-page--bio .b6-d-blocks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    padding: 0 18px;
}

.l6-page--bio .b6-d-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 7px 16px 7px 8px;
    border: 1px solid color-mix(in srgb, var(--b6-d-text) 10%, transparent);
    border-radius: calc(var(--b6-d-f) * 26px);
    background: var(--b6-d-card);
}

.l6-page--bio .b6-d-row > img {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: var(--b6-d-thumb, calc(var(--b6-d-f) * 20px));
    object-fit: cover;
}

.l6-page--bio .b6-d-row > span {
    display: grid;
    flex: 1;
    min-width: 0;
}

.l6-page--bio .b6-d-row b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l6-page--bio .b6-d-row small {
    color: color-mix(in srgb, var(--b6-d-text) 70%, transparent);
    font-size: 13px;
}

.l6-page--bio .b6-d-row > i {
    flex: none;
    color: color-mix(in srgb, var(--b6-d-text) 55%, transparent);
    font-size: 17px;
}

.l6-page--bio .b6-d-row--accent {
    padding-left: 20px;
    border-color: transparent;
    background: var(--b6-d-accent);
    color: var(--b6-d-on);
}

.l6-page--bio .b6-d-row--accent b {
    flex: 1;
    font-size: 16px;
}

.l6-page--bio .b6-d-row--accent > i {
    color: inherit;
    font-size: 20px;
}

.l6-page--bio .b6-d-row--accent > .fa-chevron-right {
    font-size: 12px;
    opacity: 0.7;
}

.l6-page--bio .b6-d-video {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: calc(var(--b6-d-f) * 22px);
}

.l6-page--bio .b6-d-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.l6-page--bio .b6-d-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent 55%);
}

.l6-page--bio .b6-d-video > i {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 54px;
    height: 38px;
    border-radius: 11px;
    background: #f00;
    color: #fff;
    font-size: 15px;
    transform: translate(-50%, -60%);
}

.l6-page--bio .b6-d-video > b {
    position: absolute;
    right: 14px;
    bottom: 11px;
    left: 14px;
    z-index: 1;
    color: #fff;
    font-size: 16px;
    line-height: 1.2;
}

/* The step counts beside the chart's bars ("7 steps") have a fixed width in the
   kit, and longer words ("7 Schritte") wrap to two lines there. Here they keep one
   line; the counts of one chart differ only in their digit, so the bars still line up. */
.l6-page--bio .l6-bar-n {
    width: auto;
    min-width: 4.6em;
    white-space: nowrap;
}

/* ==========================================================================
   Block catalogue (partials/bio6/blocks.php)
   ========================================================================== */

.l6-page--bio .b6-blocks {
    scroll-margin-top: 80px;
}

.l6-page--bio .b6-shelf + .b6-shelf {
    margin-top: 34px;
}

.l6-page--bio .b6-shelf-title {
    margin: 0 0 4px;
    font-family: var(--l6-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* What the group is good for, in one line under its name */
.l6-page--bio .b6-shelf-line {
    margin: 0 0 14px;
    color: var(--l6-body);
    font-size: 0.98rem;
    line-height: 1.45;
    text-wrap: pretty;
}

/* A shelf has six places above 1280px. Videos (three blocks) and Music and
   podcasts (two) would each leave half a row empty, so there they share one
   row, each under its own name. A wider gap than between two cards tells the
   two groups apart; the cards keep the width they have in every other row
   (a card is (100% - 70px) / 6: six places, five 14px gaps). The three parts
   of a shelf (name, line, blocks) line up across the two, and a line that is
   shorter than its neighbour's sits just above its cards. */
@media (min-width: 1281px) {
    .l6-page--bio .b6-shelf-duo {
        display: grid;
        grid-template-columns: calc((100% - 70px) / 5 * 3 + 28px) minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        column-gap: 28px;
        width: calc((100% - 70px) / 6 * 5 + 70px);
    }

    .l6-page--bio .b6-shelf-duo > .b6-shelf {
        display: grid;
        grid-row: span 3;
        grid-template-rows: subgrid;
        margin-top: 0;
    }

    .l6-page--bio .b6-shelf-duo .b6-shelf-line {
        align-self: end;
    }

    .l6-page--bio .b6-shelf-duo > .b6-shelf:first-child .b6-shelf-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .l6-page--bio .b6-shelf-duo > .b6-shelf:last-child .b6-shelf-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.l6-page--bio .b6-shelf-duo + .b6-shelf {
    margin-top: 34px;
}

.l6-page--bio .b6-shelf-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A shelf of seven (Basics, since Gallery) would put its last block alone on
   a second row. Where a row has six places it takes seven instead: its cards
   are a seventh narrower than their neighbours', which reads better than one
   card under six. Narrower screens keep their rows of four (4 + 3) and of
   three (3 + 3 + 1: one card ends that shelf, as one ended Sell's 3 + 1
   before; four cards a row would be too narrow there). */
@media (min-width: 1281px) {
    .l6-page--bio .b6-shelf-row--seven {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

.l6-page--bio .b6-block {
    min-width: 0;
    padding: 10px 10px 16px;
    border: 1px solid var(--l6-line);
    border-radius: 18px;
    background: var(--l6-paper);
}

.l6-page--bio .b6-block h4 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 12px 4px 4px;
    color: var(--l6-ink);
    font-family: var(--l6-text);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.25;
}

.l6-page--bio .b6-block p {
    margin: 0 4px;
    color: var(--l6-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.l6-page--bio .b6-paid {
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff1d6;
    color: var(--l6-amber-deep);
    font-size: 0.68rem;
    font-weight: 700;
}

/* The sketch area: every preview sits in the same box */
.l6-page--bio .b6-block-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 132px;
    padding: 12px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--l6-haze);
    color: var(--l6-ink);
    font-size: 11px;
    line-height: 1.3;
}

.l6-page--bio .b6-block-stage i {
    font-style: normal;
}

.l6-page--bio .b6-block-stage--image {
    padding: 0;
}

.l6-page--bio .b6-m-yt { color: #f00; }
.l6-page--bio .b6-m-ig { color: #e1306c; }
.l6-page--bio .b6-m-sp { color: #1db954; }
.l6-page--bio .b6-m-wa { color: #25d366; }
.l6-page--bio .b6-m-fb { color: #1877f2; }
.l6-page--bio .b6-m-ap { color: #9933cc; }
.l6-page--bio .b6-m-az { color: #f90; }

.l6-page--bio .b6-m-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--l6-line);
    border-radius: 9px;
    background: #fff;
}

.l6-page--bio .b6-m-btn b {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l6-page--bio .b6-m-btn .fa-chevron-right {
    color: #a3adbd;
    font-size: 9px;
}

.l6-page--bio .b6-m-btn--tall {
    padding-block: 11px;
}

.l6-page--bio .b6-m-btn--center {
    justify-content: center;
}

.l6-page--bio .b6-m-btn--center b,
.l6-page--bio .b6-m-btn--accent b {
    flex: none;
}

.l6-page--bio .b6-m-btn--accent {
    justify-content: center;
    border-color: var(--l6-ink);
    background: var(--l6-ink);
    color: #fff;
}

.l6-page--bio .b6-m-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    width: 100%;
}

.l6-page--bio .b6-m-tiles span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 4px;
    border: 1px solid var(--l6-line);
    border-radius: 8px;
    background: #fff;
    font-size: 10px;
    font-weight: 700;
}

.l6-page--bio .b6-m-copy {
    color: var(--l6-body);
    text-align: center;
}

.l6-page--bio .b6-m-copy b {
    display: block;
    margin-bottom: 2px;
    color: var(--l6-ink);
    font-size: 12px;
}

.l6-page--bio .b6-m-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.l6-page--bio .b6-m-ghost {
    width: 100%;
    height: 16px;
    border: 1px solid var(--l6-line);
    border-radius: 6px;
    background: #fff;
}

.l6-page--bio .b6-m-rule {
    width: 100%;
    padding: 8px 0;
}

.l6-page--bio .b6-m-rule i {
    display: block;
    border-top: 2px dashed #b9c4d4;
}

.l6-page--bio .b6-m-dots {
    display: flex;
    gap: 8px;
    max-width: 100%;
}

/* 26px, a little less where four of them are wider than the card (a row of
   seven cards): they shrink together instead of losing their outer edges. */
.l6-page--bio .b6-m-dots i {
    display: grid;
    place-items: center;
    width: 26px;
    min-width: 0;
    aspect-ratio: 1;
    border: 1px solid var(--l6-line);
    border-radius: 50%;
    background: #fff;
}

.l6-page--bio .b6-m-video {
    position: relative;
    display: block;
    width: 100%;
    max-width: 180px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
}

.l6-page--bio .b6-m-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.l6-page--bio .b6-m-video > i {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding-left: 2px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    font-size: 9px;
    transform: translate(-50%, -50%);
}

.l6-page--bio .b6-m-video b {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 12px 7px 5px;
    overflow: hidden;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.75));
    color: #fff;
    font-size: 9.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l6-page--bio .b6-m-video em {
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
}

.l6-page--bio .b6-m-strip {
    display: flex;
    gap: 6px;
    width: 100%;
}

.l6-page--bio .b6-m-strip .b6-m-video {
    flex: 1;
}

.l6-page--bio .b6-m-card {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px;
    border: 1px solid var(--l6-line);
    border-radius: 9px;
    background: #fff;
}

.l6-page--bio .b6-m-card img {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    object-fit: cover;
}

.l6-page--bio .b6-m-card > span:not(.b6-m-date) {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.l6-page--bio .b6-m-card b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l6-page--bio .b6-m-card small {
    color: var(--l6-muted);
    font-size: 10px;
}

.l6-page--bio .b6-m-card .b6-m-price {
    color: var(--l6-ink);
    font-weight: 700;
}

.l6-page--bio .b6-m-card .b6-m-price s {
    color: var(--l6-muted);
    font-weight: 400;
}

.l6-page--bio .b6-m-card > i {
    flex: none;
    margin-right: 4px;
    color: #8f9aad;
}

.l6-page--bio .b6-m-card > .b6-m-az {
    color: #f90;
    font-size: 13px;
}

.l6-page--bio .b6-m-card--course em {
    align-self: flex-start;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--l6-go-soft);
    color: #0b7a4e;
    font-size: 8.5px;
    font-style: normal;
    font-weight: 700;
}

.l6-page--bio .b6-m-date {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: var(--l6-ink);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.1;
}

.l6-page--bio .b6-m-date b {
    font-size: 12px;
}

.l6-page--bio .b6-m-input {
    width: 100%;
    padding: 6px 9px;
    border: 1px solid var(--l6-line);
    border-radius: 8px;
    background: #fff;
    color: #7d8799;
    font-size: 10.5px;
}

.l6-page--bio .b6-m-input--area {
    height: 32px;
}

.l6-page--bio .b6-m-days,
.l6-page--bio .b6-m-slots {
    display: flex;
    gap: 4px;
}

.l6-page--bio .b6-m-days i,
.l6-page--bio .b6-m-slots i {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border: 1px solid var(--l6-line);
    border-radius: 6px;
    background: #fff;
    color: var(--l6-muted);
    font-size: 10px;
}

.l6-page--bio .b6-m-days i.is-open {
    border-color: var(--l6-blue);
    color: var(--l6-blue);
    font-weight: 700;
}

.l6-page--bio .b6-m-slots i.is-picked {
    border-color: var(--l6-blue);
    background: var(--l6-blue);
    color: #fff;
    font-weight: 700;
}

/* A map drawn with CSS: two roads over a pale ground */
.l6-page--bio .b6-m-map {
    display: grid;
    place-items: center;
    width: 100%;
    height: 54px;
    border-radius: 8px;
    background:
        linear-gradient(115deg, transparent 46%, #fff 46% 52%, transparent 52%),
        linear-gradient(20deg, transparent 58%, #fff 58% 64%, transparent 64%),
        #d9ecdf;
    color: var(--l6-stop);
    font-size: 16px;
}

/* The sketches added after the first twenty carry no icon font: shapes are
   CSS, icons are our own line icons printed by sketches.php ($b6Ico). */
.l6-page--bio .b6-m-ico {
    flex: none;
    width: 12px;
    height: 12px;
}

/* Gallery: six small squares of the demo pages' artwork */
.l6-page--bio .b6-m-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    width: 100%;
    max-width: 160px;
}

.l6-page--bio .b6-m-gallery img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 7px;
    object-fit: cover;
}

/* Reviews: one testimonial card with its stars, the quote and who said it */
.l6-page--bio .b6-m-review {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding: 8px 9px;
    border: 1px solid var(--l6-line);
    border-radius: 9px;
    background: #fff;
}

.l6-page--bio .b6-m-stars {
    width: 54px;
    height: 10px;
    fill: #f2a20c;
}

.l6-page--bio .b6-m-quote {
    display: -webkit-box;
    overflow: hidden;
    color: var(--l6-ink);
    font-size: 10.5px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.l6-page--bio .b6-m-who {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* The initials disc the block shows for a customer without a photo */
.l6-page--bio .b6-m-who > i {
    display: grid;
    flex: none;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--l6-ink);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
}

.l6-page--bio .b6-m-who > span {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.l6-page--bio .b6-m-who b,
.l6-page--bio .b6-m-who small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l6-page--bio .b6-m-who b {
    font-size: 10px;
}

.l6-page--bio .b6-m-who small {
    color: var(--l6-muted);
    font-size: 9px;
}

/* Discount code: a coupon. The offer on top, a perforated edge with a notch
   at each end, then the code and its Copy button. */
.l6-page--bio .b6-m-coupon {
    width: 100%;
    border: 1px solid var(--l6-line);
    border-radius: 9px;
    background: #fff;
}

.l6-page--bio .b6-m-coupon-offer {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px dashed #b9c4d4;
}

.l6-page--bio .b6-m-coupon-offer .b6-m-ico {
    color: var(--l6-blue);
}

.l6-page--bio .b6-m-coupon-offer b {
    min-width: 0;
    overflow: hidden;
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The notches: a circle in the stage's colour over each end of the dashed
   line, centred on the card's edge and cut to the half that lies inside it. */
.l6-page--bio .b6-m-coupon-offer::before,
.l6-page--bio .b6-m-coupon-offer::after {
    position: absolute;
    bottom: -6px;
    width: 10px;
    height: 10px;
    border: 1px solid var(--l6-line);
    border-radius: 50%;
    background: var(--l6-haze);
    content: "";
}

.l6-page--bio .b6-m-coupon-offer::before {
    left: -6px;
    clip-path: inset(0 0 0 50%);
}

.l6-page--bio .b6-m-coupon-offer::after {
    right: -6px;
    clip-path: inset(0 50% 0 0);
}

.l6-page--bio .b6-m-coupon-stub {
    display: flex;
    gap: 5px;
    padding: 9px 10px;
}

.l6-page--bio .b6-m-coupon-code,
.l6-page--bio .b6-m-coupon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    border-radius: 6px;
    font-weight: 700;
}

.l6-page--bio .b6-m-coupon-code {
    flex: 1;
    min-width: 0;
    border: 1px dashed #9aa7ba;
    background: var(--l6-haze);
    color: var(--l6-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    letter-spacing: 0.08em;
}

.l6-page--bio .b6-m-coupon-btn {
    flex: none;
    gap: 4px;
    padding: 0 8px;
    background: var(--l6-ink);
    color: #fff;
    font-size: 9.5px;
}

.l6-page--bio .b6-m-coupon-btn .b6-m-ico {
    width: 10px;
    height: 10px;
}

/* FAQ: three questions in one card, the first one open. Its answer is two
   plain lines (the <i> elements); the open question's chevron points up. */
.l6-page--bio .b6-m-faq {
    width: 100%;
    border: 1px solid var(--l6-line);
    border-radius: 9px;
    background: #fff;
}

.l6-page--bio .b6-m-faq > span {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 6px;
    padding: 6px 9px;
}

.l6-page--bio .b6-m-faq > span + span {
    border-top: 1px solid var(--l6-line);
}

.l6-page--bio .b6-m-faq b {
    overflow: hidden;
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l6-page--bio .b6-m-faq .b6-m-ico {
    color: #8f9aad;
}

.l6-page--bio .b6-m-faq .is-open .b6-m-ico {
    transform: rotate(180deg);
}

.l6-page--bio .b6-m-faq i {
    grid-column: 1 / -1;
    height: 4px;
    border-radius: 2px;
    background: #dfe5ee;
}

.l6-page--bio .b6-m-faq i + i {
    width: 62%;
    margin-bottom: 2px;
}

.l6-page--bio .b6-blocks-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 28px;
    margin-top: 40px;
    padding: 22px 26px;
    border: 1px solid var(--l6-line);
    border-radius: 22px;
    background: var(--l6-paper);
}

.l6-page--bio .b6-blocks-cta p {
    color: var(--l6-ink);
    font-weight: 700;
}

.l6-page--bio .b6-blocks-cta div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
}

/* ==========================================================================
   Bento extras
   ========================================================================== */

.l6-page--bio .b6-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.l6-page--bio .b6-tags li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--l6-haze);
    color: var(--l6-ink);
    font-size: 0.88rem;
    font-weight: 700;
}

.l6-page--bio .b6-tags i {
    color: var(--l6-blue);
    font-size: 0.85em;
}

.l6-page--bio .b6-countries-note {
    margin: 8px 0 16px;
}

.l6-page--bio .b6-preview-img {
    background: var(--l6-haze);
}

.l6-page--bio .b6-preview-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   Setup: the five starter templates under the steps
   ========================================================================== */

/* ==========================================================================
   Creator reels (partials/landing6/reels.php), as on the homepage
   ========================================================================== */

.l6-page--bio .l6-reels {
    padding: clamp(72px, 9vw, 120px) 0;
    overflow: hidden;
    background:
        radial-gradient(45% 60% at 85% 30%, rgba(9, 103, 242, 0.35), transparent 70%),
        radial-gradient(35% 50% at 0% 100%, rgba(225, 48, 108, 0.2), transparent 70%),
        #0b1734;
    color: rgba(255, 255, 255, 0.74);
}

.l6-page--bio .l6-reels .l6-h2 {
    color: #fff;
}

.l6-page--bio .l6-reels-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
}

.l6-page--bio .l6-reels-copy p {
    max-width: 28em;
}

.l6-page--bio .l6-reels-total {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 30px;
    margin-top: 24px;
    font-size: 0.95rem;
}

.l6-page--bio .l6-reels-total b {
    display: block;
    color: #fff;
    font-family: var(--l6-display);
    font-size: clamp(1.9rem, 2.6vw, 2.5rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.l6-page--bio .l6-reels-nav {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

.l6-page--bio .l6-reels-nav[hidden] {
    display: none;
}

.l6-page--bio .l6-reels-nav button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    cursor: pointer;
}

.l6-page--bio .l6-reels-nav button:hover {
    background: rgba(255, 255, 255, 0.16);
}

.l6-page--bio .l6-reels-track {
    display: flex;
    gap: 18px;
    margin: 0;
    padding: 0 0 6px;
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.l6-page--bio .l6-reels-track::-webkit-scrollbar {
    display: none;
}

.l6-page--bio .l6-reel {
    display: grid;
    flex: 0 0 clamp(220px, 21vw, 262px);
    align-content: start;
    gap: 14px;
    scroll-snap-align: start;
}

.l6-page--bio .l6-reel-media {
    position: relative;
    aspect-ratio: 9 / 16;
    max-width: 100%;
    overflow: hidden;
    border-radius: 18px;
    background: #000;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4);
}

.l6-page--bio .l6-reel-poster,
.l6-page--bio .l6-reel-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.l6-page--bio .l6-reel-poster {
    object-fit: cover;
}

.l6-page--bio .l6-reel-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 22%, transparent 70%, rgba(0, 0, 0, 0.45) 100%);
    pointer-events: none;
}

.l6-page--bio .l6-reel-media.is-playing::after,
.l6-page--bio .l6-reel-media.is-playing .l6-reel-badge,
.l6-page--bio .l6-reel-media.is-playing .l6-reel-play,
.l6-page--bio .l6-reel-media.is-playing .l6-reel-stats {
    display: none;
}

.l6-page--bio .l6-reel-badge {
    position: absolute;
    z-index: 1;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 700;
}

.l6-page--bio .l6-reel-badge img {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

.l6-page--bio .l6-reel-play {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    padding-left: 4px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    color: var(--l6-ink);
    font-size: 20px;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: transform 160ms ease;
}

.l6-page--bio .l6-reel-play:hover {
    transform: translate(-50%, -50%) scale(1.07);
}

.l6-page--bio .l6-reel-play:focus-visible,
.l6-page--bio .l6-reels-nav button:focus-visible {
    outline: 3px solid var(--l6-sky);
    outline-offset: 3px;
}

.l6-page--bio .l6-reel-stats {
    position: absolute;
    z-index: 1;
    bottom: 12px;
    left: 12px;
    display: flex;
    gap: 14px;
    color: #fff;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.l6-page--bio .l6-reel-stats > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.l6-page--bio .l6-reel-stats i {
    font-size: 0.78em;
}

.l6-page--bio .l6-reel-meta {
    display: grid;
    gap: 6px;
    font-size: 0.9rem;
    line-height: 1.45;
}

.l6-page--bio .l6-reel-who b {
    color: #fff;
}

.l6-page--bio .l6-reel-who span {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.84rem;
}

.l6-page--bio .l6-reel-meta blockquote {
    margin: 0;
}

.l6-page--bio .l6-reel-meta blockquote p {
    color: rgba(255, 255, 255, 0.86);
}

.l6-page--bio .l6-reel-gloss {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
}

.l6-page--bio .l6-reel-meta a {
    color: var(--l6-link-on-dark);
    font-size: 0.86rem;
    font-weight: 700;
}

/* The row runs out to the screen edge on the right (desktop) and on both
   sides (stacked), so a cut-off card reads as "scroll for more". */
@media (min-width: 1181px) {
    .l6-page--bio .l6-reels-track {
        margin-right: calc((100vw - min(100vw - 48px, 1320px)) / -2);
        padding-right: 24px;
    }
}

/* ==========================================================================
   Free and paid
   ========================================================================== */

.l6-page--bio .b6-plans {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr);
    gap: clamp(20px, 2.4vw, 32px);
    align-items: stretch;
}

.l6-page--bio .b6-plans-copy {
    align-self: center;
    padding-right: clamp(0px, 2vw, 32px);
}

.l6-page--bio .b6-plans-copy .b6-link {
    margin-top: 22px;
}

.l6-page--bio .b6-plan {
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 1px solid var(--l6-line);
    border-radius: 24px;
    background: var(--l6-paper);
    box-shadow: 0 18px 40px rgba(13, 27, 46, 0.07);
}

.l6-page--bio .b6-plan-name {
    color: var(--l6-ink);
    font-weight: 700;
}

.l6-page--bio .b6-plan-price {
    margin: 6px 0 18px;
    color: var(--l6-muted);
    font-size: 0.9rem;
    line-height: 1.3;
}

.l6-page--bio .b6-plan-price b {
    color: var(--l6-ink);
    font-family: var(--l6-display);
    font-size: 2.6rem;
    letter-spacing: -0.03em;
    line-height: 1;
}

.l6-page--bio .b6-plan .l6-check-list {
    margin-bottom: 24px;
}

.l6-page--bio .b6-plan .b6-btn {
    margin-top: auto;
}

.l6-page--bio .b6-plan--paid {
    border-color: transparent;
    background: var(--l6-navy);
    box-shadow: none;
    color: rgba(255, 255, 255, 0.78);
}

.l6-page--bio .b6-plan--paid .b6-plan-name,
.l6-page--bio .b6-plan--paid .b6-plan-price b {
    color: #fff;
}

.l6-page--bio .b6-plan--paid .b6-plan-price {
    color: rgba(255, 255, 255, 0.66);
}

.l6-page--bio .b6-plan--paid .l6-check-list li {
    color: rgba(255, 255, 255, 0.84);
}

.l6-page--bio .b6-plan--paid .l6-check-list li > i {
    color: var(--l6-mint);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1280px) {
    .l6-page--bio .b6-shelf-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .l6-page--bio .b6-hero-grid,
    .l6-page--bio .b6-design-head,
    .l6-page--bio .l6-reels-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .l6-page--bio .b6-facts {
        margin-bottom: 0;
    }

    .l6-page--bio .l6-reels-track {
        margin-inline: -24px;
        padding-inline: 24px;
        scroll-padding-inline: 24px;
    }

    .l6-page--bio .b6-plans {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .l6-page--bio .b6-plans-copy {
        grid-column: 1 / -1;
        padding-right: 0;
    }
}

@media (max-width: 900px) {
    .l6-page--bio .b6-shelf-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* The studio stacks: the phone on top, cut off below the first blocks so
       the controls stay on the same screen as the page they change */
    .l6-page--bio .b6-studio {
        grid-template-columns: minmax(0, 1fr);
    }

    .l6-page--bio .b6-studio-stage {
        order: -1;
        place-items: start center;
        height: 440px;
        padding-bottom: 0;
    }
}

@media (max-width: 640px) {
    /* Phone on top, the route under it as one compact card */
    

    .l6-page--bio .b6-phone {
        --pw: 250;
    }

    .l6-page--bio .b6-studio-stage .b6-phone {
        --pw: 250;
    }

    .l6-page--bio .b6-studio-stage {
        height: 400px;
        padding-top: 28px;
    }

    .l6-page--bio .b6-studio-controls {
        gap: 26px;
        padding: 22px 18px 24px;
    }

    .l6-page--bio .b6-swatches {
        gap: 9px;
    }

    .l6-page--bio .b6-swatch {
        width: 36px;
        height: 36px;
    }

    .l6-page--bio .b6-claim-field {
        flex-wrap: wrap;
    }

    .l6-page--bio .b6-claim-submit {
        flex: 1 1 100%;
        margin-top: 0;
    }

    /* Each shelf scrolls sideways; a cut-off card says there is more */
    .l6-page--bio .b6-shelf-row {
        display: flex;
        margin-inline: -16px;
        padding: 0 16px 6px;
        overflow-x: auto;
        scroll-padding-inline: 16px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .l6-page--bio .b6-shelf-row::-webkit-scrollbar {
        display: none;
    }

    .l6-page--bio .b6-block {
        flex: 0 0 62%;
        scroll-snap-align: start;
    }

    .l6-page--bio .b6-blocks-cta {
        padding: 20px;
    }

    .l6-page--bio .l6-reel {
        flex-basis: 72%;
    }

    .l6-page--bio .l6-reels-track {
        margin-inline: -16px;
        padding-inline: 16px;
        scroll-padding-inline: 16px;
    }

    .l6-page--bio .b6-plans {
        grid-template-columns: minmax(0, 1fr);
    }

    .l6-page--bio .b6-facts {
        gap: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .l6-page--bio .b6-phone-frame,
.l6-page--bio .b6-btn,
.l6-page--bio .b6-claim-field,
.l6-page--bio .b6-claim-submit,
.l6-page--bio .b6-studio,
.l6-page--bio .b6-swatch,
.l6-page--bio .b6-fontchip,
.l6-page--bio .l6-reel-play {
        transition: none;
    }
}

/* ==========================================================================
   Hero wall (2026-10-09): the headline, its highlight on lines of its own
   (the em block above), beside three columns of the template gallery's
   pages drifting past.
   The columns hold their cards twice and move by half their height, so the
   loop has no seam. Paused on hover; still for reduced motion.
   ========================================================================== */

.l6-page--bio .b6-hero--wall .l6-display {
    font-size: clamp(2.6rem, 4.6vw, 4.7rem);
}

.l6-page--bio .b6-hero-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 26px;
    margin-top: 22px;
}

.l6-page--bio .b6-hero-browse,
.l6-page--bio .b6-hero-apps {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.l6-page--bio .b6-hero-browse {
    color: #fff;
    font-weight: 700;
}

.l6-page--bio .b6-hero-browse svg {
    width: 18px;
    height: 18px;
    transition: transform 160ms ease;
}

.l6-page--bio .b6-hero-browse:hover svg {
    transform: translateX(3px);
}

.l6-page--bio .b6-hero-apps {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.95rem;
}

.l6-page--bio .b6-hero-apps:hover {
    color: #fff;
}

.l6-page--bio .b6-hero-apps-icons {
    display: inline-flex;
    gap: 4px;
}

.l6-page--bio .b6-hero-apps-icons img {
    width: 22px;
    height: 22px;
    border-radius: 6px;
}

.l6-page--bio .b6-hero-browse:focus-visible,
.l6-page--bio .b6-hero-apps:focus-visible {
    outline: 3px solid var(--l6-sky);
    outline-offset: 4px;
    border-radius: 6px;
}

.l6-page--bio .b6-wall {
    --b6-wall-gap: 18px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--b6-wall-gap);
    height: min(740px, 86vh);
    margin-block: -12px;
    overflow: hidden;
    transform: rotate(-4deg);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
}

.l6-page--bio .b6-wall-track {
    display: grid;
    gap: var(--b6-wall-gap);
    animation: b6-wall-up var(--b6-wall-t, 70s) linear infinite;
    will-change: transform;
}

.l6-page--bio .b6-wall-col--2 .b6-wall-track {
    --b6-wall-t: 86s;
    animation-name: b6-wall-down;
}

.l6-page--bio .b6-wall-col--3 .b6-wall-track {
    --b6-wall-t: 62s;
    animation-delay: -20s;
}

.l6-page--bio .b6-wall:hover .b6-wall-track,
.l6-page--bio .b6-wall:focus-within .b6-wall-track {
    animation-play-state: paused;
}

@keyframes b6-wall-up {
    from { transform: translateY(0); }
    to   { transform: translateY(calc(-50% - var(--b6-wall-gap) / 2)); }
}

@keyframes b6-wall-down {
    from { transform: translateY(calc(-50% - var(--b6-wall-gap) / 2)); }
    to   { transform: translateY(0); }
}

.l6-page--bio .b6-wall-card {
    position: relative;
    display: block;
    aspect-ratio: 390 / 844;
    overflow: hidden;
    border-radius: 22px;
    background: #101a33;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 26px 50px -22px rgba(0, 0, 0, 0.7);
    transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
}

.l6-page--bio .b6-wall-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.l6-page--bio .b6-wall-name {
    position: absolute;
    left: 50%;
    bottom: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(11, 23, 52, 0.86);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 6px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.l6-page--bio .b6-wall-card:hover,
.l6-page--bio .b6-wall-card:focus-visible {
    transform: scale(1.04);
}

.l6-page--bio .b6-wall-card:hover .b6-wall-name,
.l6-page--bio .b6-wall-card:focus-visible .b6-wall-name {
    opacity: 1;
    transform: translate(-50%, 0);
}

.l6-page--bio .b6-wall-card:focus-visible {
    outline: 3px solid var(--l6-sky);
    outline-offset: 2px;
}

/* ---- Templates strip: one template per category -------------------------- */

.l6-page--bio .b6-tplstrip-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 32px;
}

.l6-page--bio .b6-tplstrip-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: clamp(36px, 4vw, 52px);
    color: var(--l6-blue-deep);
    font-weight: 700;
    text-decoration: none;
}

.l6-page--bio .b6-tplstrip-all svg {
    width: 18px;
    height: 18px;
}

.l6-page--bio .bt-grid.b6-tplstrip-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.l6-page--bio .b6-tplstrip-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}

.l6-page--bio .b6-tplstrip-cats a {
    display: block;
    padding: 8px 16px;
    border: 1px solid var(--l6-line);
    border-radius: 999px;
    color: var(--l6-ink);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
}

.l6-page--bio .b6-tplstrip-cats a:hover {
    border-color: var(--l6-ink);
}

@media (max-width: 1180px) {
    .l6-page--bio .b6-wall {
        height: 560px;
        margin: 8px 0 0;
    }

    .l6-page--bio .bt-grid.b6-tplstrip-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .l6-page--bio .b6-wall {
        --b6-wall-gap: 10px;
        height: 430px;
        margin-inline: -8px;
    }

    .l6-page--bio .b6-wall-card {
        border-radius: 14px;
    }

    .l6-page--bio .bt-grid.b6-tplstrip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .l6-page--bio .b6-hero-links {
        gap: 12px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .l6-page--bio .b6-wall-track {
        animation: none;
    }

    .l6-page--bio .b6-wall-card {
        transition: none;
    }
}