/* SubMate — trustworthy blue, fresh sage, and space to breathe. */
:root {
  --paper: #fcfdfd;
  --ink: #193453;
  --muted: #778697;
  --line: #e6ecef;
  --orange: #244d7b;
  --soft-orange: #edf5f1;
  --green: #244d7b;
  --lime: #dcebe3;
  --blue: #244d7b;
  --mint: #bbd9cc;
  --mint-light: #eef6f1;
  --radius: 18px;
  --max: 1200px;
}
body { color: var(--ink); letter-spacing: -.035em; }
h1,h2,h3,p { word-break: keep-all; overflow-wrap: break-word; }
button,input,select,textarea { letter-spacing: inherit; }
a,button { touch-action: manipulation; }
button:disabled { opacity: 1; background: #edf1f4!important; color: #a4b0bd!important; box-shadow: none; }
.wrap { padding: 0 32px; }
.preview-bar { background: #eaf3ed; color: #668074; font-size: 10px; padding: 7px 32px; min-height: 30px; }
.preview-bar b { border-color: #c5d8cc; color: #759082; font-size: 9px; }
.preview-bar a { color: #668074; font-size: 10px; }
header { height: 80px; background: #fcfdfdf2; }
.header-inner { gap: 30px; }
.logo { font-family: 'Nunito','Arial Rounded MT Bold',sans-serif; font-size: 32px; font-weight: 1000; letter-spacing: -1.65px; color: var(--blue); gap: 9px; line-height: 1; }
.mate-mark { display: inline-block; width: 29px; height: 29px; position: relative; flex-shrink: 0; }
.mate-mark i { position: absolute; width: 19px; height: 19px; border-radius: 7px; transform: rotate(-8deg); background: var(--blue); top: 1px; left: 0; }
.mate-mark i:last-child { background: #a9cdbd; top: 10px; left: 10px; transform: rotate(8deg); border: 2px solid var(--paper); }
.header-links { margin-left: 33px; gap: 30px; font-size: 13px; color: #6c7c8d; }
.header-links a { padding: 27px 0; font-weight: 550; }
.header-links a.active { color: var(--blue); }
.header-links a.active:after { background: var(--blue); bottom: 13px; }
.header-actions { gap: 14px; }
.header-actions .icon-btn { color: #65768a; }
.login-link { background: var(--blue); color: #fff; padding: 11px 18px; font-size: 11px; border-radius: 10px; font-weight: 650; white-space: nowrap; }
.eyebrow { color: #8b9ba6; font-size: 10px; letter-spacing: .12em; font-weight: 600; }
.eyebrow:before { display: none; }
.accent { color: #87b7a0; }
.btn { border-radius: 11px; min-height: 50px; padding: 14px 22px; font-size: 13px; font-weight: 600; gap: 16px; }
.btn.primary,.btn.dark { background: var(--blue); }
.btn.primary:hover,.btn.dark:hover { background: #183c65; }
.btn:hover { transform: none; }
.btn.outline { background: #fff; border-color: #dbe5ea; color: var(--blue); }
.btn.sm { min-height: 36px; font-size: 11px; padding: 8px 13px; }
.btn svg { width: 18px; height: 18px; }
.text-link { color: #6d7f90; font-size: 12px; font-weight: 500; }
.temp { background: #f1f5f3; color: #8a9b91; border: 1px solid #e0e9e3; font-size: 9px; border-radius: 4px; font-weight: 400; padding: 2px 5px; }
.pill { background: #f0f5f4; color: #68877b; }
.pill.green { background: #e9f4ed; color: #4e8269; }
.pill.orange { background: #edf2f8; color: var(--blue); }
.hero { min-height: 480px; padding: 63px 0 65px; gap: 64px; grid-template-columns: 1.05fr 1fr; }
.hero-kicker { display: inline-flex; align-items: center; gap: 7px; color: #6e8c7e; background: #eef6f1; font-size: 11px; padding: 7px 11px; border-radius: 20px; font-weight: 500; }
.hero-kicker i { width: 5px; height: 5px; border-radius: 50%; background: #8eb39e; }
.hero h1 { font-size: 58px; line-height: 1.25; letter-spacing: -.065em; font-weight: 800; margin: 21px 0 20px; }
.hero h1 span { background: linear-gradient(transparent 67%,#d4e8dc 67%,#d4e8dc 90%,transparent 90%); }
.hero p { font-size: 15px; line-height: 1.9; color: #7c8b99; }
.hero-actions { margin-top: 28px; gap: 25px; }
.hero-services { display: flex; align-items: center; gap: 17px; color: #9ba8b0; font-size: 10px; margin-top: 23px; letter-spacing: -.01em; }
.mate-visual { background: #eaf4ee; height: 360px; border-radius: 27px; display: grid; place-items: center; position: relative; overflow: hidden; isolation: isolate; }
.mate-board { position: relative; z-index: 2; width: 300px; background: #fff; border: 1px solid #e1ebe5; border-radius: 18px; padding: 23px; box-shadow: 0 15px 35px #29493709; }
.mate-board-top { display: flex; align-items: center; justify-content: space-between; }
.mini-wordmark { font-family: 'Nunito','Arial Rounded MT Bold',sans-serif; color: var(--blue); font-size: 18px; font-weight: 1000; letter-spacing: -.8px; }
.board-dots { color: #b8c8be; font-size: 14px; letter-spacing: 2px; }
.mate-board-heading { margin: 20px 0; font-size: 16px; font-weight: 600; color: #6e8294; line-height: 1.6; }
.mate-board-heading span { display: block; font-size: 26px; font-weight: 750; color: var(--ink); }
.mate-service-row { display: flex; gap: 11px; }
.mate-service-row>div { width: 54px; height: 54px; border-radius: 14px; background: var(--product-bg); color: var(--product-color); display: grid; place-items: center; }
.mate-service-row svg { width: 31px; height: 31px; }
.mate-plan-row { margin-top: 22px; padding: 16px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; font-size: 9px; color: #94a1ac; }
.mate-plan-row svg { width: 12px; height: 12px; margin-right: 3px; }
.mate-plan-row strong { font-weight: 600; color: #678d78; }
.mate-plan-row i { color: #ced9d2; padding: 0 4px; font-style: normal; }
.mate-board-bottom { display: flex; align-items: center; gap: 9px; padding-top: 15px; }
.mate-check { background: #eff6f2; border-radius: 50%; height: 29px; width: 29px; display: grid; place-items: center; color: #79a98e; }
.mate-check svg { width: 15px; height: 15px; }
.mate-board-bottom strong { font-size: 10px; font-weight: 600; display: block; color: #5c7489; }
.mate-board-bottom div>span { font-size: 8px; color: #a3afb6; display: block; margin-top: 4px; }
.mate-float-label { position: absolute; top: 20px; right: 22px; font-size: 7px; letter-spacing: .08em; color: #8da595; display: flex; align-items: center; gap: 5px; }
.mate-float-label svg { width: 10px; height: 10px; }
.mate-float-bottom { position: absolute; bottom: 18px; left: 23px; font-size: 8px; color: #95aa9c; }
.mate-float-bottom span { margin-left: 160px; font-size: 14px; }
.mate-orbit { border: 1px solid #d8e7dd; height: 360px; width: 360px; border-radius: 50%; position: absolute; z-index: -1; left: -120px; top: 160px; }
.orbit-two { top: -190px; left: auto; right: -150px; }
.section-top h2 { font-size: 31px; letter-spacing: -.055em; font-weight: 750; margin-top: 11px; }
.section-top p { color: #8795a1; font-size: 13px; margin-top: 8px; }
.section-top { align-items: flex-end; margin-bottom: 25px; }
.catalog-controls { margin: 27px 0 23px; }
.categories { gap: 7px; }
.categories button { background: #f3f6f7; color: #7d8d9a; padding: 10px 17px; border: 1px solid transparent; font-size: 12px; }
.categories button.active { color: #fff; background: var(--blue); border-color: var(--blue); }
.sort { font-size: 11px; color: #93a0aa; padding: 6px 0; }
.product-grid { gap: 20px; }
.product-card { border-color: #e6ecef; border-radius: 16px; box-shadow: none; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px #17375a08; }
.product-visual { height: 169px; }
.product-visual .brand-svg { width: 62px; height: 62px; }
.visual-label { font-size: 8px; left: 16px; bottom: 13px; opacity: .45; letter-spacing: .1em; }
.product-body { padding: 21px 19px 16px; }
.product-cat { font-size: 10px; letter-spacing: 0; color: #9aa6b1; margin-bottom: 6px; }
.product-body h3 { font-size: 19px; font-weight: 750; }
.product-body h3>span { font-size: 13px; font-weight: 400; color: #80919e; }
.product-body p { font-size: 11px; line-height: 1.7; color: #8d9aa5; min-height: 38px; margin: 9px 0 15px; }
.product-price { font-size: 23px; letter-spacing: -.055em; font-weight: 750; white-space: nowrap; }
.product-price small { font-size: 10px; color: #9aa6b1; }
.product-meta { color: #a3adb6; font-size: 9px; padding-top: 13px; margin-top: 16px; border-color: #edf1f3; }
.product-meta svg { height: 14px; width: 14px; color: #9bafa7; }
.catalog-note { color: #9ba8b0; font-size: 10px; margin-top: 18px; }
.catalog-note .temp { margin-right: 3px; }
.payment-trust { margin: 60px 0 56px; background: #244d7b; color: #fff; border-radius: 22px; padding: 36px 40px 0; display: grid; grid-template-columns: 1.3fr 1fr; column-gap: 25px; overflow: hidden; }
.trust-kicker { font-size: 9px; letter-spacing: .14em; color: #a5c1d2; }
.trust-copy h2 { font-size: 29px; font-weight: 650; letter-spacing: -.055em; margin: 13px 0 10px; }
.trust-copy p { font-size: 12px; color: #b6c8db; }
.trust-state { display: inline-flex; gap: 7px; align-items: center; margin-top: 17px; padding: 5px 9px; color: #c3d8ca; background: #ffffff0d; border: 1px solid #ffffff12; border-radius: 5px; font-size: 9px; }
.trust-state .temp { background: #ffffff0c; border-color: #ffffff25; color: #c8dacf; font-size: 8px; }
.trust-provider { display: flex; align-items: center; justify-content: center; gap: 26px; }
.trust-shield { width: 82px; height: 94px; display: grid; place-items: center; color: #c6e0d1; background: #ffffff06; border-radius: 25px; transform: rotate(-8deg); }
.trust-shield svg { width: 63px; height: 63px; stroke-width: 1.1; }
.toss-wordmark { font-size: 50px; font-weight: 800; letter-spacing: -3px; line-height: 1; color: #fff; }
.toss-wordmark span { font-size: 13px; display: block; letter-spacing: .02em; margin-top: 9px; font-weight: 500; color: #b9cdde; }
.trust-bottom { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #ffffff17; margin-top: 29px; padding: 20px 0; color: #c0d0df; font-size: 10px; }
.trust-bottom span { display: flex; align-items: center; gap: 7px; }
.trust-bottom span:nth-child(2) { justify-content: center; }
.trust-bottom span:last-child { justify-content: flex-end; }
.trust-bottom svg { width: 15px; height: 15px; color: #b3d1c1; }
.how-section { padding-bottom: 45px; }
.steps { gap: 25px; margin-top: 29px; }
.step { border-color: var(--line); padding-top: 20px; }
.step-num { color: #709a85; background: #eaf4ee; display: inline-grid; place-items: center; border-radius: 8px; height: 31px; width: 31px; font: 600 11px 'Nunito',sans-serif; letter-spacing: 0; }
.step h3 { font-size: 16px; margin: 17px 0 8px; }
.step p { font-size: 12px; color: #8d9aa5; }
.mate-cta { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 30px 34px; background: #eff6f2; border-radius: 18px; margin: 5px 0 57px; }
.mate-cta h2 { font-size: 21px; font-weight: 650; letter-spacing: -.05em; }
.mate-cta p { font-size: 11px; color: #879b8f; margin-top: 8px; }
.mate-cta .btn { font-size: 12px; min-height: 46px; }
.page { padding: 42px 0 60px; }
.page-title { color: var(--ink); font-size: 34px; font-weight: 750; letter-spacing: -.06em; }
.page-sub { font-size: 13px; color: #8b9aa7; }
.breadcrumb { font-size: 11px; color: #91a0ac; }
.detail-art { border-radius: 20px; }
.detail-summary h1 { font-size: 34px; font-weight: 750; }
.detail-summary>p { color: #8a99a5; font-size: 13px; }
.plan-switch { background: #edf3f5; padding: 5px; }
.plan-switch button { color: #8a9aa6; }
.plan-switch button.active { color: var(--blue); }
.plan-box { border-color: #dce7eb; padding: 22px; border-radius: 13px; }
.plan-lines { color: #93a0aa; font-size: 11px; }
.big-price { font-size: 33px; }
.check-line { color: #8b9caa; }
.check-line svg { color: #8bab9b; }
.detail-tabs { gap: 32px; color: #637c90; }
.detail-content h2 { font-size: 23px; letter-spacing: -.045em; }
.feature { background: #fafcfc; border-color: #e8eef0; }
.feature svg { color: #84a495; }
.feature p { font-size: 11px; color: #98a4ad; }
.notice,.notice.orange { background: #f0f6f3; color: #7f9488; font-size: 11px; line-height: 1.85; border-radius: 10px; }
.panel { border-color: #e4ecef; border-radius: 14px; }
.panel h2 { font-weight: 650; }
.field { font-size: 12px; color: #668096; }
.field input,.field select,.field textarea { background: #fafcfc; border-color: #dfe8ed; color: #546d82; }
.field input[readonly] { color: #91a2b0; }
.payment-placeholder { border-color: #dae6ec; color: #98a7b2; }
.payment-placeholder b { color: var(--blue); }
.payment-options button.active { background: #f0f5fa; border-color: #7395b4; color: var(--blue); }
.checkbox { color: #8496a4; }
.checkbox input { accent-color: var(--blue); }
.status { background: #eaf4ee; color: #5f8d73; }
.status.wait { background: #f8f4e9; color: #a99a70; }
.status.cancel { background: #faeeee; color: #ba8282; }
.account-avatar { background: #e5f1e9; color: #6f9981; }
.account-greeting h1 { font-size: 28px; }
.account-tabs button.active { border-color: var(--blue); }
.stat small { color: #99a7b0; }
.stat strong { color: var(--blue); }
.stat { border-color: #e5ecef; }
.subscription { border-color: #e5ecef; }
.help-card { background: #244d7b; }
.editorial-card { background: #edf5ef; }
.editorial-card.dark { background: var(--blue); }
.admin-sidebar { background: #1c3b5d; }
.admin-sidebar a.active { background: #325577; }
.admin-sidebar a { color: #d0dee7; }
.admin-sidebar .sidebar-bottom { border-color: #ffffff20; }
.admin-panel { border-color: #e4ecef; }
.bar { background: #dcece3; }
.bar.current { background: #48759e; }
.todo .todo-icon { background: #eef5f1; color: #8aab99; }
th { background: #f5f8fa; color: #92a2ae; }
td { border-color: #edf2f4; }
td small { color: #9aa8b2; }
.integration-steps div { background: #f0f6f3; color: #8b9c94; }
.integration-steps b { color: #658a77; }
.success-icon { background: #e9f5ed; color: #78a38b; }
.empty { background: #f5f9f6; border-color: #dbe9df; }
.modal { background: #fff; border-radius: 20px; }
.modal p { color: #8b9ba8; }
.modal-backdrop { background: #152f4b60; }
#toast { background: #244d7b; }
footer { background: #fafcfc; border-color: #e6ecef; color: #96a4ae; padding: 36px 0 27px; }
.footer-top { align-items: center; }
.footer-top .logo { color: var(--blue); font-size: 25px; }
.footer-top .mate-mark { transform: scale(.8); transform-origin: left center; margin-right: -4px; }
.footer-links { color: #8b9aa5; }
.footer-links .temp { font-size: 8px; padding: 1px 4px; }
.footer-info>p { font-size: 11px; margin-bottom: 6px; }
.business-details { padding: 8px 0 0; border: 0; max-width: 800px; }
.business-details summary { display: inline-flex; font-size: 10px; font-weight: 400; color: #9aa7b0; gap: 7px; }
.business-details summary:after { font-size: 12px; color: #aab7bf; }
.business-details p { font-size: 10px; padding-top: 8px; color: #a4afb7; line-height: 1.9; }
.footer-bottom { color: #a0adb5; font-size: 9px; margin-top: 23px; }

/* Phone-first signup and login. */
.auth-page .preview-bar,.auth-page footer,.auth-page #mobile-nav,.auth-page .header-links,.auth-page .header-actions { display: none; }
.auth-page header { background: #fff; border-bottom: 0; position: static; }
.auth-page .header-inner { max-width: 1120px; }
.auth-layout { max-width: 1120px; margin: 15px auto 50px; padding: 0 32px; display: grid; grid-template-columns: .95fr 1fr; gap: 0; min-height: 610px; }
.auth-aside { background: #244d7b; border-radius: 22px; padding: 40px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; min-height: 610px; overflow: hidden; position: relative; }
.auth-aside .logo { color: #fff; font-size: 24px; }
.auth-aside .mate-mark i { background: #e4f0e8; }
.auth-aside .mate-mark i:last-child { background: #a4cbb7; border-color: #244d7b; }
.auth-aside .mate-mark { transform: scale(.8); transform-origin: left center; margin-right: -4px; }
.auth-aside-kicker { color: #94b2c7; font-size: 8px; letter-spacing: .1em; margin: 53px 0 16px; }
.auth-aside h2 { font-size: 43px; line-height: 1.35; letter-spacing: -.06em; font-weight: 650; }
.auth-aside h2+p { font-size: 11px; color: #b7cbda; margin-top: 18px; }
.auth-brand-stack { display: flex; gap: 13px; margin: 37px 0 30px; }
.auth-brand-stack>div { width: 59px; height: 59px; background: #ffffff12; border: 1px solid #ffffff0b; color: #dcece3; border-radius: 15px; display: grid; place-items: center; }
.auth-brand-stack svg { width: 32px; height: 32px; }
.auth-aside-foot { color: #89a8be; font-size: 9px; letter-spacing: .02em; }
.auth-form-panel { padding: 52px 30px; display: flex; align-items: center; justify-content: center; min-width: 0; }
.auth-card { max-width: 360px; width: 100%; }
.auth-mini-brand { font: 900 15px 'Nunito',sans-serif; letter-spacing: -.3px; color: #94b7a4; display: block; margin-bottom: 16px; }
.auth-card h1 { font-size: 31px; font-weight: 750; letter-spacing: -.055em; line-height: 1.4; }
.auth-description { color: #91a0ac; font-size: 13px; line-height: 1.9; margin: 15px 0 34px; }
.auth-card .btn.full { justify-content: center; min-height: 54px; font-size: 13px; gap: 12px; }
.auth-card .btn.full svg { width: 17px; height: 17px; }
.auth-switch { text-align: center; color: #9aa9b4; font-size: 11px; margin-top: 20px; }
.auth-switch button { font-size: 11px; color: #4e6f8c; font-weight: 600; margin-left: 4px; padding: 3px; }
.auth-demo-note { color: #a3afb7; font-size: 10px; line-height: 1.9; text-align: center; margin-top: 27px; }
.auth-demo-note .temp { margin-right: 3px; }
.auth-browse { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 32px; font-size: 11px; color: #9aa9b4; }
.auth-browse svg { width: 14px; height: 14px; }
.auth-step-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 29px; font-size: 10px; color: #a3b0ba; }
.auth-step-top b { color: #89ac98; font: 700 10px 'Nunito',sans-serif; letter-spacing: .05em; margin-left: 8px; }
.auth-back { padding: 5px 0; min-width: 25px; font-size: 24px; color: #55758e; text-align: left; line-height: 1; }
.auth-field { margin-bottom: 9px; color: #5f7a90; font-size: 11px; font-weight: 500; }
.auth-input { width: 100%; border: 1px solid #dce5eb; border-radius: 11px; height: 56px; background: #fff; color: var(--blue); padding: 0 16px; font-size: 17px; outline: none; box-shadow: none; transition: border-color .15s; }
.auth-input:focus { border-color: #83ae99; box-shadow: 0 0 0 3px #e9f3ed; }
.auth-input::placeholder { color: #bec8ce; font-weight: 400; }
.auth-next { margin-top: 12px; }
.form-error { font-size: 10px; color: #bf7e7e; min-height: 20px; padding-top: 8px; line-height: 1.7; }
.auth-demo-fill { display: block; font-size: 11px; color: #8ba496; text-align: center; padding: 8px 5px; margin: 13px auto 0; }
.auth-demo-fill:disabled { background: none!important; }
.auth-help { display: block; margin: 29px auto 0; font-size: 10px; color: #a8b3bb; text-decoration: underline; text-underline-offset: 4px; padding: 7px; }
.auth-inline-link { font-size: 10px; color: #719780; margin-left: 7px; text-decoration: underline; text-underline-offset: 3px; padding: 3px; }
.otp-input-wrap { position: relative; }
.otp-input-wrap input { padding-right: 80px; letter-spacing: .14em; }
#otp-clock { position: absolute; right: 17px; top: 18px; font-size: 13px; font-variant-numeric: tabular-nums; color: #81a591; }
.auth-code-hint { background: #eff6f2; padding: 16px; border-radius: 11px; text-align: center; margin-top: 24px; }
.auth-code-hint .temp { background: transparent; border: none; font-size: 9px; color: #93ab9c; }
.auth-code-hint strong { display: block; font: 800 22px 'Nunito',sans-serif; color: #688c77; letter-spacing: 4px; margin-top: 5px; }
.auth-code-hint p { font-size: 9px; color: #a0b1a7; margin-top: 6px; }
.agreement-all { display: flex; gap: 10px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 650; margin-bottom: 10px; }
.auth-card input[type=checkbox] { width: 17px; height: 17px; margin: 0; accent-color: var(--blue); flex-shrink: 0; }
.agreement-items>div { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; gap: 12px; }
.agreement-items label { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #8a9ba8; cursor: pointer; }
.agreement-items a { display: flex; min-width: 24px; height: 24px; align-items: center; justify-content: flex-end; color: #b4c0c7; }
.agreement-items a svg { width: 14px; height: 14px; }
.auth-card #signup-terms .auth-demo-note { margin-top: 20px; margin-bottom: 20px; text-align: left; }
.auth-complete-icon { background: #e8f3ec; color: #82a891; width: 65px; height: 65px; border-radius: 23px; display: grid; place-items: center; margin-bottom: 29px; }
.auth-complete-icon svg { width: 29px; height: 29px; stroke-width: 2; }
.auth-complete .auth-mini-brand { font-size: 10px; letter-spacing: .1em; }

@media(min-width:1440px) {
  :root { --max: 1230px; }
  .hero { gap: 80px; min-height: 500px; }
  .hero h1 { font-size: 62px; }
  .mate-visual { height: 380px; }
  .product-visual { height: 180px; }
}
@media(max-width:1050px) {
  .hero { gap: 32px; min-height: 440px; padding: 48px 0 52px; }
  .hero h1 { font-size: 49px; }
  .hero p { font-size: 13px; }
  .mate-visual { height: 340px; }
  .mate-board { width: 274px; padding: 20px; }
  .mate-service-row { gap: 10px; }
  .mate-service-row>div { width: 49px; height: 49px; }
  .header-links { margin-left: 13px; gap: 23px; }
  .product-grid { gap: 13px; }
  .product-body { padding: 18px 13px 15px; }
  .product-body h3 { font-size: 17px; }
  .product-body h3>span { font-size: 11px; }
  .product-price { font-size: 21px; }
  .payment-trust { padding: 30px 31px 0; }
  .auth-aside { padding: 32px; }
  .auth-aside h2 { font-size: 38px; }
  .auth-brand-stack { gap: 9px; }
  .auth-brand-stack>div { width: 51px; height: 51px; }
  .auth-form-panel { padding: 42px 28px; }
}
@media(max-width:760px) {
  .wrap { padding: 0 21px; }
  .preview-bar { padding: 6px 21px; font-size: 8px; min-height: 27px; }
  .preview-bar a { font-size: 8px; }
  header { height: 68px; }
  .logo { font-size: 29px; gap: 7px; letter-spacing: -1.4px; }
  .mate-mark { transform: scale(.88); transform-origin: left center; margin-right: -3px; }
  .header-actions { gap: 5px; }
  .header-actions .icon-btn { width: 29px; }
  .header-actions .icon-btn[aria-label=마이페이지] { display: none; }
  .login-link { font-size: 9px; padding: 10px 12px; border-radius: 8px; }
  .hero { display: grid; grid-template-columns: 1fr; padding: 35px 0 38px; gap: 28px; }
  .hero h1 { font-size: clamp(36px,10.8vw,46px); margin: 19px 0 16px; line-height: 1.27; }
  .hero-kicker { font-size: 10px; padding: 6px 10px; }
  .hero p { font-size: 13px; line-height: 1.85; }
  .hero-actions { margin-top: 23px; gap: 24px; }
  .btn { min-height: 48px; font-size: 12px; padding: 13px 19px; }
  .hero-services { font-size: 9px; gap: 15px; margin-top: 20px; }
  .mate-visual { height: 314px; border-radius: 22px; }
  .mate-board { width: 264px; padding: 21px; border-radius: 16px; }
  .mate-board-top .mini-wordmark { font-size: 16px; }
  .mate-board-heading { margin: 16px 0 17px; font-size: 13px; }
  .mate-board-heading span { font-size: 24px; }
  .mate-service-row { gap: 9px; }
  .mate-service-row>div { width: 48px; height: 48px; border-radius: 12px; }
  .mate-service-row svg { width: 28px; height: 28px; }
  .mate-plan-row { margin-top: 16px; font-size: 8px; padding: 13px 0; }
  .mate-board-bottom { padding-top: 13px; }
  .mate-board-bottom strong { font-size: 9px; }
  .mate-board-bottom div>span { font-size: 7px; }
  .mate-check { height: 27px; width: 27px; }
  .mate-float-label { top: 12px; right: 16px; font-size: 6px; }
  .mate-float-bottom { bottom: 11px; left: 17px; font-size: 6px; }
  .mate-float-bottom span { font-size: 10px; margin-left: 160px; }
  .eyebrow { font-size: 8px; letter-spacing: .09em; }
  .section-top { gap: 17px; margin-bottom: 20px; }
  .section-top h2 { font-size: 24px; line-height: 1.4; letter-spacing: -.06em; margin-top: 9px; }
  .section-top p { font-size: 11px; margin-top: 6px; }
  .section-top>.text-link { font-size: 10px; gap: 5px; }
  .catalog-controls { margin: 20px -21px 20px; padding: 0 21px; gap: 12px; }
  .categories { gap: 5px; min-width: 0; }
  .categories button { padding: 9px 13px; font-size: 10px; }
  .catalog-controls>.sort { display: block; max-width: 83px; font-size: 9px; flex-shrink: 0; }
  .product-grid { gap: 12px; }
  .product-visual { height: 127px; }
  .product-visual .brand-svg { width: 51px; height: 51px; }
  .visual-label { font-size: 6px; left: 12px; bottom: 11px; }
  .product-body { padding: 15px 12px 13px; }
  .product-cat { font-size: 8px; margin-bottom: 5px; }
  .product-body h3 { font-size: 16px; line-height: 1.4; }
  .product-body h3>span { font-size: 10px; display: block; margin-top: 2px; }
  .product-body p { font-size: 10px; line-height: 1.6; min-height: 32px; margin: 8px 0 13px; }
  .product-price { font-size: 21px; }
  .product-price small { font-size: 9px; }
  .price-row { align-items: center; flex-wrap: wrap; gap: 4px; }
  .product-meta { font-size: 8px; margin-top: 12px; padding-top: 10px; }
  .product-meta svg { width: 12px; height: 12px; }
  .catalog-note { font-size: 9px; margin-top: 15px; }
  .payment-trust { margin: 35px 0 34px; padding: 25px 23px 0; border-radius: 19px; grid-template-columns: 1fr auto; gap: 0 10px; }
  .trust-kicker { font-size: 7px; letter-spacing: .1em; }
  .trust-copy h2 { font-size: 23px; line-height: 1.4; margin: 11px 0 9px; }
  .trust-copy p { font-size: 10px; max-width: 178px; line-height: 1.8; }
  .trust-state { font-size: 8px; margin-top: 13px; padding: 4px 7px; gap: 5px; }
  .trust-state .temp { font-size: 7px; }
  .trust-provider { flex-direction: column; gap: 6px; padding-top: 9px; }
  .trust-shield { width: 57px; height: 65px; border-radius: 15px; }
  .trust-shield svg { width: 44px; height: 44px; }
  .toss-wordmark { font-size: 34px; letter-spacing: -2px; }
  .toss-wordmark span { font-size: 9px; margin-top: 6px; }
  .trust-bottom { margin-top: 23px; padding: 16px 0 18px; gap: 10px; font-size: 8px; grid-template-columns: 1fr; }
  .trust-bottom span,.trust-bottom span:nth-child(2),.trust-bottom span:last-child { justify-content: flex-start; gap: 7px; }
  .trust-bottom svg { width: 13px; height: 13px; }
  .how-section { padding-bottom: 28px; }
  .steps { gap: 17px; margin-top: 23px; }
  .step { grid-template-columns: 40px 1fr; padding-top: 17px; }
  .step-num { width: 27px; height: 27px; border-radius: 7px; font-size: 10px; margin-top: 0; }
  .step h3 { font-size: 13px; margin: 2px 0 6px; }
  .step p { font-size: 11px; }
  .mate-cta { flex-direction: column; align-items: flex-start; gap: 21px; padding: 25px; border-radius: 16px; margin: 3px 0 35px; }
  .mate-cta h2 { font-size: 19px; line-height: 1.5; max-width: 240px; }
  .mate-cta p { font-size: 11px; margin-top: 7px; }
  .mate-cta .btn { font-size: 11px; min-height: 44px; }
  .page { padding: 28px 0 38px; }
  .page-title { font-size: 28px; line-height: 1.45; }
  .page-sub { font-size: 12px; }
  .detail-summary h1 { font-size: 30px; }
  .detail-summary>p { font-size: 12px; }
  .detail-art { min-height: 260px; border-radius: 17px; }
  .detail-content h2 { font-size: 21px; }
  .feature { padding: 17px; }
  .notice,.notice.orange { font-size: 10px; padding: 14px 16px; }
  .account-greeting h1 { font-size: 21px; }
  .account-header { gap: 12px; }
  .stat strong { font-size: clamp(18px,5.3vw,23px); }
  .stat { padding: 17px 11px; }
  .stats { gap: 9px; }
  .stat small { font-size: 8px; }
  .subscription-info h3 { font-size: 15px; }
  .panel { padding: 21px; }
  footer { padding: 28px 0 92px; }
  .footer-top { align-items: flex-start; gap: 22px; }
  .footer-top .logo { font-size: 23px; }
  .footer-top .mate-mark { display: none; }
  .footer-links { font-size: 8px; gap: 9px; max-width: 180px; }
  .footer-links .temp { display: none; }
  .footer-info>p { font-size: 10px; }
  .business-details summary { font-size: 9px; }
  .business-details p { font-size: 9px; }
  .footer-bottom { font-size: 8px; }
  #mobile-nav { padding-top: 10px; border-color: #e6ecef; }
  #mobile-nav a { color: #a3b0ba; font-size: 9px; gap: 4px; }
  #mobile-nav a.active { color: var(--blue); }
  #mobile-nav svg { width: 21px; height: 21px; }
  .auth-page header { height: 68px; }
  .auth-page .header-inner { justify-content: flex-start; }
  .auth-page .logo { font-size: 28px; }
  .auth-layout { display: block; padding: 0 24px; margin: 0; min-height: calc(100svh - 68px); }
  .auth-aside { display: none; }
  .auth-form-panel { padding: 29px 0 40px; align-items: flex-start; min-height: 0; }
  .auth-card { max-width: 410px; }
  .auth-card h1 { font-size: 30px; line-height: 1.43; }
  .auth-mini-brand { font-size: 14px; margin-top: 16px; margin-bottom: 18px; }
  .auth-description { font-size: 13px; margin: 15px 0 32px; }
  .auth-step-top { margin-bottom: 32px; font-size: 10px; }
  .auth-input { height: 57px; font-size: 17px; border-radius: 11px; }
  .auth-card .btn.full { min-height: 53px; font-size: 13px; }
  .auth-next { margin-top: 17px; }
  .auth-demo-note { font-size: 10px; margin-top: 27px; }
  .auth-switch { font-size: 11px; margin-top: 24px; }
  .auth-demo-fill { margin-top: 15px; font-size: 11px; }
  .auth-help { margin-top: 38px; }
  .agreement-items label { font-size: 12px; }
  .agreement-items>div { padding: 15px 0; }
  .auth-complete { padding-top: 15px; }
  .auth-complete-icon { margin-bottom: 25px; }
  .auth-card #signup-terms .auth-demo-note { font-size: 10px; }
  .auth-page #toast { bottom: 24px; }
}
@media(max-width:360px) {
  .hero h1 { font-size: 36px; }
  .product-price { font-size: 19px; }
  .product-body { padding: 14px 10px 12px; }
  .mate-board { width: 250px; padding: 19px; }
  .mate-service-row>div { width: 45px; height: 45px; }
  .trust-copy h2 { font-size: 21px; }
  .auth-layout { padding: 0 21px; }
  .auth-card h1 { font-size: 28px; }
}

/* Keep supporting copy readable on bright mobile screens. */
.auth-description{color:#718596}.product-body p{color:#7c8f9e}.auth-switch,.auth-switch button{color:#6d8497}.agreement-items label{color:#758b9d}.catalog-note{color:#8698a5}.auth-demo-note{color:#8b9ea9}.trust-copy p{color:#c2d3e2}

/* Outlined wordmark: identical on every platform, no font download needed. */
.logo .submate-wordmark{width:180px;height:48px;display:block;overflow:visible}.footer-top .logo .submate-wordmark{width:142px;height:38px}.auth-aside .logo .submate-wordmark{width:150px;height:40px}.auth-aside .wordmark-text{fill:#fff}@media(max-width:760px){.logo .submate-wordmark{width:168px;height:45px}.footer-top .logo .submate-wordmark{width:129px;height:35px}.auth-page .logo .submate-wordmark{width:166px;height:44px}}

/* Keep horizontal page gutters when a page is also the width container. */
.wrap.page{padding-left:32px;padding-right:32px}
.search-inline{min-width:0}.search-inline input{min-width:0}
@media(max-width:760px){.wrap.page{padding-left:21px;padding-right:21px}}