/* Device mockups for the client showcase. Everything is HTML and CSS (no screenshots), so it stays sharp at any size and holds no real client data:
   every name, number and message inside is made up. Each device is its own size container, and all text inside is sized in cqw (a hundredth of the
   device's width), so a device scales as one piece. */

.stack-client{grid-column:1 / -1;display:grid;grid-template-columns:1fr;gap:26px;margin-top:10px;}

.client-card{border:1px solid var(--border-page);background:var(--card-bg);border-radius:14px;padding:22px 26px;display:grid;grid-template-columns:minmax(120px,190px) 1fr;column-gap:30px;align-items:start;}
.client-card > *{grid-column:2;}
.client-card > .client-label{grid-column:1 / -1;}
.client-card > .client-logo{grid-column:1;grid-row:2 / span 5;justify-self:start;margin:0;}
@media (max-width:640px){.client-card{grid-template-columns:1fr;}.client-card > *,.client-card > .client-logo{grid-column:1;grid-row:auto;}.client-card > .client-logo{margin-bottom:12px;}}
.client-label{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:12px;}
.client-logo{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;overflow:hidden;margin-bottom:12px;}
.client-logo img{display:block;height:auto;width:100%;max-width:190px;}
.client-logo.round{border-radius:14px;}
.client-logo.square img{max-width:150px;border-radius:10px;}
.client-logo.round img{height:96px;width:96px;}
.client-name{font-family:'Fraunces',serif;font-size:1.25rem;font-weight:600;margin-bottom:6px;}
.client-card p{font-size:.92rem;color:var(--muted-page);margin:0 0 10px;}
.client-links{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.88rem;}
.client-links a{color:var(--accent);text-decoration:none;font-weight:500;}
.client-links a:hover{text-decoration:underline;}
.client-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;}
.client-chips span{font-size:.74rem;border:1px solid var(--border-page);border-radius:999px;padding:2px 9px;color:var(--muted-page);}

.shots{display:grid;gap:18px;align-items:end;max-width:1040px;margin:0 auto;}
.shots.s-fa{grid-template-columns:1.55fr 1fr;}
.shots.s-li{grid-template-columns:1.6fr .62fr .62fr;}
.shots.s-wa{grid-template-columns:1fr 1fr;max-width:600px;}
@media (max-width:760px){.shots.s-fa,.shots.s-li{grid-template-columns:1fr 1fr;}.shots.s-fa .lap,.shots.s-li .lap{grid-column:1 / -1;}.shots.s-fa .tab{grid-column:1 / -1;max-width:420px;margin:0 auto;}}
@media (max-width:420px){.shots.s-wa{grid-template-columns:1fr;max-width:260px;}.shots.s-li{grid-template-columns:1fr;}.shots.s-li .ph{max-width:220px;margin:0 auto;}}
.shot-cap{font-size:.8rem;color:var(--muted-page);text-align:center;margin-top:12px;}

/* ------------------------------------------------------------------ the devices */
.dev{container-type:inline-size;position:relative;width:100%;}   /* a size container has no natural width, so it must be told to fill its space */
.dev *{box-sizing:border-box;}
.dev :where(b,h4,h5,span,div,p){margin:0;}   /* :where keeps this reset weaker than the device's own spacing rules */

.lap-lid{background:#0b0b0d;border-radius:2.2cqw 2.2cqw .6cqw .6cqw;padding:1.7cqw 1.7cqw 1.3cqw;box-shadow:inset 0 0 0 .18cqw #34343b,0 2.2cqw 4cqw -1.5cqw rgba(20,10,40,.45);}
.lap-screen{aspect-ratio:16/10;background:#fff;border-radius:.5cqw;overflow:hidden;position:relative;font-size:1.12cqw;line-height:1.3;color:#14140f;}
.lap-base{height:1.9cqw;background:linear-gradient(#e2e2e7,#a8a8b0);border-radius:0 0 3.2cqw 3.2cqw;width:110%;margin-left:-5%;position:relative;box-shadow:0 1cqw 2cqw -1cqw rgba(20,10,40,.5);}
.lap-base::after{content:"";position:absolute;left:50%;top:0;width:14cqw;height:.7cqw;transform:translateX(-50%);background:#8f8f98;border-radius:0 0 1cqw 1cqw;}

.tab-body{background:#0e0e11;border-radius:3.6cqw;padding:2.6cqw;box-shadow:inset 0 0 0 .22cqw #3a3a42,0 2.4cqw 4cqw -1.6cqw rgba(20,10,40,.5);position:relative;}
.tab-body::before{content:"";position:absolute;left:1cqw;top:50%;width:.9cqw;height:.9cqw;border-radius:50%;background:#2a2a30;transform:translateY(-50%);}
.tab-screen{aspect-ratio:4/3;background:#fff;border-radius:1.2cqw;overflow:hidden;position:relative;font-size:2.15cqw;line-height:1.3;color:#14140f;}

.ph-body{background:#0e0e11;border-radius:13cqw;padding:3cqw;box-shadow:inset 0 0 0 .5cqw #3a3a42,0 4cqw 6cqw -3cqw rgba(20,10,40,.5);position:relative;}
.ph-screen{aspect-ratio:9/18.6;background:#fff;border-radius:10.5cqw;overflow:hidden;position:relative;font-size:4.3cqw;line-height:1.3;color:#14140f;display:flex;flex-direction:column;}
.ph-island{position:absolute;left:50%;top:5.2cqw;width:26cqw;height:6.4cqw;background:#000;border-radius:5cqw;transform:translateX(-50%);z-index:5;}
.ph-status{height:11cqw;flex:none;display:flex;align-items:flex-end;justify-content:space-between;padding:0 9cqw 1.2cqw;font-size:3.5cqw;font-weight:600;}

/* ------------------------------------------------------------------ Field Admin (the Revolution HR Solutions look: black, white and red) */
.fa{display:grid;grid-template-columns:17% 1fr;height:100%;}
.fa-side{background:#14140f;color:#d8d8d4;padding:1.1em .9em;display:flex;flex-direction:column;gap:1.2em;}
.fa-side img{width:100%;border-radius:.4em;display:block;}
.fa-side nav{display:flex;flex-direction:column;gap:.25em;}
.fa-side nav span{padding:.55em .7em;border-radius:.45em;font-size:.95em;color:#b8b8b2;}
.fa-side nav span.on{background:#ec1f25;color:#fff;font-weight:600;}
.fa-main{background:#f6f6f5;padding:1.1em 1.4em;display:flex;flex-direction:column;gap:.95em;min-width:0;}
.fa-top{display:flex;align-items:center;gap:.8em;}
.fa-top h4{font-size:1.5em;font-weight:700;flex:1;}
.fa-chip{background:#fff;border:1px solid #e3e3e0;border-radius:2em;padding:.25em .8em;font-size:.9em;color:#6b6b64;}
.fa-av{width:2.1em;height:2.1em;border-radius:50%;background:#ec1f25;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9em;}
.fa-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:.8em;}
.fa-cards div{background:#fff;border:1px solid #e3e3e0;border-radius:.7em;padding:.8em .9em;}
.fa-cards b{display:block;font-size:2em;line-height:1.1;}
.fa-cards span{font-size:.88em;color:#6b6b64;}
.fa-cards .red b{color:#ec1f25;}
.fa-cols{display:grid;grid-template-columns:1.55fr 1fr;gap:.8em;flex:1;min-height:0;}
.fa-box{background:#fff;border:1px solid #e3e3e0;border-radius:.7em;padding:.8em .95em;display:flex;flex-direction:column;gap:.45em;min-width:0;overflow:hidden;}
.fa-box h5{font-size:1.05em;margin:0 0 .15em;font-weight:700;}
.fa-row{display:grid;grid-template-columns:1.2fr 1.5fr .9fr;gap:.6em;align-items:center;padding:.38em 0;border-top:1px solid #efefed;font-size:.95em;}
.fa-row.h{border-top:0;color:#8a8a82;font-size:.82em;text-transform:uppercase;letter-spacing:.05em;padding-top:0;}
.fa-pill{display:inline-block;padding:.12em .65em;border-radius:2em;font-size:.88em;font-weight:600;justify-self:start;}
.fa-pill.ok{background:#e4f3ea;color:#1f7a41;}.fa-pill.wait{background:#fbf1d8;color:#8a6d1a;}.fa-pill.late{background:#fde5e5;color:#a3151a;}
.fa-bars{display:flex;align-items:flex-end;gap:.45em;height:5.2em;margin:.2em 0 .1em;}
.fa-bars i{flex:1;background:#ec1f25;border-radius:.25em .25em 0 0;opacity:.85;}
.fa-bars i:nth-child(odd){opacity:.55;}
.fa-alert{display:flex;gap:.55em;align-items:flex-start;font-size:.92em;padding:.3em 0;border-top:1px solid #efefed;}
.fa-alert:first-of-type{border-top:0;}
.fa-alert em{font-style:normal;width:.7em;height:.7em;border-radius:50%;background:#ec1f25;margin-top:.35em;flex:none;}
.fa-alert em.y{background:#e0a21b;}
.fa-alert small{display:block;color:#8a8a82;font-size:.88em;}

/* Field Admin on a tablet: signing a document */
.fs{display:grid;grid-template-rows:auto 1fr;height:100%;}
.fs-bar{background:#14140f;color:#fff;display:flex;align-items:center;gap:.8em;padding:.55em .9em;}
.fs-bar img{height:2.2em;border-radius:.3em;}
.fs-bar b{font-size:1.05em;flex:1;}
.fs-bar span{background:#ec1f25;border-radius:2em;padding:.15em .8em;font-size:.85em;font-weight:600;}
.fs-body{display:grid;grid-template-columns:1.25fr 1fr;gap:.9em;padding:.9em;background:#f6f6f5;min-height:0;}
.fs-doc{background:#fff;border:1px solid #e3e3e0;border-radius:.6em;padding:1em 1.1em;display:flex;flex-direction:column;gap:.5em;overflow:hidden;}
.fs-doc h5{font-size:1.15em;margin:0;font-weight:700;}
.fs-doc small{color:#8a8a82;font-size:.8em;}
.fs-doc i{display:block;height:.45em;border-radius:.3em;background:#e9e9e6;}
.fs-doc i.s{width:62%;}.fs-doc i.m{width:84%;}
.fs-side{display:flex;flex-direction:column;gap:.7em;min-height:0;}
.fs-check{background:#fff;border:1px solid #e3e3e0;border-radius:.6em;padding:.65em .8em;font-size:.95em;display:flex;flex-direction:column;gap:.35em;}
.fs-check div{display:flex;gap:.55em;align-items:center;}
.fs-check em{font-style:normal;width:1.2em;height:1.2em;border-radius:50%;background:#1f7a41;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.8em;font-weight:700;flex:none;}
.fs-pad{background:#fff;border:1px dashed #b9b9b2;border-radius:.6em;flex:1;position:relative;display:flex;align-items:flex-end;justify-content:center;padding:.4em;min-height:0;}
.fs-pad svg{position:absolute;inset:8% 6% 24% 6%;width:88%;height:62%;}
.fs-pad span{font-size:.75em;color:#8a8a82;border-top:1px solid #d6d6d0;padding-top:.25em;width:88%;text-align:center;}
.fs-btns{display:flex;gap:.6em;}
.fs-btns span{flex:1;text-align:center;border-radius:.5em;padding:.55em;font-weight:700;font-size:.95em;}
.fs-btns .a{background:#ec1f25;color:#fff;}.fs-btns .b{background:#fff;border:1px solid #d6d6d0;color:#4a4a44;flex:.55;}

/* ------------------------------------------------------------------ Lindi (blue and green, as in the app) */
.ld{display:flex;flex-direction:column;height:100%;background:#f3f7fc;}
.ld-nav{background:linear-gradient(#0d47a1,#1565c0);color:#fff;display:flex;align-items:center;gap:1.4em;padding:.7em 1.3em;}
.ld-nav .mk{width:2.1em;height:2.1em;border-radius:.55em;background:rgba(255,255,255,.14);position:relative;flex:none;}
.ld-nav .mk::before{content:"";position:absolute;left:.62em;top:.4em;width:.38em;height:1.2em;background:#fff;border-radius:.2em;}
.ld-nav .mk::after{content:"";position:absolute;left:.62em;top:1.22em;width:.95em;height:.38em;background:#fff;border-radius:.2em;}
.ld-nav b{font-size:1.2em;margin-right:auto;}
.ld-nav span{font-size:.92em;opacity:.92;}
.ld-nav .cta{background:#9ccc65;color:#0d2a05;border-radius:2em;padding:.3em .9em;font-weight:700;opacity:1;}
.ld-hero{padding:1em 1.4em .5em;display:flex;gap:.7em;align-items:center;}
.ld-hero h4{font-size:1.5em;font-weight:700;color:#0d2a5c;flex:1;}
.ld-search{background:#fff;border:1px solid #d3deee;border-radius:.6em;padding:.5em .9em;font-size:.95em;color:#7b8aa5;width:34%;}
.ld-body{display:grid;grid-template-columns:19% 1fr;gap:1em;padding:.4em 1.4em 1em;flex:1;min-height:0;}
.ld-filters{background:#fff;border:1px solid #d9e3f1;border-radius:.7em;padding:.8em .9em;display:flex;flex-direction:column;gap:.5em;font-size:.95em;}
.ld-filters b{font-size:1.02em;}
.ld-filters span{display:flex;gap:.5em;align-items:center;color:#43557a;}
.ld-filters span::before{content:"";width:.9em;height:.9em;border-radius:.25em;border:1.5px solid #9db3d6;flex:none;}
.ld-filters span.on::before{background:#1565c0;border-color:#1565c0;}
.ld-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em;align-content:start;min-width:0;}
.ld-card{background:#fff;border:1px solid #d9e3f1;border-radius:.8em;padding:.8em;display:flex;flex-direction:column;gap:.35em;}
.ld-av{width:3em;height:3em;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1em;}
.ld-card b{font-size:1.02em;}
.ld-card small{color:#6a7a97;font-size:.85em;}
.ld-tags{display:flex;gap:.3em;flex-wrap:wrap;}
.ld-tags i{font-style:normal;font-size:.78em;background:#e8f0fb;color:#1c4f9c;border-radius:2em;padding:.1em .6em;}
.ld-meta{display:flex;justify-content:space-between;align-items:center;font-size:.92em;margin-top:.15em;}
.ld-meta em{font-style:normal;color:#e0a21b;letter-spacing:.05em;}
.ld-book{background:#1565c0;color:#fff;border-radius:.5em;text-align:center;padding:.4em;font-weight:700;font-size:.92em;margin-top:.2em;}

/* Lindi phones */
.lp-bar{background:linear-gradient(#0d47a1,#1565c0);color:#fff;padding:2.6em 1.1em .9em;font-weight:700;font-size:1.05em;display:flex;align-items:center;gap:.6em;}
.lp-bar::before{content:"‹";font-size:1.3em;font-weight:400;opacity:.9;}
.lp-body{flex:1;background:#f3f7fc;padding:.8em;display:flex;flex-direction:column;gap:.55em;overflow:hidden;min-height:0;}
.lp-chips{display:flex;gap:.35em;flex-wrap:wrap;}
.lp-chips i{font-style:normal;font-size:.8em;background:#fff;border:1px solid #d3deee;border-radius:2em;padding:.15em .7em;color:#43557a;}
.lp-chips i.on{background:#1565c0;color:#fff;border-color:#1565c0;}
.lp-card{background:#fff;border:1px solid #d9e3f1;border-radius:.8em;padding:.7em;display:grid;grid-template-columns:2.8em 1fr;gap:.6em;align-items:center;}
.lp-card .ld-av{width:2.8em;height:2.8em;font-size:.9em;}
.lp-card b{font-size:.95em;display:block;}
.lp-card small{font-size:.78em;color:#6a7a97;display:block;}
.lp-card .r{grid-column:1 / -1;display:flex;justify-content:space-between;font-size:.82em;border-top:1px solid #eef2f9;padding-top:.4em;}
.lp-card .r em{font-style:normal;color:#e0a21b;}
.lp-field{background:#fff;border:1px solid #d3deee;border-radius:.6em;padding:.55em .7em;font-size:.88em;}
.lp-field small{display:block;font-size:.72em;color:#7b8aa5;margin-bottom:.1em;}
.lp-field.row{display:flex;gap:.6em;padding:0;border:0;background:none;}
.lp-field.row > div{flex:1;background:#fff;border:1px solid #d3deee;border-radius:.6em;padding:.55em .7em;}
.lp-btn{background:#9ccc65;color:#10300a;border-radius:2em;text-align:center;font-weight:800;padding:.7em;font-size:.95em;margin-top:auto;}
.lp-tab{display:flex;justify-content:space-around;background:#fff;border-top:1px solid #e1e8f3;padding:.55em 0 1.3em;font-size:.72em;color:#7b8aa5;flex:none;}
.lp-tab span.on{color:#1565c0;font-weight:700;}

/* ------------------------------------------------------------------ WhatsApp (The Barber): the real wording of the bot */
.wa-head{background:#075e54;color:#fff;padding:2.6em 1em .7em;display:flex;align-items:center;gap:.6em;flex:none;}
.wa-head .back{font-size:1.2em;opacity:.9;}
.wa-av{width:2.3em;height:2.3em;border-radius:50%;background:#111;color:#d9b36a;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8em;flex:none;letter-spacing:.05em;}
.wa-head b{font-size:.95em;display:block;line-height:1.1;}
.wa-head small{font-size:.68em;opacity:.8;display:block;}
.wa-chat{flex:1;background:#efe7dd;background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1.2px);background-size:9px 9px;padding:.7em .6em;display:flex;flex-direction:column;gap:.35em;overflow:hidden;justify-content:flex-end;min-height:0;}
.wa-m{max-width:84%;padding:.4em .6em .5em;border-radius:.6em;font-size:.82em;line-height:1.3;box-shadow:0 1px .5px rgba(0,0,0,.13);position:relative;white-space:pre-line;}
.wa-m.in{background:#fff;align-self:flex-start;border-top-left-radius:.15em;}
.wa-m.out{background:#d9fdd3;align-self:flex-end;border-top-right-radius:.15em;}
.wa-m time{display:block;text-align:right;font-size:.7em;color:#667781;margin-top:.1em;}
.wa-act{align-self:flex-start;width:84%;display:flex;flex-direction:column;gap:.18em;}
.wa-act span{background:#fff;border-radius:.6em;text-align:center;color:#0b8fd4;font-weight:600;font-size:.78em;padding:.42em;box-shadow:0 1px .5px rgba(0,0,0,.13);}
.wa-bar{background:#f0f0f0;padding:.5em .6em 1.4em;display:flex;gap:.5em;align-items:center;flex:none;}
.wa-bar span{flex:1;background:#fff;border-radius:2em;padding:.4em .8em;font-size:.78em;color:#8a8f93;}
.wa-bar i{width:1.9em;height:1.9em;border-radius:50%;background:#00a884;flex:none;}
.wa-day{align-self:center;background:#e1f2fa;color:#54656f;font-size:.66em;border-radius:.5em;padding:.2em .7em;}

/* real screenshots inside the device frames */
.lap-screen.real,.ph-screen.real{background:#0b0b0d;}
.lap-screen.real{aspect-ratio:auto;}
.lap-screen.real img,.ph-screen.real img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left;}
.ph-screen.real{border-radius:9.5cqw;}
.shots + .shots{margin-top:30px;}
.shots.s-pair{grid-template-columns:1fr 1fr;align-items:start;}
@media (max-width:760px){.shots.s-pair{grid-template-columns:1fr;}}

.shots.s-li1{grid-template-columns:1.9fr .62fr;}
.shots.s-one{grid-template-columns:1fr;max-width:640px;}
@media (max-width:760px){.shots.s-li1{grid-template-columns:1fr;}.shots.s-li1 .ph{max-width:240px;margin:0 auto;}}