/* Home page (chosen 2026-10-10). Loaded only by index.html, after base.css and site.css. */

/* ===== hero, product scene, six jobs base, industries grade ===== */
/* ---------- hero */
.v2-hero{padding:clamp(56px,7vw,104px) 0 clamp(40px,5vw,72px)}
.v2-ht{text-align:center;max-width:1000px;margin:0 auto}
.v2-h{margin:20px 0 0;font-weight:500;font-size:clamp(42px,6.3vw,96px);line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.v2-h .l1{display:block}
.v2-h .l2{display:inline-grid;color:#1F6F5E;padding-bottom:.08em}
[data-theme="dark"] .v2-h .l2{color:#7FC4A6}
.v2-h .w{grid-area:1/1;justify-self:center;opacity:0;transform:translateY(.32em);filter:blur(8px);transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease);white-space:nowrap}
.v2-h .w.on{opacity:1;transform:none;filter:none}
.v2-h .w.out{opacity:0;transform:translateY(-.32em);filter:blur(8px)}
.v2-h .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.v2-sub{max-width:54ch;margin:24px auto 0;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--ink-2);text-wrap:balance}
.v2-ctas{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:32px}
.v2-ctas .btn{min-height:50px;padding:0 24px;font-size:15.5px}
.v2-ctas .ia{width:15px;height:15px;transition:transform .35s var(--ease)}
.v2-ctas .btn:hover .ia{transform:translateX(3px)}
[dir="rtl"] .v2-ctas .ia{transform:scaleX(-1)}
[dir="rtl"] .v2-ctas .btn:hover .ia{transform:translateX(-3px) scaleX(-1)}

.v2-plate{position:relative;margin-top:clamp(44px,5.5vw,72px);padding:clamp(14px,3.8vw,52px);border-radius:var(--r-plate);overflow:hidden;isolation:isolate;background:#0D3B3B}
.v2-plate>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;animation:v2Art 2.2s var(--ease) both}
@keyframes v2Art{from{transform:scale(1.08);opacity:.6}to{transform:none;opacity:1}}
.v2-cap{margin:14px 0 0;text-align:center;font-size:13px;color:var(--ink-3)}

/* ---------- the product scene: a light product window in every theme */
.v2-app{--paper:#F7F5F0;--sand:#EEEAE1;--card:#FFFFFF;--ink:#14231F;--ink-2:#4A5C55;--ink-3:#7D8A84;--line:rgba(20,35,31,.09);--line-2:rgba(20,35,31,.16);
  color-scheme:light;position:relative;max-width:1180px;margin:0 auto;border-radius:16px;overflow:hidden;background:var(--card);color:var(--ink);
  font-size:13.5px;line-height:1.4;box-shadow:0 60px 120px -50px rgba(2,18,14,.75),0 0 0 1px rgba(255,255,255,.28);animation:v2Win 1.1s var(--ease) .15s both;text-align:start}
@keyframes v2Win{from{opacity:0;transform:translateY(28px) scale(.985)}to{opacity:1;transform:none}}
.v2-bar{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;background:#EAF0EC;border-bottom:1px solid var(--line)}
.v2-bar i{width:10px;height:10px;border-radius:50%;background:rgba(20,35,31,.16)}
.v2-bar span{margin-inline:auto;transform:translateX(-24px);font:500 11.5px var(--f-mono);color:var(--ink-3)}
[dir="rtl"] .v2-bar span{transform:translateX(24px)}
.v2-ui{display:grid;grid-template-columns:184px 288px minmax(0,1fr) 244px;grid-template-rows:54px minmax(0,1fr);
  grid-template-areas:"side top top top" "side list th det";height:578px}
.v2-app svg{fill:currentColor}

.v2-side{grid-area:side;display:flex;flex-direction:column;gap:2px;padding:16px 12px;background:#0D3B3B;color:#C3D6CC}
.v2-logo{display:flex;align-items:center;gap:9px;padding:2px 8px 18px;color:#fff;font-weight:600;font-size:13px;letter-spacing:.16em}
.v2-logo img{width:18px;height:18px}
.v2-nav{display:flex;flex-direction:column;gap:2px}
.v2-nav span{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;font-size:13px}
.v2-nav svg{width:16px;height:16px;flex:none;opacity:.8}
.v2-nav .on{background:rgba(255,255,255,.1);color:#fff}
.v2-nav .on svg{opacity:1}
.v2-nav .bd{margin-inline-start:auto;font:600 10.5px/1 var(--f-mono);font-style:normal;padding:4px 6px;border-radius:999px;background:#D4AF37;color:#14231F}
.v2-ws{margin-top:auto;padding:12px 10px;border-radius:12px;background:rgba(255,255,255,.06)}
.v2-ws b{display:block;color:#fff;font-weight:600;font-size:13px}
.v2-ws span{font-size:12px;color:#9FB8AC}

.v2-top{grid-area:top;display:flex;align-items:center;gap:18px;padding:0 18px;border-bottom:1px solid var(--line);background:#FBFAF7}
.v2-top>b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.v2-kpis{display:flex;gap:8px;margin-inline-start:auto}
.v2-k{display:inline-flex;align-items:baseline;gap:6px;padding:6px 11px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.v2-k b{font-weight:600;font-size:13.5px;color:var(--ink);font-variant-numeric:tabular-nums}

.v2-list{grid-area:list;overflow:hidden;border-inline-end:1px solid var(--line);background:#FBFAF7}
.v2-tabs{display:flex;gap:4px;padding:10px 12px;border-bottom:1px solid var(--line)}
.v2-tabs span{padding:5px 11px;border-radius:999px;font-size:12px;color:var(--ink-2)}
.v2-tabs .on{background:#0D3B3B;color:#fff}
.v2-row{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 12px;border-bottom:1px solid var(--line);transition:background .4s var(--ease)}
.v2-row::before{content:"";position:absolute;inset-block:8px;inset-inline-start:0;width:3px;border-radius:0 3px 3px 0;background:#1F6F5E;opacity:0;transition:opacity .4s var(--ease)}
[dir="rtl"] .v2-row::before{border-radius:3px 0 0 3px}
.av,.av.lg{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-weight:600;font-size:12px;flex:none}
.av.lg{width:52px;height:52px;font-size:16px}
.v2-row .cm{position:absolute;top:33px;inset-inline-start:36px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px #FBFAF7}
.v2-row .cm svg{width:11px;height:11px}
.v2-row .tx{min-width:0}
.v2-row .tx b{display:block;font-weight:600;font-size:13px}
.v2-row .pv{unicode-bidi:plaintext;display:block;margin-top:1px;color:var(--ink-2);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2-row .v2-mt{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.v2-row .tm{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-3)}
.v2-row .tg{font:600 10px/1 var(--f-mono);letter-spacing:.04em;padding:4px 6px;border-radius:6px;background:#E3F1EA;color:#1F5A4A}
.v2-row .tg.me{background:#F1EBDD;color:#6A5420}
.v2-row .ud{display:none;width:7px;height:7px;border-radius:50%;background:#1F6F5E}

.v2-th{grid-area:th;display:flex;flex-direction:column;min-width:0;min-height:0}
.v2-thh{display:flex;align-items:center;gap:10px;height:58px;padding:0 16px;border-bottom:1px solid var(--line)}
.v2-thh .tx b{display:block;font-weight:600;font-size:14px}
.ch{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-3)}
.ch svg{width:12px;height:12px}
.v2-live{display:inline-flex;align-items:center;gap:7px;margin-inline-start:auto;padding:6px 10px;border-radius:999px;background:#E3F1EA;color:#1F5A4A;font-size:12px;font-weight:500;white-space:nowrap}
.v2-live i{width:7px;height:7px;border-radius:50%;background:#2E9E6B;box-shadow:0 0 0 0 rgba(46,158,107,.5);animation:v2Pulse 1.8s infinite}
@keyframes v2Pulse{70%{box-shadow:0 0 0 7px rgba(46,158,107,0)}100%{box-shadow:0 0 0 0 rgba(46,158,107,0)}}
.v2-tb{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:9px;padding:16px 18px;overflow:hidden;background:#F3F6F4;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40px);mask-image:linear-gradient(180deg,transparent 0,#000 40px)}
.v2-tb .jx-b{font-size:14px;max-width:82%;padding:10px 13px;border-radius:16px}
.v2-tb .jx-b.in{background:#fff;box-shadow:0 1px 0 rgba(20,35,31,.05),inset 0 0 0 1px var(--line)}
.v2-tb .jx-ok{font-size:12.5px;margin-top:2px;align-self:flex-end}
.v2-tb .jx-vn{background:#fff}
.v2-tb .jx-tr{font-size:14.5px;color:var(--ink-2)}
.v2-ord{align-self:flex-end;width:min(300px,84%);padding:12px 14px;border-radius:16px;background:#fff;box-shadow:0 1px 0 rgba(20,35,31,.05),inset 0 0 0 1px var(--line)}
.v2-ord p{margin:8px 0 0;font-size:13.5px}
.v2-typ{display:none;align-self:flex-end;gap:4px;padding:11px 13px;border-radius:16px;background:#0D3B3B}
.v2-typ i{width:6px;height:6px;border-radius:50%;background:#CFE3DA;animation:v2Dot 1s infinite}
.v2-typ i:nth-child(2){animation-delay:.15s}.v2-typ i:nth-child(3){animation-delay:.3s}
@keyframes v2Dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
.v2-comp{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--line)}
.v2-comp span:first-child{flex:1;padding:9px 13px;border-radius:999px;background:#F3F6F4;color:var(--ink-3);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2-comp .snd{width:32px;height:32px;border-radius:50%;background:#0D3B3B;flex:none;position:relative}
.v2-comp .snd::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;border-block:5px solid transparent;border-inline-start:8px solid #fff;transform:translateX(1px)}

.v2-det{grid-area:det;padding:16px;border-inline-start:1px solid var(--line);background:#FBFAF7;overflow:hidden}
.v2-dh{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0 16px;border-bottom:1px solid var(--line);text-align:center}
.v2-dh b{font-weight:600;font-size:14px}
.v2-dl{display:block;margin-top:14px;font:500 10.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.v2-det dl{display:grid;gap:11px;margin:12px 0 0}
.v2-det dl div{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px}
.v2-det dt{color:var(--ink-3)}
.v2-det dd{margin:0;font-weight:500;text-align:end}
.v2-stg{font-style:normal;padding:3px 9px;border-radius:999px;background:var(--sand);font-size:12px}
.v2-stg.won{background:#DCEFE6;color:#0D3B3B}
.v2-stg.itr{background:#F4ECD3;color:#6A5420}

/* which conversation is open, and what has finished */
.v2-app[data-s="0"] [data-k="1"],.v2-app[data-s="1"] [data-k="0"]{display:none}
.v2-app[data-s="0"] .v2-row[data-r="0"],.v2-app[data-s="1"] .v2-row[data-r="1"]{background:#EAF3EE}
.v2-app[data-s="0"] .v2-row[data-r="0"]::before,.v2-app[data-s="1"] .v2-row[data-r="1"]::before{opacity:1}
.v2-app:not(.d0) .v2-row[data-r="0"] .ud,.v2-app.n1:not(.d1) .v2-row[data-r="1"] .ud{display:inline-block}
.sw .b{display:none}
.v2-app.d0 .sw.s0 .a,.v2-app.n1 .sw.sn1 .a,.v2-app.d1 .sw.s1 .a{display:none}
.v2-app.d0 .sw.s0 .b,.v2-app.n1 .sw.sn1 .b,.v2-app.d1 .sw.s1 .b{display:inline}
.v2-app.js .v2-tb [data-i]:not(.v2-on){display:none}
.v2-tb [data-i].v2-on{animation:v2In .55s var(--ease) both}
@keyframes v2In{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.v2-app.js .v2-th.typing .v2-typ{display:inline-flex}

/* ---------- six jobs on calm paper: flat tones instead of map lines */
.v2j .jt .jt-art{background:#EDF2EE}
.v2j .jt:nth-child(even) .jt-art{background:#F2EEE6}
[data-theme="dark"] .v2j .jt .jt-art,[data-theme="dark"] .v2j .jt:nth-child(even) .jt-art{background:#14221D}
.v2-tg{margin-inline-start:10px;padding-inline-start:10px;border-inline-start:1px solid var(--line-2);color:var(--ink-3)}
.v2-also{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:12px 40px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.v2-also ul{display:grid;grid-template-columns:repeat(3,minmax(0,max-content));gap:12px 44px;margin:0;padding:0;list-style:none}
.v2-also li{position:relative;padding-inline-start:16px;font-size:15px;color:var(--ink-2)}
.v2-also li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:5px;height:5px;border-radius:50%;background:#7FC4A6}
.v2-also a{transition:color .2s}
.v2-also a:hover{color:var(--ink)}

/* ---------- industries: one colour grade over every photo */
.v2i .in-art img{filter:saturate(.7) contrast(1.06) brightness(.98) sepia(.14)}
.v2i .in-art::after{background:linear-gradient(180deg,rgba(13,59,59,.06),rgba(13,59,59,.34));mix-blend-mode:multiply}
.v2-for{display:flex;align-items:baseline;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}
.v2-for p{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 0;margin:0;font-size:15px;color:var(--ink-2)}
.v2-for .eyebrow{margin-inline-end:20px}
.v2-for p a+a::before{content:"";display:inline-block;width:1px;height:13px;margin:0 14px;background:var(--line-2);vertical-align:-1px}
.v2-for a{transition:color .2s}
.v2-for a:hover{color:var(--ink)}
.v2-cred{font-size:13px;color:var(--ink-3)}

/* ---------- inside Yusr: product screens a touch crisper */
.v2s .shot img{filter:contrast(1.05) saturate(1.06)}

/* ---------- smaller screens: the scene keeps what matters most */
@media (max-width:1180px){
  .v2-also ul{grid-template-columns:repeat(2,minmax(0,max-content))}
  .v2-ui{grid-template-columns:176px 272px minmax(0,1fr);grid-template-areas:"side top top" "side list th"}
  .v2-app .v2-det{display:none!important}
}
@media (max-width:900px){
  .v2-ui{grid-template-columns:250px minmax(0,1fr);grid-template-areas:"top top" "list th";height:540px}
  .v2-side{display:none}
  .v2-k:nth-child(3){display:none}
}
@media (max-width:640px){
  .v2-ui{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "th";grid-template-rows:48px minmax(0,1fr);height:500px}
  .v2-list{display:none}
  .v2-top{padding:0 12px;gap:10px}
  .v2-top>b{font-size:14px}
  .v2-k{padding:5px 9px;font-size:11.5px}
  .v2-k:nth-child(2),.v2-k:nth-child(3){display:none}
  .v2-thh{height:54px;padding:0 12px}
  .v2-live{padding:5px 8px;font-size:11.5px}
  .v2-tb{padding:12px}
  .v2-tb .jx-b{max-width:88%;font-size:13.5px}
  .v2-bar{height:30px}
  .v2-app{border-radius:12px}
  .v2-plate{border-radius:22px}
  .v2-also li,.v2-for p{font-size:14px}
  .v2-also{grid-template-columns:minmax(0,1fr)}
  .v2-also ul{grid-template-columns:minmax(0,1fr);gap:10px}
  .v2-for p{flex-direction:column;align-items:flex-start;gap:8px}
  .v2-for p a+a::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  .v2-plate>img,.v2-app,.v2-tb [data-i].v2-on{animation:none}
  .v2-h .w{transition:none}
  .v2-live i,.v2-typ i{animation:none}
}

/* ===== message ribbon, serif accents, teal panel, background curves ===== */
/* ---------- the message ribbon */
.v4h{padding-bottom:clamp(40px,5vw,72px)}
.v4h .v2-plate{margin-top:0}
.v4-rib{position:relative;height:clamp(150px,14vw,210px);margin-top:clamp(2px,1vw,10px)}
.v4-svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.v4-svg text{font-family:var(--f-sans);font-weight:500}
.v4-in{fill:var(--ink-3)}
.v4-out{fill:#F4F1EB}
.v4-band{fill:none;stroke:#0D3B3B;stroke-linecap:round}
[data-theme="dark"] .v4-band{stroke:#1F6F5E}
.v4-pill{position:absolute;z-index:2;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;height:54px;padding:0 20px 0 17px;border-radius:999px;background:#0D3B3B;
  box-shadow:0 0 0 7px var(--paper),0 22px 44px -18px rgba(13,59,59,.7)}
[data-theme="dark"] .v4-pill{background:#1F6F5E}
.v4-pill img{width:21px;height:21px;margin-inline-end:5px}
.v4-pill i{width:6px;height:6px;border-radius:50%;background:#CFE3DA;animation:v4Dot 1.2s infinite}
.v4-pill i:nth-of-type(2){animation-delay:.15s}
.v4-pill i:nth-of-type(3){animation-delay:.3s}
@keyframes v4Dot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}

/* ---------- serif italic accents (English); Arabic keeps its own type and gets colour instead */
.v4h .v2-h .l2{font-family:"Instrument Serif",ui-serif,Georgia,serif;font-style:italic;font-weight:400;font-size:1.12em;letter-spacing:-.02em;line-height:.98}
main h2 em{font-family:"Instrument Serif",ui-serif,Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em}
[dir="rtl"] .v4h .v2-h .l2{font-family:inherit;font-style:normal;font-weight:500;font-size:1em;line-height:inherit}
[dir="rtl"] main h2 em{font-family:inherit;font-style:normal;font-weight:inherit;color:#1F6F5E}
[dir="rtl"] .cta h2 em,[dir="rtl"] .v4-dark h2 em{color:#7FC4A6}
[data-theme="dark"][dir="rtl"] main h2 em{color:#7FC4A6}

/* ---------- one deep-teal panel: the industries */
.v4-dark{margin:clamp(40px,5vw,72px) clamp(8px,1.2vw,16px) 0;border-radius:clamp(28px,3.4vw,48px);background:#0D3B3B;color:#EAF0EA}
[data-theme="dark"] .v4-dark{background:#0B2622}
.v4-dark .inds{padding-block:clamp(64px,8vw,112px)}
.v4-dark .eyebrow{color:#9FB8AC}
.v4-dark h2{color:#F4F1EB}
.v4-dark .in-tabs{background:rgba(255,255,255,.07)}
.v4-dark .in-tab{color:#B6C9BF}
.v4-dark .in-tab:hover{color:#fff}
.v4-dark .in-tab.on{background:#F4F1EB;color:#14231F;box-shadow:none}
.v4-dark .in-panel{box-shadow:none}
.v4-dark .in-tx{color:var(--ink)}
.v4-dark .in-tx .eyebrow{color:var(--ink-3)}
.v4-dark .v2-for{border-top-color:rgba(255,255,255,.12)}
.v4-dark .v2-for p,.v4-dark .v2-for a{color:#C9D8D0}
.v4-dark .v2-for a:hover{color:#fff}
.v4-dark .v2-for p a+a::before{background:rgba(255,255,255,.22)}
.v4-dark .v2-cred{color:#86A094}
.v4-dark+.wk{padding-top:clamp(72px,9vw,120px)}

/* ---------- soft background curves */
.v4s{position:relative;isolation:isolate;overflow:hidden}
.v4-sw{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.v4-sw path{fill:none;stroke:#EEE9DD;stroke-width:150;stroke-linecap:round}
[data-theme="dark"] .v4-sw path{stroke:rgba(127,196,166,.05)}

@media (max-width:640px){
  .v4-rib{height:132px}
  .v4-pill{height:42px;padding:0 15px 0 13px;box-shadow:0 0 0 5px var(--paper),0 16px 32px -14px rgba(13,59,59,.7)}
  .v4-pill img{width:17px;height:17px}
  .v4-sw path{stroke-width:110}
}
@media (prefers-reduced-motion:reduce){.v4-pill i{animation:none;opacity:.8}}

/* ===== bento jobs, live messages card, phone layout ===== */
.v5-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"msg msg ord" "msg msg book" "cmt mail voice";gap:20px;margin-top:48px}
.v5-grid .t-msg{grid-area:msg}.v5-grid .t-ord{grid-area:ord}.v5-grid .t-book{grid-area:book}
.v5-grid .t-cmt{grid-area:cmt}.v5-grid .t-mail{grid-area:mail}.v5-grid .t-voice{grid-area:voice}

/* small cards: calm flat tones, the result card centred with less empty space */
.v5-grid .jt-art{aspect-ratio:auto;flex:1;min-height:260px;padding:30px 0;background:#EDF2EE}
.v5-grid .t-ord .jt-art,.v5-grid .t-mail .jt-art{background:#F2EEE6}
.v5-grid .jx{width:84%}
[data-theme="dark"] .v5-grid .jt-art{background:#14221D}

/* voice notes on deep teal */
.v5-grid .t-voice{background:#0D3B3B;box-shadow:none}
.v5-grid .t-voice .jt-art{background:radial-gradient(120% 90% at 50% 0%,#15504C 0%,#0D3B3B 70%)}
.v5-grid .t-voice .jt-l{color:#9FB8AC}
.v5-grid .t-voice .jt-tx h3{color:#F4F1EB}
.v5-grid .t-voice .jt-tx p{color:#B6C9BF}
.v5-grid .t-voice .jx{box-shadow:0 34px 70px -34px rgba(0,0,0,.6)}
[data-theme="dark"] .v5-grid .t-voice{background:#0B2622}
[data-theme="dark"] .v5-grid .t-voice .jt-art{background:radial-gradient(120% 90% at 50% 0%,#123F3B 0%,#0B2622 70%)}

/* the big live card */
.v5-big{display:flex;flex-direction:column}
.v5-head{padding:30px 32px 0}
.v5-head .jt-l{display:block}
.v5-head h3{margin:10px 0 0;font-size:clamp(26px,2.5vw,36px);font-weight:500;letter-spacing:-.03em;line-height:1.1}
.v5-head p{margin:8px 0 0;color:var(--ink-2);font-size:16px}
.v5-feed{position:relative;flex:1;display:flex;flex-direction:column;min-height:420px;margin:24px;border-radius:18px;overflow:hidden;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.v5-fh{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:500;color:var(--ink-2);background:var(--card)}
.v5-fh>i{width:7px;height:7px;border-radius:50%;background:#2E9E6B;box-shadow:0 0 0 0 rgba(46,158,107,.5);animation:v2Pulse 1.8s infinite}
.v5-chs{display:flex;gap:7px;margin-inline-start:auto}
.v5-chs svg{width:15px;height:15px;fill:currentColor}
.v5-list{flex:1;display:flex;flex-direction:column;padding:4px 12px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
.v5-row{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;padding:13px 6px;border-bottom:1px solid var(--line);overflow:hidden}
.v5-row .av{width:38px;height:38px}
.v5-row .cm{position:absolute;top:41px;inset-inline-start:30px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px var(--paper)}
.v5-row .cm svg{width:11px;height:11px;fill:currentColor}
.v5-tx{min-width:0}
.v5-top{display:flex;align-items:baseline;gap:8px}
.v5-top b{font-weight:600;font-size:13.5px}
.v5-top .ch{font-size:12px;color:var(--ink-3)}
.v5-top .tm{margin-inline-start:auto;font-size:11.5px;color:var(--ink-3)}
.v5-q{margin:3px 0 0;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v5-a{display:flex;align-items:flex-start;gap:7px;margin:6px 0 0;font-size:13.5px;color:#1F5A4A}
.v5-a span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-theme="dark"] .v5-a{color:#7FC4A6}
.v5-a .ok{flex:none;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#DCEFE6}
.v5-a .ok svg{width:11px;height:11px;fill:#1F6F5E}
.v5-t{display:none;align-items:center;gap:4px;margin:7px 0 0;font-size:12.5px;color:var(--ink-3)}
.v5-t i{width:5px;height:5px;border-radius:50%;background:var(--ink-3);animation:v2Dot 1s infinite}
.v5-t i:nth-child(2){animation-delay:.15s}.v5-t i:nth-child(3){animation-delay:.3s;margin-inline-end:6px}
.v5-row.typing .v5-a{display:none}
.v5-row.typing .v5-t{display:flex}
.v5-row.new{animation:v5In .75s var(--ease) both}
@keyframes v5In{from{max-height:0;opacity:0;padding-block:0}to{max-height:140px;opacity:1}}
.v5-row.got{animation:v5Got 1.6s var(--ease)}
@keyframes v5Got{from{background:rgba(127,196,166,.22)}to{background:transparent}}

@media (max-width:1000px){
  .v5-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"msg msg" "ord book" "cmt mail" "voice voice"}
}
@media (max-width:640px){
  .v5-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"msg" "ord" "book" "cmt" "mail" "voice";gap:16px}
  .v5-head{padding:24px 22px 0}
  .v5-feed{margin:18px 14px 14px;min-height:380px}
  .v5-q{font-size:14px}
  .v5-grid .jt-art{min-height:230px}
}
@media (prefers-reduced-motion:reduce){.v5-row.new,.v5-row.got{animation:none}.v5-fh>i,.v5-t i{animation:none}}

/* ===== phones: the page is as short as on a laptop (2026-10-10) =====
   swipe rows instead of tall stacks, tighter spacing, the five main questions, a compact footer */
.v5-small{display:contents}
.v5-dots,.v5-faqmore{display:none}
@media (max-width:640px){
  /* hero */
  .v2-hero{padding-top:28px}
  .v4h{padding-bottom:20px}
  .v2-h{margin-top:14px}
  .v2-sub{margin-top:14px;font-size:16.5px}
  .v2-ctas{margin-top:22px}
  .v4-rib{height:108px}
  .v2-ui{height:430px}
  .v2-cap{margin-top:8px;font-size:12px}

  /* six jobs: a compact live card, then the other five as a swipe row */
  .v5j{padding:40px 0 20px}
  .v5j .shc-head h2{font-size:34px}
  .v5-grid{display:flex;flex-direction:column;gap:14px;margin-top:22px}
  .v5-head{padding:20px 20px 0}
  .v5-head h3{font-size:24px}
  .v5-head p{font-size:14.5px}
  .v5-feed{height:292px;min-height:0;margin:14px 12px 12px}
  .v5-row{padding:11px 4px}
  .v5-small{display:flex;gap:12px;margin-inline:calc(var(--gut) * -1);padding:2px var(--gut) 4px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none}
  .v5-small::-webkit-scrollbar{display:none}
  .v5-small::after{content:"";flex:0 0 1px}
  .v5-small>.jt{flex:0 0 82%;scroll-snap-align:start}
  .v5-small .jt-art{min-height:0;padding:20px 0}
  .v5-small .jx{width:90%}
  .v5-small .jt-tx{padding:14px 18px 18px}
  .v5-small .jt-tx h3{font-size:18px}
  .v5-small .jt-tx p{font-size:14px}
  .v5j .v2-also{margin-top:20px;padding-top:16px;gap:10px}
  .v5j .v2-also ul{grid-template-columns:1fr 1fr;gap:8px 14px}
  .v5j .v2-also li{font-size:13.5px}

  /* small dots under each swipe row */
  .v5-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
  .v5-dots i{width:6px;height:6px;border-radius:999px;background:var(--line-2);transition:width .3s var(--ease),background .3s var(--ease)}
  .v5-dots i.on{width:18px;background:#1F6F5E}

  /* inside Yusr: the three cards side by side */
  .hs-head{padding-top:36px}
  .hs-head p{display:none}
  .hstack{flex-direction:row;gap:12px;margin-top:18px;padding-bottom:4px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none}
  .hstack::-webkit-scrollbar{display:none}
  .hstack::after{content:"";flex:0 0 1px}
  .hstack .sc{flex:0 0 86%;scroll-snap-align:start;box-shadow:none}
  .hstack .txt{padding:24px 20px 4px}
  .hstack .txt h2{font-size:24px;line-height:1.15}
  .hstack .txt p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px}
  .hstack .txt .btn{min-height:40px;margin-top:14px}
  .hstack .shot{height:170px;margin:12px 14px 16px;overflow:hidden;border-radius:12px}
  .hstack .shot img{width:100%;height:100%;object-fit:cover;object-position:left top}

  /* industries: the photo, the headline, two lines and the link */
  .v4-dark{margin-top:28px;border-radius:26px}
  .v4-dark .inds{padding-block:36px}
  .inds .shc-head h2{font-size:32px}
  .in-tabs{margin-top:18px}
  .in-box{margin-top:12px}
  .in-art{aspect-ratio:16/9}
  .in-tx{padding:18px 20px 20px}
  .in-tx h3{font-size:22px}
  .in-tx p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px}
  .in-tx ul{display:none}
  .v2-for{margin-top:20px;padding-top:14px}
  .v2-for p{flex-direction:row;flex-wrap:wrap;gap:6px 16px}

  /* works with: the three credentials side by side */
  .v4-dark+.wk,.wk{padding-block:44px}
  .wk-head h2{font-size:30px}
  .wk-rows{margin-top:22px}
  .wk-cred{display:flex;gap:10px;margin:20px calc(var(--gut) * -1) 0;padding:2px var(--gut) 4px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none}
  .wk-cred::-webkit-scrollbar{display:none}
  .wk-cred::after{content:"";flex:0 0 1px}
  .wk-c{flex:0 0 80%;padding:16px;scroll-snap-align:start}
  .wk-all{margin-top:16px}

  /* pricing, questions, closing banner */
  .hp-price{padding-block:20px}
  .hp-pb.one{padding:32px 20px}
  .hp-pb.one h2{font-size:30px}
  .faq{padding-block:28px 0}
  .faq-h{font-size:30px}
  .faq-it summary{padding:16px 0;font-size:16.5px}
  .faq-list .faq-it:nth-child(5),.faq-list .faq-it:nth-child(6),.faq-list .faq-it:nth-child(8){display:none}
  .v5-faqmore{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-weight:500;font-size:15px}
  .v5-faqmore .ia{width:15px;height:15px}
  [dir="rtl"] .v5-faqmore .ia{transform:scaleX(-1)}
  #start{margin-top:28px!important}
  .cta{min-height:0;padding:44px 20px}
  .cta h2{font-size:34px}

  /* footer */
  footer{margin-top:36px}
  .fgrid{gap:22px 16px;padding-block:40px 18px}
  .fgrid h4{margin-bottom:8px}
  .fgrid li a{min-height:30px;font-size:14px}
  .fgrid .about p{display:none}
  .contact{margin-top:14px}
  .fgrid>div:nth-child(4) li:nth-child(n+5){display:none}
  .fgrid>div:last-child{grid-column:1/-1}
  .fgrid>div:last-child ul{display:flex;flex-wrap:wrap;gap:0 18px}
  .ftrust{flex-wrap:nowrap;margin-top:18px;margin-inline:calc(var(--gut) * -1);padding:0 var(--gut) 6px;overflow-x:auto;scrollbar-width:none}
  .ftrust::-webkit-scrollbar{display:none}
  .ftrust .ftb{flex:none}
}