/*
 * The product pages (builder, webshop and till, domains): the dark numbered
 * list under the hero, photo + text rows, the editable text demo, the
 * responsive frame with a mini site (container queries), the searchable
 * blocks list, the extensions grid and the domain search in the hero. Everything is scoped to
 * .pg-product (the <main> of these three pages), so no other page is touched.
 */
@layer marketing {
    .mk .pg-product {
        /* the numbered list on black under each hero */
        & .sp-list {
            padding-block: clamp(56px, 7vw, 96px) clamp(80px, 10vw, 130px);
        }
        & .sp-list .box {
            border-radius: 22px;
            padding: clamp(28px, 4vw, 56px);
            border: 1px solid #1f1f1f;
            background: #0d0d0d;
        }
        & .sp-list .top {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 24px 64px;
            margin-bottom: clamp(36px, 5vw, 64px);
        }
        & .sp-list .top .h2 {
            font-size: clamp(32px, 4vw, 52px);
            color: #f3ede6;
        }
        & .sp-list .top p {
            color: rgb(243 237 230 / 0.7);
        }
        & .sp-list ol {
            list-style: none;
            margin: 0;
            padding: 0;
            counter-reset: n;
        }
        & .sp-list li {
            counter-increment: n;
            display: grid;
            grid-template-columns: 64px minmax(0, 0.9fr) minmax(0, 1.1fr);
            gap: 16px 32px;
            align-items: baseline;
            padding: 24px 0;
            border-top: 1px solid rgb(255 255 255 / 0.1);
        }
        & .sp-list li::before {
            content: counter(n, decimal-leading-zero);
            font-size: 18px;
            color: #f3ede6;
        }
        & .sp-list li b {
            font-size: clamp(18px, 1.8vw, 22px);
            font-weight: 500;
            color: #f3ede6;
            letter-spacing: -0.02em;
        }
        & .sp-list li span {
            font-size: 15px;
            color: rgb(243 237 230 / 0.68);
        }

        /* a photo with an app screen on it, next to a text */
        & .sp-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: clamp(32px, 5vw, 72px);
            align-items: center;
        }
        & .sp-row.flip > :first-child {
            order: 2;
        }
        & .sp-row .vis {
            position: relative;
            aspect-ratio: 4 / 3;
            border-radius: 16px;
            overflow: hidden;
            background: #6f6050;
        }
        & .sp-row .vis > img.bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        & .sp-row .vis .frame {
            position: absolute;
            left: 10%;
            right: 10%;
            top: 12%;
            border: 0;
            box-shadow: 0 30px 70px -26px rgb(0 0 0 / 0.6);
        }
        & .sp-row .vis .frame img {
            aspect-ratio: 16 / 10;
            object-fit: cover;
            object-position: left top;
        }
        & .sp-row .txt {
            display: grid;
            gap: 22px;
            justify-items: start;
        }
        & .sp-row .txt .h2 {
            font-size: clamp(32px, 3.8vw, 50px);
            max-width: 15ch;
        }
        & .sp-row .txt p {
            color: var(--muted);
            max-width: 48ch;
        }

        /* builder: click a text and type */
        & .doc {
            max-width: 880px;
            margin: 0 auto;
            border-radius: 16px;
            border: 1px solid var(--line);
            background: #fff;
            box-shadow: 0 40px 100px -50px rgb(14 17 23 / 0.35);
            overflow: hidden;
        }
        & .doc-bar {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 10px 14px;
            border-bottom: 1px solid var(--line);
            background: var(--bg-2);
            flex-wrap: wrap;
        }
        & .doc-bar button {
            border: 0;
            background: none;
            height: 32px;
            min-width: 32px;
            padding: 0 8px;
            border-radius: 7px;
            cursor: pointer;
            color: var(--muted);
            font-size: 14px;
        }
        & .doc-bar button:hover {
            background: #fff;
            color: var(--text);
        }
        & .doc-bar .sw {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            display: inline-block;
            vertical-align: middle;
        }
        & .doc-bar .sw.indigo {
            background: #4f46e5;
        }
        & .doc-bar .sw.green {
            background: #0f9f6e;
        }
        & .doc-bar .sw.black {
            background: #0e1117;
        }
        & .doc-bar .sep {
            width: 1px;
            height: 20px;
            background: var(--line);
            margin: 0 6px;
        }
        & .doc-bar .tip {
            margin-left: auto;
            font: 400 12px / 1 var(--f-mono);
            color: var(--faint);
        }
        & .doc-body {
            padding: clamp(28px, 5vw, 56px);
            display: grid;
            gap: 18px;
        }
        & .doc-body [contenteditable] {
            outline: 1px dashed transparent;
            outline-offset: 8px;
            border-radius: 3px;
            transition: outline-color 0.2s;
        }
        & .doc-body [contenteditable]:hover {
            outline-color: var(--line);
        }
        & .doc-body [contenteditable]:focus {
            outline: 1.5px solid #0a0a0a;
        }
        & .doc-body h3 {
            font-size: clamp(30px, 4vw, 48px);
            letter-spacing: -0.04em;
        }
        & .doc-body p {
            color: var(--muted);
            font-size: 18px;
            max-width: 56ch;
        }
        & .doc-body .tag {
            font: 500 12px / 1 var(--f-mono);
            color: #0a0a0a;
        }

        /* builder: the same mini site on three screens */
        & .seg {
            display: inline-flex;
            gap: 2px;
            padding: 3px;
            border-radius: 10px;
            background: var(--bg-2);
            border: 1px solid var(--line);
        }
        & .seg button {
            border: 0;
            background: none;
            height: 34px;
            padding: 0 14px;
            border-radius: 7px;
            cursor: pointer;
            font-size: 14px;
            color: var(--muted);
        }
        & .seg button.on {
            background: #fff;
            color: var(--text);
            box-shadow: 0 1px 3px rgb(14 17 23 / 0.1);
        }
        & .resp-ui {
            display: grid;
            justify-items: center;
            gap: 28px;
        }
        & .resp-meta {
            font: 400 13px / 1 var(--f-mono);
            color: var(--faint);
        }
        & .rframe {
            container-type: inline-size;
            width: 100%;
            max-width: 1040px;
            border-radius: 14px;
            overflow: hidden;
            border: 1px solid var(--line);
            background: #fff;
            box-shadow: 0 40px 100px -50px rgb(14 17 23 / 0.35);
            transition: width 0.9s var(--out);
        }
        & .ms nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 24px;
            font-weight: 600;
            letter-spacing: -0.02em;
        }
        & .ms nav span {
            display: flex;
            gap: 20px;
            font-size: 13px;
            font-weight: 400;
            color: var(--muted);
        }
        & .ms nav .bg {
            display: none;
            width: 20px;
            height: 12px;
            border-block: 1.5px solid var(--text);
            position: relative;
        }
        & .ms nav .bg::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 4px;
            height: 1.5px;
            background: var(--text);
        }
        & .ms .mh {
            position: relative;
            height: 340px;
            display: grid;
            place-items: center;
            text-align: center;
            color: #fff;
            padding: 24px;
        }
        & .ms .mh img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        & .ms .mh::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgb(10 14 22 / 0.45);
            z-index: 1;
        }
        & .ms .mh div {
            position: relative;
            z-index: 2;
            display: grid;
            gap: 12px;
            justify-items: center;
        }
        & .ms .mh h4 {
            font-size: clamp(26px, 5cqw, 48px);
            letter-spacing: -0.04em;
            max-width: 16ch;
        }
        & .ms .mh span {
            font-size: 13px;
            padding: 9px 16px;
            border-radius: 8px;
            background: #fff;
            color: var(--text);
        }
        & .ms .cols {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            padding: 28px 24px 32px;
        }
        & .ms .cols b {
            display: block;
            font-weight: 500;
            margin-bottom: 4px;
        }
        & .ms .cols p {
            font-size: 14px;
            color: var(--muted);
        }

        /* builder: every block, searchable */
        & .blocks-top {
            display: flex;
            justify-content: center;
            margin-bottom: 40px;
        }
        & .search {
            display: flex;
            align-items: center;
            gap: 10px;
            height: 48px;
            width: min(440px, 100%);
            padding: 0 16px;
            border-radius: 12px;
            border: 1px solid var(--line);
            background: #fff;
            transition: border-color 0.2s;
        }
        & .search:focus-within {
            border-color: var(--text);
        }
        & .search input {
            flex: 1;
            min-width: 0;
            border: 0;
            outline: 0;
            background: none;
            font-size: 16px;
        }
        & .search svg {
            width: 16px;
            height: 16px;
            fill: none;
            stroke: var(--faint);
            stroke-width: 2;
            flex: none;
        }
        & .blocks {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0 32px;
        }
        & .blocks-more {
            display: none;
            margin: 28px auto 0;
        }
        & .blk {
            padding: 16px 0;
            border-top: 1px solid var(--line);
            display: grid;
            gap: 2px;
        }
        & .blk.hide {
            display: none;
        }
        & .blk b {
            font-weight: 500;
            font-size: 15px;
        }
        & .blk span {
            font-size: 14px;
            color: var(--muted);
        }
        & .blocks-count {
            text-align: center;
            margin-top: 28px;
            font: 400 13px / 1 var(--f-mono);
            color: var(--faint);
        }

        /* six small features */
        & .grid3 {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 48px 40px;
        }
        & .grid3 div {
            display: grid;
            gap: 8px;
            align-content: start;
        }
        & .grid3 b {
            font-size: 18px;
            font-weight: 500;
            letter-spacing: -0.015em;
        }
        & .grid3 span {
            color: var(--muted);
            font-size: 15px;
        }
        & .grid3 kbd {
            font: 500 12px / 1 var(--f-mono);
            padding: 4px 6px;
            border-radius: 5px;
            border: 1px solid var(--line);
            background: var(--bg-2);
            color: var(--text);
        }

        /* the last call to action */
        & .final {
            text-align: center;
        }
        & .final .h2 {
            font-size: clamp(40px, 6vw, 76px);
            letter-spacing: -0.045em;
            max-width: 14ch;
            margin: 0 auto;
        }
        & .final .ctas {
            margin-top: 36px;
        }
        & .sq-end {
            position: relative;
            text-align: center;
            padding-block: clamp(120px, 16vw, 200px);
            overflow: hidden;
        }
        & .sq-end::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: min(760px, 90vw);
            aspect-ratio: 1;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: radial-gradient(circle, rgb(255 255 255 / 0.14) 0%, rgb(255 255 255 / 0) 65%);
            animation: mk-product-breathe 8s ease-in-out infinite alternate;
        }
        & .sq-end .h2 {
            position: relative;
            font-size: clamp(40px, 6vw, 84px);
            max-width: 13ch;
            margin: 0 auto;
            color: #fff;
        }
        & .sq-end p {
            position: relative;
            margin-top: 18px;
        }
        & .sq-end .btn {
            position: relative;
            margin-top: 32px;
            height: 52px;
            padding: 0 28px;
            border-radius: 12px;
            text-transform: none;
            letter-spacing: 0;
            font-size: 16px;
            font-weight: 500;
        }

        /* domains: the search in the hero */
        & .dom-hero {
            background: linear-gradient(100deg, #2b2724 0%, #4a433d 40%, #8d8072 75%, #b7a996 100%);
        }
        & .dom-search {
            width: min(720px, 100%);
            margin: 36px auto 0;
            display: flex;
            align-items: center;
            gap: 12px;
            height: 60px;
            padding: 0 10px 0 22px;
            border-radius: 14px;
            background: #fff;
            border: 1px solid transparent;
        }
        & .dom-search input {
            flex: 1;
            min-width: 0;
            height: 100%;
            border: 0;
            outline: 0;
            background: none;
            color: var(--text);
            font-size: 17px;
        }
        & .dom-search input::placeholder {
            color: var(--faint);
        }
        & .dom-search button {
            height: 42px;
            padding: 0 18px;
            border-radius: 10px;
            border: 0;
            background: var(--text);
            color: #fff;
            font-weight: 500;
            cursor: pointer;
        }
        & .dom-result {
            min-height: 28px;
            margin-top: 16px;
            font-size: 15px;
            color: rgb(255 255 255 / 0.85);
        }
        & .tlds {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 12px;
        }
        & .tlds div {
            padding: 22px;
            border-radius: 14px;
            border: 1px solid var(--line);
            background: #fff;
            display: grid;
            gap: 6px;
        }
        & .tlds b {
            font-size: 26px;
            font-weight: 500;
            letter-spacing: -0.03em;
        }
        & .tlds span {
            font-size: 13px;
            color: var(--muted);
        }
    }

    @keyframes mk-product-breathe {
        100% {
            transform: translate(-50%, -50%) scale(1.12);
            opacity: 0.7;
        }
    }

    /* the mini site follows the frame's width, not the window's */
    @container (max-width: 760px) {
        .mk .pg-product .ms .cols {
            grid-template-columns: 1fr 1fr;
        }
    }

    @container (max-width: 480px) {
        .mk .pg-product .ms .cols {
            grid-template-columns: 1fr;
        }
        .mk .pg-product .ms nav span {
            display: none;
        }
        .mk .pg-product .ms nav .bg {
            display: block;
        }
        .mk .pg-product .ms .mh {
            height: 300px;
        }
    }

    @media (max-width: 900px) {
        .mk .pg-product .blocks {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .mk .pg-product .grid3 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 800px) {
        .mk .pg-product .sp-list .top {
            grid-template-columns: minmax(0, 1fr);
        }
        .mk .pg-product .sp-list li {
            grid-template-columns: 48px minmax(0, 1fr);
        }
        .mk .pg-product .sp-list li span {
            grid-column: 2;
        }
        .mk .pg-product .sp-row,
        .mk .pg-product .sp-row.flip {
            grid-template-columns: minmax(0, 1fr);
        }
        .mk .pg-product .sp-row.flip > :first-child {
            order: 0;
        }
    }

    @media (max-width: 560px) {
        .mk .pg-product .grid3 {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    /* phones: two columns, the first eight blocks until "show all" or a search */
    @media (max-width: 760px) {
        .mk .pg-product .blocks.collapsed .blk:nth-child(n + 9) {
            display: none;
        }
        .mk .pg-product .blocks.collapsed ~ .blocks-more {
            display: flex;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .mk .pg-product .sq-end::before {
            animation: none;
        }
    }
}