@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;800&family=Tajawal:wght@400;500;700&family=Space+Grotesk:wght@500;700&family=IBM+Plex+Sans:wght@400;500;600&family=Rubik:wght@600;800&family=Heebo:wght@400;500;700&display=swap');

:root{
  --bg:#FAF7F2;
  --surface:#FFFFFF;
  --ink:#211E1A;
  --ink-soft:#6B6459;
  --ink-faint:#A39B8E;
  --line:#E7E0D4;
  --accent:#3E5C4E;
  --accent-strong:#4F7562;
  --accent-contrast:#FBF9F5;
  --font-display:'Cairo','Segoe UI',Tahoma,Arial,sans-serif;
  --font-body:'Tajawal','Segoe UI',Tahoma,Arial,sans-serif;
  --font-mono:'Space Grotesk','Cairo',sans-serif;
}
html[data-lang="en"]{
  --font-display:'Space Grotesk', Arial, sans-serif;
  --font-body:'IBM Plex Sans', Arial, sans-serif;
}
html[data-lang="he"]{
  --font-display:'Rubik', Arial, sans-serif;
  --font-body:'Heebo','Segoe UI',Arial,sans-serif;
}

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
    transition:background .2s ease;
  }
  h1,h2,h3,.wordmark{
    font-family:var(--font-display);
    font-weight:700;
    text-wrap:balance;
  }
  a{color:inherit;}
  .num{ direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; font-family:var(--font-mono); }

  .wrap{ max-width:960px; margin:0 auto; padding-inline:32px; }

  .site-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:28px 32px;
    max-width:960px;
    margin:0 auto;
  }
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand-mark{
    width:26px;height:26px;
    color:var(--accent);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .brand-mark svg{ width:100%; height:100%; }
  .wordmark{ font-size:18px; letter-spacing:0.01em; }
  nav.main-nav{ display:flex; gap:30px; font-size:14px; color:var(--ink-soft); }
  nav.main-nav a{ text-decoration:none; position:relative; padding-bottom:3px; transition:color .2s ease; }
  nav.main-nav a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--accent); transform:scaleX(0); transition:transform .25s ease; }
  nav.main-nav a:hover{ color:var(--ink); }
  nav.main-nav a:hover::after{ transform:scaleX(1); }

  .lang-switch{ display:flex; align-items:center; gap:2px; font-size:12.5px; color:var(--ink-faint); }
  .lang-switch button{
    background:none; border:none; cursor:pointer;
    font-family:var(--font-body);
    padding:4px 7px;
    color:var(--ink-faint);
    font-size:12.5px;
  }
  .lang-switch button.active{ color:var(--accent-strong); font-weight:600; }
  .lang-switch span{ color:var(--line); }

  .hero{ padding:76px 32px 96px; max-width:720px; margin:0 auto; text-align:center; position:relative; overflow:hidden; }
  .hero > *:not(.hero-bg){ position:relative; z-index:1; }
  .hero-bg{
    position:absolute; top:50%; left:50%;
    width:min(640px, 150vw); height:min(640px, 150vw);
    transform:translate(-50%,-50%);
    color:var(--accent);
    opacity:0.16;
    z-index:0;
    pointer-events:none;
  }
  .hero-orbit{ transform-box:fill-box; transform-origin:center; }
  .hero-orbit-1{ animation:orbitSpin 70s linear infinite; }
  .hero-orbit-2{ animation:orbitSpin 50s linear infinite reverse; }
  @keyframes orbitSpin{ to{ transform:rotate(360deg); } }
  .hero-path{ stroke-dasharray:900; stroke-dashoffset:900; animation:pathDraw 2.6s ease forwards 0.4s; }
  @keyframes pathDraw{ to{ stroke-dashoffset:0; } }
  .hero-dot{ transform-box:fill-box; transform-origin:center; animation:dotPulse 3.4s ease-in-out infinite; }
  .hero-dot-2{ animation-delay:1.1s; }
  .hero-dot-3{ animation-delay:2.2s; }
  @keyframes dotPulse{ 0%,100%{ opacity:0.45; transform:scale(1); } 50%{ opacity:1; transform:scale(1.7); } }
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:13px; color:var(--accent-strong); font-weight:500;
    letter-spacing:0.02em;
    margin-bottom:22px;
  }
  h1{
    font-size:clamp(2.1rem, 4.4vw, 3.15rem);
    line-height:1.28;
    margin:0 0 24px;
  }
  .hero p.lede{
    font-size:1.08rem;
    color:var(--ink-soft);
    max-width:52ch;
    margin:0 auto 38px;
  }
  .hero-ctas{ display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; }
  .btn-primary{
    background:var(--accent);
    color:var(--accent-contrast);
    border:1px solid var(--accent);
    padding:14px 30px;
    font-size:14.5px;
    font-family:inherit;
    font-weight:600;
    text-decoration:none;
    border-radius:10px;
    display:inline-block;
    cursor:pointer;
    transition:background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .btn-primary:hover{ background:var(--accent-strong); border-color:var(--accent-strong); transform:translateY(-2px); box-shadow:0 10px 26px rgba(62,92,78,0.28); }
  .link-quiet{
    font-size:14px;
    text-decoration:none;
    color:var(--ink-soft);
    border-bottom:1px solid var(--line);
    padding-bottom:2px;
  }
  .link-quiet:hover{ color:var(--ink); border-color:var(--ink-soft); }

  section{ padding:88px 32px; }
  .rule-top{ border-top:1px solid var(--line); }

  .section-head{ max-width:640px; margin:0 auto 20px; text-align:center; }
  .section-head h2{
    font-size:clamp(1.55rem, 2.6vw, 2rem);
    margin:10px 0 12px;
  }
  .section-head p{ color:var(--ink-soft); margin:0 0 40px; font-size:1rem; }

  .search-wrap{ max-width:420px; margin:0 auto 56px; }
  .search-input{
    width:100%;
    background:transparent;
    border:none;
    border-bottom:1px solid var(--line);
    padding:12px 4px;
    font-family:var(--font-body);
    font-size:15px;
    color:var(--ink);
    outline:none;
    text-align:center;
  }
  .search-input::placeholder{ color:var(--ink-faint); }
  .search-input:focus{ border-color:var(--accent); }

  .categories-list{ max-width:760px; margin:0 auto; }
  .category-item{ border-top:1px solid var(--line); }
  .category-item:last-child{ border-bottom:1px solid var(--line); }
  .category-item.hidden{ display:none; }
  .category-header{
    width:100%;
    display:grid;
    grid-template-columns:52px 1fr 20px;
    align-items:center;
    gap:20px;
    padding:26px 4px;
    background:none;
    border:none;
    cursor:pointer;
    text-align:start;
    font-family:var(--font-body);
    color:var(--ink);
  }
  .num-wrap{ display:flex; flex-direction:column; align-items:center; gap:5px; }
  .category-header .num{ font-family:var(--font-mono); font-weight:700; color:var(--ink-faint); font-size:0.8rem; transition:color .25s ease; }
  .cat-icon{ width:22px; height:22px; color:var(--ink-faint); transition:color .25s ease, transform .25s ease; }
  .category-header:hover .cat-icon{ color:var(--accent); transform:translateY(-1px); }
  .category-header:hover .num{ color:var(--accent-strong); }
  .category-header{ transition:background-color .25s ease; border-radius:10px; }
  .category-header:hover{ background:color-mix(in srgb, var(--accent) 8%, transparent); }
  .category-header .titles{ display:flex; flex-direction:column; gap:4px; }
  .category-header h3{ font-size:1.05rem; font-weight:700; margin:0; font-family:var(--font-display); transition:color .25s ease; }
  .category-header:hover h3{ color:var(--accent-strong); }
  .category-header .tagline{ font-size:0.87rem; color:var(--ink-soft); font-family:var(--font-body); font-weight:400; }
  .category-chevron{
    width:10px; height:10px;
    border-inline-end:1.4px solid var(--ink-faint);
    border-bottom:1.4px solid var(--ink-faint);
    transform:rotate(45deg);
    transition:transform .3s ease;
    justify-self:center;
  }
  .category-item.open .category-chevron{ transform:rotate(225deg); }
  .category-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
  .category-item.open .category-body{ grid-template-rows:1fr; }
  .category-body-inner{ overflow:hidden; }
  .subservice-list{ list-style:none; margin:0; padding:0 4px 28px calc(52px + 20px); columns:2; column-gap:24px; }
  .subservice-item{ font-size:0.9rem; color:var(--ink-soft); padding:4px 0; break-inside:avoid; transition:opacity .2s ease; }
  .subservice-item::before{ content:"·"; color:var(--accent); margin-inline-end:7px; }
  .subservice-item.dim{ opacity:0.3; }
  .search-empty{ text-align:center; color:var(--ink-faint); font-size:0.95rem; padding:20px 0; display:none; }

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

  .hero{ animation:heroIn .8s ease both; }
  @keyframes heroIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }

  .consultant{
    background:var(--surface);
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:60px;
    align-items:center;
    max-width:1040px;
    margin:0 auto;
    padding-inline:32px;
  }
  .consultant .copy{ max-width:400px; }
  .consultant .copy p{ color:var(--ink-soft); margin:0 0 22px; }
  .consultant-points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
  .consultant-points li{ font-size:0.94rem; color:var(--ink); display:flex; gap:10px; }
  .consultant-points li::before{
    content:"—";
    color:var(--accent);
    flex-shrink:0;
  }

  .chat-panel{ border:1px solid var(--line); border-radius:14px; overflow:hidden; }
  .chat-panel-head{
    display:flex; align-items:center; gap:10px;
    padding:16px 22px;
    border-bottom:1px solid var(--line);
    font-size:13.5px;
    background:var(--surface);
  }
  .status-dot{ width:6px;height:6px;border-radius:50%;background:#7C9A7E;flex-shrink:0; }
  .chat-panel-head strong{ font-weight:600; }
  .chat-body{ padding:26px 22px; display:flex; flex-direction:column; gap:13px; }
  .bubble{ max-width:82%; padding:12px 16px; font-size:13.5px; line-height:1.65; border-radius:14px; }
  .bubble.user{ background:var(--accent); color:var(--accent-contrast); margin-inline-start:auto; }
  .bubble.assistant{ background:var(--surface); color:var(--ink); margin-inline-end:auto; border:1px solid var(--line); }
  .bubble.ticket{ border:1px dashed var(--accent); background:transparent; color:var(--ink-soft); font-size:12.5px; max-width:100%; }
  .bubble.ticket .code{ color:var(--accent-strong); font-weight:600; }

  footer{
    padding:44px 32px;
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:16px;
    max-width:960px; margin:0 auto;
    font-size:13px; color:var(--ink-faint);
  }
  footer .brand-mini{ font-size:13.5px; color:var(--ink-soft); }

  .auth-tabs{ display:flex; gap:18px; margin-bottom:10px; font-size:13px; }
  .auth-tabs button{ background:none;border:none;padding:0 0 6px;cursor:pointer;color:var(--ink-soft);border-bottom:2px solid transparent; font-family:inherit; font-size:13px; }
  .auth-tabs button.active{ color:var(--ink); border-color:var(--accent); font-weight:600; }
  .auth-form{ display:flex; flex-direction:column; gap:10px; }
  .auth-form input{ padding:11px 13px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font-size:13.5px; font-family:inherit; border-radius:8px; }
  .auth-form input:focus{ outline:1px solid var(--accent); }
  .auth-submit{ margin-top:4px; padding:11px; background:var(--accent); color:var(--accent-contrast); border:none; cursor:pointer; font-size:13.5px; font-weight:600; font-family:inherit; border-radius:8px; transition:background .2s ease; }
  .auth-submit:hover:not(:disabled){ background:var(--accent-strong); }
  .auth-submit:disabled{ opacity:0.5; cursor:default; }
  .auth-error{ color:#B5484D; font-size:12.5px; min-height:14px; }

  .chat-messages{ display:flex; flex-direction:column; gap:13px; max-height:340px; overflow-y:auto; padding-inline-end:2px; margin-bottom:14px; }
  .chat-input-row{ display:flex; gap:8px; }
  .chat-input-row input{ flex:1; padding:11px 14px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font-size:13.5px; font-family:inherit; border-radius:8px; }
  .chat-input-row button{ padding:0 18px; background:var(--accent); color:var(--accent-contrast); border:none; cursor:pointer; font-size:13.5px; font-weight:600; font-family:inherit; border-radius:8px; transition:background .2s ease; }
  .chat-input-row button:hover:not(:disabled){ background:var(--accent-strong); }
  .chat-input-row button:disabled{ opacity:0.5; cursor:default; }

  .chat-fab{
    position:fixed; bottom:26px; inset-inline-end:26px;
    width:50px;height:50px; border-radius:50%;
    background:var(--surface);
    color:var(--ink);
    border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 14px rgba(33,30,26,0.12);
    cursor:pointer;
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .chat-fab:hover{ transform:translateY(-2px); border-color:var(--accent); box-shadow:0 8px 22px rgba(62,92,78,0.22); }
  .chat-fab svg{ width:20px; height:20px; }

  @media (max-width:760px){
    .hero{ padding:56px 20px 72px; }
    section{ padding:60px 20px; }
    .site-header{ padding:20px 20px; flex-wrap:wrap; gap:14px; }
    nav.main-nav{ order:3; width:100%; justify-content:center; }
    .category-header{ grid-template-columns:34px 1fr 16px; gap:12px; }
    .cat-icon{ width:18px; height:18px; }
    .category-header .num{ font-size:0.68rem; }
    .subservice-list{ columns:1; padding-inline-start:0; }
    .consultant{ grid-template-columns:1fr; gap:36px; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  }

  /* Chat-first landing (index.html) */
  .onboard-chat{ max-width:620px; margin:0 auto; padding:0 32px 100px; }
  .onboard-chat .chat-panel{ min-height:520px; display:flex; flex-direction:column; }
  .onboard-chat .chat-body{ flex:1; }
  .onboard-chat .chat-messages{ flex:1; max-height:none; min-height:280px; }

  @media (max-width:760px){
    .onboard-chat{ padding:0 20px 72px; }
    .onboard-chat .chat-panel{ min-height:440px; }
  }

  /* Onboarding wizard */
  .wizard-step{ display:flex; flex-direction:column; justify-content:center; min-height:100%; gap:14px; animation:wizardIn .35s ease both; }
  @keyframes wizardIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
  .wizard-dots{ display:flex; gap:7px; justify-content:center; margin-bottom:4px; }
  .wizard-dots span{ width:6px; height:6px; border-radius:50%; background:var(--line); transition:background-color .25s ease, transform .25s ease; }
  .wizard-dots span.active{ background:var(--accent); transform:scale(1.3); }
  .wizard-dots span.done{ background:var(--ink-faint); }
  .wizard-label{ font-size:1.05rem; font-weight:600; text-align:center; font-family:var(--font-display); }
  .wizard-meta{ display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--ink-faint); margin-top:2px; }
  .wizard-meta a{ color:var(--ink-soft); cursor:pointer; text-decoration:none; border-bottom:1px solid transparent; }
  .wizard-meta a:hover{ color:var(--accent-strong); border-color:var(--accent); }
  .wizard-back-link{ background:none; border:none; padding:0; font:inherit; color:var(--ink-faint); cursor:pointer; }
  .wizard-back-link:hover{ color:var(--accent-strong); }

  /* Consultant CTA + modal */
  .consultant-cta{ display:flex; justify-content:center; padding:8px 0 40px; }

  .modal-overlay{
    position:fixed; inset:0; background:rgba(33,30,26,0.45);
    display:flex; align-items:center; justify-content:center; padding:20px;
    z-index:100; opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  .modal-overlay.open{ opacity:1; pointer-events:auto; }
  .modal-box{
    background:var(--surface); border:1px solid var(--line); border-radius:16px;
    max-width:440px; width:100%; padding:34px 28px; position:relative;
    box-shadow:0 24px 70px rgba(33,30,26,0.18);
    transform:translateY(10px) scale(0.98); transition:transform .25s ease;
  }
  .modal-overlay.open .modal-box{ transform:translateY(0) scale(1); }
  .modal-close{
    position:absolute; top:12px; inset-inline-end:12px; background:none; border:none;
    font-size:22px; line-height:1; color:var(--ink-faint); cursor:pointer; padding:6px;
  }
  .modal-close:hover{ color:var(--ink); }

  /* Full chat page (chat.html) */
  .chat-page-body{ height:100vh; margin:0; overflow:hidden; }
  .chat-shell{ display:flex; height:100%; }

  .chat-sidebar{
    width:272px; flex-shrink:0;
    display:flex; flex-direction:column;
    background:var(--surface);
    border-inline-end:1px solid var(--line);
  }
  .chat-sidebar-brand{
    display:flex; align-items:center; gap:10px;
    padding:20px 20px 16px;
  }
  .chat-sidebar-brand .brand-mark{ width:22px; height:22px; color:var(--accent); flex-shrink:0; }
  .chat-sidebar-brand .brand-mark svg{ width:100%; height:100%; }
  .chat-sidebar-brand .wordmark{ font-size:15.5px; }
  .chat-menu-btn{
    display:none; margin-inline-start:auto;
    background:none; border:none; padding:6px; cursor:pointer; color:var(--ink-soft);
  }
  .chat-menu-btn svg{ width:18px; height:18px; }

  .chat-sidebar-label{
    padding:4px 20px 8px; font-size:11.5px; color:var(--ink-faint);
    letter-spacing:.04em; text-transform:uppercase;
  }
  .chat-convo-list{ display:flex; flex-direction:column; gap:2px; padding:0 10px; }
  .chat-convo-item{
    display:flex; align-items:center; gap:11px;
    padding:10px 10px; border-radius:10px;
    background:none; border:none; cursor:pointer; text-align:start;
    font-family:inherit; width:100%;
  }
  .chat-convo-item.active{ background:color-mix(in srgb, var(--accent) 9%, transparent); }
  .chat-convo-avatar{
    width:34px; height:34px; border-radius:50%; flex-shrink:0;
    background:var(--accent); color:var(--accent-contrast);
    display:flex; align-items:center; justify-content:center;
  }
  .chat-convo-avatar svg{ width:16px; height:16px; }
  .chat-convo-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .chat-convo-meta strong{ font-size:13.5px; font-weight:600; color:var(--ink); }
  .chat-convo-preview{
    font-size:12px; color:var(--ink-faint);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px;
  }
  .chat-sidebar-spacer{ flex:1; }
  .chat-sidebar-footer{ border-top:1px solid var(--line); padding:12px 12px calc(12px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:8px; }
  .chat-sidebar-user{
    display:flex; flex-direction:column; align-items:flex-start; gap:1px;
    width:100%; padding:8px 10px; border-radius:10px;
    background:none; border:none; cursor:pointer; text-align:start; font-family:inherit;
    transition:background-color .2s ease;
  }
  .chat-sidebar-user:hover{ background:color-mix(in srgb, var(--accent) 7%, transparent); }
  .chat-sidebar-user-name{ font-size:13.5px; font-weight:600; color:var(--ink); }
  .chat-sidebar-user-company{ font-size:11.5px; color:var(--ink-faint); }
  .chat-sidebar-footer .lang-switch{ padding:2px 10px; }

  .settings-form{ display:flex; flex-direction:column; gap:14px; }
  .settings-field label{ display:block; font-size:12.5px; color:var(--ink-soft); margin-bottom:6px; }
  .settings-field input{ width:100%; padding:11px 13px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font-size:13.5px; font-family:inherit; border-radius:8px; }
  .settings-field input:focus{ outline:1px solid var(--accent); }
  .settings-logout{
    background:none; border:none; padding:0; margin-top:2px;
    font-family:inherit; font-size:12.5px; color:var(--ink-faint);
    cursor:pointer; text-align:start; text-decoration:underline; text-underline-offset:2px;
  }
  .settings-logout:hover{ color:var(--ink); }

  @media (max-width:760px){
    .chat-shell{ flex-direction:column; }
    .chat-sidebar{
      width:100%; height:auto; max-height:56px; overflow:hidden;
      border-inline-end:none; border-bottom:1px solid var(--line);
      transition:max-height .25s ease;
    }
    .chat-sidebar.open{ max-height:70vh; overflow-y:auto; }
    .chat-menu-btn{ display:flex; }
  }

  .chat-app{ display:flex; flex-direction:column; min-width:0; flex:1; height:100%; }
  .chat-app-header{
    display:flex; align-items:center; gap:14px;
    padding:16px 28px; border-bottom:1px solid var(--line);
    flex-shrink:0;
  }
  .chat-app-header .brand-mark{ width:22px; height:22px; color:var(--accent); flex-shrink:0; }
  .chat-app-header .brand-mark svg{ width:100%; height:100%; }
  .chat-app-title{ display:flex; flex-direction:column; gap:2px; }
  .chat-app-title strong{ font-size:14.5px; font-weight:600; }
  .chat-app-title span{ font-size:12px; color:var(--ink-faint); }
  .chat-app-header .lang-switch{ margin-inline-start:auto; }
  .chat-app-messages{
    flex:1; overflow-y:auto;
    padding:32px 28px;
    display:flex; flex-direction:column; gap:16px;
  }
  .chat-app-messages .bubble{ max-width:68%; font-size:14.5px; padding:13px 18px; }
  .chat-app-input-row{
    display:flex; gap:10px;
    padding:18px 28px calc(18px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);
    flex-shrink:0;
    background:var(--bg);
  }
  .chat-app-input-row input{
    flex:1; padding:14px 18px; border:1px solid var(--line);
    background:var(--surface); color:var(--ink);
    font-size:14.5px; font-family:inherit; border-radius:10px; outline:none;
  }
  .chat-app-input-row input:focus{ border-color:var(--accent); }
  .chat-app-input-row button{
    padding:0 26px; background:var(--accent); color:var(--accent-contrast);
    border:none; border-radius:10px; font-weight:600; font-size:14px;
    font-family:inherit; cursor:pointer; transition:background .2s ease;
  }
  .chat-app-input-row button:hover:not(:disabled){ background:var(--accent-strong); }
  .chat-app-input-row button:disabled{ opacity:.5; cursor:default; }

  @media (max-width:760px){
    .chat-app-header{ padding:14px 18px; }
    .chat-app-messages{ padding:22px 18px; }
    .chat-app-messages .bubble{ max-width:85%; }
    .chat-app-input-row{ padding:14px 18px calc(14px + env(safe-area-inset-bottom)); }
  }