/* access.html: page styles (v3, 9 Oct 2026, owned by the pricing builder). Every rule is scoped to this page
   (body.page-access or an ac- class that only exists here). Markup: page_access() in tools/content.py and the ill_ac_
   functions of tools/illustrations.py. Kit: pages-v3.css / pages-v3.js.
   Motion policy: the HTML is the final frame; things wait hidden only under the kit's gate; every motion plays once. */

/* ================================================================ hero */
body.page-access .kt-hero-visual,body.page-access .kt-hero-visual>*{max-height:none}
body.page-access .kt-hero-actions{gap:12px 26px}
/* the text link wraps as one sentence on narrow screens (the kit's link is a flex row) */
body.page-access .ac-new{display:inline-block;min-height:44px;padding:10px 0;line-height:1.45;color:var(--kt-ink)}
body.page-access .ac-new::after{display:inline-block;margin-left:8px}

/* the browser that boots up on a sample screen (neutral controls, the address as words, never a URL) */
.ac-br{margin:0}
.ac-br-win{position:relative;overflow:hidden;border-radius:18px;background:#fff;border:1px solid rgba(22,24,22,.14);box-shadow:var(--kt-shadow)}
.ac-br-bar{position:relative;display:flex;align-items:center;gap:14px;padding:12px 16px;background:#efefea;border-bottom:1px solid rgba(22,24,22,.1)}
.ac-br-nav{display:flex;gap:4px;color:#6f7477}
.ac-br-nav svg{display:block;width:22px;height:22px}
.ac-br-addr{flex:1;min-width:0;display:flex;align-items:center;gap:8px;min-height:36px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid rgba(22,24,22,.12);
  font-size:15px;line-height:1.2;color:var(--kt-t3);white-space:nowrap}
.ac-br-addr>span{overflow:hidden;text-overflow:ellipsis}
.ac-br-addr .kt-pic{width:18px;height:18px;--kt-acc:var(--kt-green)}
.ac-br-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--kt-blue);transform-origin:0 50%}
.ac-br-page{padding:18px;background:#f4f5f2}
.ac-br-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.ac-br-head img{display:block;height:18px;width:auto}
.ac-br-head span{font:500 12px/1.3 var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--kt-t3)}
.ac-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ac-tile{display:flex;flex-direction:column;gap:14px;min-width:0;padding:14px;border-radius:14px;background:#fff;border:1px solid rgba(22,24,22,.08)}
.ac-tile-r{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.ac-tile-r b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.ac-st{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 9px;border-radius:999px;background:var(--kt-green-t);font-size:12px;font-weight:600;color:var(--kt-ink);white-space:nowrap}
.ac-st i{width:7px;height:7px;border-radius:50%;background:var(--kt-green)}
.ac-st[data-st="mr"]{background:var(--kt-yellow-t)}
.ac-st[data-st="mr"] i{background:#e3b000}
.ac-tile-m{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ac-tile-m p{margin:0;display:flex;flex-direction:column;gap:2px;min-width:0}
.ac-tile-m b{font-size:clamp(17px,1.5vw,21px);font-weight:600;line-height:1.1;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.ac-tile-m span{font-size:12px;line-height:1.3;color:var(--kt-t3)}
.ac-tile-g{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:10px;border-top:1px solid rgba(22,24,22,.08);font-size:12px;color:var(--kt-t3)}
.ac-grade{display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:8px;font-size:15px;font-weight:700;color:var(--kt-ink);background:var(--kt-green)}
.ac-grade[data-g="B"]{background:#a9d283}
.ac-grade-p{background:none;border:1px dashed var(--kt-line-strong);font-size:12px;font-weight:600;color:var(--kt-t3);padding:0 8px}
@media (max-width:1100px) and (min-width:901px){.ac-tile-m{grid-template-columns:1fr}.ac-tile-m p:last-child{display:none}}
/* phones: the tiles become rows (name, status, grade), the numbers stay on the larger screens */
@media (max-width:560px){
  .ac-br-bar{gap:10px;padding:10px 12px}
  .ac-br-nav svg{width:20px;height:20px}
  .ac-br-nav svg:nth-child(2){display:none}
  .ac-br-addr{font-size:14px;padding:0 12px}
  .ac-br-page{padding:14px}
  .ac-tiles{grid-template-columns:minmax(0,1fr);gap:8px}
  .ac-tile{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px}
  .ac-tile-r{flex-direction:row;align-items:center;gap:10px}
  .ac-tile-m{display:none}
  .ac-tile-g{padding:0;border:0}
  .ac-tile-g>span:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}

/* ================================================================ 01: two places, one job */
.ac-two{display:grid;grid-template-columns:minmax(0,5fr) minmax(120px,2.4fr) minmax(0,5fr);align-items:stretch}
.ac-c{display:flex;flex-direction:column}
.ac-c>p{max-width:46ch}
.ac-pics{flex:1;display:flex;flex-wrap:nowrap;align-items:flex-start;align-content:center;justify-content:center;gap:0;margin-top:28px;padding:20px 0 4px}
@supports (display:grid){.ac-pics{display:grid;grid-auto-flow:column;grid-template-columns:auto minmax(40px,110px) auto;align-content:center}}
.ac-pic{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.ac-pics{--ac-tile:clamp(84px,7.8vw,112px)}
.ac-pic .kt-pbox{width:var(--ac-tile);height:var(--ac-tile);border-radius:clamp(22px,2vw,28px);background:var(--kt-blue-t)}
.ac-pic .kt-pic{width:calc(var(--ac-tile) * .55);height:calc(var(--ac-tile) * .55)}
.ac-pic small{font-size:14px;line-height:1.35;color:var(--kt-t3)}
.ac-pics-w{flex:0 1 110px;align-self:flex-start;height:6px;margin:calc(var(--ac-tile) / 2 - 3px) 8px 0;background:radial-gradient(circle,var(--kt-ink) 1.6px,transparent 2.1px) 0 50%/10px 6px repeat-x}
/* side by side (901 px and wider): both cards share four rows (label, title, text, visual), and the connector sits in the
   visual row, so the dotted wire between the pictos, the dashed connector and the job card run on one axis */
@media (min-width:901px){@supports (grid-template-rows:subgrid){
  .ac-two{grid-template-rows:auto auto auto 1fr}
  .ac-c{display:grid;grid-row:1/span 4;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .ac-c-web{grid-column:1}.ac-two>.ac-link{grid-column:2}.ac-c-press{grid-column:3}
  .ac-c>p{margin-bottom:0}
  .ac-two>.ac-link{grid-row:4;align-self:center;margin-bottom:clamp(24px,3vw,36px)}   /* the cards' bottom padding sits in this row: centered on their content */
  /* the tile's center on that axis: the labels keep two lines (they wrap on narrow cards) and the same space sits above the tiles */
  .ac-pics{align-self:center;margin:0;padding:calc(10px + 2.7 * 14px) 0 0}
  .ac-pic small{min-height:2.7em}
  .ac-dev{align-self:center}
}}
.ac-dev{margin-top:24px}
.ac-dev img{filter:none}
/* the connector and the job card that travels along it once, then docks with a check */
.ac-link{position:relative;align-self:center;height:72px;margin:0 -12px;container-type:inline-size;z-index:2}
.ac-dash{position:absolute;left:0;right:0;top:50%;height:0;border-top:2px dashed var(--kt-line-strong)}
.ac-job{position:absolute;right:0;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 12px 0 16px;border-radius:999px;
  background:#fff;border:1px solid rgba(22,24,22,.1);box-shadow:var(--kt-shadow);white-space:nowrap}
.ac-job b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.ac-inks{display:inline-flex;gap:4px}
.ac-inks i{width:9px;height:9px;border-radius:50%}
.ac-job-ok{display:block;width:22px;height:22px}
@media (max-width:900px){
  .ac-two{grid-template-columns:minmax(0,1fr);max-width:620px}
  .ac-link{height:112px;margin:0;container-type:size}
  .ac-dash{left:50%;right:auto;top:0;bottom:0;height:auto;border-top:0;border-left:2px dashed var(--kt-line-strong)}
  .ac-job{right:auto;left:50%;top:auto;bottom:0;transform:translateX(-50%)}
}
@media (prefers-reduced-motion:no-preference){
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .ac-two:not(.is-played) .ac-job{transform:translate(calc(-100cqw + 100%),-50%)}
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .ac-two:not(.is-played) .ac-job-ok{opacity:0;transform:scale(.4)}
  html.kt-js:not([data-motion="paused"]) .ac-two.is-played .ac-job{transition:transform 1.2s var(--kt-io) .25s}
  html.kt-js:not([data-motion="paused"]) .ac-two.is-played .ac-job-ok{transition:opacity .25s ease 1.45s,transform .45s var(--kt-pop) 1.45s}
}
@media (prefers-reduced-motion:no-preference) and (max-width:900px){
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .ac-two:not(.is-played) .ac-job{transform:translate(-50%,calc(-100cqh + 100%))}
  html.kt-js:not(.kt-fallback):not([data-motion="paused"]) .ac-two:not(.is-played) .ac-dash{clip-path:inset(0 0 100% 0)}
}

/* ================================================================ 02: help (slim) */
body.page-access .ac-slim{padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(48px,6vw,80px)}
.ac-help{display:flex;align-items:center;gap:clamp(16px,2vw,24px)}
.ac-help p{margin:0;max-width:44ch;font-size:clamp(20px,2vw,28px);font-weight:500;line-height:1.35;letter-spacing:-.025em;color:var(--kt-ink);text-wrap:pretty}
.ac-help a{color:inherit;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;white-space:nowrap}
@media (max-width:560px){.ac-help{align-items:flex-start}.ac-help .kt-pbox{width:48px;height:48px;border-radius:14px}.ac-help .kt-pic{width:28px;height:28px}.ac-help a{white-space:normal;overflow-wrap:anywhere}}

/* ================================================================ 03: not a customer yet */
body.page-access .ac-tiles2{margin-top:0}