/* Client portal extras on top of /assets/portal.css. OWNED BY THE CLIENT-UI MODULE.
   Aim: big buttons, big text, one thing per screen, for people who do not use computers much.
   Design pass of 1 Oct 2026 (docs/design-system/): tiles, company card, lists, chips, show/hide. */

/* ---------- Shell ---------- */
a.brand{color:var(--ink);text-decoration:none}
a.brand:hover .name{color:var(--blue-ink)}
.client-app .wrap{max-width:808px}
.client-app[data-view='dashboard'] .wrap{max-width:calc(var(--content-client) + 2 * var(--space-12))}
.client-app .site-foot{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.demo-banner{padding-left:calc(20px + env(safe-area-inset-left));padding-right:calc(20px + env(safe-area-inset-right))}
@media(min-width:641px) and (max-width:1000px){
  .client-app .topbar-inner{padding-left:max(32px,env(safe-area-inset-left));padding-right:max(32px,env(safe-area-inset-right))}
  .client-app .wrap{padding-left:max(32px,env(safe-area-inset-left));padding-right:max(32px,env(safe-area-inset-right))}
}

/* Company switcher in the header (more than one company) */
.org-switch{max-width:1280px;margin:0 auto;padding:0 var(--space-12) 12px;display:flex;align-items:center;gap:12px}
.org-switch label{font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--muted);flex:none;margin:0}
.org-switch select{width:auto;max-width:100%;min-width:0;min-height:var(--tap);padding:8px 12px;font-size:var(--text-base);font-weight:var(--weight-bold)}
@media(max-width:1000px){.org-switch{padding:0 max(32px,env(safe-area-inset-right)) 12px max(32px,env(safe-area-inset-left))}}
@media(max-width:640px){.org-switch{padding:0 calc(var(--gutter-mobile) + env(safe-area-inset-right)) 10px calc(var(--gutter-mobile) + env(safe-area-inset-left))}.org-switch select{flex:1;max-width:none;font-size:var(--text-md)}}

/* ---------- Headings and cards ---------- */
.card-head h1{font-size:30px;font-weight:var(--weight-heavy);letter-spacing:-0.02em;outline:0}
.card-head p:not(.eyebrow){font-size:var(--text-md);line-height:1.6}
.card + .card,.card + .section-title,.tiles + .section-title{margin-top:28px}
.card-body > p{line-height:1.7}
.card-body .lead{font-size:var(--text-md);margin-bottom:20px}
.workspace-intro h1{outline:0}
.section-title{font-size:var(--text-xl);font-weight:var(--weight-heavy);letter-spacing:var(--tracking-snug);color:var(--ink);margin:32px 0 14px}
.card .section-title{font-size:var(--text-lg)}
.section-title:first-child{margin-top:0}

/* ---------- Bigger, easier text and controls ---------- */
.client-app label{font-size:var(--text-base)}
.client-app label .hint,.client-app .hint{font-size:14px}
.field-example{margin:-2px 0 8px}
.client-app .err{font-size:14px}
.client-app .msg{font-size:var(--text-base)}
.client-app .back{font-size:var(--text-base);min-height:var(--control-h)}
.client-app .check-row{font-size:var(--text-base);min-height:var(--tap)}
.client-app .check-row input[type='checkbox']{width:24px;height:24px;min-height:24px}
.client-app .segment label{min-height:52px;font-size:var(--text-base);font-weight:var(--weight-bold)}
.segment.four{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:700px){.segment.four{grid-template-columns:repeat(4,minmax(0,1fr))}}
.segment.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.segment.stack{grid-template-columns:1fr}
.client-app .segment.stack label{justify-content:flex-start;text-align:left;padding:14px 16px;line-height:1.5}
.gap-top{margin-top:12px}
.msg.warn{background:var(--warning-soft);color:var(--warning)}
.msg.show.warn{display:block}

/* ---------- Buttons ---------- */
.btn.big{min-height:56px;font-size:var(--text-md);gap:12px}
.btn.big svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
a.btn{display:flex;text-align:center}
.actions{margin-top:28px}
.actions .btn + .btn,.actions .btn + a.btn,.actions a.btn + .btn{margin-top:12px}
.link-btn{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 2px;border:0;background:none;color:var(--blue-ink);font-size:var(--text-base);font-weight:var(--weight-bold);text-decoration:underline;text-underline-offset:4px;cursor:pointer;transition:color var(--dur-fast) var(--ease-out)}
.link-btn:hover{color:var(--ink)}
/* Small buttons beside a row: 44px pills. Secondary by default, then primary, soft and danger. */
.small-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-height:var(--tap);padding:0 var(--space-4);border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--card);color:var(--ink);font-size:14px;font-weight:var(--weight-bold);white-space:nowrap;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),scale var(--dur-fast) var(--ease-out)}
.small-btn:hover{border-color:var(--line-strong);color:var(--ink)}
.small-btn:active:not(:disabled){scale:var(--press-scale)}
.small-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.small-btn.primary:hover{background:var(--blue-hover);border-color:var(--blue-hover);color:#fff}
.small-btn.soft{background:var(--soft);border-color:transparent}
.small-btn.soft:hover{background:var(--line);border-color:transparent}
.small-btn.danger{background:var(--error-soft);border-color:transparent;color:var(--error)}
.small-btn.danger:hover{border-color:var(--error);color:var(--error)}
.small-btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Home: greeting, company, tiles ---------- */
.greet{display:flex;align-items:flex-end;gap:var(--space-6)}
.greet-text{flex:1;min-width:0}
.hello{font-size:var(--text-4xl);font-weight:var(--weight-heavy);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);outline:0}
.hello em{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:1.15em;letter-spacing:0;color:var(--payroll)}
.greet .lead{margin:6px 0 0;font-size:var(--text-lg);font-weight:var(--weight-medium);color:var(--muted)}
.company{display:flex;align-items:center;gap:14px;max-width:100%;padding:12px 12px 12px 18px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line)}
.company > div{flex:1;min-width:0}
.company .overline{display:block}
.company-name{display:block;font-weight:var(--weight-heavy);overflow-wrap:anywhere}
.company .btn{flex:none;white-space:nowrap}
.home-section{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-10)}
.home-section .section-title{margin:0}
.home-phone-first{margin-top:var(--space-6)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:14px;width:100%;min-width:0;padding:22px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);color:var(--ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),scale var(--dur-fast) var(--ease-out)}
/* The lift is for a mouse only: on a phone it would stay on the tile after a tap. The press works everywhere. */
@media(hover:hover){.tile:hover{border-color:var(--line-strong);box-shadow:var(--shadow-lift);color:var(--ink)}}
.tile:active{scale:var(--press-scale)}
.tile-text{display:block;min-width:0}
.tile-name{display:block;font-size:var(--text-lg);font-weight:var(--weight-heavy);line-height:1.25;overflow-wrap:anywhere}
.tile-sub{display:block;margin-top:4px;font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--muted)}
.ticon{display:flex;align-items:center;justify-content:center;flex:none;width:var(--icon-tile);height:var(--icon-tile);border-radius:var(--radius-icon)}
.ticon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.t-blue{background:var(--accent-soft);color:var(--blue-ink)}
.t-cyan{background:var(--cyan-soft);color:var(--cyan-ink)}
.t-green{background:var(--success-soft);color:var(--success)}
.t-amber{background:var(--warning-soft);color:var(--warning)}
.t-purple{background:var(--payroll-soft);color:var(--payroll)}
.t-plain{background:var(--soft);color:var(--ink)}
.t-pound{font-size:24px;font-weight:var(--weight-heavy);line-height:1}
.tile-wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:var(--space-4);padding:20px 22px}
.tile-wide .tile-text{flex:1}
.chev{width:22px;height:22px;flex:none;color:var(--muted);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Payslips: the one filled tile. */
.tile-payroll{background:var(--payroll);border-color:var(--payroll);color:#fff}
.tile-payroll:hover{border-color:var(--payroll);color:#fff}
.tile-payroll .tile-sub{color:#f2ddf9}
.tile-payroll .ticon{background:#fff;color:var(--payroll)}
.tile-payroll .chev{color:#fff}
/* Dark theme: --payroll is a light lilac there, so the tile flips to tint plus coloured text. */
html[data-theme='dark'] .tile-payroll{background:var(--payroll-soft);border-color:var(--payroll);color:var(--ink)}
html[data-theme='dark'] .tile-payroll .tile-sub{color:var(--payroll)}
html[data-theme='dark'] .tile-payroll .ticon{background:var(--payroll);color:var(--payroll-soft)}
html[data-theme='dark'] .tile-payroll .chev{color:var(--payroll)}
.small-tiles{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.small-tiles .tile{flex-direction:row;align-items:center;padding:18px 22px}
.small-tiles .tile-text{flex:1}
.small-tiles .tile-name{font-size:17px}
.small-tiles .tile-sub{font-size:14px}
.describe-link{margin:0;font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--muted)}
.describe-link a{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:var(--weight-bold);color:var(--blue-ink)}
.only-phone{display:none}
.passkey-nudge{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 20px;margin-bottom:24px;background:var(--accent-soft);border-radius:var(--radius-md);font-size:var(--text-base)}
.passkey-nudge p{flex:1;min-width:200px}

/* ---------- Choice lists: one big button per option ---------- */
.choices{display:flex;flex-direction:column;gap:12px}
.choice{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:14px 18px;background:var(--card);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-md);text-align:left;font-size:var(--text-md);font-weight:var(--weight-bold);text-decoration:none;overflow-wrap:anywhere;transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),scale var(--dur-fast) var(--ease-out)}
/* Mouse only: on a phone the hover look stays after a tap and looks just like "chosen" (or ticked,
   on Request payslips), even after unticking. */
@media(hover:hover){.choice:hover{border-color:var(--blue-ink);background:var(--accent-soft);color:var(--ink)}}
.choice:active{scale:var(--press-scale)}
.choice.chosen{border-color:var(--blue-ink);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--blue-ink)}
.choice .c-main{flex:1;min-width:0}
.choice .c-sub{display:block;font-size:14px;font-weight:var(--weight-medium);color:var(--muted);margin-top:4px;line-height:1.5}
.choice .c-tag{flex:none}
.org-mark{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:10px;background:var(--blue);color:#fff;font-size:var(--text-sm);font-weight:var(--weight-heavy);letter-spacing:.02em}
/* "→" in the markup is drawn as a chevron, like the design. */
.c-arrow{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;font-size:0;color:var(--muted)}
.c-arrow::before{content:'';width:8px;height:8px;margin-left:-4px;border-top:2px solid currentColor;border-right:2px solid currentColor;border-radius:1px;rotate:45deg}

/* ---------- Steps ---------- */
.stepper{display:flex;align-items:center;gap:14px;margin:0 0 22px}
.stepper .s-text{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--muted);white-space:nowrap}
.stepper .s-bar{display:flex;gap:6px;flex:1}
.stepper .s-bar i{display:block;flex:1;height:6px;border-radius:var(--radius-pill);background:var(--line);transition:background-color var(--dur-base) var(--ease-out)}
.stepper .s-bar i.on{background:var(--blue-ink)}
.lang-row select{width:auto}
.field-label{display:block;font-size:var(--text-base);font-weight:var(--weight-bold);color:var(--ink);margin-bottom:8px;line-height:1.5}
.field-label .hint{font-weight:var(--weight-regular)}
.field.show-err input,.field.show-err select,.field.show-err textarea{border-color:var(--error);background:var(--error-soft)}
.field .err{display:none}
.field.show-err .err{display:block}
.field-note{font-size:14px;color:var(--muted);margin:-8px 0 22px;line-height:1.6}
.fieldset-title{font-size:var(--text-lg);font-weight:var(--weight-heavy);margin:6px 0 16px}
.nl-box .btn{margin-top:12px}
.or-line{display:flex;align-items:center;gap:14px;font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--muted);margin:24px 0}
.or-line::before,.or-line::after{content:'';height:1px;background:var(--line);flex:1}
.ai-note{font-size:var(--text-sm);color:var(--muted);margin-top:10px}

/* ---------- Uploads ---------- */
.file-drop .big{font-size:var(--text-md)}
.file-drop .small{font-size:14px}
.upload-list{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--card);overflow:hidden}
.upload-list li{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 16px;border-top:1px solid var(--line);font-size:14px}
.upload-list li:first-child{border-top:0}
.upload-list .u-name{flex:1;min-width:0;overflow-wrap:anywhere}
.upload-list .u-state{font-size:var(--text-sm);color:var(--muted);white-space:nowrap}
.upload-list .u-state.good{color:var(--success)}
.upload-list .u-state.bad{color:var(--error)}

/* ---------- Lists: one card with hairline rows (payslips, employees, requests, colleagues, devices) ---------- */
.toolbar{display:flex;gap:12px;align-items:stretch;margin-bottom:18px;flex-wrap:wrap}
.toolbar .search{flex:1;min-width:200px}
.toolbar .seg-filter button{min-height:var(--tap);font-size:14px}
.rows{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;width:100%;min-height:64px;padding:12px 20px;background:transparent;color:var(--ink);border:0;border-top:1px solid var(--line);text-align:left;text-decoration:none;font-size:var(--text-md);transition:background-color var(--dur-fast) var(--ease-out)}
.rows > .row:first-child{border-top:0}
a.row:hover,button.row:hover{background:var(--soft);color:var(--ink)}
/* Keyboard focus (WCAG 2.4.7): .rows clips anything outside it (overflow:hidden, for the rounded
   corners), so the 3px ring is drawn inside the row, with the hover tint, and the first and last
   rows follow the card's corners. A one-row list still shows the whole ring. */
.rows > a.row:focus-visible,.rows > button.row:focus-visible{outline-offset:-4px;background:var(--soft);color:var(--ink)}
.rows > .row:first-child{border-top-left-radius:calc(var(--radius) - 1px);border-top-right-radius:calc(var(--radius) - 1px)}
.rows > .row:last-child{border-bottom-left-radius:calc(var(--radius) - 1px);border-bottom-right-radius:calc(var(--radius) - 1px)}
.rows > .rev-empty{border:0;border-radius:0}
.rows > .spinner{margin:32px auto}
/* Loading a screen: the spinner with the words under it (the words stay when motion is off). */
.loading{display:grid;justify-items:center;gap:12px;padding:48px 0}
.loading .spinner{margin:0}
.loading-text{margin:0;color:var(--muted);font-size:var(--text-base)}
.row .r-main{flex:1 1 150px;min-width:0}
.row .r-title{display:block;font-weight:var(--weight-bold);overflow-wrap:anywhere}
.row .r-sub{display:block;font-size:14px;color:var(--muted);margin-top:2px;line-height:1.5;overflow-wrap:anywhere}
.row .r-end{display:flex;align-items:center;gap:10px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.count-note{font-size:14px;color:var(--muted);margin:0 0 12px}
.more-wrap{margin-top:16px}

/* My requests: HCA's reply in the list and on the detail screen */
.row .r-reply{flex:1 1 100%;min-width:0;font-size:14px;line-height:1.6;color:var(--ink);background:var(--soft);border-radius:var(--radius-sm);padding:10px 12px;overflow-wrap:anywhere;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.row .r-reply-k{font-weight:var(--weight-bold)}
.status-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:var(--text-base);margin-bottom:18px}
.reply-box{padding:18px 20px;border:1px solid var(--line);border-left:4px solid var(--blue-ink);border-radius:var(--radius-md);background:var(--soft);margin-bottom:22px}
.reply-box .fieldset-title{margin:0 0 8px}
.reply-text{font-size:var(--text-md);line-height:1.7;white-space:pre-line;overflow-wrap:anywhere}
.reply-when{font-size:var(--text-sm);color:var(--muted);margin-top:8px}
.follow-note{font-size:var(--text-base);color:var(--muted);margin-top:4px}

/* Request payslips: tick the people */
.choice.pick{justify-content:flex-start;cursor:pointer}
.choice.pick input[type='checkbox']{width:24px;height:24px;min-height:24px;flex:none;margin:0}

/* ---------- Private details with show/hide ---------- */
.private{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:8px;background:var(--card)}
.private .p-row{display:flex;align-items:center;gap:12px 16px;min-height:72px;padding:12px 12px 12px 20px;border-bottom:1px solid var(--line)}
.private .p-row:last-child{border-bottom:0}
.private .p-label{flex:1;min-width:0;font-size:14px;font-weight:var(--weight-bold);color:var(--muted)}
.private .p-value{display:block;font-weight:var(--weight-semibold);font-size:var(--text-md);color:var(--ink);margin-top:4px;white-space:pre-line;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.private .p-value.masked{color:var(--muted);letter-spacing:.2em}
.private .p-none{font-size:14px;color:var(--muted);font-weight:var(--weight-medium)}
.private .small-btn{min-width:76px}
.private-note{font-size:14px;color:var(--muted);margin-top:12px;line-height:1.6}

/* ---------- Summary rows ---------- */
.client-app .summary .r{font-size:var(--text-base)}
.client-app .summary .v{white-space:pre-line}
.summary .r.head{background:var(--soft);font-weight:var(--weight-bold)}
.confirm-text{font-size:var(--text-md)}
.warn-panel{padding:18px 20px;border:1px solid var(--warning);border-radius:var(--radius-md);background:var(--warning-soft);color:var(--ink);margin:20px 0 24px}
.warn-panel ul{margin:8px 0 14px;padding-left:20px;line-height:1.7}
.warn-panel .check-row{font-weight:var(--weight-bold)}
.bank-note{padding:16px 18px;border-radius:var(--radius-md);background:var(--warning-soft);color:var(--warning);font-size:var(--text-base);line-height:1.7;margin-bottom:22px;font-weight:var(--weight-semibold)}

/* ---------- Timesheet hours ---------- */
.client-app .ts-hours > div{display:flex;flex-direction:column;justify-content:flex-end}
.client-app .mw-hint{font-size:14px;line-height:1.6}
.check-line{display:flex;align-items:center;gap:10px}
.check-line .check-row{margin:0}
.client-app .ts-hours label{font-size:var(--text-sm)}
.client-app .ts-employee-name{font-size:var(--text-md);font-weight:var(--weight-bold)}
.ts-employee .ts-name{font-size:var(--text-md);font-weight:var(--weight-bold);overflow-wrap:anywhere}
.ts-employee .ts-sub{font-size:var(--text-sm);color:var(--muted)}
.ts-employee.has-hours{border-color:var(--blue-ink)}
.ts-find{margin-bottom:14px}
.client-app .ts-total span{font-size:var(--text-xs)}
.client-app .ts-table{font-size:14px}
.client-app .ts-table th{font-size:var(--text-xs)}

/* ---------- Password with show/hide ---------- */
.pw-line{display:flex;gap:8px;align-items:stretch}
.pw-line input{flex:1;min-width:0}
.pw-line .small-btn{min-height:var(--control-h)}

/* ---------- Describe box inside forms ---------- */
.nl-details{margin:0 0 22px}
.nl-details summary{min-height:var(--control-h);display:flex;align-items:center;color:var(--blue-ink);font-weight:var(--weight-bold);font-size:var(--text-base);cursor:pointer}
.nl-details .nl-box{margin:8px 0 0}
.nl-head{display:block}
.private .p-none{display:block;margin-top:4px}

/* ---------- Done ---------- */
.done-mark{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--success-soft);color:var(--success);margin:8px auto 20px;animation:pop var(--dur-base) var(--ease-out) 120ms both}
.done-mark svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.center h1{outline:0}

/* ---------- Phone layout (the 390 mock-up). Works down to 320. ---------- */
@media(max-width:640px){
  .client-app .card-head h1{font-size:26px}
  .greet{flex-direction:column;align-items:stretch;gap:var(--space-4)}
  .hello{font-size:var(--text-3xl)}
  .greet .lead{font-size:17px}
  .home-section{margin-top:var(--space-6);gap:var(--space-3)}
  .home-section .section-title{font-size:20px}
  .only-phone{display:grid}
  .hide-phone{display:none}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
  .tile{padding:16px;gap:10px}
  .tile .tile-sub{display:none}
  .tile-wide .tile-sub,.small-tiles .tile-sub{display:block}
  .tile-wide{padding:16px}
  .ticon{width:var(--icon-tile-sm);height:var(--icon-tile-sm);border-radius:var(--radius-md)}
  .ticon svg{width:22px;height:22px}
  .t-pound{font-size:20px}
  .tile-name{font-size:var(--text-md)}
  .small-tiles{grid-template-columns:1fr}
  .small-tiles .tile{padding:16px 18px}
  .row{padding:12px 16px;gap:10px 12px}
  .choice{padding:14px 16px}
  .private .p-row{padding:12px 12px 12px 16px}
  .stepper{margin-bottom:18px}
  .toolbar .seg-filter{width:100%}
  .toolbar .seg-filter button{flex:1}
  /* Check screens and details: the answer goes under its label, full width and left-aligned,
     so long messages and addresses are easy to read. */
  .client-app .summary .r{flex-direction:column;gap:4px}
  .client-app .summary .v{max-width:none;text-align:left}
}
@media(max-width:370px){
  .segment.three{grid-template-columns:1fr}
  .company{flex-wrap:wrap;padding:12px 14px}
  .company .btn{width:100%}
  .row .r-end{width:100%;justify-content:flex-start}
}
@media(max-width:340px){.tiles{grid-template-columns:1fr}}