/* Private Zone — shared stylesheet.
   Extracted verbatim from index.html so index.html and every quotation page draw
   from ONE source. Editing a token here restyles both; they cannot drift apart.
   Page-specific components stay in that page's own <style> block. */
  :root{
    --green-900:#0e2019; --green-800:#12291f; --green-700:#16382a; --green-600:#1f4d39; --green-500:#2e6b52;
    --bg:#f3efe4; --surface:#fffdf8; --surface-2:#faf6ec;
    --ink:#1c241e; --ink-2:#464e45; --muted:#61685c;
    --gold:#b98f3e; --gold-soft:#d9c08a; --gold-tint:#f1e7cf;
    --line:#e7ddc8; --line-soft:#efe8d8;
    --z-tip:60;
    --e-out:cubic-bezier(.22,1,.36,1);
    --shadow-1:0 1px 2px rgba(14,32,25,.04), 0 8px 24px -12px rgba(14,32,25,.18);
    --shadow-2:0 2px 6px rgba(14,32,25,.06), 0 24px 48px -20px rgba(14,32,25,.28);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  body{background:var(--bg);color:var(--ink);
    font-family:"Readex Pro",system-ui,-apple-system,"Segoe UI","Tahoma",Arial,sans-serif;
    font-weight:400;line-height:1.5;font-variant-numeric:lining-nums tabular-nums;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  em{font-style:normal}

  /* ─── HERO ─── */
  .hero{position:relative;overflow:hidden;color:#f4efe4;
    padding:clamp(34px,6vw,64px) clamp(22px,5vw,60px) clamp(30px,4vw,44px);
    background:
      radial-gradient(115% 90% at 82% -12%, rgba(46,107,82,.55) 0%, rgba(46,107,82,0) 52%),
      radial-gradient(90% 120% at 12% 128%, rgba(9,22,16,.9) 0%, rgba(9,22,16,0) 48%),
      linear-gradient(158deg,#143024 0%,#0e2019 68%);
    border-bottom:1px solid rgba(185,143,62,.28)}
  .hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E")}
  .hero > *{position:relative}
  .toggle{position:absolute;top:clamp(20px,3vw,30px);inset-inline-end:clamp(20px,4vw,44px);
    background:rgba(244,239,228,.08);border:1px solid rgba(217,192,138,.42);color:#f4efe4;
    padding:9px 18px;border-radius:100px;cursor:pointer;font-family:inherit;font-size:.86rem;
    font-weight:500;transition:background .2s var(--e-out),border-color .2s}
  .toggle:hover{background:rgba(244,239,228,.16);border-color:var(--gold-soft)}
  .toggle:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}
  .tagline{margin-top:.7em;font-size:clamp(1.02rem,2.2vw,1.28rem);font-weight:300;
    max-width:40ch;color:rgba(244,239,228,.9);text-wrap:balance}
  .loc{margin-top:.9em;font-size:.9rem;font-weight:300;color:rgba(244,239,228,.66);
    display:flex;align-items:center;gap:.5em}
  .loc svg{width:14px;height:14px;flex:none;opacity:.8}
  .credentials{margin-top:clamp(20px,3vw,30px);display:flex;flex-wrap:wrap;
    gap:clamp(16px,3vw,30px);align-items:center}
  .cred{display:flex;align-items:baseline;gap:.5em}
  .cred b{font-size:1.15rem;font-weight:600;color:var(--gold-soft)}
  .cred span{font-size:.82rem;font-weight:300;color:rgba(244,239,228,.72)}
  .cred + .cred{padding-inline-start:clamp(16px,3vw,30px);
    border-inline-start:1px solid rgba(217,192,138,.28)}
  .hero-inner{max-width:1180px}
  .hero-brand{display:flex;justify-content:flex-start;margin-bottom:clamp(16px,2.6vw,26px)}
  .wsl-logo{display:block;width:auto;color:#ece3cf}
  .hero-logo{height:clamp(104px,13vw,148px)}
  @media (max-width:840px){ .hero-logo{height:80px} }

  /* ─── STAGE ─── */
  .stage{display:grid;grid-template-columns:1fr minmax(300px,340px);gap:clamp(16px,2.5vw,26px);
    max-width:1220px;margin:clamp(20px,3vw,32px) auto;padding:0 clamp(16px,4vw,32px)}
  .mapwrap{position:relative;background:var(--surface);border:1px solid var(--line);
    border-radius:20px;padding:clamp(16px,2.4vw,26px);box-shadow:var(--shadow-1);min-width:0}
  .mapcap{display:flex;align-items:center;gap:.6em;color:var(--muted);font-size:.9rem;
    font-weight:400;margin-bottom:14px}
  .mapcap b{color:var(--green-700);font-weight:600}
  .mapcap i{width:6px;height:6px;border-radius:50%;background:var(--gold);display:inline-block;flex:none}
  .floor-badge{position:absolute;top:calc(clamp(16px,2.4vw,26px) + 2px);
    inset-inline-end:calc(clamp(16px,2.4vw,26px) + 2px);
    background:var(--green-700);color:var(--gold-soft);font-size:.72rem;font-weight:500;
    padding:5px 12px;border-radius:100px}
  svg.plan{width:100%;height:auto;display:block;margin-top:6px}
  .legend{display:flex;gap:20px;align-items:center;margin-top:16px;flex-wrap:wrap;
    font-size:.83rem;color:var(--muted)}
  .legend > span{display:inline-flex;align-items:center}
  .lg{width:13px;height:13px;border-radius:4px;display:inline-block;margin-inline-end:7px}
  .lg.av{background:#e8efe6;border:1.5px solid var(--green-500)}
  .lg.tk{background:#ece4d4;border:1.5px solid #ddd3bd}

  /* ─── PANEL ─── */
  .panel{background:var(--surface);border:1px solid var(--line);border-radius:20px;
    padding:clamp(20px,2.4vw,28px);position:sticky;top:18px;align-self:start;min-height:300px;
    box-shadow:var(--shadow-1)}
  .empty{display:flex;flex-direction:column;gap:16px;padding-top:22px;color:var(--muted)}
  .empty svg{width:38px;height:38px;color:var(--gold);opacity:.85}
  .empty p{font-size:1.02rem;line-height:1.6;font-weight:300;max-width:26ch}
  .detail{animation:fadeUp .4s var(--e-out) both}
  .pnum{font-size:2.6rem;font-weight:600;color:var(--green-700);line-height:1}
  .ptype{font-size:.82rem;font-weight:400;color:var(--muted);margin-top:6px}
  .prow{display:flex;justify-content:space-between;align-items:baseline;
    margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line-soft);color:var(--muted);font-size:.9rem}
  .prow b{color:var(--ink);font-size:1rem;font-weight:500}
  .pprice{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft)}
  /* yearly figures are up to 7 chars ('108,000'), vs 5 for the old monthly ones —
     wrap so the unit drops to its own line on a narrow panel instead of overflowing */
  .pprice .amt{font-size:2.1rem;font-weight:600;color:var(--green-700);line-height:1;
    display:flex;align-items:baseline;gap:.3em;flex-wrap:wrap}
  .pprice .amt u{text-decoration:none;color:var(--gold);font-size:.9rem;font-weight:500}
  .psub{color:var(--muted);font-size:.82rem;margin-top:8px;font-weight:300}
  .pterms{margin-top:14px;display:flex;flex-direction:column;gap:6px}
  .pterms span{display:flex;align-items:flex-start;gap:.5em;color:var(--muted);
    font-size:.83rem;line-height:1.55;font-weight:300}
  .pterms svg{width:13px;height:13px;flex:none;margin-top:3px;color:var(--gold)}
  .plink{display:inline-flex;align-items:center;gap:.4em;margin-top:18px;color:var(--green-600);
    font-size:.85rem;font-weight:500;text-decoration:none;border-bottom:1px solid var(--gold-soft);
    padding-bottom:2px;transition:color .2s var(--e-out)}
  .plink:hover{color:var(--green-700);border-color:var(--gold)}
  .plink:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
  .plink svg{width:13px;height:13px;flex:none}
  /* ─── PRIMARY CTA ───
     Gold is reserved: this is the only gold-FILLED surface on the page, so the
     one action reads as the one action. Shared by the panel button, the mobile
     sticky pill and the footer close, which all open the same WhatsApp thread. */
  .cta-gold{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
    background:linear-gradient(140deg,#e9d7ae 0%,#cfad66 48%,#b98f3e 100%);
    color:var(--green-900);text-decoration:none;font-family:inherit;font-weight:600;
    letter-spacing:.012em;border-radius:100px;border:1px solid rgba(255,255,255,.34);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 10px 24px -12px rgba(120,86,20,.72);
    transition:filter .22s var(--e-out),transform .18s var(--e-out),box-shadow .22s var(--e-out)}
  .cta-gold:hover{filter:brightness(1.05);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.58), 0 16px 30px -14px rgba(120,86,20,.85)}
  .cta-gold:active{transform:scale(.985)}
  .cta-gold:focus-visible{outline:2px solid var(--green-700);outline-offset:3px}
  .cta-gold svg{flex:none}

  /* shown the moment an office is picked — on desktop the sticky .mcall is
     hidden, so without this the only way to enquire is the footer */
  .papply{display:flex;width:100%;margin-top:18px;padding:14px 22px;font-size:.98rem}
  .papply svg{width:18px;height:18px}
  .pwasub{margin-top:9px;text-align:center;font-size:.76rem;font-weight:300;color:var(--muted)}
  .pmeta{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
  .pm{flex:1;min-width:118px;background:var(--surface-2);border:1px solid var(--line-soft);
    border-radius:12px;padding:12px 14px}
  .pm span{display:block;font-size:.72rem;color:var(--muted);margin-bottom:3px;font-weight:300}
  .pm b{color:var(--green-700);font-size:1.02rem;font-weight:500}
  .pnote{margin-top:18px;background:var(--gold-tint);border:1px solid var(--gold-soft);
    border-radius:12px;padding:12px 14px;font-size:.84rem;color:#6b551f;line-height:1.55;
    display:flex;gap:.6em}
  .pnote svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--gold)}

  /* ─── OFFERINGS ─── */
  .offer{max-width:1220px;margin:6px auto clamp(28px,4vw,40px);padding:0 clamp(16px,4vw,32px)}
  .offer-inner{background:var(--surface);border:1px solid var(--line);border-radius:20px;
    overflow:hidden;box-shadow:var(--shadow-1)}
  .offer-cell{padding:clamp(22px,3vw,32px)}
  .offer-cell h3{color:var(--green-700);font-size:1.22rem;font-weight:600;margin-bottom:4px}
  .offer-cell .price{font-size:.9rem;color:var(--gold);font-weight:500;margin-bottom:6px}
  .offer-min{font-size:.78rem;color:var(--muted);font-weight:300;margin-bottom:12px}
  .offer-cell p{color:var(--ink-2);font-size:.93rem;line-height:1.65;font-weight:300;max-width:46ch}
  .offer-ico{width:30px;height:30px;color:var(--gold);margin-bottom:12px}

  /* ─── TERMS ─── */
  /* scoped to no-preference so the anchor jump and select()'s scrollIntoView stay
     instant for reduced-motion users — CSS scroll-behavior wins over behavior:'auto' */
  @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
  .terms,.includes{max-width:1220px;margin:0 auto clamp(28px,4vw,40px);
    padding:0 clamp(16px,4vw,32px);scroll-margin-top:16px}
  .includes{margin-bottom:clamp(16px,2vw,22px)}
  .terms-inner,.includes-inner{background:var(--surface);border:1px solid var(--line);
    border-radius:20px;padding:clamp(22px,3vw,32px);box-shadow:var(--shadow-1)}
  .terms-inner h2,.includes-inner h2{color:var(--green-700);font-size:1.15rem;
    font-weight:600;margin-bottom:18px}
  .term-grid{display:grid;grid-template-columns:1fr;gap:14px}
  .term-item{display:flex;align-items:flex-start;gap:.7em}
  .term-item svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--gold)}
  /* single column spans the full 1090px card, so cap the measure — otherwise
     these run ~145 characters per line on a laptop */
  .term-item p{color:var(--ink-2);font-size:.9rem;line-height:1.65;font-weight:300;max-width:72ch}

  .inc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 24px}
  .inc-item{display:flex;align-items:flex-start;gap:.65em}
  .inc-item svg{width:19px;height:19px;flex:none;margin-top:1px;color:var(--gold)}
  .inc-item b{color:var(--ink-2);font-size:.88rem;font-weight:400;line-height:1.5}
  .inc-item span{display:block;font-size:.74rem;color:var(--muted);font-weight:300;margin-top:2px}
  .inc-perk{margin-top:22px;background:var(--gold-tint);border:1px solid var(--gold-soft);
    border-radius:12px;padding:12px 16px;font-size:.86rem;color:#6b551f;line-height:1.55;
    display:flex;gap:.6em;align-items:flex-start}
  .inc-perk svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--gold)}
  @media (max-width:840px){ .inc-grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:420px){ .inc-grid{grid-template-columns:1fr} }

  /* ─── FOOTER ─── */
  .footer{background:var(--green-900);color:#cfe0d5;text-align:center;
    padding:clamp(30px,5vw,44px) 22px;position:relative}
  .footer::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(217,192,138,.5),transparent)}
  .wsl-foot{height:clamp(76px,9vw,98px);margin:0 auto}
  .fcall{margin:16px 0 6px;padding:15px 30px;font-size:1.06rem}
  .fcall svg{width:19px;height:19px}
  /* the page's only gold outline-offset that has to read on dark green */
  .fcall:focus-visible{outline-color:var(--gold-soft)}
  .operator{font-size:.8rem;opacity:.62;font-weight:300;margin-top:4px}

  /* ─── SVG ROOMS ─── */
  /* No letter-spacing here: these labels carry Arabic ('قاعة اجتماعات', 'مشترك') and
     Safari applies tracking BETWEEN cursively-joined letters, snapping the joins apart
     so the word renders as disconnected glyphs. Blink/HarfBuzz doesn't, which is why it
     only ever showed on iOS. The .01em it replaced was ~0.2px — invisible on the Latin
     room numbers, so there is nothing to win back. */
  .room text{pointer-events:none;font-family:inherit;font-weight:500;font-size:23px}
  .room rect{transition:fill .18s var(--e-out),stroke .18s ease}
  .room.office{transition:transform .2s var(--e-out);transform-box:fill-box;transform-origin:center}
  .room.office rect{fill:#e8efe6;stroke:var(--green-500);stroke-width:1.5}
  .room.office text{fill:var(--green-700)}
  .room.office:hover{transform:translateY(-2px)}
  .room.office:hover rect{fill:var(--green-600);stroke:var(--green-700);
    filter:drop-shadow(0 4px 7px rgba(20,60,45,.32))}
  .room.office:hover text{fill:#fff}
  .room.office.sel rect{fill:var(--green-700);stroke:var(--gold);stroke-width:2.5}
  .room.office.sel text{fill:#fff}
  .room.excluded rect{fill:#ece4d4;stroke:#ddd3bd;stroke-width:1}
  .room.excluded text{fill:#a89f8a;font-weight:400;font-size:14px}
  .room:focus{outline:none}
  .room:focus-visible rect{stroke:var(--gold);stroke-width:3}
  .amenity rect{fill:#efe9db;stroke:#dcd3bf;stroke-width:1;stroke-dasharray:5 5}
  .amenity text{fill:#a89f8a;font-size:14px;font-weight:400;pointer-events:none}

  /* ─── ORIENTATION ─── */
  /* On the group, not the text: a stroked path is a click target too, and these sit in
     the gutter where a stray hit would swallow a tap meant for the plan. */
  .orient{pointer-events:none}
  /* Gold carries the rule, --muted carries the type: gold-soft on cream is ~1.9:1 —
     fine for a hairline, unreadable at 11px. */
  .orient path{fill:none;stroke:var(--gold);stroke-width:2}
  .orient text{fill:var(--muted);font-family:inherit;font-size:22px;font-weight:400;
    text-anchor:middle}
  /* Same trap as .room text above: tracking snaps Arabic cursive joins apart in Safari,
     so it is gated to English, where there is nothing to break. */
  html[lang="en"] .orient text{letter-spacing:.09em}

  /* ─── TOOLTIP ─── */
  .tip{position:fixed;z-index:var(--z-tip);pointer-events:none;background:var(--green-800);
    color:#f4efe4;padding:7px 12px;border-radius:10px;font-size:.8rem;font-weight:400;
    box-shadow:var(--shadow-2);white-space:nowrap;transform:translate(-50%,-140%);
    border:1px solid rgba(217,192,138,.3)}
  .tip b{color:var(--gold-soft);font-weight:600}
  .tip[hidden]{display:none}

  /* ─── PHOTO GALLERY ─── */
  .pgallery{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
  .pglabel{font-size:.78rem;color:var(--muted);font-weight:400;margin-bottom:10px}
  .pgstrip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .pgstrip::-webkit-scrollbar{display:none}
  .pgthumb{flex:none;width:64px;height:64px;padding:0;border-radius:10px;overflow:hidden;
    border:1px solid var(--line);background:var(--surface-2);cursor:pointer;scroll-snap-align:start;
    transition:border-color .18s var(--e-out),transform .18s var(--e-out)}
  .pgthumb img{width:100%;height:100%;object-fit:cover;display:block}
  .pgthumb:hover{border-color:var(--gold);transform:translateY(-1px)}
  .pgthumb:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

  /* ─── LIGHTBOX ─── */
  /* background lives on .lbstage, not .lightbox itself: this Chromium build fails to
     paint a background on a position:fixed;inset:0 flex container reliably (confirmed
     via isolated repro), but painting the identical color one level down works. */
  .lightbox{position:fixed;inset:0;z-index:80;
    display:flex;align-items:center;justify-content:center}
  .lightbox[hidden]{display:none}
  .lbstage{width:100%;height:100%;background:rgba(9,22,16,.94);
    display:flex;align-items:center;justify-content:center;padding:56px 72px}
  .lbstage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;
    box-shadow:var(--shadow-2)}
  .lbbtn{position:absolute;display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:100px;background:rgba(244,239,228,.1);
    border:1px solid rgba(217,192,138,.35);color:#f4efe4;cursor:pointer;
    transition:background .18s var(--e-out)}
  .lbbtn:hover{background:rgba(244,239,228,.2)}
  .lbbtn:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
  .lbbtn svg{width:20px;height:20px}
  .lbclose{top:16px;inset-inline-end:16px}
  .lbnav{top:50%;transform:translateY(-50%)}
  .lbprev{left:12px}
  .lbnext{right:12px}
  .lbcount{position:absolute;bottom:18px;inset-inline-start:50%;transform:translateX(-50%);
    color:rgba(244,239,228,.75);font-size:.82rem;font-variant-numeric:tabular-nums;
    direction:ltr}
  @media (max-width:640px){
    .lbstage{padding:16px 8px}
    .lbnav{width:40px;height:40px}
    .lbprev{left:6px} .lbnext{right:6px}
  }

  /* ─── MOTION (transform-only entrances — opacity is never animated, so content
        is always visible even if the animation never advances) ─── */
  @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:no-preference){
    @keyframes rise{from{transform:translateY(16px)}to{transform:none}}
    @keyframes mapIn{from{transform:scale(.99)}to{transform:none}}
    .hero-brand{animation:rise .7s var(--e-out) backwards .1s}
    .tagline{animation:rise .7s var(--e-out) backwards .12s}
    .loc{animation:rise .7s var(--e-out) backwards .18s}
    .credentials{animation:rise .7s var(--e-out) backwards .24s}
    .mapwrap{animation:mapIn .8s var(--e-out) backwards .1s}
    .panel{animation:rise .7s var(--e-out) backwards .2s}
  }

  /* ─── MOBILE CALL CTA (revealed only ≤840, see media query) ─── */
  .mcall{display:none}

  /* ─── RESPONSIVE ─── */
  @media (max-width:840px){
    .stage{grid-template-columns:1fr}
    .panel{position:static}

    /* The 1200-wide plan becomes a pannable map instead of shrinking to
       ~6px labels and ~20px tap targets. min-width keeps text ≈11px and
       office rows ≈40px tall; the scroller contains it so the page itself
       never scrolls sideways. */
    .planwrap{position:relative;margin-top:4px}
    .planscroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
      overscroll-behavior-x:contain;scrollbar-width:none}
    .planscroll::-webkit-scrollbar{display:none}
    /* 640/1280 = 0.500 — the exact scale 600/1200 gave before the viewBox grew, so
       every room label stays the same size on a phone. Mobile pays nothing for the gutter. */
    svg.plan{min-width:640px}
    /* soft edge fades signal the map pans horizontally */
    .planwrap::before,.planwrap::after{content:"";position:absolute;top:0;bottom:8px;
      width:26px;pointer-events:none;z-index:1}
    .planwrap::before{left:0;background:linear-gradient(90deg,var(--surface),rgba(255,253,248,0))}
    .planwrap::after{right:0;background:linear-gradient(270deg,var(--surface),rgba(255,253,248,0))}

    /* ≥44px tap target for the language toggle */
    .toggle{padding:11px 20px}

    /* .floor-badge is absolutely positioned over this row — reserve its width so
       the caption wraps beside the badge instead of running underneath it */
    .mapcap{padding-inline-end:96px}

    /* the 300px floor was sized for the desktop sidebar; stacked on mobile it is
       just dead scroll between the map and the next section */
    .panel{min-height:0}

    /* persistent tap-to-chat — the page's core action, always within thumb reach */
    /* centred with inset+auto margins, NOT left:50%+translateX: a fixed element
       offset to 50% gets only the remaining 50% to lay out in, which wrapped the
       label onto two lines. max-content keeps it one line at any label length. */
    .mcall{display:inline-flex;white-space:nowrap;
      position:fixed;bottom:calc(16px + env(safe-area-inset-bottom));
      inset-inline:0;margin-inline:auto;width:max-content;max-width:calc(100% - 32px);z-index:50;
      padding:14px 28px;font-size:1rem;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 10px 26px -8px rgba(14,32,25,.5)}
    .mcall svg{width:19px;height:19px}
    body{padding-bottom:calc(84px + env(safe-area-inset-bottom))} /* clear the floating pill */
  }

  /* Once the stats wrap, .cred + .cred puts a divider at the START of the new
     row — a rule with nothing before it. Drop the rules, keep them apart on gap. */
  @media (max-width:560px){
    .credentials{gap:10px 22px}
    .cred + .cred{padding-inline-start:0;border-inline-start:0}
  }