/* The AI Adoption, use-case pages (/insights/best-ai-use-cases-for-<industry>, /insights/ai-use-cases-for-<industry>).
   Generated pages: seo/use-cases/build.mjs writes them, this file styles them. Every page loads it with ?v=<n>:
   bump n in build.mjs (CSS_VERSION) whenever this file changes, then rebuild. Square, site palette, hairlines. */

.uc-page{--ink:#003049;--ink-2:#1d3557;--soft:#4b5d6c;--line:rgba(0,48,73,.12);--line-2:rgba(0,48,73,.2);--sheet:#fff}
.uc-page .editorial-hero{padding-bottom:64px}
.uc-page .editorial-hero h1{font-size:clamp(44px,5.6vw,84px);line-height:1.06;letter-spacing:-.04em;margin:0;text-wrap:balance}
.uc-page .hero-intro{margin:34px 0 0;max-width:720px}
.uc-page .review-date{margin:22px 0 0;font-size:13px;line-height:1.5;color:var(--soft)}
.uc-page .review-date a{color:inherit}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* app chips: the real icon and its name */
.uc-apps{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:0;padding:0}
.uc-apps li{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:1.3;color:var(--ink-2)}
.uc-apps img{width:20px;height:20px;object-fit:contain;flex:none}
.uc-ico{display:inline-flex;gap:6px;align-items:center}
.uc-ico img{width:18px;height:18px;object-fit:contain}

/* number squares (CSS content, the number is a list position) */
.uc-pin,.uc-sq{--pin:26px}
.uc-sq{display:inline-grid;place-items:center;flex:none;width:var(--pin);height:var(--pin);background:var(--ink);color:#fff;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.uc-sq::before{content:attr(data-n)}
.uc-sq.is-best{background:var(--azure)}

/* ---------- hero: the job programme (construction) ---------- */
.uc-hero-fig{margin:44px 0 0}
.uc-prog{background:var(--sheet);border:1px solid var(--line);padding:26px 30px 18px}
.uc-prog-top{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:end;gap:0 20px;padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.uc-prog-name{margin:0;font-size:13px;line-height:1.45;color:var(--soft)}
.uc-prog-name b{display:block;font-weight:600;color:var(--ink);font-size:14px}
.uc-prog-months{display:grid;grid-template-columns:repeat(var(--m),minmax(0,1fr));list-style:none;margin:0;padding:0}
.uc-prog-months li{font-size:12px;color:var(--soft);padding-left:8px;border-left:1px solid var(--line)}
.uc-prog-rows{list-style:none;margin:0;padding:0}
.uc-prog-row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:0 20px;min-height:66px;border-bottom:1px solid var(--line)}
.uc-prog-row:last-child{border-bottom:0}
.uc-prog-label{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:12px 0}
.uc-prog-label b{font-size:14px;font-weight:600;color:var(--ink);line-height:1.25}
.uc-prog-body{position:relative}
.uc-prog-lines{position:absolute;top:0;bottom:0;left:240px;right:0;display:grid;grid-template-columns:repeat(var(--m),minmax(0,1fr));pointer-events:none}
.uc-prog-lines i{border-left:1px solid var(--line)}
.uc-prog-track{position:relative}
.uc-prog-bar{position:absolute;top:50%;left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);height:10px;margin-top:-5px;background:var(--ink)}
.uc-prog-bar.is-dashed{height:0;margin-top:0;background:none;border-top:2px dashed rgba(0,48,73,.45)}
.uc-prog-ticks{position:absolute;top:50%;left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);height:14px;margin-top:-7px;display:flex;justify-content:space-between}
.uc-prog-ticks i{display:block;width:3px;height:14px;background:var(--azure)}
.uc-prog-ticks i.is-month{background:var(--ink);height:20px;margin-top:-3px}
.uc-pin{position:absolute;top:50%;left:calc(var(--at) * 100%);display:flex;align-items:center;gap:0;transform:translateY(-50%);text-decoration:none;color:var(--ink);z-index:1}
.uc-pin .uc-sq{box-shadow:0 0 0 3px var(--sheet);transition:transform .25s cubic-bezier(.22,1,.36,1),background-color .25s}
.uc-pin span:last-child{font-size:12.5px;font-weight:500;line-height:1.2;white-space:nowrap;background:var(--sheet);padding:3px 6px 3px 9px}
.uc-pin:hover .uc-sq,.uc-pin:focus-visible .uc-sq{transform:scale(1.12);background:var(--azure)}
.uc-pin:hover span:last-child,.uc-pin:focus-visible span:last-child{text-decoration:underline;text-decoration-color:var(--azure);text-underline-offset:4px}
.uc-pin:focus-visible{outline:2px solid var(--azure);outline-offset:4px}

/* ---------- hero: the clinic diary ---------- */
.uc-diary{display:grid;grid-template-columns:minmax(0,1fr) 300px;background:var(--sheet);border:1px solid var(--line)}
.uc-diary-main{padding:24px 26px 26px;min-width:0}
.uc-diary-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.uc-diary-top b{font-size:15px;font-weight:600;color:var(--ink)}
.uc-diary-top span{font-size:12.5px;color:var(--soft)}
.uc-diary-banner{display:flex;align-items:center;gap:12px;margin:0 0 14px 56px;padding:11px 14px;background:var(--cream);text-decoration:none;color:var(--ink);font-size:13px;line-height:1.35}
.uc-diary-banner:hover .uc-sq,.uc-diary-banner:focus-visible .uc-sq{background:var(--azure)}
.uc-diary-grid{display:grid;grid-template-columns:56px repeat(3,minmax(0,1fr));grid-template-rows:auto repeat(var(--h),minmax(52px,auto));gap:0 8px}
.uc-diary-col{grid-row:1;font-size:12px;font-weight:600;color:var(--ink);padding:0 0 8px;border-bottom:1px solid var(--line-2)}
.uc-diary-time{grid-column:1;font-size:11px;color:var(--soft);padding-top:4px;border-top:1px solid var(--line)}
.uc-diary-time::before{content:attr(data-t)}
.uc-diary-line{grid-column:2 / -1;border-top:1px solid var(--line);pointer-events:none}
.uc-slot{position:relative;margin:4px 0;padding:7px 10px;background:#eef3f6;border:1px solid rgba(0,48,73,.08);display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;text-decoration:none;color:var(--ink)}
.uc-slot b{font-size:12.5px;font-weight:600;line-height:1.2}
.uc-slot small{font-size:11.5px;line-height:1.25;color:var(--ink-2)}
.uc-slot.is-cancelled b{text-decoration:line-through;text-decoration-color:rgba(0,48,73,.5);color:var(--soft)}
.uc-slot.has-pin{background:#fff;border-color:var(--ink);padding-right:42px}
.uc-slot .uc-sq{position:absolute;top:50%;right:8px;margin-top:-13px}
a.uc-slot:hover .uc-sq,a.uc-slot:focus-visible .uc-sq{background:var(--azure)}
a.uc-slot:focus-visible,.uc-diary-banner:focus-visible,.uc-desk a:focus-visible{outline:2px solid var(--azure);outline-offset:2px}
.uc-desk{border-left:1px solid var(--line);padding:24px 22px}
.uc-desk h3{margin:0 0 12px;font-size:15px;font-weight:600;color:var(--ink)}
.uc-desk ol{list-style:none;margin:0;padding:0}
.uc-desk li+li{border-top:1px solid var(--line)}
.uc-desk a{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:center;padding:12px 0;text-decoration:none;color:var(--ink)}
.uc-desk a b{display:block;font-size:13px;font-weight:600;line-height:1.25}
.uc-desk a .uc-ico{margin-top:5px}
.uc-desk a:hover .uc-sq{background:var(--azure)}

/* ---------- hero: the board of every use case (the 21 pages) ---------- */
.uc-board{display:grid;grid-template-columns:repeat(var(--s),minmax(0,1fr));background:var(--sheet);border:1px solid var(--line)}
.uc-board-col{padding:20px 18px 18px;min-width:0}
.uc-board-col+.uc-board-col{border-left:1px solid var(--line)}
.uc-board-col h3{margin:0 0 12px;padding-bottom:10px;border-bottom:2px solid var(--ink);font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3}
.uc-board-col ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.uc-board-col a{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start;padding:7px 0;text-decoration:none;color:var(--ink)}
.uc-board-col a b{font-size:12.5px;font-weight:500;line-height:1.3;padding-top:4px}
.uc-board-col a:hover b,.uc-board-col a:focus-visible b{text-decoration:underline;text-decoration-color:var(--azure);text-underline-offset:3px}
.uc-board-col a:focus-visible{outline:2px solid var(--azure);outline-offset:2px}
.uc-board-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;font-size:12.5px;color:var(--soft)}
.uc-board-key span{display:inline-flex;align-items:center;gap:8px}
.uc-board-key i{display:inline-block;width:12px;height:12px;background:var(--azure)}
.uc-board-key i.is-ink{background:var(--ink)}

/* ---------- the use cases ---------- */
.uc-list{background:#fff;padding:24px 6% 40px}
.uc-entries{list-style:none;margin:0 auto;padding:0;max-width:1400px;counter-reset:uc}
.uc{counter-increment:uc;border-top:1px solid var(--line-2);padding:84px 0;scroll-margin-top:96px}
.uc:first-child{border-top:0}
.uc-card{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:0 72px;align-items:start}
.uc-num{display:flex;align-items:baseline;gap:14px;margin:0 0 18px;font-size:14px;color:var(--soft)}
.uc-num::before{content:counter(uc,decimal-leading-zero);font-size:56px;line-height:.9;font-weight:300;letter-spacing:-.03em;color:var(--azure);font-variant-numeric:tabular-nums}
.uc-title{margin:0;font-size:clamp(28px,2.6vw,40px);line-height:1.12;letter-spacing:-.03em;font-weight:500;color:var(--ink);text-wrap:balance}
.uc-desc{margin:18px 0 0;font-size:18px;line-height:1.65;color:var(--ink-2);text-wrap:pretty;max-width:60ch}
.uc .uc-apps{margin-top:24px}
.uc-steps{margin:36px 0 0;display:grid;gap:26px}
.uc-steps h3,.uc-try h3{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--ink);letter-spacing:.01em}
.uc-steps p{margin:0;font-size:15.5px;line-height:1.75;color:var(--soft);max-width:62ch}
.uc-steps h3 svg{width:15px;height:15px;margin-right:7px;vertical-align:-2px;color:var(--azure)}
.uc-visual{position:sticky;top:110px;display:grid;gap:22px}
.uc-flow{margin:0}
.uc-zoom{display:block;width:100%;padding:0;border:1px solid var(--line);background:#fff;cursor:zoom-in;position:relative;font:inherit;color:inherit}
.uc-zoom img{display:block;width:100%;height:auto}
.uc-zoom-hint{position:absolute;right:0;bottom:0;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;background:var(--ink);color:#fff;font-size:12px;font-weight:500;opacity:0;transform:translateY(4px);transition:opacity .25s ease,transform .25s ease}
.uc-zoom:hover .uc-zoom-hint,.uc-zoom:focus-visible .uc-zoom-hint{opacity:1;transform:none}
@media (hover:none){.uc-zoom-hint{opacity:1;transform:none}}
.uc-zoom:focus-visible{outline:2px solid var(--azure);outline-offset:3px}
.uc-flow figcaption{margin-top:9px;font-size:12.5px;line-height:1.45;color:var(--soft)}
.uc-try{background:var(--cream);padding:22px 24px 20px}
.uc-try h3{display:flex;align-items:center;gap:9px}
.uc-try h3 img{width:16px;height:16px}
.uc-prompt{margin:0;font-size:15.5px;line-height:1.7;color:var(--ink);white-space:pre-wrap}
.uc-prompt mark{background:none;color:var(--azure);font-weight:600}
.uc-try-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.uc-copy{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--ink);background:transparent;color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background-color .2s,color .2s}
.uc-copy svg{width:15px;height:15px}
.uc-copy:hover,.uc-copy:focus-visible{background:var(--ink);color:#fff}
.uc-copy:focus-visible{outline:2px solid var(--azure);outline-offset:3px}
.uc-copy.is-done{background:var(--ink);color:#fff}
.uc-try-note{font-size:12.5px;color:var(--soft)}
.uc-more{margin:20px 0 0;font-size:14px;line-height:1.5}
.uc-more a{color:var(--ink);text-decoration-color:var(--azure);text-underline-offset:4px}
.uc-more button{padding:0;border:0;background:none;font:inherit;color:var(--ink);text-decoration:underline;text-decoration-color:var(--azure);text-underline-offset:4px;cursor:pointer}

/* the 21 pages: one line per use case, prompt beside it */
.uc-list.is-all .uc{padding:56px 0}
.uc-list.is-all .uc-num::before{font-size:44px}
.uc-list.is-all .uc-title{font-size:clamp(24px,2.1vw,32px)}
.uc-list.is-all .uc-desc{font-size:16.5px}
.uc-best{display:inline-flex;align-items:center;gap:7px;margin-left:auto;font-size:12.5px;color:var(--azure);font-weight:600}
.uc-best::before{content:"";width:10px;height:10px;background:var(--azure)}
.uc-list.is-all .uc-visual{position:static}

/* where to start */
.uc-next{background:#fff;padding:0 6% 96px}
.uc-next-in{max-width:1400px;margin:0 auto;border-top:1px solid var(--line-2);padding-top:72px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 72px}
.uc-next h2{margin:0;font-size:clamp(30px,3.2vw,46px);line-height:1.12;letter-spacing:-.035em;font-weight:500;color:var(--ink)}
.uc-next p{margin:0 0 16px;font-size:17px;line-height:1.75;color:var(--soft)}
.uc-next a{color:var(--ink);text-decoration-color:var(--azure);text-underline-offset:4px}
.uc-reads{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
.uc-reads li{border-bottom:1px solid var(--line)}
.uc-reads a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 0;text-decoration:none;font-size:15px;font-weight:500}
.uc-reads a::after{content:"";flex:none;width:9px;height:9px;border-top:2px solid var(--azure);border-right:2px solid var(--azure);transform:rotate(45deg);transition:transform .2s}
.uc-reads a:hover::after{transform:translateX(3px) rotate(45deg)}

/* full-size workflow viewer */
.uc-viewer{width:min(1400px,96vw);max-width:none;max-height:92vh;padding:0;border:0;background:#fff;color:var(--ink)}
.uc-viewer::backdrop{background:rgba(4,20,31,.72)}
.uc-viewer-bar{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;background:#fff;border-bottom:1px solid var(--line);z-index:1}
.uc-viewer-bar b{font-size:14px;font-weight:600}
.uc-viewer-close{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--ink);background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.uc-viewer-close:hover,.uc-viewer-close:focus-visible{background:var(--ink);color:#fff}
.uc-viewer-scroll{overflow:auto;max-height:calc(92vh - 60px)}
.uc-viewer-scroll img{display:block;width:max(100%,1500px);height:auto}

/* progressive reveal: only with JS and full motion, content visible otherwise */
@media (prefers-reduced-motion:no-preference){
  html.uc-js .uc{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
  html.uc-js .uc.is-in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.uc-pin .uc-sq,.uc-zoom-hint,.uc-copy,.uc-reads a::after{transition:none}}

@media (max-width:1100px){
  .uc-card{display:flex;flex-direction:column;gap:0}
  .uc-text,.uc-visual,.uc-steps{display:contents}
  .uc-num{order:1}.uc-title{order:2}.uc-desc{order:3}.uc-card .uc-apps{order:4}.uc-flow{order:5;margin-top:30px}
  .uc-steps>section{order:6;margin-top:28px}.uc-try{order:7;margin-top:28px}.uc-steps>section+section{order:8}.uc-steps>.uc-keep{order:9}.uc-more{order:10}
  .uc-prog-top{grid-template-columns:minmax(0,1fr)}
  .uc-prog-months,.uc-prog-lines{display:none}
  .uc-prog-row{grid-template-columns:minmax(0,1fr);min-height:0;padding:12px 0}
  .uc-prog-label{flex-direction:row;align-items:center;justify-content:space-between;padding:0 0 10px}
  .uc-prog-track{display:flex;flex-wrap:wrap;gap:8px 28px;padding-top:18px}
  .uc-prog-bar,.uc-prog-ticks{top:4px;margin-top:0}
  .uc-prog-ticks{height:10px}
  .uc-prog-ticks i{height:10px}
  .uc-prog-ticks i.is-month{height:14px;margin-top:-2px}
  .uc-pin{position:static;transform:none}
  .uc-pin span:last-child{white-space:normal;font-size:14px;background:none}
  .uc-diary{grid-template-columns:minmax(0,1fr)}
  .uc-desk{border-left:0;border-top:1px solid var(--line)}
  .uc-desk ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
  .uc-desk li+li{border-top:0}
  .uc-board{grid-template-columns:repeat(3,minmax(0,1fr))}
  .uc-board-col:nth-child(3n+1){border-left:0}
  .uc-board-col:nth-child(n+4){border-top:1px solid var(--line)}
  .uc-next-in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .uc-page .editorial-hero{padding:56px 16px 48px}
  .uc-page .editorial-hero h1{font-size:40px}
  .uc-page .hero-intro{margin-top:26px}
  .uc-hero-fig{margin-top:32px}
  .uc-prog{padding:16px 16px 6px}
  .uc-diary-main{padding:16px}
  .uc-diary-banner{margin-left:0}
  .uc-diary-grid{display:flex;flex-direction:column;gap:6px}
  .uc-diary-col,.uc-diary-line,.uc-diary-time{display:none}
  .uc-slot{margin:0}
  .uc-slot[data-who]::after{content:attr(data-who);font-size:11px;color:var(--soft);order:-1}
  .uc-desk{padding:16px}
  .uc-desk ol{grid-template-columns:minmax(0,1fr)}
  .uc-desk li+li{border-top:1px solid var(--line)}
  .uc-board{grid-template-columns:minmax(0,1fr)}
  .uc-board-col+.uc-board-col{border-left:0;border-top:1px solid var(--line)}
  .uc-list{padding:8px 16px 24px}
  .uc,.uc-list.is-all .uc{padding:52px 0}
  .uc-num::before{font-size:44px}
  .uc-title{font-size:27px}
  .uc-desc{font-size:16.5px}
  .uc-try{padding:18px 16px}
  .uc-prompt{font-size:15px}
  .uc-try-foot{flex-direction:column;align-items:flex-start}
  .uc-next{padding:0 16px 64px}
  .uc-next-in{padding-top:52px}
}

@media print{
  .editorial-header,.editorial-closing,.site-footer,.uc-copy,.uc-zoom-hint,.uc-viewer{display:none!important}
  .uc{break-inside:avoid;padding:28px 0;opacity:1!important;transform:none!important}
  .uc-card{grid-template-columns:minmax(0,1fr)}
  .uc-visual{position:static}
}
