.case-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr));gap:16px}
.case-card,.case-list-item {background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;text-align:start;color:var(--ink)}
.case-card {display:block;max-width:480px}
.case-card[hidden] {display:none}
.case-service-filter {width:min(100%,360px);margin:0 0 16px}
.case-service-label {display:block;color:var(--mute);font-weight:650;overflow-wrap:anywhere}
.case-card .case-service-label {margin-bottom:5px}
.case-card>img {width:100%;height:180px;object-fit:cover;display:block}
.case-card>div {padding:18px}
.case-card p {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--mute);margin:8px 0}
.case-card strong,.case-list-item>span:last-child {color:var(--red)}
.case-detail h1,.case-card h2,.case-story p,.case-list-item strong {overflow-wrap:anywhere}
.case-detail h1 {line-height:1.35;margin-bottom:16px}
.case-story {display:grid;gap:18px;margin:12px 0}
.case-story h2 {font-size:17px;margin-bottom:4px}
.case-story p {white-space:pre-line}
.case-gallery,.case-thumbs {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
.case-gallery img,.case-thumbs img {display:block;border-radius:5px;width:100%}
.case-gallery img {height:auto}
.case-thumbs img {aspect-ratio:4/3;object-fit:contain}
.case-gallery:has(>:only-child) {grid-template-columns:minmax(0,1fr)}
.case-cta,.case-list,.case-approval {margin-top:16px}
.case-list {display:grid;gap:8px}
.case-list-item {display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px}
.case-list-item small {display:block;color:var(--mute)}
.case-editor {max-width:720px;margin-inline:auto}
.case-editor summary {cursor:pointer;padding-block:12px;font-weight:650}
.case-approval {border-top:1px solid var(--line)}
.case-check,.case-thumbs span {display:flex;align-items:center;gap:10px;min-height:44px}
.case-check input,.case-thumbs input {width:20px;height:20px;flex:none}
.case-editor [data-case-feedback]:not(:empty) {margin-top:12px}
.case-editor [data-case-progress]:empty {display:none}
.head nav a {display:inline-flex;align-items:center;min-height:44px}
@media screen and (max-width:720px) {
  html {scroll-padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  body {padding-bottom:calc(68px + env(safe-area-inset-bottom));padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .mobile-nav {padding-bottom:env(safe-area-inset-bottom);height:calc(58px + env(safe-area-inset-bottom))}
  .mobile-nav a {flex:1;min-width:0;min-height:48px;line-height:1.25;text-align:center}
  button,a,input,select,textarea,summary {touch-action:manipulation}
  .btn,.ghost,.negative,.square,.chip,.tab,.back,.hero .btn,.text-link,.hero-link,.account-link,.request-extra summary,.chat-panel .between button {min-height:44px}
  .back,.hero-link,.text-link,.account-link {display:inline-flex;align-items:center}
  .field input,.field textarea,.field select,input.select,select.select,.search input,dialog input,dialog select,dialog textarea {font-size:16px}
  .field input,.field select,.select {min-height:46px}
  .actions,.inline,.filters,.demo-actions {flex-wrap:wrap}
  .stack,.panel,.layout>*,.list-item>div,.form-card,.invoice,.account-link,.hero-copy,.page-head>*,.case-story>* {min-width:0}
  .user-name {max-width:clamp(90px,35vw,180px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .field input[type=file] {max-width:100%;overflow:hidden}
  .chat-message p,.kv strong,.kv span,.invoice strong,.list-item strong,.list-item small {overflow-wrap:anywhere}
  .mobile-nav,.case-gallery img {-webkit-tap-highlight-color:transparent}
  dialog {max-height:85dvh;overflow-y:auto;padding:17px}
  #toast {bottom:calc(76px + env(safe-area-inset-bottom));max-width:calc(100vw - 26px)}
  .case-card {width:100%;max-width:none}
  .case-cta>.btn {width:100%}
}
@media screen and (max-width:420px) {
  .two {grid-template-columns:minmax(0,1fr)}
  .case-grid {grid-template-columns:minmax(0,1fr)}
}

@media screen and (max-width:720px) {
  .head {min-height:61px;padding-block:8px}
  .hero {grid-template-columns:minmax(0,62fr) minmax(0,38fr);min-height:250px}
  .hero-copy {padding:18px 13px 18px 17px}
  .hero h1 {font-size:clamp(25px,6.6vw,34px);line-height:1.32;letter-spacing:-.025em;margin:10px 0}
  .hero h1 span {white-space:normal}
  .hero-copy>p {font-size:14px;line-height:1.65}
  .hero .actions {gap:4px 10px;margin-top:13px}
  .hero .btn {font-size:14px;min-height:46px;padding:10px 12px}
  .hero .hero-link {display:inline-flex;font-size:13px}
  .hero-art img {object-position:52% center}
  .route {font-size:9px;letter-spacing:.6px}
  .mobile-nav a[aria-current="page"] {color:var(--red)}
  .public-page .intro {font-size:16px}
  .public-page h2 {font-size:20px}
  .public-service-grid,.product-detail {grid-template-columns:minmax(0,1fr);gap:16px}
  .public-steps {gap:18px;padding-inline-start:22px}
  .public-steps>li {padding-inline-start:5px}
  .product-detail .product-art img {max-height:310px}
  .public-page .actions>.btn {width:100%}
  .footer-links {flex-basis:100%;margin-left:0;gap:3px 16px}
  .footer-links a {font-size:14px}
  .shop-domains bdi {white-space:normal;overflow-wrap:anywhere}
}
@media screen and (max-width:370px) {
  .hero {grid-template-columns:minmax(0,64fr) minmax(0,36fr)}
  .hero-copy {padding-left:14px;padding-right:10px}
  .hero h1 {font-size:25px}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}