/*
 * The brand kit page (/brand and /ar-brand). One stylesheet for the page,
 * loaded after the shared layers (experience.css, v2.css), which keep the
 * header, the footer and the phone chrome. Built from the brand guide
 * (docs/design/saywork-brand-guide.html): graphite / chalk / paper, pink
 * for voice only, green and mint for done only, Bricolage Grotesque and
 * Figtree, flat colour, no gradients. Logical properties only, so the
 * Arabic page mirrors without its own rules.
 */
:root{
  --graphite:#1D2023;--graphite-2:#2A2E32;--chalk:#EEF0EA;--paper:#FAFBF8;
  --pink:#FF4F8B;--green:#0F7A55;--mint:#45D7A2;--stone:#5E6561;--line:#D6DBD2;
  --display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --ui:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sh1:0 1px 2px rgba(29,32,35,.06),0 1px 1px rgba(29,32,35,.04);
  --sh2:0 6px 20px rgba(29,32,35,.08);
  --sh3:0 18px 48px rgba(29,32,35,.14);
}
html[lang=ar]{--display:"Bricolage Grotesque","IBM Plex Sans Arabic","Figtree",system-ui,sans-serif;--ui:"Figtree","IBM Plex Sans Arabic",system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--chalk);color:var(--graphite);font-family:var(--ui);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
.bk main img,.bk main svg{display:block}
.wrap{max-width:1200px;margin:0 auto;padding-inline:var(--gut,32px)}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:8px}

/* ------------------------------------------------ type: out of the poster sizes
 * v2.css sizes every main h1/h2 for marketing posters (96 / 64 px). This page
 * is a reference, so it uses the brand guide's own scale: 40 / 20 / 16. */
body.v2.bk main h1{font:800 clamp(42px,6vw,80px)/.98 var(--display)!important;letter-spacing:-.045em!important;max-width:15ch}
body.v2.bk main h2{font:800 clamp(28px,3.2vw,40px)/1.08 var(--display);letter-spacing:-.03em;margin-bottom:12px}
body.v2.bk main h3{font:600 20px/1.3 var(--display);letter-spacing:-.01em;margin-bottom:6px}
body.v2.bk main .lede{font-size:18px;line-height:1.5;max-width:60ch;color:var(--stone)}
html[lang=ar] body.v2.bk main :is(h1,h2,h3){letter-spacing:0!important;line-height:1.25!important}
.bk main p{max-width:64ch}
.bk .note{font-size:15px;color:var(--stone)}

/* ------------------------------------------------------------------- hero */
.bk .bk-hero h1{color:var(--chalk)}
.bk .bk-hero .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center}
.bk .bk-hero .lede{color:#b9c0bb!important;margin-top:18px}
.bk .bk-hero .lede a{color:var(--chalk)}
.bk .bk-heromark{width:min(100%,340px);justify-self:center;color:var(--chalk)}
.bk .bk-heromark svg{width:100%;height:auto}
.bk-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.bk main .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 22px;border-radius:999px;border:0;background:var(--graphite);color:var(--chalk);font:600 16px var(--ui);text-decoration:none;cursor:pointer}
.bk main .btn svg{width:17px;height:17px;flex:none}
.bk main .btn.ghost{background:transparent;color:var(--graphite);box-shadow:inset 0 0 0 1.5px var(--line)}
.bk .bk-hero .btn{background:var(--chalk);color:var(--graphite)}
.bk .bk-hero .btn.ghost{background:transparent;color:var(--chalk);box-shadow:inset 0 0 0 1.5px rgba(238,240,234,.35)}
.bk-toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;list-style:none}
.bk-toc a{display:inline-flex;height:34px;align-items:center;padding:0 14px;border-radius:999px;background:rgba(238,240,234,.08);color:var(--chalk);font-size:14px;font-weight:600;text-decoration:none}
.bk-toc a:hover{background:rgba(238,240,234,.16)}
.bk-meta{margin-top:14px;font-size:14px;color:#9aa19c}

/* --------------------------------------------------------------- sections */
.bk-sec{padding:88px 0 0;scroll-margin-top:90px}
.bk-sec:last-of-type{padding-bottom:96px}
.bk-sub{margin-top:48px}
.bk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.bk-grid.two{grid-template-columns:repeat(2,1fr)}
.bk-card{background:var(--paper);border-radius:20px;box-shadow:var(--sh1);padding:20px;display:flex;flex-direction:column;gap:12px}
.bk-card p{font-size:15px;color:var(--stone)}

/* ------------------------------------------------------------------- logo */
.bk-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bk-pair.one{grid-template-columns:1fr}
.bk-tile{border-radius:16px;min-height:150px;display:grid;place-items:center;padding:26px;background:var(--chalk)}
.bk-tile.dark{background:var(--graphite)}
.bk-tile img{max-width:100%;height:auto}
.bk-tile .m{width:110px}
.bk-tile .w{width:150px}
.bk-tile .l{width:180px}
.bk-tile .og{width:100%;border-radius:10px}
.bk-icons{display:flex;align-items:flex-end;justify-content:center;gap:18px}
.bk-icons img{height:auto}
.bk-dl{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px}
.bk-dl span{color:var(--stone)}
.bk-dl a{font-weight:600;text-underline-offset:3px}
.bk-zip{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:24px;padding:20px 22px;border-radius:20px;background:var(--paper);box-shadow:var(--sh1)}
.bk-zip p{font-size:15px;color:var(--stone)}
.bk-space{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-top:16px}
.bk-space figure{background:var(--paper);border-radius:20px;box-shadow:var(--sh1);padding:24px;display:grid;place-items:center}
.bk-space figure svg{width:min(100%,360px);height:auto}
.bk-space figcaption{margin-top:10px;font-size:14px;color:var(--stone);text-align:center}
.bk-min{display:flex;align-items:flex-end;gap:22px;margin-top:14px}
.bk-min img{height:auto}
.bk-min small{display:block;margin-top:6px;font-size:12px;color:var(--stone);text-align:center}

/* ----------------------------------------------------------------- colour */
.bk-sw{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:28px}
.bk-sw.sup{grid-template-columns:repeat(3,1fr);margin-top:12px}
.bk-swatch{background:var(--paper);border-radius:20px;box-shadow:var(--sh1);overflow:hidden;display:flex;flex-direction:column}
.bk-swatch i{display:block;height:120px}
.bk-sw.sup .bk-swatch i{height:64px}
.bk-swatch i.lt{box-shadow:inset 0 -1px 0 var(--line)}
.bk-swatch div{padding:14px 14px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.bk-swatch b{font:600 19px/1.2 var(--display);letter-spacing:-.01em}
.bk-swatch p{font-size:14px;line-height:1.45;color:var(--stone)}
.bk-swatch .cr{font-size:13px}
.bk-codes{display:flex;flex-wrap:wrap;gap:6px}
.bk-copy{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:0;border-radius:8px;background:var(--chalk);color:var(--graphite);font:600 13px var(--ui);font-variant-numeric:tabular-nums;cursor:pointer;direction:ltr}
.bk-copy:hover{background:#e3e7df}
.bk-copy svg{width:13px;height:13px;flex:none;opacity:.7}
.bk-copy.ok{background:var(--green);color:var(--paper)}
.bk-rules{display:grid;gap:14px;margin-top:28px}
.bk-rules p{padding-inline-start:16px;border-inline-start:3px solid var(--line)}
.bk-rules .pink{border-color:var(--pink)}.bk-rules .green{border-color:var(--green)}.bk-rules .graph{border-color:var(--graphite)}

/* ------------------------------------------------------------------- type */
.bk-spec{background:var(--paper);border-radius:20px;box-shadow:var(--sh1);padding:30px}
.bk-spec .big{font:800 clamp(72px,9vw,112px)/.9 var(--display);letter-spacing:-.045em}
.bk-spec .semi{font:600 34px/1.1 var(--display);letter-spacing:-.01em;margin-top:10px}
.bk-spec .ui{font:600 44px/1 var(--ui);letter-spacing:-.01em}
.bk-spec .wts{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-size:20px}
.bk-spec .meta{margin-top:18px;font-size:15px;color:var(--stone)}
.bk-spec .meta b{color:var(--graphite)}
.bk-scale{margin-top:28px;display:grid}
.bk-scale div{display:grid;grid-template-columns:130px 1fr;align-items:baseline;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.bk-scale small{font-size:13px;color:var(--stone)}
.bk-scale .s-hero{font:800 clamp(44px,7vw,96px)/1 var(--display);letter-spacing:-.045em}
.bk-scale .s-head{font:800 clamp(28px,4vw,40px)/1.1 var(--display);letter-spacing:-.03em}
.bk-scale .s-title{font:600 20px/1.3 var(--display)}
.bk-scale .s-body{font:400 16px/1.55 var(--ui)}
.bk-scale .s-label{font:600 13px/1.4 var(--ui);color:var(--stone)}
html[lang=ar] .bk-scale :is(.s-hero,.s-head){letter-spacing:0;line-height:1.3}

/* ------------------------------------------------------------- components */
.bk-stage{background:var(--paper);border-radius:28px;box-shadow:var(--sh1);min-height:200px;display:grid;place-items:center;padding:40px 16px;overflow:hidden;margin-top:20px}
.bk-stage .slot{transform:scale(1.25)}
.bk-seg{display:inline-flex;background:var(--paper);border-radius:12px;padding:3px;gap:2px;box-shadow:var(--sh1)}
.bk-seg button{font:600 14px var(--ui);border:0;background:transparent;color:var(--stone);padding:7px 14px;border-radius:9px;cursor:pointer}
.bk-seg button[aria-pressed="true"]{background:var(--graphite);color:var(--chalk)}
.bk-seg button:disabled{opacity:.4;cursor:default}
.bk-controls{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* the floating bar (brand guide, "Floating bar") */
.bk-bar{--w:252px;display:inline-flex;align-items:center;gap:10px;height:44px;width:var(--w);padding:0 8px 0 7px;border-radius:22px;background:var(--graphite);color:var(--chalk);box-shadow:0 10px 30px -12px rgba(29,32,35,.55),inset 0 0 0 1px rgba(255,255,255,.06);transition:width .45s cubic-bezier(.3,1.3,.5,1);overflow:hidden;white-space:nowrap;font-family:var(--ui)}
[dir=rtl] .bk-bar{padding:0 7px 0 8px}
.bk-bar .chip{flex:none;height:28px;min-width:44px;padding:0 10px;border-radius:14px;display:grid;place-items:center;font-size:13px;font-weight:700;letter-spacing:.01em;transition:background .3s,color .3s,box-shadow .3s}
.bk-bar[data-mode="type"] .chip{box-shadow:inset 0 0 0 1.5px rgba(238,240,234,.35);color:var(--chalk)}
.bk-bar[data-mode="do"] .chip{background:var(--pink);color:var(--graphite)}
.bk-bar .viz{flex:none;position:relative;width:96px;height:32px;transition:width .45s cubic-bezier(.3,1.3,.5,1)}
.bk-bar .viz svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bk-bar .wave path{fill:none;stroke:var(--pink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s,opacity .3s}
.bk-bar .done path{fill:none;stroke:var(--mint);stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s ease .1s}
.bk-bar .status{font-size:14px;font-weight:500;color:rgba(238,240,234,.85);overflow:hidden;text-overflow:ellipsis;min-width:0}
.bk-bar .stop{flex:none;margin-inline-start:auto;width:28px;height:28px;border-radius:50%;border:0;background:rgba(238,240,234,.1);display:grid;place-items:center}
.bk-bar .stop i{width:9px;height:9px;border-radius:2px;background:var(--chalk)}
.bk-bar[data-state="idle"]{--w:58px;padding:0 7px}
.bk-bar[data-state="idle"] .chip,.bk-bar[data-state="idle"] .status,.bk-bar[data-state="idle"] .stop{display:none}
.bk-bar[data-state="idle"] .viz{width:44px}
.bk-bar[data-state="idle"] .wave path{stroke:rgba(238,240,234,.45)}
.bk-bar[data-mode="type"] .status{display:none}
.bk-bar[data-state="working"] .wave path{stroke:rgba(238,240,234,.7)}
.bk-bar[data-state="working"] .viz{width:64px}
.bk-bar[data-state="done"] .viz{width:60px}
.bk-bar[data-state="done"] .wave path{opacity:0}
.bk-bar[data-state="done"] .done path{stroke-dashoffset:0}
.bk-bar[data-state="done"] .stop{display:none}
.bk-bar[data-state="done"] .status{color:var(--mint);font-weight:600}
.bk-bar[data-mode="type"][data-state="done"] .status{display:block}
.bk-bar[data-mode="do"][data-state="listening"]{--w:292px}
.bk-bar[data-mode="do"][data-state="working"]{--w:384px}
.bk-bar[data-mode="do"][data-state="done"]{--w:350px}
.bk-bar[data-mode="type"][data-state="listening"]{--w:210px}
.bk-bar[data-mode="type"][data-state="done"]{--w:276px}

/* the agent receipt (brand guide, "The agent receipt") */
.bk-rstage{background:var(--paper);border-radius:28px;box-shadow:var(--sh1);padding:40px 20px;display:flex;flex-direction:column;align-items:center}
.bk-rstage .bk-bar{--w:min(330px,100%);border-radius:22px 22px 0 0;box-shadow:none}
.bk-receipt{width:min(330px,100%);background:var(--graphite);color:var(--chalk);border-radius:0 0 22px 22px;padding:18px 18px 14px;position:relative;box-shadow:0 22px 40px -22px rgba(29,32,35,.6)}
.bk-receipt::before{content:"";position:absolute;inset-inline:18px;top:0;border-top:1.5px dashed rgba(238,240,234,.28)}
.bk-receipt .ask{font-size:15px;line-height:1.4;padding-bottom:14px;border-bottom:1px dashed rgba(238,240,234,.2)}
.bk-receipt .ask small{display:block;color:rgba(238,240,234,.55);font-size:12.5px;margin-bottom:4px}
.bk-steps{list-style:none;display:grid;gap:10px;padding:14px 0}
.bk-steps li{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;font-size:14px}
.bk-steps time{font-size:12px;color:rgba(238,240,234,.5);font-variant-numeric:tabular-nums}
.bk-steps .ok{width:16px;height:16px}
.bk-steps .now{width:10px;height:10px;border-radius:50%;background:var(--pink);margin-inline-start:3px;animation:bk-pulse 1.2s ease-in-out infinite}
.bk-steps li.pending{color:rgba(238,240,234,.45)}
.bk-steps li.pending i{width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(238,240,234,.35);margin-inline-start:3px}
@keyframes bk-pulse{50%{transform:scale(.55);opacity:.5}}
.bk-receipt .acts{display:flex;gap:8px;padding-top:12px;border-top:1px dashed rgba(238,240,234,.2)}
.bk-receipt .acts span{flex:1;font:600 13.5px var(--ui);border-radius:12px;padding:9px;text-align:center}
.bk-receipt .acts .watch{background:var(--chalk);color:var(--graphite)}
.bk-receipt .acts .halt{background:rgba(238,240,234,.1);color:var(--chalk)}

/* the composer (brand guide, the home screen's say box) */
.bk-saybox{display:flex;align-items:center;gap:12px;width:min(640px,100%);background:var(--chalk);border:1.5px solid var(--line);border-radius:20px;padding:10px}
.bk-saybox .bk-seg{box-shadow:none}
.bk-saybox .bk-seg button{padding:6px 12px}
.bk-saybox .field{flex:1;font-size:16px;color:var(--stone);min-width:0}
.bk-mic{width:44px;height:44px;border-radius:14px;background:var(--pink);display:grid;place-items:center;flex:none}
.bk-mic svg{width:22px;height:22px}

/* ------------------------------------------------------------------ voice */
.bk-line{margin-top:24px;padding:26px 28px;border-radius:20px;background:var(--paper);box-shadow:var(--sh1)}
.bk-line q{display:block;font:800 clamp(24px,3vw,34px)/1.1 var(--display);letter-spacing:-.025em;quotes:none;max-width:24ch}
html[lang=ar] .bk-line q{letter-spacing:0;line-height:1.35}
.bk-line p{margin-top:12px;color:var(--stone)}
.bk-says{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.bk-say{border-radius:20px;padding:22px 24px;background:var(--paper);box-shadow:var(--sh1)}
.bk-say ul{list-style:none;display:grid;gap:10px;margin-top:10px}
.bk-say li{font-size:15.5px;padding-inline-start:16px;position:relative}
.bk-say li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--graphite)}
.bk-say.no li{color:var(--stone)}
.bk-say.no li::before{background:var(--line)}
.bk-lol{margin-top:16px;background:var(--graphite);color:var(--chalk);border-radius:20px;padding:24px 26px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.bk-lol q{color:var(--pink);font:800 30px/1.05 var(--display);letter-spacing:-.025em;quotes:none}
html[lang=ar] .bk-lol q{letter-spacing:0;line-height:1.35}
.bk-lol h3{color:var(--chalk)}
.bk-lol p{color:rgba(238,240,234,.78);font-size:15.5px}

/* ------------------------------------------------------------ do and don't */
.bk-dont{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.bk-dont figure{background:var(--paper);border-radius:20px;box-shadow:var(--sh1);padding:18px;display:flex;flex-direction:column;align-items:center;gap:12px}
.bk-dont .t{width:100%;height:110px;border-radius:14px;background:var(--chalk);display:grid;place-items:center;overflow:hidden}
.bk-dont .t svg{width:84px;height:auto}
.bk-dont figcaption{font-size:14px;font-weight:600;text-align:center}
.bk-dont figcaption::before{content:"✕ ";color:var(--stone)}
.bk-dont .stretch svg{transform:scaleX(1.55) scaleY(.75)}
.bk-dont .rot svg{transform:rotate(-24deg)}
.bk-dont .circ span{width:84px;height:84px;border-radius:50%;background:var(--graphite);display:grid;place-items:center;color:var(--chalk)}
.bk-dont .circ svg{width:54px}
.bk-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.bk-list ul{list-style:none;display:grid;gap:10px;margin-top:10px}
.bk-list li{font-size:15.5px;padding-inline-start:22px;position:relative}
.bk-list .do li::before,.bk-list .dont li::before{position:absolute;inset-inline-start:0;top:0;font-weight:700}
.bk-list .do li::before{content:"✓";color:var(--green)}
.bk-list .dont li::before{content:"✕";color:var(--stone)}
.bk-terms{margin-top:28px;font-size:15px;color:var(--stone)}
.bk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------------ small */
@media (max-width:980px){
  .bk .bk-hero .wrap{grid-template-columns:1fr}
  .bk .bk-heromark{justify-self:start;width:180px}
  .bk-grid{grid-template-columns:1fr 1fr}
  .bk-sw{grid-template-columns:repeat(3,1fr)}
  .bk-dont{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .bk-sec{padding-top:64px}
  .bk-grid,.bk-grid.two,.bk-space,.bk-says,.bk-lol,.bk-list{grid-template-columns:1fr}
  .bk-sw,.bk-sw.sup{grid-template-columns:1fr 1fr}
  .bk-scale div{grid-template-columns:1fr;gap:6px}
  .bk-stage .slot{transform:scale(.85)}
  .bk-saybox{flex-wrap:wrap}.bk-saybox .field{order:3;flex-basis:100%}.bk-mic{margin-inline-start:auto}
}
@media (prefers-reduced-motion:reduce){
  .bk *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}