/* Nail LP: approved photo/HTML composition, scoped to this page.
 * Icons: Lucide (ISC), see assets/salons/nail/text-content/LICENSE.lucide.
 */
.nail-content {
    --nail-unit: clamp(1px,.2907vw,1.25px);
    width: min(100%,941px);
    margin: 0 auto;
    container-type: inline-size;
    --ink: #343232;
    --pink: #b34869;
    --paper: #fcf6f4;
    background: var(--paper);
    color: var(--ink);
    font: 400 calc(14 * var(--nail-unit))/1.85 'Noto Sans JP',sans-serif;
    position: relative;
    isolation: isolate;
}

.nail-content * {
    box-sizing: border-box;
}

.nail-content p {
    margin: 0 0 calc(22 * var(--nail-unit));
}

.nail-content h1,.nail-content h2,.nail-content h3 {
    color: var(--ink);
    margin: 0 0 calc(18 * var(--nail-unit));
    line-height: 1.55;
}

.nail-content h2 {
    font-size: calc(25 * var(--nail-unit));
    font-weight: 700;
    letter-spacing: -.04em;
}

.nail-content h3 {
    font-size: calc(15 * var(--nail-unit));
    font-weight: 700;
}

.nail-content em {
    font-style: normal;
    color: var(--pink);
}

.nail-content img {
    display: block;
    max-width: 100%;
    height: auto;
}

.nail-content a {
    color: inherit;
    text-decoration: none;
}

.nail-content .serif {
    font-family: 'Noto Serif JP',serif;
}

.nail-content .hero {
    position: relative;
    overflow: hidden;
    padding: calc(26 * var(--nail-unit)) calc(15 * var(--nail-unit)) calc(28 * var(--nail-unit));
    background: #fbf5f3;
}

.nail-content .hero-photo {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: calc(330 * var(--nail-unit))!important;
    object-fit: cover;
    object-position: 40% center;
    mask-image: linear-gradient(to bottom,#000 85%,transparent);
    z-index: -1;
}

.nail-content .hero {
    isolation: isolate;
}

.nail-content .hero-text {
    position: relative;
}

.nail-content .eyebrow {
    color: var(--pink);
    font-family: 'Noto Serif JP',serif;
    font-size: calc(12 * var(--nail-unit));
    letter-spacing: .08em;
    margin-bottom: calc(18 * var(--nail-unit))!important;
}

.nail-content .hero h1 {
    font-family: 'Noto Serif JP',serif;
    font-size: calc(25 * var(--nail-unit));
    font-weight: 600;
    letter-spacing: -.065em;
    line-height: 1.6;
    margin: 0 0 calc(20 * var(--nail-unit));
}

.nail-content .hero .lead {
    font-size: calc(14 * var(--nail-unit));
    font-weight: 600;
    line-height: 1.9;
    letter-spacing: -.02em;
    margin-bottom: calc(22 * var(--nail-unit));
}

.nail-content .tags {
    display: flex;
    gap: calc(5 * var(--nail-unit));
    position: relative;
    flex-wrap: wrap;
    margin-bottom: calc(24 * var(--nail-unit));
}

.nail-content .tags a {
    border: calc(1 * var(--nail-unit)) solid #edc0cc;
    background: #fbe7eaee;
    color: #a33b5c;
    border-radius: calc(9 * var(--nail-unit));
    padding: calc(6 * var(--nail-unit));
    font-size: calc(13 * var(--nail-unit));
    font-weight: 700;
    line-height: 1.5;
}

.nail-content .hero-screens {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(10 * var(--nail-unit));
    align-items: start;
}

.nail-content .hero-screens img {
    width: 100%;
    border-radius: calc(12 * var(--nail-unit));
    box-shadow: 0 calc(3 * var(--nail-unit)) calc(12 * var(--nail-unit)) #654c4c16;
}

.nail-content .padded {
    padding: calc(32 * var(--nail-unit)) calc(18 * var(--nail-unit)) calc(38 * var(--nail-unit));
}

.nail-content .pain {
    background: #fbf3f1;
}

.nail-content .pain h2 {
    font-size: calc(29 * var(--nail-unit));
}

.nail-content .pain-list {
    list-style: none;
    padding: 0;
    margin: calc(24 * var(--nail-unit)) 0 0;
    display: grid;
    gap: calc(12 * var(--nail-unit));
}

.nail-content .pain-list li {
    background: #fff;
    border-radius: calc(15 * var(--nail-unit));
    display: grid;
    grid-template-columns: calc(28 * var(--nail-unit)) 1fr calc(30 * var(--nail-unit));
    gap: calc(10 * var(--nail-unit));
    padding: calc(20 * var(--nail-unit)) calc(13 * var(--nail-unit));
    box-shadow: 0 calc(3 * var(--nail-unit)) calc(10 * var(--nail-unit)) #5b3c3c0c;
}

.nail-content .pain-list li>span {
    color: var(--pink);
    font: 600 calc(18 * var(--nail-unit))/1.5 'Noto Serif JP',serif;
}

.nail-content .pain-list h3 {
    font-family: 'Noto Serif JP',serif;
    font-size: calc(17 * var(--nail-unit));
    margin-bottom: calc(10 * var(--nail-unit));
}

.nail-content .pain-list p {
    font-size: calc(14 * var(--nail-unit));
    margin: 0;
}

.nail-content .pain-list svg {
    color: var(--pink);
    width: calc(26 * var(--nail-unit));
    height: calc(26 * var(--nail-unit));
    margin-top: calc(5 * var(--nail-unit));
}

.nail-content .section-label {
    display: table;
    color: #fff;
    background: #bc526f;
    border-radius: calc(18 * var(--nail-unit));
    padding: calc(5 * var(--nail-unit)) calc(12 * var(--nail-unit));
    font-size: calc(12 * var(--nail-unit));
    font-weight: 700;
    margin: 0 0 calc(20 * var(--nail-unit))!important;
}

.nail-content .channels {
    display: flex;
    justify-content: center;
    gap: 0;
    background: #fff;
    border-radius: calc(12 * var(--nail-unit));
    margin: calc(24 * var(--nail-unit)) 0;
    padding: calc(14 * var(--nail-unit)) calc(4 * var(--nail-unit));
}

.nail-content .channels span {
    font-size: calc(12 * var(--nail-unit));
    padding: 0 calc(12 * var(--nail-unit));
    border-right: calc(1 * var(--nail-unit)) solid #eee;
}

.nail-content .channels span:last-child {
    border: 0;
}

.nail-content .center {
    text-align: center;
}

.nail-content .pink {
    color: var(--pink)!important;
}

.nail-content .calendar-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(12 * var(--nail-unit));
}

.nail-content .calendar-pair h3 {
    text-align: center;
    color: var(--pink);
    font-size: calc(15 * var(--nail-unit));
    margin-bottom: calc(12 * var(--nail-unit));
}

.nail-content .calendar-pair p {
    font-size: calc(14 * var(--nail-unit));
    margin-bottom: calc(14 * var(--nail-unit));
    min-height: calc(90 * var(--nail-unit));
}

.nail-content .calendar-pair img {
    width: 100%;
    border-radius: calc(12 * var(--nail-unit));
    box-shadow: 0 calc(2 * var(--nail-unit)) calc(10 * var(--nail-unit)) #60474b16;
}

.nail-content aside {
    display: flex;
    gap: calc(12 * var(--nail-unit));
    background: #fff9;
    border-radius: calc(18 * var(--nail-unit));
    padding: calc(18 * var(--nail-unit)) calc(14 * var(--nail-unit));
    margin-top: calc(24 * var(--nail-unit));
}

.nail-content aside svg {
    width: calc(26 * var(--nail-unit));
    height: calc(26 * var(--nail-unit));
    color: var(--pink);
    flex: none;
}

.nail-content aside h3 {
    color: var(--pink)!important;
    margin-bottom: calc(7 * var(--nail-unit))!important;
    font-size: calc(15 * var(--nail-unit))!important;
}

.nail-content aside p {
    margin: 0!important;
    font-size: calc(14 * var(--nail-unit));
}

.nail-content .mid-cta {
    background: #fff0ed;
    text-align: center;
}

.nail-content .mid-cta p {
    font-size: calc(14 * var(--nail-unit));
    font-weight: 700;
    margin-bottom: calc(16 * var(--nail-unit));
}

.nail-content .primary-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(10 * var(--nail-unit));
    padding: calc(18 * var(--nail-unit)) calc(14 * var(--nail-unit));
    background: linear-gradient(135deg,#c24c74,#bd456b);
    color: #fff!important;
    border-radius: calc(19 * var(--nail-unit));
    font-size: calc(14 * var(--nail-unit));
    line-height: 1.7;
    font-weight: 700;
    box-shadow: 0 calc(8 * var(--nail-unit)) calc(20 * var(--nail-unit)) #bf466b28;
}

.nail-content .large-title {
    font-size: calc(43 * var(--nail-unit))!important;
}

.nail-content .feature-layout {
    display: grid;
    grid-template-columns: 1.06fr 1fr;
    gap: calc(12 * var(--nail-unit));
    align-items: center;
    margin: calc(26 * var(--nail-unit)) 0 0;
}

.nail-content .feature-layout.reverse {
    grid-template-columns: 1fr 1.06fr;
}

.nail-content .app-screen {
    width: 100%;
    border-radius: calc(18 * var(--nail-unit));
    box-shadow: 0 calc(5 * var(--nail-unit)) calc(16 * var(--nail-unit)) #6c3c3c18;
}

.nail-content .benefits {
    display: grid;
    gap: calc(12 * var(--nail-unit));
}

.nail-content .benefits article {
    padding: calc(14 * var(--nail-unit)) calc(10 * var(--nail-unit));
    border-radius: calc(16 * var(--nail-unit));
    background: #fff9;
}

.nail-content .benefits svg {
    width: calc(24 * var(--nail-unit));
    height: calc(24 * var(--nail-unit));
    color: var(--pink);
    margin-bottom: calc(5 * var(--nail-unit));
}

.nail-content .benefits h3 {
    font-size: calc(15 * var(--nail-unit));
    color: var(--pink);
    margin: 0 0 calc(6 * var(--nail-unit));
    letter-spacing: -.04em;
}

.nail-content .benefits p {
    font-size: calc(14 * var(--nail-unit));
    line-height: 1.9;
    margin: 0;
}

.nail-content .closing {
    background: linear-gradient(#faf1ee,#f7eae6);
    padding-top: calc(42 * var(--nail-unit));
}

.nail-content .closing h2 {
    font-size: calc(34 * var(--nail-unit));
    line-height: 1.85;
    letter-spacing: 0;
}

.nail-content .summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(10 * var(--nail-unit));
    margin: calc(30 * var(--nail-unit)) 0;
}

.nail-content .summary a {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    gap: calc(12 * var(--nail-unit));
    background: #fff9;
    padding: calc(22 * var(--nail-unit)) calc(10 * var(--nail-unit));
    border-radius: calc(18 * var(--nail-unit));
    font-size: calc(14 * var(--nail-unit));
    font-weight: 700;
}

.nail-content .summary svg {
    width: calc(28 * var(--nail-unit));
    height: calc(28 * var(--nail-unit));
    color: var(--pink);
}

.nail-content .all-in-one {
    font-family: 'Noto Serif JP',serif;
    font-size: calc(30 * var(--nail-unit));
    font-style: italic;
    text-align: center;
    color: #c36983;
    margin-top: calc(45 * var(--nail-unit))!important;
}

.nail-content .wordmark {
    text-align: center;
    font: 500 calc(39 * var(--nail-unit))/1.5 'Noto Serif JP',serif;
    margin: calc(10 * var(--nail-unit)) 0!important;
}


@container (max-width: 350px) {
    .nail-content .hero-photo {
        height: calc(330 * var(--nail-unit))!important;
        object-fit: contain;
        object-position: right center;
    }

    .nail-content .hero h1 {
        font-size: calc(22 * var(--nail-unit));
    }

    .nail-content .padded {
        padding-left: calc(14 * var(--nail-unit));
        padding-right: calc(14 * var(--nail-unit));
    }

    .nail-content .feature-layout {
        grid-template-columns: 1fr!important;
    }

    .nail-content .feature-layout>.app-screen {
        width: 78%;
        margin: auto;
    }

    .nail-content .feature-layout.reverse>.app-screen {
        grid-row: 1;
    }

    .nail-content .benefits article {
        display: grid;
        grid-template-columns: calc(26 * var(--nail-unit)) 1fr;
        column-gap: calc(10 * var(--nail-unit));
    }

    .nail-content .benefits article p {
        grid-column: 2;
    }

    .nail-content .calendar-pair p {
        min-height: calc(113 * var(--nail-unit));
    }

    .nail-content .hero .lead {
        font-size: calc(14 * var(--nail-unit));
    }
}

body[data-page="salons_nail"] .nail-content {
    padding-bottom: 0;
}

.nail-content > section[id] {
    scroll-margin-top: 90px;
}

.nail-content .tags a,
.nail-content .summary a {
    min-height: 44px;
}

.nail-content .tags a {
    display: inline-flex;
    align-items: center;
}

.nail-content a:focus-visible {
    outline: 3px solid #7b2f48;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .nail-content * {
        scroll-behavior: auto;
    }
}

.nail-content h1 em,
.nail-content h2 em {
    color: #c95377;
}


.nail-content .plan-note {
    margin: calc(20 * var(--nail-unit)) 0 0;
    font-size: calc(14 * var(--nail-unit));
    font-weight: 400;
    line-height: 1.8;
    color: #5e5157;
}

.nail-content .plan-note a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #a33b5c;
    text-decoration: underline;
    text-underline-offset: .18em;
}

/* Keep desktop text and proof screenshots at reading size. */
@media (min-width: 768px) {
    .nail-content { --nail-unit: 1.25px; }
    .nail-content .padded { padding: 48px; }
    .nail-content .hero { padding: 36px 48px; }
    .nail-content .hero-photo { height: 420px!important; object-fit: contain; object-position: right top; }
    .nail-content .hero-text { min-height: 330px; }
    .nail-content .hero h1 { font-size: 36px; }
    .nail-content .hero .lead { max-width: 44%; }
    .nail-content .hero .lead br { display: none; }
    .nail-content .hero-screens { max-width: 440px; margin-inline: auto; justify-items: center; }
    .nail-content .hero-screens img { width: auto; max-height: 300px; }
    .nail-content .calendar-pair { max-width: 640px; margin-inline: auto; }
    .nail-content .app-screen { width: auto; max-height: 520px; margin-inline: auto; }
    .nail-content .primary-cta { max-width: 620px; margin-inline: auto; }
}