/* Design your own (design-your-own.php), 2026-09-24. Laid out after Apple's store pages at
 * Dwayne's request: a light grey page, white rounded cards with the title on top and the photo
 * centred, and section headings in two tones ("Bold part. Grey continuation.").
 * Repo rules kept over the reference: press feedback is scale(.97) over 100ms, punctuation is
 * ASCII. The card edge is lighter than the repo's 3:1 rule at Dwayne's request (see --dyo-edge).
 * product-page.css supplies the tokens and the container. */

.dyo-page {
    --product-bar-height: 0px;
    --dyo-page-bg: #f5f5f7;
    --dyo-soft: #6e6e73;        /* 4.7:1 on the page, 5.0:1 on white */
    /* Lighter edge at Dwayne's request, 2026-09-24: an exception to the repo's 3:1 card-border rule
       for this page. The cards stay identifiable without it (WCAG 1.4.11): each has a solid blue
       "Start" pill (6.7:1 on white) and a title, and the whole card is one link. */
    --dyo-edge: #d2d2d7;
    --dyo-radius: 18px;
    padding: 8px 0 72px;
    background: var(--dyo-page-bg);
}

.dyo-page .dyo-soft {
    color: var(--dyo-soft);
}

/* Intro */
.dyo-page .dyo-intro {
    max-width: 900px;
    padding: 32px 0 8px;
}

.dyo-page .dyo-intro h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(2rem, 1.4rem + 1.9vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.dyo-page .dyo-lead {
    max-width: 62ch;
    margin: 16px 0 0;
    color: var(--dyo-soft);
    font-size: 1.0625rem;
    line-height: 1.55;
    text-wrap: pretty;
}

/* Rows: one heading line, then the cards */
.dyo-page .dyo-row {
    padding-top: 48px;
}

.dyo-page .dyo-row > h2 {
    margin: 0 0 20px;
    color: var(--ink);
    font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.015em;
    text-wrap: balance;
}

.dyo-page .dyo-row > h2 .dyo-soft {
    font-weight: 600;
}

/* Choice cards: each card is one link, named by its title and described by its line. */
.dyo-page .dyo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dyo-page .dyo-grid li {
    display: flex;
    min-width: 0;
}

.dyo-page .dyo-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 22px 22px 20px;
    border: 1px solid var(--dyo-edge);
    border-radius: var(--dyo-radius);
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    transition: box-shadow 250ms ease, transform 250ms cubic-bezier(.23, 1, .32, 1);
}

/* Rollover, 2026-09-24 (Dwayne): the card lifts 4px and its photo zooms 5%. Keyboard focus gets the
   same, so the effect is not mouse only. Nothing appears or moves in the layout (the transform does
   not reflow the grid), the text does not move relative to the card, and it plays only in response
   to the pointer or focus, never on its own. prefers-reduced-motion (below) keeps the shadow and the
   pill colour and drops the movement. The sitewide focus ring (main.css) still wins over the shadow. */
.dyo-page .dyo-card-media img {
    transition: transform 400ms cubic-bezier(.23, 1, .32, 1);
}

.dyo-page .dyo-card:focus-visible {
    transform: translateY(-4px);
}

.dyo-page .dyo-card:focus-visible .dyo-card-media img {
    transform: scale(1.05);
}

.dyo-page .dyo-card:focus-visible .dyo-card-media--pendant img {
    transform: scale(1.575);
}

.dyo-page .dyo-card:focus-visible .dyo-pill {
    background: var(--blue-darker);
}

@media (hover: hover) and (pointer: fine) {
    .dyo-page .dyo-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .04), 0 16px 32px rgba(0, 0, 0, .12);
    }

    .dyo-page .dyo-card:hover .dyo-card-media img {
        transform: scale(1.05);
    }

    .dyo-page .dyo-card:hover .dyo-card-media--pendant img {
        transform: scale(1.575);
    }

    .dyo-page .dyo-card:hover .dyo-pill {
        background: var(--blue-darker);
    }
}

/* Press feedback, after the lift so it wins while the button is held. */
.dyo-page .dyo-card:active {
    transform: scale(.97);
    transition-duration: 100ms;
}

.dyo-page .dyo-card-title {
    color: var(--ink);
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.dyo-page .dyo-card-media {
    display: block;
    margin: 12px 0 14px;
    overflow: hidden; /* keeps the rollover zoom inside the photo's own box */
}

.dyo-page .dyo-card-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    object-fit: contain;
}

/* The pendant photo is mostly chain with the pendant at the bottom; zoom towards the pendant. */
.dyo-page .dyo-card-media--pendant {
    overflow: hidden;
}

.dyo-page .dyo-card-media--pendant img {
    transform: scale(1.5);
    transform-origin: 50% 78%;
}

.dyo-page .dyo-card-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

.dyo-page .dyo-card-desc {
    color: var(--dyo-soft);
    font-size: .8125rem;
    line-height: 1.45;
    text-wrap: pretty;
}

/* A visual cue only: the whole card is the link. */
.dyo-page .dyo-pill {
    flex: none;
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--blue-dark);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.3;
    transition: background-color 150ms ease;
}

/* How it works: four white cards, title and text on top, the same ring at each stage below. */
.dyo-page .dyo-steps {
    counter-reset: dyo-step;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dyo-page .dyo-step {
    counter-increment: dyo-step;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 24px 24px 0;
    overflow: hidden;
    border-radius: var(--dyo-radius);
    background: #fff;
}

.dyo-page .dyo-step h3 {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
    text-wrap: balance;
}

.dyo-page .dyo-step h3::before {
    /* Visual only: the ordered list already tells a screen reader "1 of 4". The empty
       alternative text keeps the number out of the heading's spoken name. */
    content: counter(dyo-step) ". ";
    content: counter(dyo-step) ". " / "";
    color: var(--dyo-soft);
}

.dyo-page .dyo-step p {
    margin: 0 0 18px;
    color: var(--dyo-soft);
    font-size: .875rem;
    line-height: 1.55;
    text-wrap: pretty;
}

.dyo-page .dyo-step img {
    display: block;
    width: calc(100% + 48px);
    max-width: none;
    height: auto;
    aspect-ratio: 450 / 317;
    margin: auto -24px 0;
    object-fit: cover;
}

.dyo-page .dyo-more {
    max-width: 760px;
    margin: 18px 0 0;
    color: var(--dyo-soft);
    font-size: .9375rem;
    line-height: 1.6;
}

.dyo-page .dyo-more a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-underline-offset: 4px;
}

/* Questions: white cards; the appointment is the one card with an action. */
.dyo-page .dyo-qa {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.dyo-page .dyo-qa-item {
    min-width: 0;
    padding: 22px 24px;
    border-radius: var(--dyo-radius);
    background: #fff;
}

.dyo-page .dyo-qa-item h3 {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    text-wrap: balance;
}

.dyo-page .dyo-qa-item p {
    margin: 0;
    color: var(--dyo-soft);
    font-size: .9375rem;
    line-height: 1.6;
    text-wrap: pretty;
}

.dyo-page .dyo-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 14px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--blue-dark);
    color: #fff;
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 150ms ease, transform 100ms cubic-bezier(.23, 1, .32, 1);
}

.dyo-page .dyo-button:active {
    transform: scale(.97);
}

@media (hover: hover) and (pointer: fine) {
    .dyo-page .dyo-button:hover {
        background: var(--blue-darker);
        color: #fff;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dyo-page .dyo-card,
    .dyo-page .dyo-button,
    .dyo-page .dyo-pill {
        transition: none;
    }

    .dyo-page .dyo-card:active,
    .dyo-page .dyo-card:hover,
    .dyo-page .dyo-card:focus-visible,
    .dyo-page .dyo-button:active {
        transform: none;
    }

    .dyo-page .dyo-card-media img {
        transition: none;
    }

    .dyo-page .dyo-card:hover .dyo-card-media img,
    .dyo-page .dyo-card:focus-visible .dyo-card-media img {
        transform: none;
    }

    .dyo-page .dyo-card:hover .dyo-card-media--pendant img,
    .dyo-page .dyo-card:focus-visible .dyo-card-media--pendant img {
        transform: scale(1.5);
    }
}

@media (max-width: 1100px) {
    .dyo-page .dyo-grid,
    .dyo-page .dyo-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dyo-page .dyo-qa {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Phones: one card per row, photo beside the title, so eight choices stay short to scroll. */
@media (max-width: 600px) {
    .dyo-page .dyo-intro {
        padding-top: 20px;
    }

    .dyo-page .dyo-row {
        padding-top: 36px;
    }

    .dyo-page .dyo-grid,
    .dyo-page .dyo-qa {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .dyo-page .dyo-card {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 14px;
        padding: 14px 16px 14px 12px;
    }

    .dyo-page .dyo-card-media {
        grid-row: 1 / 3;
        grid-column: 1;
        align-self: center;
        margin: 0;
    }

    .dyo-page .dyo-card-title {
        grid-column: 2;
        font-size: 1.0625rem;
    }

    .dyo-page .dyo-card-foot {
        grid-column: 2;
        align-items: center;
        margin-top: 4px;
    }

    .dyo-page .dyo-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .dyo-page .dyo-step {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 112px;
        column-gap: 14px;
        padding: 18px;
    }

    .dyo-page .dyo-step h3,
    .dyo-page .dyo-step p {
        grid-column: 1;
    }

    .dyo-page .dyo-step p {
        margin: 0;
    }

    .dyo-page .dyo-step img {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
        width: 100%;
        margin: 0;
        border-radius: 10px;
    }
}