/* The homepage hero intentionally has no rules in this file. */
.sop-page {
    --sop-ink: #20252a;
    --sop-muted: #6e6a65;
    --sop-paper: #fdfbf8;
    --sop-sand: #f5eee5;
    --sop-line: #e8ddd1;
    --sop-orange: #e97616;
    --sop-orange-dark: #c85d0c;
    --sop-green: #24332e;
    background: var(--sop-paper);
    color: var(--sop-ink);
    font-family: Inter, sans-serif;
    overflow: clip;
}

.sop-section {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
    padding: 118px 0;
    box-sizing: border-box;
}

.sop-section--sand {
    width: 100%;
    max-width: none;
    padding-right: max(24px, calc((100% - 1072px) / 2));
    padding-left: max(24px, calc((100% - 1072px) / 2));
    background: var(--sop-sand);
}

.sop-copy { max-width: 640px; }
.sop-eyebrow {
    margin: 0 0 13px;
    color: var(--sop-orange-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    line-height: 1.2;
    text-transform: uppercase;
}

.sop-copy h2,
.sop-final h2 {
    margin: 0;
    color: var(--sop-ink);
    font-family: Inter, sans-serif;
    font-size: clamp(34px, 3.35vw, 50px);
    font-weight: 700;
    letter-spacing: -.06em;
    line-height: 1.06;
}

.sop-copy > p:not(.sop-eyebrow) {
    margin: 21px 0 0;
    color: var(--sop-muted);
    font-size: 16px;
    line-height: 1.72;
}

.sop-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 29px;
    border: 0;
    border-radius: 999px;
    padding: 15px 21px;
    background: var(--sop-orange);
    box-shadow: 0 14px 25px -20px rgba(165, 77, 5, .75);
    color: #fff;
    cursor: pointer;
    font: 800 14px/1 Inter, sans-serif;
    text-decoration: none;
    transition: transform .18s ease, background .18s ease;
}
.sop-button:hover { background: var(--sop-orange-dark); transform: translateY(-2px); }
.sop-button span { font-size: 18px; line-height: .8; }

/* 1. Existing menu → published menu */
.sop-import {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(460px, 1.08fr);
    align-items: center;
    gap: 72px;
    padding-top: 132px;
}
.sop-import__visual { position: relative; min-height: 470px; }
.sop-import__label {
    position: absolute;
    z-index: 3;
    top: 34px;
    left: 5%;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 999px;
    padding: 9px 12px;
    background: #fffdf9;
    box-shadow: 0 10px 25px -20px rgba(46, 34, 24, .75);
    color: #5d5146;
    font-size: 11px;
    font-weight: 800;
}
.sop-import__label i { color: var(--sop-orange); font-size: 16px; font-style: normal; }
.sop-import figure { margin: 0; }
.sop-import__source {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 73%;
    overflow: hidden;
    border-radius: 23px;
    background: #ece4da;
    box-shadow: 0 24px 48px -35px rgba(41, 29, 18, .7);
}
.sop-import__source img { display: block; width: 100%; height: 348px; object-fit: cover; object-position: center; }
.sop-import__source figcaption,
.sop-import__menu figcaption {
    position: absolute;
    bottom: 14px;
    left: 14px;
    border-radius: 999px;
    padding: 8px 10px;
    background: rgba(255, 253, 249, .93);
    color: #56483c;
    font-size: 10px;
    font-weight: 800;
}
.sop-import__menu {
    position: absolute;
    z-index: 2;
    right: 3%;
    bottom: -4px;
    width: 220px;
    overflow: hidden;
    border-radius: 29px;
    background: #211f1d;
    box-shadow: 0 30px 46px -30px rgba(24, 22, 19, .8);
}
.sop-import__menu img { display: block; width: 100%; height: 410px; object-fit: cover; object-position: top; }
.sop-import__menu figcaption { right: 10px; left: 10px; bottom: 10px; text-align: center; }

/* 2. Distribution */
.sop-section--ink {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(510px, 1.2fr);
    grid-template-rows: auto auto;
    gap: 38px 80px;
    padding-right: max(24px, calc((100% - 1072px) / 2));
    padding-left: max(24px, calc((100% - 1072px) / 2));
    background: var(--sop-green);
    color: #fff8f0;
}
.sop-section--ink .sop-eyebrow { color: #f6a059; }
.sop-section--ink .sop-copy h2 { color: #fffaf3; }
.sop-section--ink .sop-copy > p:not(.sop-eyebrow) { color: #c9d0c8; }
.sop-orbit { position: relative; min-height: 420px; }
.sop-orbit__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 340px;
    height: 340px;
    border: 1px solid rgba(255, 247, 237, .27);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.sop-orbit__ring::after {
    position: absolute;
    inset: 43px;
    border: 1px solid rgba(255, 247, 237, .09);
    border-radius: inherit;
    content: "";
}
.sop-orbit__menu {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 180px;
    overflow: hidden;
    border: 5px solid #171c19;
    border-radius: 24px;
    background: #171c19;
    box-shadow: 0 24px 45px -28px #000;
    transform: translate(-50%, -50%);
}
.sop-orbit__menu img { display: block; width: 100%; height: 278px; object-fit: cover; object-position: top; }
.sop-orbit__link {
    display: grid;
    gap: 3px;
    overflow: hidden;
    padding: 9px 7px 10px;
    color: #eed8c2;
    text-align: center;
}
.sop-orbit__link strong {
    overflow: hidden;
    font-size: 8px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sop-orbit__link span { color: #acb9b1; font-size: 7px; font-weight: 650; }
.sop-orbit__channel {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(255, 250, 242, .17);
    border-radius: 999px;
    padding: 9px 12px 9px 9px;
    background: rgba(255, 255, 255, .08);
    color: #fffaf3;
    font-size: 11px;
    font-weight: 800;
    backdrop-filter: blur(4px);
}
.sop-orbit__channel img { display: block; width: 24px; height: 24px; object-fit: contain; }
.sop-orbit__channel--google { top: 6%; left: 14%; }
.sop-orbit__channel--website { top: 32%; right: 1%; }
.sop-orbit__channel--qr { right: 15%; bottom: 8%; }
.sop-orbit__channel--instagram { bottom: 7%; left: 10%; }
.sop-orbit__channel--facebook { top: 36%; left: 0; }
.sop-orbit__channel--instagram img { filter: invert(75%) sepia(69%) saturate(2531%) hue-rotate(257deg) brightness(95%) contrast(93%); }
.sop-orbit__channel--facebook img { filter: invert(66%) sepia(97%) saturate(1244%) hue-rotate(184deg) brightness(100%) contrast(102%); }
.sop-channel-copy { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.sop-channel-copy article { padding-top: 15px; border-top: 1px solid rgba(255, 250, 242, .17); }
.sop-channel-copy article > span { display: block; margin-bottom: 11px; color: #f2a25f; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.sop-channel-copy p { margin: 0; color: #c9d0c8; font-size: 13px; line-height: 1.57; }
.sop-channel-copy b { display: block; margin-bottom: 5px; color: #fffaf3; font-size: 13px; }
.sop-channel-copy a { color: #f7b06f; text-decoration: underline; text-underline-offset: 3px; }

/* 3. Smartphone context */
.sop-mobile__top { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: end; gap: 80px; }
.sop-stat { padding: 20px 0 8px 30px; border-left: 1px solid var(--sop-line); }
.sop-stat strong { display: block; color: var(--sop-orange); font-size: clamp(106px, 14vw, 165px); font-weight: 750; letter-spacing: -.1em; line-height: .73; }
.sop-stat strong span { font-size: .47em; vertical-align: top; }
.sop-stat p { max-width: 215px; margin: 20px 0 0; color: #564e47; font-size: 14px; font-weight: 750; line-height: 1.45; }
.sop-mobile__image { margin: 58px 0 0; overflow: hidden; border-radius: 26px; background: #f0e8de; box-shadow: 0 26px 55px -42px rgba(52, 34, 19, .75); }
.sop-mobile__image img { display: block; width: 100%; height: auto; }

/* 4. Change without replacing the URL */
.sop-update {
    display: grid;
    grid-template-columns: 265px minmax(0, 1fr) 230px;
    align-items: center;
    gap: 58px;
}
.sop-update__menu { max-width: 222px; justify-self: center; overflow: hidden; border-radius: 27px; box-shadow: 0 24px 45px -32px rgba(35, 28, 20, .8); }
.sop-update__menu img { display: block; width: 100%; height: 405px; object-fit: cover; object-position: top; }
.sop-price-note { border: 1px solid #dfcfbe; border-radius: 18px; padding: 20px; background: #fffaf3; box-shadow: 0 19px 34px -28px rgba(61, 38, 19, .75); }
.sop-price-note > span { color: var(--sop-orange-dark); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sop-price-note > b { display: block; margin-top: 11px; color: #322a24; font-size: 14px; }
.sop-price-note > div { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.sop-price-note s { color: #918277; font-size: 14px; }
.sop-price-note strong { color: var(--sop-orange-dark); font-size: 23px; letter-spacing: -.04em; }
.sop-price-note em { display: inline-block; margin-top: 15px; border-radius: 999px; padding: 7px 9px; background: #e8f1e8; color: #3c704b; font-size: 10px; font-style: normal; font-weight: 800; }
.sop-check-list { display: flex; grid-column: 2 / 4; flex-wrap: wrap; gap: 10px 20px; margin: -24px 0 0; padding: 0; color: #595047; font-size: 12px; font-weight: 750; list-style: none; }
.sop-check-list li::before { margin-right: 7px; color: var(--sop-orange); content: "✓"; }

/* 5. Google */
.sop-google {
    position: relative;
    display: grid;
    grid-template-columns: 165px minmax(0, 1fr) 270px;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 44px 58px;
}
.sop-google__brand { display: grid; width: 118px; height: 118px; place-items: center; align-content: center; gap: 9px; border-radius: 26px; background: #f5f5f3; }
.sop-google__brand img { width: 41px; height: 41px; object-fit: contain; }
.sop-google__brand span { color: #6c6862; font-size: 10px; font-weight: 750; text-align: center; }
.sop-google__steps { display: grid; grid-column: 1 / 3; gap: 0; margin: 0; padding: 0; list-style: none; }
.sop-google__steps li { display: grid; grid-template-columns: 55px 1fr; align-items: center; min-height: 66px; border-top: 1px solid var(--sop-line); color: #46403a; font-size: 15px; font-weight: 750; }
.sop-google__steps li:last-child { border-bottom: 1px solid var(--sop-line); }
.sop-google__steps b { color: var(--sop-orange-dark); font-size: 11px; letter-spacing: .1em; }
.sop-google__menu { grid-column: 3; grid-row: 1 / 3; align-self: center; margin: 0; overflow: hidden; border-radius: 24px; box-shadow: 0 26px 45px -34px rgba(32, 24, 17, .9); }
.sop-google__menu img { display: block; width: 100%; height: auto; }

/* 6. Examples */
.sop-section--gallery { width: 100%; max-width: none; padding-right: max(24px, calc((100% - 1072px) / 2)); padding-left: max(24px, calc((100% - 1072px) / 2)); background: #f3eee7; }
.sop-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 24px; margin-top: 48px; }
.sop-gallery__card { display: block; overflow: hidden; border-radius: 22px; background: #292420; box-shadow: 0 20px 34px -27px rgba(45, 31, 20, .7); color: #fff9f2; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.sop-gallery__card:hover { box-shadow: 0 28px 45px -30px rgba(45, 31, 20, .75); transform: translateY(-5px); }
.sop-gallery__card img { display: block; width: 100%; height: 438px; object-fit: cover; object-position: top; }
.sop-gallery__card span { display: flex; justify-content: space-between; gap: 10px; padding: 13px 15px; font-size: 12px; }
.sop-gallery__card em { color: #e9c5a3; font-style: normal; font-weight: 700; }
.sop-gallery__card--asian { transform: translateY(35px); }
.sop-gallery__card--cafe { transform: translateY(18px); }
.sop-gallery__card--asian:hover, .sop-gallery__card--cafe:hover { transform: translateY(29px); }

/* 7. Comparison */
.sop-compare__table-wrap { overflow-x: auto; margin-top: 47px; border: 1px solid var(--sop-line); border-radius: 20px; background: #fff; }
.sop-compare table { width: 100%; min-width: 700px; border-collapse: collapse; font-size: 14px; }
.sop-compare th, .sop-compare td { padding: 17px 19px; border-bottom: 1px solid #eee7df; text-align: left; vertical-align: top; }
.sop-compare thead th { background: #f7f2eb; color: #4f4841; font-size: 12px; }
.sop-compare thead th:last-child { color: var(--sop-orange-dark); }
.sop-compare tbody th { width: 24%; color: #615950; font-size: 13px; }
.sop-compare td { width: 38%; color: #756c63; line-height: 1.45; }
.sop-compare td:last-child { color: #3c3631; font-weight: 700; }
.sop-compare tbody tr:last-child th, .sop-compare tbody tr:last-child td { border-bottom: 0; }
.sop-text-link { margin: 20px 0 0; font-size: 13px; font-weight: 750; }
.sop-text-link a, .sop-process a { color: var(--sop-orange-dark); text-decoration: underline; text-decoration-color: #e3b68b; text-underline-offset: 3px; }

/* 8. Three steps */
.sop-process { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: start; gap: 62px; }
.sop-process__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.sop-process__steps li { min-width: 0; }
.sop-process__image { overflow: hidden; height: 235px; border-radius: 16px; background: #efe4d8; }
.sop-process__image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sop-process__image--source img { object-position: center; }
.sop-process__steps b { display: block; margin-top: 18px; color: var(--sop-orange-dark); font-size: 11px; letter-spacing: .1em; }
.sop-process__steps h3 { margin: 7px 0 7px; color: var(--sop-ink); font-size: 17px; letter-spacing: -.025em; line-height: 1.2; }
.sop-process__steps p { margin: 0; color: var(--sop-muted); font-size: 13px; line-height: 1.58; }

/* 9. FAQ */
.sop-faq { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: start; gap: 72px; }
.sop-faq__list { border-top: 1px solid var(--sop-line); }
.sop-faq__list details { border-bottom: 1px solid var(--sop-line); }
.sop-faq__list summary { display: flex; justify-content: space-between; gap: 18px; padding: 19px 2px; cursor: pointer; color: #35302c; font-size: 15px; font-weight: 800; line-height: 1.4; list-style: none; }
.sop-faq__list summary::-webkit-details-marker { display: none; }
.sop-faq__list summary span { color: var(--sop-orange-dark); font-size: 23px; font-weight: 400; line-height: .75; transition: transform .15s ease; }
.sop-faq__list details[open] summary span { transform: rotate(45deg); }
.sop-faq__list p { margin: -2px 0 21px; color: var(--sop-muted); font-size: 14px; line-height: 1.65; }

/* 10. Final CTA */
.sop-final { display: grid; grid-template-columns: minmax(0, 1.15fr) 285px; align-items: center; gap: 70px; overflow: hidden; border-radius: 30px; padding: 62px 70px; background: #252e2c; }
.sop-final .sop-eyebrow { color: #f4a25f; }
.sop-final h2 { color: #fffbf5; }
.sop-final__copy > p:not(.sop-eyebrow) { max-width: 520px; margin: 19px 0 0; color: #cad2ca; font-size: 16px; line-height: 1.66; }
.sop-button--light { background: #fff7ee; color: #513522; }
.sop-button--light:hover { background: #fff; }
.sop-final small { display: block; margin-top: 18px; color: #adc0b8; font-size: 11px; font-weight: 650; }
.sop-final__image { justify-self: center; width: 220px; margin: -8px 0 -58px; overflow: hidden; border-radius: 27px 27px 0 0; box-shadow: 0 30px 45px -26px rgba(0, 0, 0, .75); }
.sop-final__image img { display: block; width: 100%; height: 438px; object-fit: cover; object-position: top; }

@media (max-width: 950px) {
    .sop-import { grid-template-columns: .8fr 1.2fr; gap: 42px; }
    .sop-section--ink { grid-template-columns: .75fr 1.25fr; gap: 36px; }
    .sop-update { grid-template-columns: 210px minmax(0, 1fr); gap: 40px; }
    .sop-price-note { grid-column: 2; max-width: 250px; }
    .sop-check-list { grid-column: 1 / -1; margin-top: -10px; }
    .sop-google { grid-template-columns: 135px minmax(0, 1fr) 220px; gap: 35px; }
    .sop-process { grid-template-columns: 1fr; gap: 40px; }
    .sop-faq { grid-template-columns: .7fr 1.3fr; gap: 48px; }
}

@media (max-width: 760px) {
    .sop-section { width: min(100% - 36px, 620px); padding: 82px 0; }
    .sop-section--sand,
    .sop-section--ink,
    .sop-section--gallery { width: 100%; padding-right: 18px; padding-left: 18px; }
    .sop-copy h2, .sop-final h2 { font-size: 39px; }
    .sop-import { grid-template-columns: 1fr; gap: 39px; padding-top: 96px; }
    .sop-import__visual { min-height: 452px; max-width: 520px; width: 100%; margin: 0 auto; }
    .sop-import__source { width: 77%; }
    .sop-import__source img { height: 330px; }
    .sop-import__menu { right: 0; width: 205px; }
    .sop-import__menu img { height: 392px; }
    .sop-section--ink { grid-template-columns: 1fr; grid-template-rows: auto; gap: 32px; }
    .sop-orbit { max-width: 560px; width: 100%; margin: 0 auto; }
    .sop-channel-copy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
    .sop-mobile__top { grid-template-columns: 1fr; gap: 30px; }
    .sop-stat { padding: 26px 0 0; border-top: 1px solid var(--sop-line); border-left: 0; }
    .sop-mobile__image { margin-top: 40px; }
    .sop-update { grid-template-columns: 190px 1fr; gap: 29px; }
    .sop-update__menu { max-width: 190px; }
    .sop-update__menu img { height: 360px; }
    .sop-price-note { grid-column: 1 / -1; max-width: 320px; }
    .sop-check-list { margin-top: 0; }
    .sop-google { grid-template-columns: 118px 1fr; gap: 30px; }
    .sop-google__steps { grid-column: 1 / -1; }
    .sop-google__menu { grid-column: 2; grid-row: 1; align-self: center; }
    .sop-google__menu img { height: 285px; }
    .sop-gallery { gap: 15px; }
    .sop-gallery__card img { height: 360px; }
    .sop-gallery__card--asian { transform: translateY(20px); }
    .sop-gallery__card--cafe { transform: translateY(12px); }
    .sop-gallery__card--asian:hover { transform: translateY(15px); }
    .sop-gallery__card--cafe:hover { transform: translateY(7px); }
    .sop-process__steps { gap: 12px; }
    .sop-process__image { height: 190px; }
    .sop-faq { grid-template-columns: 1fr; gap: 35px; }
    .sop-final { grid-template-columns: 1fr 200px; gap: 32px; padding: 46px; }
    .sop-final__image { width: 185px; margin-bottom: -43px; }
    .sop-final__image img { height: 360px; }
}

@media (max-width: 520px) {
    .sop-section { width: calc(100% - 32px); padding: 68px 0; }
    .sop-section--sand,
    .sop-section--ink,
    .sop-section--gallery { width: 100%; padding-right: 16px; padding-left: 16px; }
    .sop-copy h2, .sop-final h2 { font-size: 33px; }
    .sop-copy > p:not(.sop-eyebrow) { font-size: 15px; }
    .sop-import { padding-top: 78px; }
    .sop-import__visual { min-height: 390px; }
    .sop-import__label { top: 7px; left: 0; }
    .sop-import__source { width: 75%; border-radius: 18px; }
    .sop-import__source img { height: 276px; }
    .sop-import__menu { width: 170px; border-radius: 23px; }
    .sop-import__menu img { height: 330px; }
    .sop-import__source figcaption,
    .sop-import__menu figcaption { bottom: 9px; left: 9px; padding: 6px 7px; font-size: 8px; }
    .sop-orbit { min-height: 385px; transform: scale(.9); transform-origin: center; margin: -18px auto; }
    .sop-channel-copy { grid-template-columns: 1fr; gap: 17px; }
    .sop-stat strong { font-size: 125px; }
    .sop-mobile__image { margin-right: -16px; margin-left: -16px; border-radius: 18px; }
    .sop-update { grid-template-columns: 1fr; }
    .sop-update__menu { max-width: 212px; justify-self: start; }
    .sop-update__menu img { height: 400px; }
    .sop-price-note { grid-column: auto; }
    .sop-check-list { grid-column: auto; display: grid; gap: 9px; }
    .sop-google { grid-template-columns: 1fr; }
    .sop-google__brand { width: 105px; height: 105px; }
    .sop-google__menu { display: none; }
    .sop-google__steps { grid-column: auto; }
    .sop-gallery { grid-template-columns: 1fr; max-width: 330px; margin-right: auto; margin-left: auto; }
    .sop-gallery__card img { height: 470px; }
    .sop-gallery__card--asian, .sop-gallery__card--cafe { transform: none; }
    .sop-gallery__card--asian:hover, .sop-gallery__card--cafe:hover { transform: translateY(-4px); }
    .sop-compare__table-wrap { margin-right: -16px; margin-left: -16px; border-radius: 0; }
    .sop-process { gap: 32px; }
    .sop-process__steps { grid-template-columns: 1fr; gap: 29px; }
    .sop-process__image { height: 205px; }
    .sop-process__steps li { display: grid; grid-template-columns: 126px 1fr; column-gap: 17px; }
    .sop-process__image { grid-row: 1 / 4; height: 100%; min-height: 164px; }
    .sop-process__steps b { margin-top: 0; }
    .sop-process__steps h3 { margin-top: 4px; }
    .sop-final { grid-template-columns: 1fr; gap: 26px; border-radius: 23px; padding: 34px 25px; }
    .sop-final__image { display: none; }
}