@charset "utf-8";

:root{
    --page-width:1180px;
    --text:#171b24;
    --sub:#6e7685;
    --line:#e8ebf0;
    --soft:#f6f8fb;
    --primary:#1769ff;
    --primary-dark:#0d4ed8;
    --orange:#ff7a00;
    --green:#15a56a;
    --radius:28px;
    --shadow:0 24px 70px rgba(29,44,70,.10);
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:#fff;
    color:var(--text);
    font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",Arial,sans-serif;
    word-break:keep-all;
}

button,
a{
    -webkit-tap-highlight-color:transparent;
}

button,
input,
select{
    font:inherit;
}

a{
    color:inherit;
    text-decoration:none;
}

svg{
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.section-inner{
    width:min(var(--page-width),calc(100% - 48px));
    margin:0 auto;
}

.site-header{
    position:fixed;
    z-index:100;
    top:0;
    right:0;
    left:0;
    border-bottom:1px solid transparent;
    transition:.2s ease;
}

.site-header.is-scrolled{
    border-color:rgba(229,233,240,.9);
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(16px);
}

.site-header__inner{
    width:min(var(--page-width),calc(100% - 48px));
    height:74px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
}

.brand{
    display:inline-flex;
    align-items:baseline;
    font-size:24px;
    font-weight:900;
    letter-spacing:-.055em;
}

.brand__mark{
    color:#171b24;
}

.brand__domain{
    color:var(--primary);
}

.site-nav{
    display:flex;
    align-items:center;
    gap:30px;
    margin-left:auto;
}

.site-nav a{
    color:#505969;
    font-size:13px;
    font-weight:650;
    transition:.15s ease;
}

.site-nav a:hover{
    color:#171b24;
}

.header-cta{
    display:inline-flex;
    height:38px;
    align-items:center;
    gap:6px;
    padding:0 15px;
    border-radius:11px;
    background:#171b24;
    color:#fff;
    font-size:12px;
    font-weight:750;
}

.header-cta svg{
    width:14px;
    height:14px;
}

.hero{
    position:relative;
    min-height:820px;
    padding:150px 0 90px;
    overflow:hidden;
    background:
        radial-gradient(circle at 84% 18%,rgba(23,105,255,.09),transparent 30%),
        linear-gradient(180deg,#fff 0%,#fbfcff 100%);
}

.hero__glow{
    position:absolute;
    border-radius:50%;
    filter:blur(1px);
    pointer-events:none;
}

.hero__glow--one{
    width:420px;
    height:420px;
    top:160px;
    right:-180px;
    background:rgba(98,137,255,.08);
}

.hero__glow--two{
    width:300px;
    height:300px;
    left:-160px;
    bottom:20px;
    background:rgba(115,85,214,.05);
}

.hero__inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) 470px;
    align-items:center;
    gap:72px;
}

.eyebrow{
    display:inline-block;
    color:var(--primary);
    font-size:11px;
    font-weight:850;
    letter-spacing:.16em;
}

.hero__copy h1{
    margin:18px 0 22px;
    font-size:64px;
    line-height:1.1;
    letter-spacing:-.06em;
}

.hero__copy h1 span{
    color:var(--primary);
}

.hero__copy>p{
    max-width:560px;
    margin:0;
    color:var(--sub);
    font-size:17px;
    line-height:1.75;
    letter-spacing:-.02em;
}

.hero__actions,
.cta__actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:32px;
}

.button{
    display:inline-flex;
    min-height:50px;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 20px;
    border:1px solid transparent;
    border-radius:14px;
    font-size:13px;
    font-weight:780;
    transition:.18s ease;
}

.button:hover{
    transform:translateY(-2px);
}

.button svg{
    width:16px;
    height:16px;
}

.button--primary{
    background:var(--primary);
    color:#fff;
    box-shadow:0 12px 26px rgba(23,105,255,.18);
}

.button--primary:hover{
    background:var(--primary-dark);
}

.button--secondary{
    border-color:var(--line);
    background:#fff;
    color:#424b5b;
}

.hero__meta{
    display:flex;
    flex-wrap:wrap;
    gap:16px 22px;
    margin-top:28px;
}

.hero__meta span{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#818997;
    font-size:11px;
}

.hero__meta i{
    width:5px;
    height:5px;
    border-radius:50%;
    background:#aab2c0;
}

.hero-preview{
    position:relative;
    min-height:585px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.hero-preview__shadow{
    position:absolute;
    width:380px;
    height:380px;
    border-radius:50%;
    background:linear-gradient(135deg,rgba(23,105,255,.12),rgba(114,89,214,.06));
    filter:blur(6px);
}

.phone{
    position:relative;
    z-index:3;
    width:292px;
    padding:9px;
    border-radius:38px;
    background:#141820;
    box-shadow:0 28px 70px rgba(15,23,42,.26);
    transform:rotate(2deg);
}

.phone__top{
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.phone__top span{
    width:76px;
    height: 15px;
    border-radius:999px;
    background:#000000;
}

.phone__screen{
    min-height:520px;
    padding:12px 16px 20px;
    border-radius:29px;
    background:linear-gradient(160deg,#f7f9ff,#edf3ff);
    overflow:hidden;
}

.phone__toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.phone__mini-logo{
    color:#1c2433;
    font-size:11px;
    font-weight:900;
}

.phone__toolbar button{
    display:grid;
    width:32px;
    height:32px;
    place-items:center;
    padding:0;
    border:0;
    border-radius:11px;
    background:#fff;
    color:#1f2734;
}

.phone__toolbar svg{
    width:16px;
    height:16px;
}

.profile-preview{
    margin:16px 0 18px;
    text-align:center;
}

.profile-preview__avatar{
    display:grid;
    width:62px;
    height:62px;
    place-items:center;
    margin:0 auto 10px;
    border-radius:50%;
    background:linear-gradient(145deg,#1769ff,#7259d6);
    color:#fff;
    font-size:22px;
    font-weight:900;
    box-shadow:0 8px 20px rgba(23,105,255,.18);
}

.profile-preview strong{
    display:block;
    font-size:15px;
}

.profile-preview p{
    margin:5px 0 0;
    color:#70798b;
    font-size:8px;
}

.profile-preview__socials{
    display:flex;
    justify-content:center;
    gap:5px;
    margin-top:10px;
}

.profile-preview__socials i{
    width:16px;
    height:16px;
    border-radius:50%;
    background:#1f2838;
    opacity:.65;
}

.phone-links{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.phone-link{
    display:grid;
    grid-template-columns:34px minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    min-height:54px;
    padding:7px 9px;
    border:1px solid rgba(23,105,255,.08);
    border-radius:14px;
    background:#fff;
    box-shadow:0 6px 14px rgba(36,55,88,.05);
}

.phone-link__icon{
    display:grid;
    width:34px;
    height:34px;
    place-items:center;
    border-radius:9px;
    background:#1769ff;
    color:#fff;
    font-size:10px;
    font-weight:850;
}

.phone-link__icon--dark{
    background:#171b24;
}

.phone-link span:nth-child(2){
    min-width:0;
}

.phone-link strong,
.phone-link small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.phone-link strong{
    font-size:9px;
}

.phone-link small{
    margin-top:2px;
    color:#8b93a0;
    font-size:6px;
}

.phone-link b{
    font-size:9px;
}

.product-preview{
    margin-top:11px;
    padding:10px;
    border-radius:15px;
    background:rgba(255,255,255,.72);
}

.product-preview__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:7px;
}

.product-preview__head span{
    color:var(--orange);
    font-size:6px;
    font-weight:850;
    letter-spacing:.1em;
}

.product-preview__head strong{
    font-size:8px;
}

.product-preview__grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
}

.product-preview__grid article{
    padding:6px;
    border-radius:10px;
    background:#fff;
}

.product-preview__image{
    display:grid;
    width:100%;
    aspect-ratio:1/1;
    place-items:center;
    border-radius:7px;
    background:linear-gradient(145deg,#dfe8ff,#aec5ff);
    color:#fff;
    font-size:12px;
    font-weight:900;
}

.product-preview__image--alt{
    background:linear-gradient(145deg,#ffe7d2,#ffb472);
}

.product-preview__grid strong,
.product-preview__grid span{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.product-preview__grid strong{
    margin-top:5px;
    font-size:7px;
}

.product-preview__grid span{
    margin-top:2px;
    font-size:6px;
    font-weight:750;
}

.phone__url{
    display:block;
    margin-top:12px;
    color:#97a0ad;
    font-size:6px;
    text-align:center;
}

.floating-card{
    position:absolute;
    z-index:4;
    display:flex;
    align-items:center;
    gap:10px;
    min-width:150px;
    padding:11px 12px;
    border:1px solid rgba(226,232,240,.95);
    border-radius:14px;
    background:rgba(255,255,255,.9);
    box-shadow:0 18px 40px rgba(36,55,88,.13);
    backdrop-filter:blur(10px);
}

.floating-card--profile{
    top:90px;
    left:-5px;
}

.floating-card--shop{
    right:-20px;
    bottom:105px;
}

.floating-card__icon{
    display:grid;
    width:34px;
    height:34px;
    place-items:center;
    border-radius:10px;
    background:#edf3ff;
    color:var(--primary);
    font-size:9px;
    font-weight:850;
}

.floating-card__icon--orange{
    background:#fff1e5;
    color:var(--orange);
}

.floating-card small,
.floating-card strong{
    display:block;
}

.floating-card small{
    color:#9aa3b1;
    font-size:6px;
    font-weight:850;
    letter-spacing:.1em;
}

.floating-card strong{
    margin-top:2px;
    font-size:10px;
}

.feature-summary{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:#fff;
}

.feature-summary__grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.feature-summary__grid>div{
    min-height:150px;
    padding:28px 28px 26px;
    border-right:1px solid var(--line);
}

.feature-summary__grid>div:last-child{
    border-right:0;
}

.feature-summary strong{
    display:block;
    color:#b1b8c4;
    font-size:10px;
}

.feature-summary span{
    display:block;
    margin-top:15px;
    font-size:15px;
    font-weight:800;
}

.feature-summary p{
    margin:7px 0 0;
    color:#7b8493;
    font-size:11px;
    line-height:1.65;
}

.section{
    padding:120px 0;
}

.section-head{
    max-width:620px;
    margin-bottom:48px;
}

.section-head h2,
.cafe24__copy h2,
.cta h2{
    margin:14px 0 16px;
    font-size:44px;
    line-height:1.2;
    letter-spacing:-.055em;
}

.section-head p,
.cafe24__copy>p,
.cta p{
    margin:0;
    color:var(--sub);
    font-size:15px;
    line-height:1.75;
}

.section-head--center{
    max-width:680px;
    margin:0 auto 52px;
    text-align:center;
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.feature-card{
    position:relative;
    min-height:420px;
    padding:34px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:#fff;
    overflow:hidden;
}

.feature-card--large{
    grid-column:1/-1;
    min-height:430px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 380px;
    align-items:center;
    gap:60px;
    background:linear-gradient(145deg,#f8faff,#f2f6ff);
}

.feature-card__copy{
    position:relative;
    z-index:2;
}

.feature-card__copy>span{
    color:var(--primary);
    font-size:9px;
    font-weight:850;
    letter-spacing:.13em;
}

.feature-card__copy h3{
    margin:12px 0;
    font-size:26px;
    line-height:1.35;
    letter-spacing:-.045em;
}

.feature-card__copy p{
    max-width:480px;
    margin:0;
    color:#737d8c;
    font-size:13px;
    line-height:1.75;
}

.profile-card-visual{
    position:relative;
    width:300px;
    margin:auto;
    padding:34px 26px;
    border:1px solid #e6eaf0;
    border-radius:24px;
    background:#fff;
    box-shadow:0 22px 60px rgba(31,50,84,.10);
    text-align:center;
}

.profile-card-visual__avatar{
    display:grid;
    width:76px;
    height:76px;
    place-items:center;
    margin:0 auto 14px;
    border-radius:50%;
    background:linear-gradient(145deg,#1769ff,#7259d6);
    color:#fff;
    font-size:28px;
    font-weight:900;
}

.profile-card-visual>strong{
    display:block;
    font-size:17px;
}

.profile-card-visual>span{
    display:block;
    margin-top:4px;
    color:#9aa3af;
    font-size:10px;
}

.profile-card-visual p{
    margin:13px 0 16px;
    color:#6f7888;
    font-size:11px;
}

.profile-card-visual>div:last-child{
    display:flex;
    justify-content:center;
    gap:7px;
}

.profile-card-visual i{
    width:22px;
    height:22px;
    border-radius:50%;
    background:#202735;
}

.link-card-visual{
    position:absolute;
    right:34px;
    bottom:34px;
    left:34px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.link-card-visual>div{
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    min-height:64px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:15px;
    background:#f8f9fb;
}

.link-card-visual i{
    width:42px;
    height:42px;
    border-radius:11px;
    background:linear-gradient(145deg,#dbe6ff,#b9ccff);
}

.link-card-visual>div:nth-child(2) i{
    background:linear-gradient(145deg,#ffdce5,#ffb7ca);
}

.link-card-visual>div:nth-child(3) i{
    background:linear-gradient(145deg,#e2e2e2,#b9b9b9);
}

.link-card-visual span{
    min-width:0;
}

.link-card-visual strong,
.link-card-visual small{
    display:block;
}

.link-card-visual strong{
    font-size:11px;
}

.link-card-visual small{
    margin-top:3px;
    color:#969eaa;
    font-size:8px;
}

.link-card-visual b{
    color:#9ca4b0;
    font-size:16px;
}

.palette-visual{
    position:absolute;
    right:34px;
    bottom:34px;
    left:34px;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
}

.palette-visual button{
    position:relative;
    height:82px;
    overflow:hidden;
    padding:0;
    border:1px solid var(--line);
    border-radius:15px;
    background:var(--c2);
}

.palette-visual button:before{
    content:"";
    position:absolute;
    top:14px;
    right:14px;
    left:14px;
    height:14px;
    border-radius:99px;
    background:var(--c1);
}

.palette-visual button:after{
    content:"";
    position:absolute;
    right:14px;
    bottom:14px;
    left:14px;
    height:30px;
    border-radius:10px;
    background:#fff;
    opacity:.85;
}

.cafe24{
    background:#151a23;
    color:#fff;
}

.cafe24__inner{
    display:grid;
    grid-template-columns:400px minmax(0,1fr);
    align-items:center;
    gap:80px;
}

.cafe24__copy .eyebrow{
    color:#6fa0ff;
}

.cafe24__copy>p{
    color:#aab2c0;
}

.cafe24__points{
    display:flex;
    flex-direction:column;
    gap:11px;
    margin-top:30px;
}

.cafe24__points span{
    display:flex;
    align-items:center;
    gap:9px;
    color:#d7dce4;
    font-size:12px;
}

.cafe24__points i{
    display:grid;
    width:20px;
    height:20px;
    place-items:center;
    border-radius:50%;
    background:rgba(23,105,255,.18);
    color:#74a1ff;
    font-size:10px;
    font-style:normal;
}

.commerce-visual{
    min-width:0;
}

.commerce-browser{
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    background:#fff;
    color:#202633;
    box-shadow:0 28px 70px rgba(0,0,0,.28);
}

.commerce-browser__top{
    display:flex;
    height:46px;
    align-items:center;
    gap:6px;
    padding:0 16px;
    border-bottom:1px solid #e9edf2;
    background:#f7f8fa;
}

.commerce-browser__top>span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#d4dae3;
}

.commerce-browser__top small{
    margin-left:8px;
    color:#8a94a3;
    font-size:8px;
}

.commerce-browser__body{
    display:grid;
    grid-template-columns:150px minmax(0,1fr);
    min-height:370px;
}

.commerce-sidebar{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:22px 14px;
    border-right:1px solid #edf0f4;
    background:#fafbfd;
}

.commerce-sidebar strong{
    margin-bottom:12px;
    font-size:10px;
}

.commerce-sidebar span{
    padding:8px 10px;
    border-radius:8px;
    color:#808a9a;
    font-size:8px;
}

.commerce-sidebar span.is-active{
    background:#edf3ff;
    color:#1769ff;
    font-weight:800;
}

.commerce-products{
    padding:22px;
}

.commerce-products__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;
}

.commerce-products__head strong{
    font-size:13px;
}

.commerce-products__head span{
    padding:5px 8px;
    border-radius:999px;
    background:#edf3ff;
    color:#1769ff;
    font-size:7px;
    font-weight:800;
}

.commerce-products__grid{
    display:flex;
    flex-direction:column;
    gap:9px;
}

.commerce-products article{
    display:grid;
    grid-template-columns:68px minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    padding:9px;
    border:1px solid #e8ebf0;
    border-radius:14px;
}

.commerce-product-image{
    display:grid;
    width:68px;
    height:68px;
    place-items:center;
    border-radius:11px;
    background:linear-gradient(145deg,#e2eaff,#bed0ff);
    color:#fff;
    font-size:18px;
    font-weight:900;
}

.commerce-product-image--two{
    background:linear-gradient(145deg,#ffe9d6,#ffc390);
}

.commerce-product-image--three{
    background:linear-gradient(145deg,#e6ddff,#c9b7ff);
}

.commerce-products article strong,
.commerce-products article small,
.commerce-products article b{
    display:block;
}

.commerce-products article strong{
    font-size:10px;
}

.commerce-products article small{
    margin-top:3px;
    color:#9aa3af;
    font-size:7px;
}

.commerce-products article b{
    margin-top:6px;
    font-size:10px;
}

.commerce-products article button{
    min-width:44px;
    height:29px;
    border:0;
    border-radius:8px;
    background:#171b24;
    color:#fff;
    font-size:8px;
    font-weight:800;
}

.how{
    background:#fff;
}

.step-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.step-grid article{
    position:relative;
    min-height:285px;
    padding:26px;
    border:1px solid var(--line);
    border-radius:22px;
    background:#fff;
}

.step-grid article>span{
    color:#b6bdc8;
    font-size:9px;
    font-weight:800;
}

.step-grid__icon{
    display:grid;
    width:52px;
    height:52px;
    place-items:center;
    margin:34px 0 22px;
    border-radius:15px;
    background:#f1f5ff;
    color:var(--primary);
}

.step-grid__icon svg{
    width:24px;
    height:24px;
}

.step-grid h3{
    margin:0;
    font-size:16px;
}

.step-grid p{
    margin:8px 0 0;
    color:#7b8492;
    font-size:11px;
    line-height:1.7;
}

.cta{
    position:relative;
    overflow:hidden;
    padding:110px 0;
    background:linear-gradient(145deg,#1769ff,#4c69e8 58%,#7259d6);
    color:#fff;
    text-align:center;
}

.cta__glow{
    position:absolute;
    width:480px;
    height:480px;
    top:-260px;
    left:50%;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    transform:translateX(-50%);
}

.cta__inner{
    position:relative;
    z-index:2;
}

.cta .eyebrow{
    color:#d9e6ff;
}

.cta p{
    color:#dce6ff;
}

.cta__actions{
    justify-content:center;
}

.button--white{
    background:#fff;
    color:#1769ff;
}

.button--ghost{
    border-color:rgba(255,255,255,.35);
    color:#fff;
}

.site-footer{
    padding:46px 0;
    background:#0f131a;
    color:#fff;
}

.site-footer__inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:end;
    gap:30px;
}

.site-footer .brand__mark{
    color:#fff;
}

.site-footer p{
    margin:10px 0 0;
    color:#8f98a7;
    font-size:11px;
}

.site-footer__links{
    display:flex;
    gap:18px;
}

.site-footer__links a{
    color:#b8c0cc;
    font-size:11px;
}

.site-footer small{
    grid-column:1/-1;
    padding-top:26px;
    border-top:1px solid rgba(255,255,255,.08);
    color:#727b8a;
    font-size:9px;
}

.reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .6s ease,transform .6s ease;
}

.reveal.is-visible{
    opacity:1;
    transform:none;
}

@media(max-width:1050px){
    .hero__inner{
        grid-template-columns:minmax(0,1fr) 400px;
        gap:38px;
    }

    .hero__copy h1{
        font-size:54px;
    }

    .feature-card--large{
        grid-template-columns:minmax(0,1fr) 320px;
        gap:30px;
    }

    .cafe24__inner{
        grid-template-columns:340px minmax(0,1fr);
        gap:40px;
    }
}

@media(max-width:860px){
    .site-nav{
        display:none;
    }

    .hero{
        padding-top:125px;
    }

    .hero__inner,
    .cafe24__inner{
        grid-template-columns:1fr;
    }

    .hero__copy{
        text-align:center;
    }

    .hero__copy>p{
        margin-inline:auto;
    }

    .hero__actions,
    .hero__meta{
        justify-content:center;
    }

    .hero-preview{
        min-height:620px;
    }

    .feature-summary__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .feature-summary__grid>div:nth-child(2){
        border-right:0;
    }

    .feature-summary__grid>div:nth-child(-n+2){
        border-bottom:1px solid var(--line);
    }

    .feature-grid{
        grid-template-columns:1fr;
    }

    .feature-card--large{
        grid-column:auto;
        grid-template-columns:1fr;
    }

    .profile-card-visual{
        margin-top:20px;
    }

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

    .cafe24__copy{
        max-width:560px;
    }
}

@media(max-width:620px){
    .section-inner,
    .site-header__inner{
        width:min(100% - 28px,var(--page-width));
    }

    .site-header__inner{
        height:64px;
    }

    .header-cta{
        height:36px;
    }

    .hero{
        min-height:auto;
        padding:110px 0 60px;
    }

    .hero__copy h1{
        margin-top:14px;
        font-size:41px;
    }

    .hero__copy>p{
        font-size:14px;
    }

    .hero__meta{
        gap:10px 15px;
    }

    .hero-preview{
        min-height:560px;
    }

    .phone{
        width:270px;
    }

    .floating-card{
        min-width:135px;
    }

    .floating-card--profile{
        top:65px;
        left:-2px;
    }

    .floating-card--shop{
        right:-4px;
        bottom:70px;
    }

    .feature-summary__grid{
        grid-template-columns:1fr;
    }

    .feature-summary__grid>div{
        min-height:auto;
        border-right:0;
        border-bottom:1px solid var(--line);
    }

    .feature-summary__grid>div:last-child{
        border-bottom:0;
    }

    .section{
        padding:82px 0;
    }

    .section-head h2,
    .cafe24__copy h2,
    .cta h2{
        font-size:34px;
    }

    .feature-card{
        min-height:390px;
        padding:25px;
        border-radius:22px;
    }

    .feature-card--large{
        min-height:auto;
    }

    .profile-card-visual{
        width:100%;
        max-width:300px;
    }

    .link-card-visual,
    .palette-visual{
        right:25px;
        bottom:25px;
        left:25px;
    }

    .palette-visual{
        grid-template-columns:repeat(5,64px);
        overflow-x:auto;
        padding-bottom:5px;
    }

    .commerce-browser__body{
        grid-template-columns:1fr;
    }

    .commerce-sidebar{
        display:none;
    }

    .commerce-products{
        padding:15px;
    }

    .commerce-products article{
        grid-template-columns:58px minmax(0,1fr) auto;
    }

    .commerce-product-image{
        width:58px;
        height:58px;
    }

    .step-grid{
        grid-template-columns:1fr;
    }

    .step-grid article{
        min-height:230px;
    }

    .site-footer__inner{
        grid-template-columns:1fr;
        align-items:start;
    }

    .site-footer__links{
        justify-content:flex-start;
    }
}

@media(max-width:420px){
    .hero__copy h1{
        font-size:37px;
    }

    .hero__actions{
        flex-direction:column;
    }

    .hero__actions .button{
        width:100%;
    }

    .floating-card{
        display:none;
    }

    .hero-preview{
        min-height:525px;
    }

    .phone{
        width:260px;
    }

    .cta__actions{
        flex-direction:column;
    }

    .cta__actions .button{
        width:100%;
    }
}