/* avs-extras-v5.css (28 Oct 2026): blocks shared by the business site (index.html) and the partner site.
   AI block with the web client picture, shared texting (the inbox mock, .sms-*), fax and AVS Digital Fax, add-ons, the REST API
   block (.api-*), the AVS Mobile tabbed gallery, the desk phone photo. Uses the colour tokens each page already defines.
   v2: the shared texting section is a drawn inbox mock instead of the numbered story (.story and .bubble stay for the partner
   page). The .avs-est and .avs-tip rules stay for any page that still uses them, the calculator no longer does.
   v3: the REST API section on the home page (#api): a route card drawn in HTML and CSS.
   v4: the welcome screen's customer picture is a group (desk phone, AVS Mobile, web client: .wel-*), and the partner site
   shows the web client under the desk phone and the app (.see-web).
   v5: the welcome screen's web client picture is the Dashboard in a dark and a light copy. .wel-dark shows in the dark theme
   (the default), .wel-light in the light theme. The hidden copy is lazy, so browsers skip it.
   Load after avs-theme-v1.css. Cached for 30 days under /assets/: save a change as avs-extras-v6.css and update the pages. */

/* ---------- Picture beside text ---------- */
.fx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(24px,4vw,64px);align-items:center}
.fx.flip{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.fx.flip > .fx-art{order:-1}
.fx h2{font-size:clamp(30px,3.8vw,48px)}
.fx .lede{margin-top:16px}
.fx-art{margin:0}
.fx-shot{border:1px solid var(--wire);border-radius:var(--r-lg,14px);overflow:hidden;background:var(--deck);box-shadow:0 30px 80px -40px var(--violet-glow)}
.fx-shot img{display:block;width:100%;height:auto}
.fx-art figcaption{margin-top:12px;color:var(--ink-2);font-size:15px;line-height:1.5}
.fx-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:14px}
.fx-list li{position:relative;padding-left:30px;color:var(--ink-2);font-size:16.5px;line-height:1.5}
.fx-list li b{display:block;color:var(--ink);font-weight:650;font-size:17.5px}
.fx-list li::before{content:"";position:absolute;left:2px;top:.55em;width:12px;height:7px;border-left:2px solid var(--violet-hi);border-bottom:2px solid var(--violet-hi);transform:rotate(-45deg)}
.fx-note{margin-top:18px;color:var(--ink-2);font-size:14.5px;line-height:1.5}
.fx-tag{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--violet-hi);margin-bottom:12px}
.fx-big{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.fx-big div{flex:1 1 150px;border:1px solid var(--wire);border-radius:var(--r-sm,6px);padding:12px 14px;background:var(--deck-2)}
.fx-big b{display:block;font-family:var(--mono);font-weight:400;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.fx-big span{display:block;color:var(--ink-2);font-size:14px;margin-top:4px}

/* ---------- Shared texting story ---------- */
.story{list-style:none;padding:0;margin:0;display:grid;gap:12px;counter-reset:st}
.story li{position:relative;border:1px solid var(--wire);border-radius:var(--r-lg,14px);background:var(--deck);padding:16px 18px 16px 62px;counter-increment:st}
.story li::before{content:counter(st);position:absolute;left:16px;top:16px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--violet);color:#fff;font:600 14px var(--mono)}
.story b{display:block;color:var(--ink);font-weight:650}
.story span{color:var(--ink-2);font-size:16px;line-height:1.5}
.bubble{display:inline-block;margin-top:8px;padding:8px 12px;border-radius:14px 14px 14px 4px;background:var(--deck-2);border:1px solid var(--wire-hi);color:var(--ink);font-size:15px}
.bubble.out{border-radius:14px 14px 4px 14px;background:rgba(139,44,245,.22);border-color:rgba(139,44,245,.5)}

/* ---------- Shared texting: the inbox mock (16 Oct 2026) ----------
   A two column grid at desktop: step labels on the left, the inbox card on the right. The card is drawn by ::before
   across every row of column 2, so each message is its own grid row and its label sits level with it.
   Below 680px it is one column: the card is the container itself and the labels become small captions inside it. */
.sms-demo{position:relative;display:grid;grid-template-columns:minmax(120px,160px) minmax(0,1fr);column-gap:18px;row-gap:14px;align-items:center;font-size:15.5px}
.sms-demo::before{content:"";grid-column:2;grid-row:1/span 7;align-self:stretch;border:1px solid var(--wire);border-radius:var(--r-lg,14px);background:var(--deck);box-shadow:0 30px 80px -40px var(--violet-glow)}
.sms-demo > *{position:relative}
/* Rows are set by hand (the ::before card already sits in column 2, so auto placement would push everything below it).
   Order in index.html: head, step, msg, step, msg, msg, step, divider, msg, step, foot. */
.sms-demo > :nth-child(1){grid-row:1}
.sms-demo > :nth-child(2),.sms-demo > :nth-child(3){grid-row:2}
.sms-demo > :nth-child(4),.sms-demo > :nth-child(5){grid-row:3}
.sms-demo > :nth-child(6){grid-row:4}
.sms-demo > :nth-child(7),.sms-demo > :nth-child(8){grid-row:5}
.sms-demo > :nth-child(9){grid-row:6}
.sms-demo > :nth-child(10),.sms-demo > :nth-child(11){grid-row:7}
.sms-head,.sms-msg,.sms-divider,.sms-foot{grid-column:2;margin:0 16px}
.sms-head{margin:0;padding:12px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--wire);color:var(--ink-2);font-size:14px}
.sms-head b{color:var(--ink);font-weight:650;font-size:15px;white-space:nowrap}
.sms-num{white-space:nowrap}
.sms-dot{width:9px;height:9px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 3px rgba(111,227,180,.18);flex:none}
.sms-head .sms-inbox{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-hi);border:1px solid rgba(139,44,245,.45);border-radius:999px;padding:3px 9px;white-space:nowrap}
.sms-step{grid-column:1;justify-self:end;text-align:right;font-family:var(--mono);font-size:12px;line-height:1.4;letter-spacing:.04em;text-transform:uppercase;color:var(--violet-hi);padding-right:4px}
.sms-step::after{content:"";display:inline-block;width:14px;height:1px;background:var(--violet-hi);vertical-align:middle;margin-left:8px;opacity:.7}
.sms-msg{display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:88%}
.sms-msg.out{justify-self:end;align-items:flex-end;text-align:right}
.sms-who{color:var(--ink-3,var(--ink-2));font-size:12.5px;padding:0 4px}
.sms-bubble{display:inline-block;padding:9px 13px;border-radius:16px 16px 16px 4px;background:var(--deck-2);border:1px solid var(--wire-hi);color:var(--ink);line-height:1.4}
.sms-msg.out .sms-bubble{border-radius:16px 16px 4px 16px;background:rgba(139,44,245,.22);border-color:rgba(139,44,245,.5)}
.sms-divider{display:flex;align-items:center;gap:10px;color:var(--signal);font-size:13px;font-weight:650;text-align:center}
.sms-divider::before,.sms-divider::after{content:"";flex:1;height:1px;background:rgba(111,227,180,.45)}
.sms-divider span{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(111,227,180,.5);background:rgba(111,227,180,.08);border-radius:999px;padding:4px 11px;white-space:normal}
.sms-divider svg{width:14px;height:14px;flex:none}
.sms-foot{margin:0;padding:12px 18px;display:flex;align-items:center;gap:10px;border-top:1px solid var(--wire);color:var(--ink-2);font-size:14px}
.sms-search{flex:1;display:flex;align-items:center;gap:8px;min-width:0;padding:7px 12px;border:1px solid var(--wire-hi);border-radius:999px;background:var(--deck-2);color:var(--ink-2)}
.sms-search svg{width:15px;height:15px;flex:none}
.sms-search b{color:var(--ink);font-weight:500}
.sms-search small{margin-left:auto;font-size:12.5px;white-space:nowrap}
.sms-chip{font-size:13px;color:var(--ink-2);border:1px solid var(--wire-hi);border-radius:999px;padding:5px 11px;white-space:nowrap}
.sms-demo .sms-foot{padding-bottom:14px}
.sms-demo .sms-head{padding-top:14px}
@media (max-width:680px){
  .sms-demo{display:flex;flex-direction:column;gap:12px;border:1px solid var(--wire);border-radius:var(--r-lg,14px);background:var(--deck);box-shadow:0 30px 80px -40px var(--violet-glow);align-items:stretch;font-size:15px}
  .sms-demo::before{display:none}
  .sms-demo > *{grid-row:auto}
  .sms-head,.sms-foot{margin:0}
  .sms-msg,.sms-divider{margin:0 14px}
  .sms-msg.out{align-self:flex-end}
  .sms-step{align-self:flex-start;text-align:left;margin:4px 14px -8px;padding:0}
  .sms-step::after{display:none}
  .sms-search small{display:none}
  .sms-num{display:none}
  .sms-divider span{padding:4px 10px;font-size:12.5px}
}

/* ---------- REST API: the route card (16 Oct 2026) ----------
   Header with the base address, one row per route (method, path, what it is), the live events row, then the CRM webhook row.
   Below 680px the "what it is" text moves under the path. */
.api-fig{margin:0}
.api-card{border:1px solid var(--wire);border-radius:var(--r-lg,14px);background:var(--deck);box-shadow:0 30px 80px -40px var(--violet-glow);overflow:hidden}
.api-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:14px 18px;border-bottom:1px solid var(--wire);font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.api-head b{color:var(--ink);font-weight:500}
.api-pill{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-hi);border:1px solid rgba(139,44,245,.45);border-radius:999px;padding:3px 9px;white-space:nowrap}
.api-routes{list-style:none;margin:0;padding:8px 0}
.api-row{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:2px;padding:7px 18px}
.api-routes .api-row:nth-child(odd){background:rgba(139,44,245,.035)}
.api-row code{font-family:var(--mono);font-size:13px;color:var(--ink);overflow-wrap:anywhere;background:none;padding:0}
.api-what{color:var(--ink-2);font-size:14.5px;text-align:right}
.api-m{justify-self:start;min-width:48px;text-align:center;font:600 11px/1 var(--mono);letter-spacing:.06em;padding:5px 6px;border-radius:5px;border:1px solid var(--wire-hi);color:var(--ink);background:var(--deck-2)}
.api-m.get{color:var(--signal);border-color:rgba(111,227,180,.45);background:rgba(111,227,180,.08)}
.api-m.post{color:var(--violet-hi);border-color:rgba(139,44,245,.5);background:rgba(139,44,245,.12)}
.api-live{border-top:1px solid var(--wire);padding-top:11px;padding-bottom:11px}
.api-hook{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 18px;border-top:1px solid var(--wire);background:rgba(139,44,245,.06)}
.api-hook svg{width:22px;height:22px;color:var(--violet-hi)}
.api-hook-text{color:var(--ink-2);font-size:14px;line-height:1.45}
.api-hook-text b{display:block;color:var(--ink);font-weight:650;font-size:15px}
.api-hook .api-pill{margin-left:0}
.api-fig figcaption{margin-top:12px;color:var(--ink-2);font-size:15px;line-height:1.5}
@media (max-width:680px){
  .api-head{padding:12px 14px}
  .api-head .api-pill{margin-left:0}
  .api-row{grid-template-columns:54px minmax(0,1fr);padding:8px 14px}
  .api-what{grid-column:2;text-align:left;font-size:14px}
  .api-hook{grid-template-columns:22px minmax(0,1fr);padding:14px}
  .api-hook .api-pill{grid-column:2;justify-self:start}
}

/* ---------- Cards: add-ons, fax product ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(16px,2vw,24px)}
.card{position:relative;border:1px solid var(--wire);border-radius:var(--r-lg,14px);background:var(--deck);padding:clamp(20px,2.6vw,32px);display:flex;flex-direction:column;gap:10px}
.card.hot{border-color:rgba(139,44,245,.55);box-shadow:0 0 0 1px rgba(139,44,245,.15),0 30px 80px -40px var(--violet-glow)}
.card h3{font-size:22px}
.card p{color:var(--ink-2);font-size:16.5px;line-height:1.55}
.card .price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:4px 0}
.card .price b{font-family:var(--mono);font-weight:400;font-size:clamp(32px,3.4vw,44px);letter-spacing:-.03em;line-height:1;color:var(--ink)}
.card .price span{color:var(--ink-2);font-size:15.5px}
.card .eg{border-left:3px solid var(--signal);padding:8px 12px;background:rgba(111,227,180,.06);color:var(--ink);font-size:15.5px;border-radius:0 6px 6px 0}
.card .who-for{font-size:14.5px;color:var(--ink-2)}
.card .btn{align-self:flex-start;margin-top:auto}
.card .flag{position:absolute;top:-12px;left:20px;background:var(--violet);color:#fff;font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:4px 10px}
.card ul{list-style:none;padding:0;margin:4px 0 6px;display:grid;gap:6px}
.card li{position:relative;padding-left:24px;color:var(--ink-2);font-size:15.5px}
.card li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:6px;border-left:2px solid var(--violet-hi);border-bottom:2px solid var(--violet-hi);transform:rotate(-45deg)}
.vs{margin-top:16px;color:var(--ink-2);font-size:15px}

/* ---------- Desk phone photo ---------- */
.deskphone{margin:0;display:flex;flex-direction:column;align-items:center}
.deskphone img{width:100%;max-width:420px;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.deskphone figcaption{margin-top:10px;color:var(--ink-2);font-size:15.5px;line-height:1.5;text-align:center;max-width:36ch}
.deskphone figcaption b{display:block;color:var(--ink);font-size:18px;font-weight:650}
.splash-art picture{display:block;width:100%;height:100%}
.splash-art picture img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 30px rgba(0,0,0,.4))}

/* ---------- Welcome screen, customer card: three pictures in one (v4, 25 Oct 2026) ----------
   The desk phone in front on the left, the web client behind it, AVS Mobile in front on the right.
   The box has a fixed shape, so the card is as tall as it was with the single desk phone photo:
   720/440 in two columns (the same shape as the partner picture), 720/522 in one column (the old photo stood 257px tall
   at 390px wide). Its pictures are absolutely placed in percent of the box, so they add nothing to its height and look
   the same at every width. min-height:0 stops the pictures from stretching the box in the flex column. */
.splash-art.wel-group{position:relative;aspect-ratio:720/440;min-height:0}
.wel-group .wel-item{position:absolute;margin:0;display:block}
.wel-group .wel-web{left:18%;top:2%;width:63%;aspect-ratio:1440/900;border:1px solid var(--wire-hi);border-radius:6px;overflow:hidden;background:var(--deck);box-shadow:0 18px 44px -20px var(--violet-glow),0 12px 30px -16px rgba(0,0,0,.55);z-index:1}
.wel-group .wel-desk{left:0;bottom:0;width:45%;aspect-ratio:1/1;z-index:2}
.wel-group .wel-mob{right:1%;bottom:0;width:23%;aspect-ratio:672/1496;border:3px solid #1d2233;border-radius:14%/6.3%;overflow:hidden;background:#0b0f14;box-shadow:0 0 0 1px var(--wire-hi),0 18px 36px -14px rgba(0,0,0,.6);z-index:3}
.wel-group .wel-item picture{display:block;width:100%;height:100%}
.wel-group .wel-web img,.wel-group .wel-mob img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left;filter:none}
.wel-group .wel-desk img{width:100%;height:100%;object-fit:contain}
.wel-group .wel-web .wel-light{display:none}
@media (max-width:760px){.splash-art.wel-group{aspect-ratio:720/522}}

/* ---------- Partner site: the web client under the desk phone and the app (v4) ---------- */
.see-web{max-width:900px;margin:clamp(28px,3.4vw,48px) auto 0}
.see-web figcaption{text-align:center}

/* ---------- AVS Mobile gallery (tabs) ---------- */
.gal{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;justify-items:center}
.gal-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:4px;background:var(--deck-2);border:1px solid var(--wire-hi);border-radius:var(--r-sm,6px)}
.gal-tabs button{min-height:40px;padding:0 14px;border:0;border-radius:4px;background:transparent;color:var(--ink-2);font:600 15px var(--sans);cursor:pointer}
.gal-tabs button:hover{color:var(--ink)}
.gal-tabs button[aria-selected="true"]{background:var(--violet);color:#fff}
.gal-panel{display:flex;flex-direction:column;align-items:center;gap:14px}
.gal-phone{width:min(280px,72vw);aspect-ratio:672/1496;border:9px solid #1d2233;border-radius:38px;overflow:hidden;background:#0b0f14;box-shadow:0 0 0 1px var(--wire-hi),0 30px 70px -30px var(--violet-glow)}
.gal-phone img{display:block;width:100%;height:100%;object-fit:cover}
.gal-panel p{color:var(--ink-2);font-size:16px;line-height:1.5;text-align:center;max-width:36ch;min-height:3em}
.gal-head{display:flex;align-items:center;gap:12px}
.gal-head img{width:44px;height:44px;border-radius:10px}
.gal-head b{font-size:20px;font-weight:700}
.show2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;margin-top:clamp(20px,2.4vw,30px)}

/* ---------- "Estimated from public reports" with a tooltip ---------- */
.avs-est{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:650;color:var(--fault,#ffb547);margin-bottom:2px}
.avs-tip{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1px solid currentColor;font:700 11px var(--sans);cursor:help;flex:none}
.avs-tip:focus{outline:2px solid var(--violet-hi);outline-offset:2px}
.avs-tip-box{display:none;position:absolute;z-index:30;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:min(280px,calc(100vw - 32px));padding:10px 12px;border-radius:8px;background:var(--deck-2);border:1px solid var(--wire-hi);color:var(--ink);font:400 13px/1.5 var(--sans);text-align:left;box-shadow:0 18px 40px rgba(0,0,0,.45);pointer-events:none}
.avs-tip:hover .avs-tip-box,.avs-tip:focus .avs-tip-box{display:block}

/* ---------- Partner calculator add-ons ---------- */
.addon-ck{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:16px;line-height:1.45}
.addon-ck input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--violet)}
.addon-ck small{display:block;color:var(--ink-2);font-size:14px}
.addon-ck.off{opacity:.55;cursor:not-allowed}

/* ---------- Light mode ---------- */
:root[data-theme="light"] .gal-phone{border-color:#2a3042}
:root[data-theme="light"] .wel-group .wel-mob{border-color:#2a3042}
:root[data-theme="light"] .wel-group .wel-web{box-shadow:0 14px 34px -18px rgba(14,20,48,.35)}
:root[data-theme="light"] .wel-group .wel-web img,:root[data-theme="light"] .wel-group .wel-mob img{filter:none}
:root[data-theme="light"] .wel-group .wel-web .wel-dark{display:none}
:root[data-theme="light"] .wel-group .wel-web .wel-light{display:block}
:root[data-theme="light"] .deskphone img,:root[data-theme="light"] .splash-art picture img{filter:drop-shadow(0 20px 26px rgba(14,20,48,.22))}
:root[data-theme="light"] .avs-tip-box{box-shadow:0 18px 40px rgba(14,20,48,.18)}
:root[data-theme="light"] .avs-est{color:#8a4b00}
:root[data-theme="light"] .card .eg{background:rgba(10,122,80,.06)}
:root[data-theme="light"] .bubble.out{background:rgba(139,44,245,.10)}
:root[data-theme="light"] .sms-msg.out .sms-bubble{background:rgba(139,44,245,.10)}
:root[data-theme="light"] .sms-divider span{background:rgba(10,122,80,.06);border-color:rgba(10,122,80,.45);color:#0a7a50}
:root[data-theme="light"] .sms-divider::before,:root[data-theme="light"] .sms-divider::after{background:rgba(10,122,80,.35)}
:root[data-theme="light"] .sms-dot{background:#0a7a50;box-shadow:0 0 0 3px rgba(10,122,80,.15)}
:root[data-theme="light"] .api-m.get{border-color:rgba(10,122,80,.4);background:rgba(10,122,80,.07)}
:root[data-theme="light"] .api-m.post{background:rgba(139,44,245,.08)}
:root[data-theme="light"] .api-routes .api-row:nth-child(odd){background:rgba(139,44,245,.03)}
:root[data-theme="light"] .api-hook{background:rgba(139,44,245,.05)}

@media (max-width:1080px){.fx,.fx.flip,.show2{grid-template-columns:1fr}.fx.flip > .fx-art{order:0}}
@media (max-width:680px){.story li{padding-left:56px}.gal-tabs button{padding:0 10px;font-size:14px}}