/* CATNARA PWA unified utility pages v3.
   Same CMS and native-APP tokens as booking, cases, crew and MY.
   PC, public standalone documents, admin and existing PWA shell unchanged. */
@media(max-width:820px){
 html[data-view-mode="public"] #app main.catnara-pwa-utility{
  --utility-bg:var(--st-bg,var(--ui-bg,#fbf8f5));
  --utility-card:var(--st-surface,var(--ui-surface,#fff));
  --utility-soft:var(--st-soft,var(--ui-soft,#f7f2ee));
  --utility-ink:var(--st-ink,var(--ui-text,#382c2f));
  --utility-muted:var(--st-muted,var(--ui-muted,#71645e));
  --utility-line:var(--st-line,var(--ui-line,#e7dcd5));
  --utility-accent:var(--ui-accent,var(--st-accent,#a97573));
  --utility-on-accent:var(--ui-accent-text,#fff);
  --utility-radius:var(--st-cardradius,var(--m-radius,18px));
  --utility-shadow:var(--st-shadow,0 7px 24px rgba(38,27,31,.06));
  width:100%;min-height:70vh;margin:0;box-sizing:border-box;
  background:var(--utility-bg);color:var(--utility-ink);
 }
 html[data-mobile-experience="app"][data-view-mode="public"]
 body.catnara-app-shell-v2-active #app main.catnara-pwa-utility{
  --utility-bg:var(--catapp-native-bg,var(--ui-bg,#f9f5f2));
  --utility-card:var(--catapp-native-surface,var(--ui-surface,#fff));
  --utility-soft:var(--catapp-native-surface-2,var(--ui-soft,#f7f2ee));
  --utility-ink:var(--catapp-native-text,var(--ui-text,#332925));
  --utility-muted:var(--catapp-native-muted,var(--ui-muted,#71645e));
  --utility-line:var(--catapp-native-line,var(--ui-line,#e7dcd5));
  --utility-accent:var(--catapp-native-primary,var(--ui-accent,#a97573));
  --utility-on-accent:var(--catapp-native-on-primary,var(--ui-accent-text,#fff));
  --utility-radius:20px;
  --utility-shadow:0 7px 24px color-mix(in srgb,var(--catapp-native-primary) 5.5%,transparent);
  background:var(--utility-bg)!important;color:var(--utility-ink)!important;
 }
 /* Standard site pageHero() output, never a separate consultation masthead. */
 html[data-view-mode="public"] #app main.catnara-pwa-utility
 :is(.page-hero,.impact-page-hero,.editorial-page-hero,.minimal-page-hero,.cat-page-hero){
  box-sizing:border-box;max-width:100%;overflow-wrap:anywhere;
 }
 /* Native APP's cases and crew use inset cards and modest 20px headings. */
 html[data-mobile-experience="app"][data-view-mode="public"]
 body.catnara-app-shell-v2-active #app main.catnara-pwa-utility
 > :is(.page-hero,.impact-page-hero,.editorial-page-hero,.minimal-page-hero,.cat-page-hero){
  width:calc(100% - 24px)!important;
  margin:12px 12px 14px!important;padding:21px 18px 17px!important;
  display:block!important;
  border:1px solid var(--utility-line)!important;
  border-radius:var(--utility-radius)!important;
  background:linear-gradient(145deg,var(--utility-soft) 0%,var(--utility-soft) 55%,var(--utility-card) 100%)!important;
  box-shadow:0 11px 30px color-mix(in srgb,var(--utility-accent) 8%,transparent)!important;
  color:var(--utility-ink)!important;
 }
 html[data-mobile-experience="app"][data-view-mode="public"]
 body.catnara-app-shell-v2-active #app main.catnara-pwa-utility
 > :is(.page-hero,.impact-page-hero,.editorial-page-hero,.minimal-page-hero,.cat-page-hero) h1{
  font-size:20px!important;line-height:1.3!important;font-weight:850!important;
  letter-spacing:-.025em!important;text-align:left!important;
  color:var(--utility-ink)!important;-webkit-text-fill-color:var(--utility-ink)!important;
  text-shadow:none!important;word-break:keep-all!important;
 }
 html[data-mobile-experience="app"][data-view-mode="public"]
 body.catnara-app-shell-v2-active #app main.catnara-pwa-utility
 > :is(.page-hero,.impact-page-hero,.editorial-page-hero,.minimal-page-hero,.cat-page-hero)
 :is(p,.lead,.kicker,.impact-page-index,.editorial-page-kicker,.editorial-page-desc,.editorial-page-desc p){
  position:static!important;margin:6px 0 0!important;
  color:var(--utility-muted)!important;font-size:12px!important;
  line-height:1.65!important;text-align:left!important;
 }
 /* The shared mobile Classic main rules remove padding on <main>. Keep the
    same safe sectional gutters as other routes, with no second toolbar. */
 html[data-view-mode="public"] #app main.catnara-pwa-utility
 > section.section.catnara-pwa-utility-section{
  box-sizing:border-box;width:100%;max-width:720px;margin:0 auto;
  padding:14px max(var(--m-side,16px),env(safe-area-inset-left,0px))
   calc(32px + env(safe-area-inset-bottom,0px))
   max(var(--m-side,16px),env(safe-area-inset-right,0px))!important;
 }
 html[data-mobile-experience="app"][data-view-mode="public"]
 body.catnara-app-shell-v2-active #app main.catnara-pwa-utility
 > section.section.catnara-pwa-utility-section{
  padding:0 12px calc(30px + env(safe-area-inset-bottom,0px))!important;
 }
 .catnara-pwa-utility *{box-sizing:border-box}
 .catnara-pwa-utility .utility-content{display:block;width:100%;min-width:0}
 .catnara-pwa-utility .utility-content>*{min-width:0}
 /* Existing published legal copy is retained; only presentation is unified. */
 html[data-view-mode="public"] #app main.catnara-pwa-utility
 :is(.box,.option,.phone,.meta>div){
  min-width:0;border:1px solid var(--utility-line)!important;
  border-radius:var(--utility-radius)!important;
  background:var(--utility-card)!important;color:var(--utility-ink)!important;
  box-shadow:var(--utility-shadow)!important;
 }
 html[data-view-mode="public"] #app main.catnara-pwa-utility
 :is(.box,.option){margin:0 0 12px;padding:17px 16px!important}
 .catnara-pwa-utility .box h2,.catnara-pwa-utility .option h2{
  margin:0 0 12px;font-size:18px;line-height:1.35;
  font-family:var(--st-display,system-ui,sans-serif);
 }
 html[data-view-mode="public"] #app main.catnara-pwa-utility
 :is(.box h2,.option h2){
  font-size:18px!important;line-height:1.35!important;color:var(--utility-ink)!important;
 }
 .catnara-pwa-utility p{margin:0 0 10px;line-height:1.72;overflow-wrap:anywhere}
 .catnara-pwa-utility .box p,.catnara-pwa-utility .option p,
 .catnara-pwa-utility .note{color:var(--utility-muted)!important;font-size:14px;line-height:1.7}
 .catnara-pwa-utility .meta{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0 0 14px;
 }
 .catnara-pwa-utility .meta>div{padding:12px!important}
 .catnara-pwa-utility .meta :is(small,b){display:block}
 .catnara-pwa-utility .meta small{font-size:11px;color:var(--utility-muted);opacity:1}
 .catnara-pwa-utility .meta b{font-size:13px;margin-top:6px;overflow-wrap:anywhere}
 .catnara-pwa-utility .options{display:grid;gap:12px}
 .catnara-pwa-utility .phone{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px!important;margin:0 0 16px!important;
 }
 .catnara-pwa-utility .phone :is(small,strong){display:block}
 .catnara-pwa-utility .phone small{font-size:11px;color:var(--utility-muted)}
 .catnara-pwa-utility .phone strong{font-size:20px;color:var(--utility-ink)}
 .catnara-pwa-utility .sectionTitle{font-size:16px;font-weight:800;color:var(--utility-ink);margin:16px 2px 12px}
 .catnara-pwa-utility .copy,.catnara-pwa-utility [data-utility-retry]{
  min-height:44px;padding:9px 12px;border:1px solid var(--utility-line);
  border-radius:12px;background:var(--utility-soft);color:var(--utility-ink);font:inherit;font-size:13px;
 }
 .catnara-pwa-utility .status{min-height:18px;color:var(--utility-muted);font-size:12px}
 .catnara-pwa-utility .links{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0}
 .catnara-pwa-utility .links .btn{flex:1 1 155px;min-width:0;text-align:center}
 html[data-view-mode="public"] #app main.catnara-pwa-utility
 :is(a.cta,a.btn:not(.alt),button.btn){
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 14px;border:1px solid var(--utility-accent)!important;
  border-radius:calc(var(--utility-radius) * .75)!important;
  background:var(--utility-accent)!important;
  color:var(--utility-on-accent)!important;
  -webkit-text-fill-color:var(--utility-on-accent)!important;
  font-size:14px;font-weight:800;text-decoration:none;line-height:1.35;text-align:center;
  text-shadow:none!important;
 }
 html[data-view-mode="public"] #app main.catnara-pwa-utility a.cta{
  width:100%;min-width:0;
 }
 html[data-view-mode="public"] #app main.catnara-pwa-utility
 :is(a.cta,a.btn:not(.alt),button.btn) :is(span,b,strong,i){
  color:inherit!important;-webkit-text-fill-color:inherit!important;text-shadow:none!important;
 }
 html[data-view-mode="public"] #app main.catnara-pwa-utility .links a.btn.alt{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  padding:10px 14px;border:1px solid var(--utility-line)!important;
  border-radius:calc(var(--utility-radius) * .75)!important;
  background:var(--utility-card)!important;color:var(--utility-ink)!important;
  text-decoration:none;font-weight:800;text-align:center;
 }
 .catnara-pwa-utility form{display:grid;gap:14px}
 .catnara-pwa-utility .field{display:grid;gap:7px}
 .catnara-pwa-utility .field label{font-size:13px;font-weight:750;color:var(--utility-ink)}
 .catnara-pwa-utility .field :is(input,textarea){
  width:100%;min-height:48px;padding:12px;border:1px solid var(--utility-line);
  border-radius:12px;background:var(--utility-card);color:var(--utility-ink);font:inherit;
 }
 .catnara-pwa-utility .field textarea{min-height:104px;resize:vertical}
 .catnara-pwa-utility .notice{
  padding:14px;border-left:3px solid var(--utility-accent);
  border-radius:10px;background:var(--utility-soft);color:var(--utility-ink);line-height:1.7;
 }
 .catnara-pwa-utility .success{display:none;padding:14px;background:#edf7ef;color:#315c3a;border-radius:10px}
 .catnara-pwa-utility .utility-error{
  padding:22px;border:1px solid var(--utility-line);border-radius:var(--utility-radius);
  background:var(--utility-card);
 }
 /* CATNARA_PWA_CONSULT_CTA_CENTER_V4
    Keep both message actions centered in their own template-colored cards.
    A bounded width and equal 12px side inset avoid the right-edge cramped
    button seen on narrow Samsung/Apple PWA viewports. */
 html[data-view-mode="public"] #app main.catnara-pwa-utility.consult
 .utility-content .options > .option{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  min-width:0!important;width:100%!important;
  padding:20px max(16px,4vw)!important;
 }
 html[data-view-mode="public"] #app main.catnara-pwa-utility.consult
 .utility-content .options > .option > :is(h2,p){
  width:100%;min-width:0;margin-inline:0!important;
 }
 html[data-view-mode="public"] #app main.catnara-pwa-utility.consult
 .utility-content .options > .option > a.cta{
  display:flex!important;align-items:center!important;justify-content:center!important;
  align-self:center!important;
  width:calc(100% - 24px)!important;
  max-width:360px!important;min-width:0!important;
  margin:16px auto 8px!important;
  padding:13px 16px!important;
  text-align:center!important;white-space:normal!important;
  word-break:keep-all!important;overflow-wrap:anywhere!important;
 }
 html[data-view-mode="public"] #app main.catnara-pwa-utility.consult
 .utility-content .options > .option > a.cta :is(span,b,strong){
  display:inline!important;flex:0 0 auto!important;
  color:inherit!important;-webkit-text-fill-color:inherit!important;
 }

}