/* Commwiser — digital-visibility: what only this page uses. */
/* =====================================================================================================
   Digital Visibility. The Litigation PR page's pattern (title block, chapter rail, every chapter a picture with
   words as labels) in this page's own colour, plum. The one dark moment is the AI Visibility Audit (04).
   Pictures with [data-play] play once they are properly on screen and reset when they leave it.
   ===================================================================================================== */
:root{--indigo:#47364F;--indigo-deep:#382A3F;--steel-light:#6E5A76}
.tb{border-bottom-color:#47364F}
.ch--dark{--bg:#2F2335}
.ch--dark .depth{background:#2F2335}
.ch--dark .depth::before{background:radial-gradient(58% 36% at 82% 16%,rgba(201,182,207,.14),transparent 70%),radial-gradient(52% 34% at 10% 72%,rgba(144,123,150,.16),transparent 70%)}
.dark .ch__n,.dark .lit__lbl{color:#C9B6CF}
.rail.is-dark a.is-here::before{color:#C9B6CF}
.rail.is-dark a.is-here::after{background:#C9B6CF}
.hdr.hdr--dark{--hdr-on-bg:rgba(30,22,34,.8)}
/* 01 how search is changing: ten links you choose from, beside one answer that chooses for you */
.sa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--col-gap)}
.sa__p{display:flex;flex-direction:column;margin:0;padding:clamp(20px,2.2vw,32px);background:#EEE8E5;border:1px solid rgba(71,54,79,.16)}
.sa__ai{background:#47364F;border-color:#47364F;color:#F7F2EF}
.sa__art{position:relative;min-height:clamp(250px,21vw,290px)}
.sa__bar{display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;border:1px solid rgba(21,25,27,.2);border-radius:20px;background:#F7F2EF}
.sa__bar svg,.sa__q svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.sa__bar i{display:block;height:4px;width:46%;background:rgba(21,25,27,.22)}
.sa__res{list-style:none;margin-top:16px}
.sa__res li{padding:7px 0;border-bottom:1px solid rgba(21,25,27,.08)}
.sa__res li::before,.sa__res li::after{content:"";display:block;height:5px;background:rgba(71,54,79,.55);width:var(--w,58%)}
.sa__res li::after{margin-top:6px;height:3px;width:calc(var(--w,58%) + 18%);background:rgba(21,25,27,.15)}
.sa__res li.is-you::before{background:#47364F}
.sa__res li.is-you{position:relative}
.sa__res li.is-you b{position:absolute;right:0;top:4px;font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#47364F}
.sa__q{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:18px 18px 4px 18px;background:rgba(247,242,239,.12);font-family:var(--display);font-size:clamp(15px,1.15vw,17px);line-height:1.3;color:#F7F2EF}
.sa__ans{margin-top:18px;display:grid;gap:9px}
.sa__ans i{display:block;height:4px;width:var(--w);background:rgba(247,242,239,.4);transform-origin:left}
.sa__cite{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.sa__cite span{padding:6px 11px;border:1px solid rgba(247,242,239,.3);font-family:var(--display);font-size:13px;letter-spacing:.06em;color:rgba(247,242,239,.7)}
.sa__cite span.is-you{background:#C9B6CF;border-color:#C9B6CF;color:#2F2335;font-weight:700}
.sa__p figcaption{margin-top:auto;padding-top:clamp(14px,1.6vw,20px);border-top:1px solid rgba(71,54,79,.22)}
.sa__ai figcaption{border-top-color:rgba(247,242,239,.26)}
.sa__p figcaption b{display:block;margin-top:8px;font-family:var(--display);font-weight:400;font-size:clamp(21px,1.75vw,26px);line-height:1.15;color:var(--dust)}
.sa__ai .dg__lb{color:#C9B6CF}
.sa__ai figcaption b{color:#F7F2EF}
.js .sa__res li{opacity:0;translate:0 10px;transition:opacity .4s ease var(--d),translate .5s var(--ease) var(--d)}
.js .sa.is-play .sa__res li{opacity:1;translate:none}
.js .sa__q span{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s steps(28,end) .2s}
.js .sa.is-play .sa__q span{clip-path:inset(0 0 0 0)}
.js .sa__ans i{transform:scaleX(0);transition:transform .6s var(--ease) var(--d)}
.js .sa.is-play .sa__ans i{transform:none}
.js .sa__cite span{opacity:0;transition:opacity .4s ease var(--d),background-color .4s ease,color .4s ease}
.js .sa.is-play .sa__cite span{opacity:1}
/* 02 four layers: authority underneath everything, search on it, and the two new layers on top */
.ly{list-style:none;display:flex;flex-direction:column;align-items:center;gap:8px}
.ly li{position:relative;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:center;column-gap:clamp(18px,2.4vw,40px);width:var(--w);padding:clamp(16px,1.7vw,24px) clamp(18px,2.2vw,32px);background:var(--s);color:#F7F2EF}
.ly li:nth-child(1){--w:64%;--s:#806D89;--d:.66s}
.ly li:nth-child(2){--w:76%;--s:#6D5A76;--d:.44s}
.ly li:nth-child(3){--w:88%;--s:#5A4763;--d:.22s}
.ly li:nth-child(4){--w:100%;--s:#47364F;--d:0s}
.ly h3{font-family:var(--display);font-weight:400;font-size:clamp(30px,2.8vw,42px);line-height:1;letter-spacing:.02em}
.ly small{display:block;margin-top:6px;font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,242,239,.72)}
.ly p{font-family:var(--display);font-size:clamp(17px,1.35vw,20px);line-height:1.3;color:rgba(247,242,239,.92)}
.ly em{position:absolute;right:10px;top:-9px;padding:3px 8px;background:#C9B6CF;color:#2F2335;font-style:normal;font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.js .ly li{opacity:0;translate:0 22px;transition:opacity .5s ease var(--d),translate .6s var(--ease) var(--d)}
.js .ly.is-play li{opacity:1;translate:none}
/* 03 the AI Visibility Audit: a sample report, its meters filling */
.au{max-width:780px;margin-top:clamp(28px,3vw,44px);padding:clamp(22px,2.6vw,38px);background:rgba(247,242,239,.06);border:1px solid rgba(247,242,239,.2);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.au__hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid rgba(247,242,239,.2)}
.au__hd b{font-family:var(--display);font-weight:400;font-size:clamp(22px,1.9vw,28px);color:#F7F2EF}
.au__hd .dg__lb{color:#C9B6CF}
.au ul{list-style:none}
.au li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;column-gap:clamp(16px,2vw,30px);padding:clamp(14px,1.5vw,20px) 0;border-bottom:1px solid rgba(247,242,239,.12)}
.au li span{font-family:var(--display);font-size:clamp(17px,1.35vw,20px);line-height:1.25;color:#F7F2EF}
.au li i{position:relative;display:block;height:8px;background:rgba(247,242,239,.12);overflow:hidden}
.au li i::after{content:"";position:absolute;inset:0;width:var(--v);background:#C9B6CF;transform-origin:left;transition:transform 1.1s var(--ease) var(--d)}
.js .au li i::after{transform:scaleX(0)}
.js .au.is-play li i::after{transform:none}
.au__ft{margin-top:16px;font-family:var(--display);font-style:italic;font-size:15px;color:rgba(247,242,239,.62)}
/* 04 social media: a campaign builds authority, and authority is what search and AI pick up */
.sm{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(24px,.45fr) auto minmax(36px,.6fr) minmax(0,.9fr);align-items:center;padding:clamp(24px,2.8vw,40px) clamp(22px,2.6vw,38px);background:#EEE8E5}
.sm__posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sm__posts i{aspect-ratio:4/5;background:#F7F2EF;border:1px solid rgba(71,54,79,.18);box-shadow:0 8px 16px -10px rgba(21,25,27,.35);
  background-image:linear-gradient(rgba(71,54,79,.55),rgba(71,54,79,.55)),linear-gradient(rgba(21,25,27,.12),rgba(21,25,27,.12)),linear-gradient(rgba(21,25,27,.12),rgba(21,25,27,.12));background-size:34% 34%,70% 3px,52% 3px;background-position:12% 14%,12% 70%,12% 82%;background-repeat:no-repeat}
.sm__col .dg__lb{display:block;margin-bottom:12px}
.sm__col b,.sm__out b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(18px,1.5vw,22px);line-height:1.15;color:var(--dust)}
.sm__col b{margin-top:12px}
.sm__ln{height:1px;background:#47364F;transform-origin:left}
.sm__node{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.sm__node span{display:grid;place-items:center;width:clamp(80px,7vw,100px);aspect-ratio:1;border-radius:50%;background:#47364F;color:#F7F2EF}
.sm__node .ic{width:46%}
.sm__fork{align-self:stretch;position:relative}
.sm__fork svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sm__fork path{fill:none;stroke:#47364F;stroke-width:1.3;vector-effect:non-scaling-stroke}
.sm__outs{display:grid;grid-template-rows:1fr 1fr;align-self:stretch}
.sm__out{display:flex;align-items:center;gap:14px;padding-left:12px}
.sm__out .ic{flex:none;width:clamp(34px,2.8vw,42px);color:#47364F}
.js .sm__posts i{opacity:0;scale:.9;transition:opacity .4s ease var(--d),scale .5s var(--ease) var(--d)}
.js .sm.is-play .sm__posts i{opacity:1;scale:1}
.js .sm__ln{transform:scaleX(0);transition:transform .6s var(--ease-io) .7s}
.js .sm.is-play .sm__ln{transform:none}
.js .sm__node span{background:#EEE8E5;color:#47364F;box-shadow:inset 0 0 0 1.5px #47364F;transition:background .4s ease 1.2s,color .4s ease 1.2s}
.js .sm.is-play .sm__node span{background:#47364F;color:#F7F2EF}
.sm__wipe{transform-origin:0 0}
.js .sm__fork .sm__wipe{transform:scaleX(0);transition:transform .7s var(--ease-io) 1.45s}
.js .sm.is-play .sm__fork .sm__wipe{transform:none}
.js .sm__out{opacity:.35;transition:opacity .5s ease 2s}
.js .sm.is-play .sm__out{opacity:1}
@media print{
  .js .sa__res li,.js .sa__cite span,.js .ly li,.js .sm__posts i,.js .sm__out{opacity:1;translate:none;scale:1}
  .js .sa__q span{clip-path:none}
  .js .sa__ans i,.js .au li i::after,.js .sm__ln,.js .sm__fork .sm__wipe{transform:none}
}
@media (max-width:900px){
  .rail.is-dark{background:rgba(47,35,53,.94)}
  .rail a.is-here::before{color:#E2D5E6}
}
@media (max-width:1179px){
  .ly li{grid-template-columns:minmax(0,1fr)}
  .ly p{margin-top:10px}
}
@media (max-width:700px){
  .sa{grid-template-columns:minmax(0,1fr)}
  .sa__art{min-height:0}
  .ly{align-items:flex-start}
  .ly li:nth-child(1){--w:82%}
  .ly li:nth-child(2){--w:88%}
  .ly li:nth-child(3){--w:94%}
  .au li{grid-template-columns:minmax(0,1fr);row-gap:10px}
  .sm{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;row-gap:0}
  .sm__col{width:100%}
  .sm__ln{width:1px;height:30px;margin:14px 0;transform-origin:top}
  .js .sm__ln{transform:scaleY(0)}
  .sm__fork{display:none}
  .sm__outs{grid-template-rows:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;margin-top:22px;padding-top:18px;border-top:1px solid rgba(71,54,79,.3)}
  .sm__out{flex-direction:column;padding:0;gap:8px}
}

/* 05: the social media visibility loop. Six stages in a row, each lit in turn; a line returns from the last to the
   first underneath, because each stage informs the next */
.lp{margin-top:clamp(30px,3.2vw,48px)}
.lp ol{list-style:none;position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:14px;padding-bottom:30px}
.lp li{position:relative;display:flex;align-items:flex-end;min-height:clamp(84px,7vw,104px);padding:12px 12px 12px 14px;background:#EEE8E5;border-top:3px solid var(--indigo);font-family:var(--display);font-size:clamp(16px,1.25vw,18px);line-height:1.2;color:var(--dust)}
.lp li:not(:last-child)::after{content:"";position:absolute;right:-8px;top:50%;width:8px;height:2px;background:var(--indigo)}
.lp ol::after{content:"";position:absolute;left:calc(100% / 12);right:calc(100% / 12);bottom:4px;height:22px;border:2px solid #907B96;border-top:0}
.lp ol::before{content:"";position:absolute;left:calc(100% / 12 - 5px);bottom:24px;border:6px solid transparent;border-bottom:8px solid #907B96;border-top:0;z-index:1}
.lp__back{margin-top:4px;font-family:var(--display);font-style:italic;font-size:16px;color:rgba(21,25,27,.66)}
.lp li:nth-child(1){--i:0}.lp li:nth-child(2){--i:1}.lp li:nth-child(3){--i:2}.lp li:nth-child(4){--i:3}.lp li:nth-child(5){--i:4}.lp li:nth-child(6){--i:5}
.js .lp li{opacity:.25}
.js .lp.is-play li{opacity:1;transition:opacity .45s ease calc(var(--i) * .22s + .15s)}
.js .lp ol::after,.js .lp ol::before{opacity:0}
.js .lp.is-play ol::after,.js .lp.is-play ol::before{opacity:1;transition:opacity .6s ease 1.5s}
@media print{.js .lp li,.js .lp ol::after,.js .lp ol::before{opacity:1}}
@media (max-width:1179px){
  .lp ol{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}
  .lp li:nth-child(3)::after{display:none}
}
@media (max-width:700px){
  /* the loop runs down the page, the return line on the left */
  .lp ol{grid-template-columns:minmax(0,1fr);row-gap:6px;padding:0 0 0 22px}
  .lp li{min-height:0}
  .lp li:not(:last-child)::after{display:none}
  .lp ol::after{left:0;right:auto;top:18px;bottom:18px;width:12px;height:auto;border:2px solid #907B96;border-right:0}
  .lp ol::before{left:6px;bottom:auto;top:12px;border:6px solid transparent;border-left:8px solid #907B96;border-right:0}
}