/* /services/brand-identity/, The book, held, the service's own stylesheet (research/service/design/spec.md section 1),
   imported by Entry.astro after service.css. Classes se-br- only. The page is laid out as the brand book it sells, on a
   drafting sheet, every headline standing on 1px construction guides. Sections in page order, start states only
   behind .js:not(.no-libs):not(.rm), responsive rules at the end. A part is placed through the class it is given
   (se-br-verso on a Motion, se-br-ch on a Chapter), never styled by its own class. The head's own variants are
   service.css's, and a few rules here read them only to put the title's guides where the title is (cover centred,
   h0 at the start and in 1 to 8, clear of the words). Colours from the tokens, the client's cream inside the ladder's frames only, passed as content. */

/* ---------- the drafting guides (Guides.astro), every headline's ---------- */
/* a ghost of the headline in its face, size and line box, hidden, its guides shown. Each guide sits at the ghost's
   baseline marker by its static position and runs across the box (left 0, right 0), offset in cap, ex and em, so
   nothing is measured. The still is after the landing, the baseline, the descender and the vertical guide */
.se-br-art{position:relative;display:block;margin:0;pointer-events:none;font-family:var(--display);font-weight:800;letter-spacing:-.052em;white-space:nowrap;color:var(--fg)}
.se-br-art--title{grid-column:1/-1;grid-row:2;align-self:start;font-size:clamp(52px,9vw,164px);line-height:.86;text-align:center}
.se-br-art--headline{font-size:clamp(52px,9vw,164px);line-height:.86}
.se-br-art--name{font-size:clamp(46px,5.6vw,100px);line-height:.88}
.se-br-gl{display:block;width:max-content;max-width:100%;padding:.08em .02em .04em;margin:-.08em -.02em -.04em}
.se-br-gl+.se-br-gl{margin-top:-.12em}
.se-br-art--title .se-br-gl{margin-inline:auto}
.se-head--h0 .se-br-art--title{grid-column:1/span 8;text-align:start}
.se-head--h0 .se-br-art--title .se-br-gl{margin-inline:-.02em auto}
.se-br-gt{visibility:hidden}
.se-br-at{display:inline-block;width:.2em;height:0;margin-left:.04em;vertical-align:baseline}
.se-br-g{position:absolute;left:0;right:0;display:block;height:1px;background:var(--line);transform-origin:0 50%;transition:background-color .8s var(--e-out)}
.se-br-art--title .se-br-g{transform-origin:50% 50%}
.se-br-g--cap{margin-top:-.7em;margin-top:-1cap}
.se-br-g--x{margin-top:-.5em;margin-top:-1ex}
.se-br-g--desc{margin-top:.2em}
.se-br-v{position:absolute;display:block;width:1px;height:1.5em;height:calc(1cap + .8em);margin:-1.02em 0 0 calc(.1em - .5px);margin-top:calc(-1cap - .32em);background:var(--line);transform-origin:50% 0;transition:background-color .8s var(--e-out)}
.se-br-g--cap,.se-br-g--x{opacity:0}
/* the title's guides named at their right end (Guides.astro, desktop only), each name a box of no size at its guide's
   offset, the words on the line (cap height, baseline) or under it (x height, descender), where the gap between two
   guides leaves room at every title size. The still names the guides that stay, the baseline and the descender */
.se-br-gn{position:absolute;right:0;display:block;width:0;height:0}
.se-br-gn--cap{margin-top:-.7em;margin-top:-1cap}
.se-br-gn--x{margin-top:-.5em;margin-top:-1ex}
.se-br-gn--desc{margin-top:.2em}
.se-br-gn>span{position:absolute;right:0;bottom:5px;font:500 12.5px/1.3 var(--text);letter-spacing:0;white-space:nowrap;color:var(--fg-3);transition:color .8s var(--e-out)}
.se-br-gn--x>span,.se-br-gn--desc>span{top:5px;bottom:auto}
.se-br-gn--cap,.se-br-gn--x{opacity:0}
/* the guides draw as the headline rises (brand-identity.ts), from its start, the title's from its centre */
.js:not(.no-libs):not(.rm) .se-br-g{transform:scaleX(0)}
.js:not(.no-libs):not(.rm) .se-br-v{transform:scaleY(0)}
.js:not(.no-libs):not(.rm) .se-br-g--cap,.js:not(.no-libs):not(.rm) .se-br-g--x{opacity:1}
.js:not(.no-libs):not(.rm) .se-br-gn{opacity:0}

/* a chapter word on its guides (Word.astro), the ghost and the Chapter in one cell, the Chapter's margin on the box */
.se-br-word{display:grid;margin-top:clamp(28px,5vh,56px)}
.se-br-word>*{grid-area:1/1}
.se-br-ch{margin-top:0}

/* ---------- the signs, inside the head's section ---------- */
/* three equal thirds under a 1px rule, 1 to 4, 5 to 8, 9 to 12 (433 at 1440), the vignette 3 to 2 on top */
.se-br-signs-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;margin:clamp(28px,5vh,56px) 0 0;padding:0;list-style:none}
.se-br-sign{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.se-br-sign-m{width:100%;margin-bottom:28px}
.se-br-sign-n{margin:0;font-variant-numeric:tabular-nums}
.se-br-sign-t{margin:10px 0 0;max-width:24ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;text-wrap:pretty}
.se-br-sign-a{margin:22px 0 0}
/* without its vignettes (a build, until the pieces are filled) each third opens as a chapter of the book, its numeral
   at display size in --fg-3 standing on its own 1px baseline rule across the third (the drafting sheet's), the
   sentence under it, the thirds lower under the label row. Tall enough that the type only head keeps a full screen
   between its title and Everywhere. at every size (1440 by 900 was 844px apart with the numerals at 6vw). The
   numerals take the title's size, the book's chapter openers, pale so the title keeps the lead */
.se-br-signs-l:not(:has(.se-br-sign-m)){margin-top:clamp(56px,12vh,120px)}
.se-br-sign:not(:has(.se-br-sign-m)) .se-br-sign-n{align-self:stretch;margin-bottom:4px;padding-bottom:.07em;border-bottom:1px solid var(--line);font:800 clamp(64px,9vw,164px)/.86 var(--display);letter-spacing:-.05em;color:var(--fg-3);transition:color .8s var(--e-out),border-color .8s var(--e-out)}
.se-br-sign:not(:has(.se-br-sign-m)) .se-br-sign-t{margin-top:28px}
.se-br-sign:not(:has(.se-br-sign-m)) .se-br-sign-a{margin-top:28px}

/* ---------- get, What you get, the book ---------- */
/* the chapter word in 1 to 8 on guides across 12, the about in 9 to 12 standing on its baseline */
.se-br-get-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
.se-br-get-word{grid-column:1/-1;grid-row:1}
.se-br-get-about{grid-column:9/span 4;grid-row:1;margin:0 0 .35em;max-width:34ch;font-size:17px;line-height:1.55;color:var(--fg-2);text-wrap:pretty;transition:color .8s var(--e-out)}
/* the book, centred in 2 to 11, 64px under. Its contents line above it without scripts (three anchor links), under it,
   40px, once it turns */
.se-br-book{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:64px}
.se-br-toc{grid-column:1/-1;margin:0 0 40px}
.se-br-toc-l{display:flex;flex-wrap:wrap;justify-content:center;gap:.25em .7em;margin:0;padding:0;list-style:none;counter-reset:se-br-toc;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em}
.se-br-toc-l li{counter-increment:se-br-toc;color:var(--fg-3);transition:color .8s var(--e-out)}
.se-br-toc-l li:not(:last-child)::after{content:","}
.se-br-toc-a{position:relative;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line);transition:color .35s,border-color .3s}
.se-br-toc-a::after{content:"";position:absolute;inset:-10px -6px}
.se-br-toc-a:hover{border-bottom-color:var(--red)}
.se-br-toc-a:focus-visible{outline:2px solid var(--red);outline-offset:4px}
/* each entry numbered by the list, the book's chapter numbers, small and raised */
.se-br-toc-a::before{content:counter(se-br-toc,decimal-leading-zero);margin-right:.25em;font-size:.56em;vertical-align:.62em;letter-spacing:0;font-variant-numeric:tabular-nums}
/* the pages, a spread of two 4 to 5 pages with the fold, a 1px rule, in the 24px gutter. Stacked, the spreads stand one
   under the other, each its own article */
.se-br-pages{position:relative;grid-column:2/span 10;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:64px}
.se-br-spread{position:relative;grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:start}
.se-br-spread::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;margin-left:-.5px;background:var(--line);transition:background-color .8s var(--e-out)}
.se-br-verso{grid-column:1;border-radius:10px 3px 3px 10px}
/* the recto stretches to the verso's 4 to 5, and grows past it when its words need more (a narrow book) */
.se-br-recto{position:relative;grid-column:2;align-self:stretch;min-width:0;border-radius:3px 10px 10px 3px;background:var(--se-panel);container-type:inline-size;transform-origin:0 50%;transition:background-color .8s var(--e-out),transform .85s cubic-bezier(.87,0,.13,1)}
.se-br-recto::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.se-br-recto-in{display:flex;flex-direction:column;justify-content:space-between;gap:24px;height:100%;padding:clamp(26px,3.3vw,48px) clamp(26px,3.3vw,48px) 64px}
.se-br-run{display:flex;gap:.6em;margin:0;font-variant-numeric:tabular-nums}
.se-br-run-n{color:var(--fg-3)}
.se-br-title{margin:22px 0 0;font:800 clamp(24px,2.05vw,34px)/.95 var(--display);letter-spacing:-.04em}
/* a book page's full stop, printed in ink, the dot's red is the page's only */
.se-br-stop{display:inline-block;width:.2em;height:.2em;margin-left:.04em;border-radius:50%;background:currentColor;vertical-align:baseline}
.se-br-lead{margin:16px 0 0;max-width:34ch;font:500 clamp(18px,1.6vw,25px)/1.27 var(--display);letter-spacing:-.022em;color:var(--fg-2);text-wrap:pretty;transition:color .8s var(--e-out)}
.se-br-lead-1{color:var(--fg)}
.se-br-sched{margin:0;padding:0;list-style:none;font-size:15px;line-height:1.35;font-variant-numeric:tabular-nums}
.se-br-sched li{display:grid;grid-template-columns:3.2em minmax(0,1fr);column-gap:12px;padding:8px 0;border-top:1px solid var(--line);transition:border-color .8s var(--e-out)}
.se-br-sched li:last-child{border-bottom:1px solid var(--line)}
.se-br-sched-n{color:var(--fg-3)}
.se-br-tool{display:flex;align-items:center;gap:10px;margin:18px 0 0;font-size:15px;line-height:1.35;color:var(--fg-2)}
.se-br-ans{margin-top:18px}
.se-br-q,.se-br-a{margin:0;font-size:15px;line-height:1.45}
.se-br-q{font-weight:600}
.se-br-a{margin-top:4px;color:var(--fg-2);text-wrap:pretty}
.se-br-folio{position:absolute;right:clamp(26px,3.3vw,48px);bottom:22px;margin:0;font-variant-numeric:tabular-nums;color:var(--fg-3)}
/* the recto alone, a build's until its verso's piece is filled, centred in 3 to 10, its words in two columns */
.se-br-book:not(:has(.se-br-verso)) .se-br-pages{grid-column:3/span 8;grid-template-columns:minmax(0,1fr)}
.se-br-book:not(:has(.se-br-verso)) .se-br-recto{grid-column:1/-1;border-radius:10px;transform-origin:50% 50%}
.se-br-book:not(:has(.se-br-verso)) .se-br-spread::before{content:none}
@container (min-width:640px){
  .se-br-recto-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;align-items:start}
  .se-br-recto-b{padding-top:6px}
}
/* the sweep of a turn, a 1px fold line from the recto's outer edge to the fold, flat, never a curl */
.se-br-sweep{display:none}
/* the book, with scripts and motion, one spread at a time in one cell, the contents line under it */
.js:not(.no-libs):not(.rm) .se-br-toc{order:1;margin:40px 0 0}
.js:not(.no-libs):not(.rm) .se-br-toc-a{color:var(--fg-3);border-bottom-color:transparent}
.js:not(.no-libs):not(.rm) .se-br-toc-a:hover,.js:not(.no-libs):not(.rm) .se-br-toc-a.is-on{color:var(--fg)}
.js:not(.no-libs):not(.rm) .se-br-toc-a:hover{border-bottom-color:var(--red)}
.js:not(.no-libs):not(.rm) .se-br-spread{grid-area:1/1/2/-1}
.js:not(.no-libs):not(.rm) .se-br-spread:not(.is-open):not(.is-leaving){visibility:hidden}
.js:not(.no-libs):not(.rm) .se-br-spread.is-open{z-index:1}
.js:not(.no-libs):not(.rm) .se-br-sweep{position:relative;z-index:2;display:block;grid-column:2;grid-row:1;align-self:stretch;overflow:hidden;pointer-events:none}
.js:not(.no-libs):not(.rm) .se-br-book:not(:has(.se-br-verso)) .se-br-sweep{grid-column:1}
.se-br-sweep i{position:absolute;top:0;bottom:0;left:100%;width:1px;background:var(--fg-2);opacity:0}
/* it opens once from its fold, the recto unfolding to its width */
.js:not(.no-libs):not(.rm) .se-br-book:not(.is-opened) .se-br-recto{transform:scaleX(0)}

/* ---------- held, the misuse page, the signature ---------- */
/* the stage in 1 to 8, the chapter word, the line, the ledger and the closing line in 9 to 12 */
.se-br-held-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr;column-gap:24px;margin-top:clamp(28px,5vh,56px);align-items:start}
.se-br-held-w{grid-column:9/span 4;grid-row:1;min-width:0}
.se-br-held-word{margin-top:0}
.se-br-held-line{margin:22px 0 0;max-width:28ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;text-wrap:pretty}
.se-br-held-s{grid-column:1/span 8;grid-row:1/span 2;min-width:0}
.se-br-ledger{grid-column:9/span 4;grid-row:2;min-width:0;margin-top:clamp(28px,4.5vh,44px)}
/* the stage, a 4 to 3 sheet with 18px corners, crop marks 8px outside its corners, a faint 12 column grid, the
   lockup in its selection box at the centre, the right quarter a busy ground of 1px hatching at 6px. It settles in
   from 106 percent once (brand-identity.ts adds .in) */
/* inset 22px in its columns, so its crop marks stand on the column edges and never reach the ledger's */
.se-br-stage{position:relative;margin:22px;aspect-ratio:4/3;container-type:size;transition:transform 1.1s cubic-bezier(0,.202,.204,1)}
.js:not(.no-libs):not(.rm) .se-br-stage:not(.in){transform:scale(1.06)}
.se-br-crop{position:absolute;width:14px;height:14px;border:0 solid var(--fg-3);pointer-events:none;transition:border-color .8s var(--e-out)}
.se-br-crop--tl{left:-22px;top:-22px;border-right-width:1px;border-bottom-width:1px}
.se-br-crop--tr{right:-22px;top:-22px;border-left-width:1px;border-bottom-width:1px}
.se-br-crop--br{right:-22px;bottom:-22px;border-left-width:1px;border-top-width:1px}
.se-br-crop--bl{left:-22px;bottom:-22px;border-right-width:1px;border-top-width:1px}
.se-br-sheet{position:absolute;inset:0;overflow:hidden;border-radius:18px;background:var(--se-panel);transition:background-color .8s var(--e-out)}
.se-br-sheet::before{content:"";position:absolute;inset:0 0 0 -1px;background:linear-gradient(to right,var(--line) 1px,transparent 1px) 0 0/calc(100% / 12) 100%;opacity:.7;pointer-events:none}
.se-br-sheet::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.se-br-busy{position:absolute;top:0;right:0;bottom:0;width:25%;border-left:1px solid var(--line);background:repeating-linear-gradient(-45deg,var(--fg-3) 0 1px,transparent 1px 6px)}
.se-br-busy-l{position:absolute;left:12px;top:12px;padding:4px 10px;border-radius:999px;background:var(--se-panel);font:500 12.5px/1.3 var(--text);color:var(--fg-2);white-space:nowrap;transition:background-color .8s var(--e-out)}
/* the box, its size and pose from five custom properties the script writes, the lockup stretched inside it */
.se-br-box{--sx:1;--sy:1;--r:0deg;--x:0;--y:0;--bw:40cqw;position:absolute;left:50%;top:50%;width:calc(var(--bw) * var(--sx));height:calc(var(--bw) / 2.24 * var(--sy));transform:translate(-50%,-50%) translate(calc(var(--x) * 100cqw),calc(var(--y) * 100cqh)) rotate(var(--r));touch-action:pan-y}
.se-br-lk{display:block;overflow:visible}
.se-br-stage-lk{position:absolute;inset:0;width:100%;height:100%;color:var(--fg)}
.se-br-lk-p{fill:currentColor;fill-opacity:1;stroke:currentColor;stroke-width:0;vector-effect:non-scaling-stroke;transition:fill-opacity .35s var(--e-out),stroke-width .35s var(--e-out)}
.se-br-lk-t{font:800 76px var(--display);letter-spacing:-.045em}
.is-outline .se-br-lk-p{fill-opacity:0;stroke-width:1px}
.se-br-lk-hl{stroke:var(--fg);stroke-width:1.4}
.is-lost .se-br-lk-p{fill:url(#se-br-hatch)}
/* the selection, a 1px box 10px out with eight 7px handles and the rotation handle on a 24px stem, shown with scripts
   only, so the still is the mark at rest without them. Their hit areas 25px, 44px on touch */
.se-br-sel,.se-br-pills,.se-br-hint,.se-br-read{display:none}
.js:not(.no-libs) .se-br-sel{position:absolute;inset:-10px;display:block;border:1px solid var(--fg-2);pointer-events:none;transition:border-color .8s var(--e-out)}
.js:not(.no-libs) .se-br-box{cursor:grab}
.se-br-h,.se-br-rot{position:absolute;width:7px;height:7px;margin:-4px 0 0 -4px;border:1px solid var(--fg-2);background:var(--se-panel);pointer-events:auto;touch-action:none}
.se-br-h::after,.se-br-rot::after{content:"";position:absolute;inset:-9px}
.se-br-h--nw{left:0;top:0;cursor:nwse-resize}
.se-br-h--n{left:50%;top:0;cursor:ns-resize}
.se-br-h--ne{left:100%;top:0;cursor:nesw-resize}
.se-br-h--e{left:100%;top:50%;cursor:ew-resize}
.se-br-h--se{left:100%;top:100%;cursor:nwse-resize}
.se-br-h--s{left:50%;top:100%;cursor:ns-resize}
.se-br-h--sw{left:0;top:100%;cursor:nesw-resize}
.se-br-h--w{left:0;top:50%;cursor:ew-resize}
.se-br-rot{left:50%;top:-24px;width:8px;height:8px;border-radius:50%;cursor:grab}
.se-br-rot::before{content:"";position:absolute;left:50%;top:100%;width:1px;height:17px;margin-left:-.5px;background:var(--fg-2)}
/* the hint by the right handle, gone after the first try, the readout beside the handle while dragging */
.js:not(.no-libs) .se-br-hint{position:absolute;left:calc(100% + 30px);top:50%;display:block;transform:translateY(-50%);transition:opacity .3s}
.se-br-hint>span,.se-br-read{padding:5px 11px;border-radius:999px;background:var(--fg);color:var(--bg);font:600 12.5px/1.25 var(--text);white-space:nowrap;transition:background-color .8s var(--e-out),color .8s var(--e-out)}
.se-br-hint-t{display:none}
.is-tried-any .se-br-hint,.is-dragging .se-br-hint,.is-playing .se-br-hint{opacity:0}
.js:not(.no-libs) .se-br-read{position:absolute;left:0;top:0;z-index:3;display:block;opacity:0;pointer-events:none;font-variant-numeric:tabular-nums;transition:opacity .3s}
.js:not(.no-libs) .se-br-read.is-on{opacity:1}
.is-dragging,.is-dragging .se-br-box{cursor:grabbing}
/* Fill and Outline, two small pills at the lower left */
.js:not(.no-libs) .se-br-pills{position:absolute;left:16px;bottom:16px;z-index:2;display:flex;gap:6px}
.se-br-pill{position:relative;min-height:32px;padding:6px 14px;border:0;border-radius:999px;background:var(--se-panel);box-shadow:inset 0 0 0 1px var(--line);font:500 13.5px/1.2 var(--text);color:var(--fg-2);cursor:pointer;transition:box-shadow .3s,color .3s,background-color .8s var(--e-out)}
.se-br-pill::after{content:"";position:absolute;inset:-8px -3px}
.se-br-pill:hover{color:var(--fg)}
.se-br-pill[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--fg);color:var(--fg)}
.se-br-pill:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.se-br-held-cap{margin:-8px 0 0 22px;font-size:13.5px;line-height:1.4;color:var(--fg-3);transition:color .8s var(--e-out)}
/* the ledger, four 80px rows on hairlines, each a button, a 64 by 48 thumbnail frozen in its broken pose and struck,
   the try in --fg-3 and the rule in --fg. With motion a row prints as its misuse is tried */
.se-br-rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--line);transition:border-color .8s var(--e-out)}
.se-br-row-li{border-bottom:1px solid var(--line);transition:border-color .8s var(--e-out)}
.se-br-row{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:18px;align-items:center;width:100%;min-height:80px;padding:8px 0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.se-br-row:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.se-br-thumb{position:relative;width:64px;height:48px;overflow:hidden;border-radius:4px;background:var(--se-panel);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .8s var(--e-out)}
.se-br-thumb-busy{position:absolute;top:0;right:0;bottom:0;width:25%;background:repeating-linear-gradient(-45deg,var(--fg-3) 0 1px,transparent 1px 4px);transition:opacity .3s}
.se-br-tbox{--sx:1;--sy:1;--r:0deg;--x:0;--y:0;position:absolute;left:50%;top:50%;width:calc(36px * var(--sx));height:calc(36px / 2.24 * var(--sy));transform:translate(-50%,-50%) translate(calc(var(--x) * 64px),calc(var(--y) * 48px)) rotate(var(--r));color:var(--fg);transition:opacity .3s}
.se-br-tbox .se-br-lk{width:100%;height:100%}
.se-br-strike{position:absolute;left:4px;bottom:4px;width:69px;height:1px;background:var(--fg);transform:rotate(-35.5deg);transform-origin:0 50%;transition:transform .6s var(--e-out),background-color .8s var(--e-out)}
.se-br-row-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.se-br-try{font-size:13.5px;line-height:1.35;color:var(--fg-3);transition:color .3s}
.se-br-rule{font-size:17px;line-height:1.4;color:var(--fg);transition:color .6s var(--e-out)}
.se-br-row:hover .se-br-try{color:var(--fg-2)}
.js:not(.no-libs):not(.rm) .se-br-row:not(.is-tried) .se-br-rule{color:var(--fg-3)}
.js:not(.no-libs):not(.rm) .se-br-row:not(.is-tried) .se-br-tbox,.js:not(.no-libs):not(.rm) .se-br-row:not(.is-tried) .se-br-thumb-busy{opacity:0}
.js:not(.no-libs):not(.rm) .se-br-row:not(.is-tried) .se-br-strike{transform:rotate(-35.5deg) scaleX(0)}
.se-br-closing{margin:26px 0 0;max-width:34ch;font-size:15.5px;line-height:1.5;color:var(--fg);text-wrap:pretty;transition:color .6s var(--e-out)}
.js:not(.no-libs):not(.rm) .se-br-ledger:not(.is-all) .se-br-closing{color:var(--fg-3)}
.se-br-closing-l{display:block;margin-top:14px}

/* ---------- in-use, the size ladder ---------- */
/* seven frames on one baseline, six at their true pixel sizes, the crop the only one that flexes, captions under */
.se-br-ladder{display:flex;align-items:flex-end;gap:40px 24px;margin:clamp(70px,11vh,130px) 0 0;padding:0;list-style:none}
.se-br-fr{display:flex;flex:none;flex-direction:column;gap:12px;min-width:0}
.se-br-fr-in{position:relative;display:block;width:var(--s);height:var(--s);overflow:hidden;background:var(--g)}
.se-br-fr-in img{display:block;width:100%;height:100%}
.se-br-fr-c{font:500 12.5px/1.3 var(--text);color:var(--fg-3);font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .8s var(--e-out)}
.se-br-fr--crop{flex:1 1 172px;min-width:86px;max-width:560px}
.se-br-fr--crop .se-br-fr-in{width:100%;height:512px}
.se-br-fr-big{background:var(--img) right -40px top -480px/1536px 1536px no-repeat,var(--g)}
.se-br-fr--crop .se-br-fr-c{white-space:normal}
.se-br-break{display:none}
.se-br-use-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;margin-top:clamp(56px,9vh,96px)}
.se-br-use-line{grid-column:1/span 8;margin:0;max-width:36ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;color:var(--fg-2);text-wrap:pretty;transition:color .8s var(--e-out)}
.se-br-use-1{color:var(--fg)}
.se-br-use-links{grid-column:9/span 4;display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin:0;padding:6px 0 0;list-style:none}
.se-br-more{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 32px;margin:clamp(56px,9vh,96px) 0 0;padding-top:15px;border-top:1px solid var(--line);transition:border-color .8s var(--e-out)}
.se-br-more-l{flex:none;min-width:calc((100% - 11 * 24px) / 12 * 2 + 24px)}
.se-br-more-a{position:relative;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line);font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;transition:border-color .3s}
.se-br-more-a::after{content:"";position:absolute;inset:-10px -6px}
.se-br-more-a:hover{border-bottom-color:var(--red)}
.se-br-more-a:focus-visible{outline:2px solid var(--red);outline-offset:4px}

/* ---------- runs, How it runs, the strip ---------- */
/* across 12, the step names above (row 1), the strip (row 2, the process motion's placeholder over a 1px rule with
   a tick at each step and the end tick), the client's part under it (row 3). Each step spans its length in twelfths
   and lays its three parts on the strip's rows (subgrid) */
.se-br-strip{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto minmax(96px,auto) auto;column-gap:24px;margin-top:clamp(56px,9vh,96px)}
.se-br-strip-m{grid-column:1/-1;grid-row:2}
.se-br-steps{display:contents}
.se-br-step{grid-column:var(--c);grid-row:1/span 3;display:grid;grid-template-rows:subgrid;min-width:0}
.se-br-step-h{grid-row:1;align-self:start;padding-bottom:4px}
.se-br-step-n{margin:0;color:var(--fg);transition:color .3s}
.se-br-step-sub{margin:6px 0 0;max-width:40ch;font-size:15px;line-height:1.45;color:var(--fg-2);transition:color .3s}
.se-br-step-r{position:relative;grid-row:2;align-self:center;height:1px;margin-right:-24px;background:var(--line);transition:background-color .8s var(--e-out)}
.se-br-step-r::before{content:"";position:absolute;left:0;top:-7px;height:15px;border-left:1px solid var(--fg-3);transition:border-color .8s var(--e-out)}
.se-br-step:last-child .se-br-step-r{margin-right:0}
.se-br-step:last-child .se-br-step-r::after{content:"";position:absolute;right:0;top:-11px;height:23px;border-left:1px solid var(--fg);transition:border-color .8s var(--e-out)}
.se-br-step-p{grid-row:3;margin:0;padding-top:4px;max-width:30ch;font-size:15.5px;line-height:1.5;color:var(--fg-2);text-wrap:pretty;transition:color .3s}
.se-br-step:hover .se-br-step-n,.se-br-step:hover .se-br-step-sub,.se-br-step:hover .se-br-step-p{color:var(--fg)}
.se-br-end{grid-column:9/-1;grid-row:2;justify-self:end;align-self:center;margin:0;padding-bottom:44px;color:var(--fg)}
.se-br-takes{margin:clamp(40px,6vh,64px) 0 0;max-width:calc((100% - 11 * 24px) / 12 * 8 + 7 * 24px);font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;text-wrap:pretty}

/* ---------- colophon, the book's last page ---------- */
/* one centred column in 4 to 9 between two 96px rules, Body size, the imprint under the lower rule */
.se-br-col-in{display:flex;flex-direction:column;align-items:center;width:calc((100% - 11 * 24px) / 12 * 6 + 5 * 24px);margin:clamp(56px,9vh,96px) auto 0;text-align:center}
.se-br-col-in::before,.se-br-col-in::after{content:"";width:96px;height:1px;background:var(--line);transition:background-color .8s var(--e-out)}
.se-br-col-in::before{margin-bottom:44px}
.se-br-col-in::after{order:1;margin-top:28px}
.se-br-col-p{margin:0 0 1.1em;max-width:46ch;font-size:17px;line-height:1.6;text-wrap:pretty}
.se-br-col-link{margin-bottom:0;font-size:15.5px;color:var(--fg-2)}
.se-br-col-a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line);font-weight:600;transition:border-color .3s}
.se-br-col-a:hover{border-bottom-color:var(--red)}
.se-br-col-a:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.se-br-imprint{order:2;margin:20px 0 0;font:500 12.5px/1.3 var(--text);color:var(--fg-3);transition:color .8s var(--e-out)}
/* a colour's value as columns of the sixteen glyphs, each rolling to its own once and settling */
.se-br-hex{white-space:nowrap;font-variant-numeric:tabular-nums}
.se-br-hc{display:inline-block;width:.6em;height:1.6em;overflow:hidden;vertical-align:top;text-align:center}
.se-br-hc-in{display:block;transform:translateY(calc(var(--v,0) * -1.6em));transition:transform .55s var(--e-out) calc(var(--i,0) * .045s)}
.se-br-hc-in::before{content:"0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A A\A B\A C\A D\A E\A F";display:block;white-space:pre;line-height:1.6em}
.js:not(.no-libs):not(.rm) [data-se-br-col]:not(.is-rolled) .se-br-hc-in{transform:translateY(0)}

/* ---------- responsive ---------- */
@media (max-width:1365px){
  /* the ladder in two rungs, 16 to 256, then 512 and the crop */
  .se-br-ladder{flex-wrap:wrap}
  .se-br-break--mid{display:block;flex-basis:100%;height:0}
}
@media (max-width:1100px){
  /* h0, the words under the title, so its guides run across all twelve columns again */
  .se-head--h0 .se-br-art--title{grid-column:1/-1}
  .se-br-get-about{grid-column:1/span 8;grid-row:2;margin:28px 0 0}
  .se-br-pages{grid-column:1/-1}
  .se-br-book:not(:has(.se-br-verso)) .se-br-pages{grid-column:2/span 10}
  /* Held., the word and the line over the stage, the ledger under it */
  .se-br-held-in{grid-template-rows:auto}
  .se-br-held-w{grid-column:1/span 8}
  .se-br-held-s{grid-column:1/-1;grid-row:2;margin-top:clamp(36px,6vh,56px)}
  .se-br-ledger{grid-column:1/span 8;grid-row:3;margin-top:clamp(36px,6vh,56px)}
  .se-br-use-line{grid-column:1/span 7}
  .se-br-use-links{grid-column:8/span 5}
  .se-br-col-in{width:calc((100% - 11 * 24px) / 12 * 8 + 7 * 24px)}
}
@media (max-width:760px){
  /* the guides, only the baseline */
  .se-br-g--cap,.se-br-g--x,.se-br-g--desc,.se-br-v,.se-br-gn{display:none}
  /* the title's guides in the head's column, a box of no height before the title, its ghost overflowing onto it. The
     head is a flex column on a phone, so the box stretches across it (start left it the width of its ghost, at the
     left edge, with the centred title's baseline running only under its first letters) */
  .se-br-art--title{order:1;height:0;align-self:stretch}
  /* the signs, stacked rows, a 96px vignette beside the numeral and the sentence */
  .se-br-signs-l{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .se-br-sign{display:grid;grid-template-columns:minmax(0,1fr);column-gap:16px;align-items:start}
  .se-br-sign:has(.se-br-sign-m){grid-template-columns:96px minmax(0,1fr)}
  .se-br-sign-m{grid-column:1;grid-row:1/span 2;width:96px;margin:0;overflow:hidden}
  .se-br-sign-n,.se-br-sign-t{grid-column:-2/-1}
  .se-br-sign-t{margin-top:6px}
  .se-br-sign-a{grid-column:1/-1;margin-top:18px}
  /* the book, one page under the other, the contents line at Small */
  .se-br-get-about{grid-column:1/-1;margin-top:22px}
  .se-br-book{margin-top:44px}
  .se-br-toc-l{justify-content:flex-start;font:500 16px/1.4 var(--text);letter-spacing:0;gap:.3em .6em}
  .se-br-toc-a::before{font-size:.75em;vertical-align:.3em}
  .js:not(.no-libs):not(.rm) .se-br-toc{margin-top:28px}
  .se-br-pages,.se-br-book:not(:has(.se-br-verso)) .se-br-pages{grid-column:1/-1;grid-template-columns:minmax(0,1fr)}
  .se-br-spread{grid-template-columns:minmax(0,1fr);row-gap:12px}
  .se-br-spread::before{content:none}
  .se-br-verso,.se-br-recto{grid-column:1;border-radius:10px}
  .se-br-recto{transform-origin:50% 0}
  .se-br-recto-in{padding:24px 22px 56px}
  .se-br-folio{right:22px;bottom:20px}
  .js:not(.no-libs):not(.rm) .se-br-sweep,.js:not(.no-libs):not(.rm) .se-br-book:not(:has(.se-br-verso)) .se-br-sweep{grid-column:1;grid-row:1}
  .js:not(.no-libs):not(.rm) .se-br-book:not(.is-opened) .se-br-recto{transform:scaleY(.4)}
  /* Held., the label, the word, the line, the stage square, the ledger's rows as full width buttons */
  .se-br-held-w,.se-br-ledger{grid-column:1/-1}
  .se-br-stage{margin:0;aspect-ratio:1}
  .se-br-held-cap{margin:14px 0 0}
  .se-br-crop{display:none}
  .se-br-box{--bw:60cqw}
  .se-br-busy{top:auto;left:0;width:auto;height:25%;border-left:0;border-top:1px solid var(--line)}
  .js:not(.no-libs) .se-br-pills{top:14px;bottom:auto;left:14px}
  .se-br-pill{min-height:36px}
  .se-br-h,.se-br-rot{width:8px;height:8px}
  .se-br-h::after,.se-br-rot::after{inset:-18px}
  .js:not(.no-libs) .se-br-hint{left:50%;top:calc(100% + 28px);transform:translateX(-50%)}
  .se-br-held-line{max-width:none}
  /* the ladder, 16 to 128 on one baseline, then 256 and an 86 by 256 crop, the 512 left out */
  .se-br-ladder{gap:32px 16px}
  .se-br-break--mid,.se-br-fr--512{display:none}
  .se-br-break--phone{display:block;flex-basis:100%;height:0}
  .se-br-fr--crop{flex:0 0 86px;min-width:0}
  .se-br-fr--crop .se-br-fr-in{height:256px}
  .se-br-fr-big{background-position:right -40px top -640px,0 0}
  .se-br-use-foot{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .se-br-use-line,.se-br-use-links{grid-column:1/-1}
  .se-br-more{flex-direction:column;gap:10px}
  /* the strip stands vertical, the steps down a 1px rule at the left */
  .se-br-strip{display:block}
  .se-br-strip-m{margin-bottom:36px}
  .se-br-step{position:relative;display:block;padding:0 0 30px 26px;border-left:1px solid var(--line)}
  .se-br-step::before{content:"";position:absolute;left:-7px;top:.55em;width:13px;height:1px;background:var(--fg-3)}
  .se-br-step-r{display:none}
  .se-br-step-h{padding:0}
  .se-br-step-p{padding-top:8px}
  .se-br-end{position:relative;padding:0 0 0 26px;text-align:start}
  .se-br-end::before{content:"";position:absolute;left:-11px;top:.6em;width:23px;height:1px;background:var(--fg)}
  .se-br-col-in{width:100%}
}
@media (pointer:coarse){
  .se-br-hint-f{display:none}
  .se-br-hint-t{display:inline}
}
@media (forced-colors:active){
  .se-br-g,.se-br-v,.se-br-strike,.se-br-step-r{background:GrayText}
  .se-br-sel,.se-br-h,.se-br-rot{border-color:CanvasText}
  .se-br-sheet::after,.se-br-recto::after,.se-br-thumb{box-shadow:none;border:1px solid CanvasText}
  .se-br-pill{border:1px solid CanvasText;box-shadow:none}
  .se-br-stop{background:CanvasText}
}
@media (prefers-reduced-motion:reduce){
  .se-br-hc-in,.se-br-stage,.se-br-recto,.se-br-lk-p,.se-br-strike{transition:none}
}
.se-br-demo{position:absolute;inset:0;overflow:hidden;color:var(--fg);font-family:var(--text);container-type:inline-size}
.se-br-demo-mark{display:block;width:100%;height:100%;overflow:visible}
.se-br-demo-format{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:60%;height:70%;border:1px solid var(--fg-3);display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:5%;background:color-mix(in srgb,currentColor 3%,transparent)}
.se-br-demo-format>.se-br-demo-mark{width:28%;height:48%;align-self:center}
.se-br-demo-kicker,.se-br-demo-tagline{font:600 clamp(12px,3cqw,22px)/1.1 var(--display);letter-spacing:-.03em}
.se-br-demo-formats{position:absolute;inset:auto 6% 5%;display:flex;justify-content:space-between;gap:8px;font-size:clamp(9px,1.7cqw,13px);color:var(--fg-3)}
.se-br-demo-formats .is-final{color:var(--fg)}
.se-br-demo-cross{position:absolute;width:12px;height:12px;color:var(--fg-3)}
.se-br-demo-cross::before,.se-br-demo-cross::after{content:"";position:absolute;left:50%;top:50%;background:currentColor}
.se-br-demo-cross::before{width:12px;height:1px;transform:translate(-50%,-50%)}
.se-br-demo-cross::after{width:1px;height:12px;transform:translate(-50%,-50%)}
.se-br-demo-cross--a{left:-6px;top:-6px}.se-br-demo-cross--b{right:-6px;bottom:-6px}
.se-br-demo-dated{position:absolute;inset:12% 18%;border:1px solid var(--fg-3);outline:1px solid var(--fg-3);outline-offset:-7px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6%;font-size:clamp(8px,3cqw,15px)}
.se-br-demo-dated strong{font:800 clamp(40px,20cqw,110px)/1 var(--display);letter-spacing:-.07em}
.se-br-demo-faces{position:absolute;inset:18% 10%;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;gap:5%}
.se-br-demo-faces>div{min-width:0;display:flex;flex-direction:column;gap:18px;font-size:clamp(9px,2.7cqw,14px);color:var(--fg-2)}
.se-br-demo-faces strong{color:var(--fg);font-size:clamp(28px,12cqw,78px);line-height:1}
.se-br-demo-face-0{font-family:var(--display);font-weight:800}.se-br-demo-face-1{font-family:var(--text);font-weight:300}.se-br-demo-face-2{font-family:var(--display);font-style:italic;font-weight:500}
.se-br-demo-file{position:absolute;inset:16% 25%;display:flex;flex-direction:column;gap:12px;align-items:center;font-size:clamp(10px,3cqw,16px)}
.se-br-demo-file>[data-br-pixels]{display:grid;grid-template-columns:repeat(7,1fr);width:100%;aspect-ratio:1;gap:1px}
.se-br-demo-file i{background:var(--line)}.se-br-demo-file i.is-fill{background:var(--fg)}
.se-br-demo-guides{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1;opacity:.4}
.se-br-demo-construction{position:absolute;left:33%;top:24%;width:34%;height:37%}
.se-br-demo-top{position:absolute;top:7%;left:8%;font-size:clamp(10px,2.9cqw,14px);color:var(--fg-2)}
.se-br-demo-sizes{position:absolute;inset:auto 10% 8%;display:flex;align-items:flex-end;justify-content:space-between}
.se-br-demo-sizes>div{display:flex;flex-direction:column;align-items:center;gap:14px;font-size:clamp(9px,2.8cqw,14px);color:var(--fg-2)}
.se-br-demo-sizes .se-br-demo-size-0{width:56px;height:65px}.se-br-demo-sizes .se-br-demo-size-1{width:28px;height:33px}.se-br-demo-sizes .se-br-demo-size-2{width:14px;height:17px}
.se-br-demo-poster{position:absolute;inset:7% 10%;border:1px solid var(--line);padding:7%;display:flex;flex-direction:column;justify-content:space-between;background-image:linear-gradient(90deg,transparent calc(50% - .5px),var(--line) 50%,transparent calc(50% + .5px))}
.se-br-demo-poster-small{font-size:clamp(8px,2.7cqw,13px);color:var(--fg-2)}
.se-br-demo-poster>strong{font:800 clamp(34px,13cqw,80px)/.95 var(--display);letter-spacing:-.06em}
.se-br-demo-pattern{display:grid;grid-template-columns:repeat(4,1fr);gap:12%;height:31%}
.se-br-demo-pattern .se-br-demo-mark{height:100%;min-height:0}
.se-br-demo-poster-foot{display:flex;align-items:flex-end;justify-content:space-between;font-size:clamp(8px,2.6cqw,13px)}
.se-br-demo-poster-foot>.se-br-demo-mark{width:16%;height:auto}
.se-br-demo-book{position:absolute;inset:20% 7%;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--fg-3);box-shadow:0 16px 24px color-mix(in srgb,var(--fg) 5%,transparent)}
.se-br-demo-book-left,.se-br-demo-book-right{padding:12%;display:flex;flex-direction:column;justify-content:space-between;gap:12px;font-size:clamp(8px,2.8cqw,14px)}
.se-br-demo-book-left{border-right:1px solid var(--fg-3)}.se-br-demo-book-left>.se-br-demo-mark{height:45%;width:55%;margin:auto}.se-br-demo-book-left small{font-size:clamp(7px,2.1cqw,11px);color:var(--fg-2)}
.se-br-demo-book-right>strong{font:800 clamp(20px,6cqw,36px)/1 var(--display);letter-spacing:-.04em}
.se-br-demo-colours{height:45%;display:flex;gap:4%}.se-br-demo-colours>i{flex:1;background:var(--fg)}.se-br-demo-colours>i:nth-child(2){opacity:.65}.se-br-demo-colours>i:nth-child(3){opacity:.35}.se-br-demo-colours>i:nth-child(4){opacity:.12}
.se-br-demo-fold{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--fg-3);opacity:0}
.se-br-demo-routes{width:100%;height:100%;fill:none;stroke:var(--fg);stroke-width:1.5}
.se-br-demo-route-guide{stroke:var(--line)}.se-br-demo-routes text{fill:var(--fg-2);stroke:none;font:14px var(--text)}
.se-br-demo .se-br-demo-phone{display:none}
@media(max-width:760px){.se-br-demo .se-br-demo-phone{display:block}.se-br-demo .se-br-demo-wide{display:none}.se-br-demo--head .se-br-demo-format{height:62%}.se-br-demo-sizes .se-br-demo-size-0{width:40px;height:47px}}
.se-web-art{position:absolute;inset:0;color:var(--fg);container-type:size}
.se-web-art-svg{display:block;width:100%;height:100%;overflow:visible}
.se-web-art-svg text{fill:currentColor;font-family:var(--text);font-weight:500}
.se-web-art-caption{font-size:21px;letter-spacing:-.025em}
.se-web-art-text{font-size:23px}
.se-web-art-small{font-size:16px}
.se-web-art-sign-text{font-size:12px}
.se-web-art-calendar{font-size:16px;font-variant-numeric:tabular-nums}
.se-web-art-svg .se-web-art-title{font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:-1.1px}
.se-web-art-svg .se-web-art-big{font-family:var(--display);font-weight:800;font-size:42px;letter-spacing:-2px}
.se-web-art-svg .se-web-art-muted{fill:var(--fg-2)}
.se-web-art-rule{stroke:var(--line);stroke-width:1.25}
.se-web-art-stroke{stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.se-web-art-focus{stroke:currentColor;stroke-width:2}
.se-web-art-bar{stroke:var(--fg-2);stroke-width:5;stroke-linecap:round;opacity:.48}
.se-web-art-image{fill:var(--line)}
.se-web-art-paper{stroke:var(--fg-2);stroke-width:1;fill:var(--se-panel,var(--bg))}
.se-web-art-cursor{fill:var(--fg);stroke:var(--se-panel,var(--bg));stroke-width:1.5}
.se-web-art-stop{fill:var(--red);stroke:none}
.se-web-art-dashed{stroke-dasharray:4 5}
.se-web-art-wire,.se-web-art-old,.se-web-art-editor,.se-web-art-transient{opacity:0}
.se-web-art-portrait{display:none}
@media (max-width:760px){
  .se-web-art--process .se-web-art-landscape{display:none}
  .se-web-art--process .se-web-art-portrait{display:block}
  .se-web-art--head .se-web-art-landscape{display:none}
  .se-web-art--head .se-web-art-portrait{display:block}
  .se-web-art--head .se-web-art-caption{font-size:18px}
}
@media (forced-colors:active){
  .se-web-art-rule,.se-web-art-stroke,.se-web-art-bar{stroke:CanvasText}
  .se-web-art-image{fill:CanvasText;opacity:.15}
  .se-web-art-paper{fill:Canvas;stroke:CanvasText}
  .se-web-art-stop{fill:CanvasText}
}
/* /services/websites/, Said three ways, the service's own stylesheet (research/service/design/spec.md section 2),
   imported by Entry.astro after service.css. The material is the page's own 12 column grid: its columns drawn as
   bands of 3 percent --fg behind the head and behind What you get, a ruler on every section rule (SecHead's ruler),
   blocks lined up on those columns. Nothing else decorative. Classes se-web- only, never a part's class, sections in
   page order, start states only behind .js:not(.no-libs):not(.rm), responsive rules at the end. Every value is the
   site's or docs/14's (the type levels, the 24px gutter, --gap-s, 1px --line rules, 10px picture and 18px panel
   corners, the motion vocabulary of research/service/animated/rubric.json) unless a comment gives the reason.
   Never the homepage's set pieces, no card, no shelf, no counter, no browser chrome, no device outline. */

/* ---------- the grid layer (Grid.astro) ---------- */
/* the twelve columns as bands of 3 percent --fg, the gutters clear, behind everything in their section (z-index -1,
   the root's stacking context, so they sit on the body's ground and under the words). In the head, from the label
   rule to the loop's foot. In What you get, from the label rule to the frame's foot */
.se-web-grid{position:absolute;inset:0;z-index:-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;pointer-events:none}
.se-web-grid i{display:block;background:var(--fg);opacity:.03;transform-origin:50% 100%;transition:background-color .8s var(--e-out)}
.se-web-grid--get{inset:var(--gap-h) var(--pad)}
/* the bands rise from the floor with the intro (the head) or as the section arrives (What you get), websites.ts */
.js:not(.no-libs):not(.rm) .se-web-grid i{transform:scaleY(0)}

/* ---------- the signs (Signs.astro) ---------- */
/* R, ruled rows across 12, about 156px each. The numeral in 1, a client's words in 2 to 8 at the Brief level (Hanken
   500, the project pages' brief, a voice and not a headline), the opening quote hung into the gutter so the words
   stand on the column's edge, the answer's link in 9 to 10, the vignette 144 by 108 in 11 to 12 at the right. Each
   rule draws left to right at 88% (0.8s, expo.out as --e-out), then the row's words fade up */
.se-web-signs-l{margin:0 0 clamp(18px,2.6vh,26px)}
.se-web-sign-list{margin:0;padding:0;list-style:none}
.se-web-sign{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;min-height:156px;padding:24px 0 26px;box-sizing:border-box}
.se-web-sign::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:0 50%;transition:transform .8s var(--e-out),background-color .8s var(--e-out)}
.se-web-sign:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);transition:background-color .8s var(--e-out)}
.js:not(.no-libs):not(.rm) .se-web-sign:not(.in)::before{transform:scaleX(0)}
.se-web-sign-n{grid-column:1;padding-top:.75em;font-variant-numeric:tabular-nums}
.se-web-sign-q{grid-column:2/span 7;margin:0;max-width:24ch;font:500 clamp(26px,2.6vw,40px)/1.18 var(--text);letter-spacing:-.012em;text-indent:-.42em;text-wrap:balance}
.se-web-sign-a{grid-column:9/span 2;margin:0;padding-top:.62em}
.se-web-sign-m{grid-column:11/span 2;justify-self:end;width:min(144px,100%)}
/* without its piece the row keeps its link at the right end (spec.md, Signs, Without its pieces) */
.se-web-sign:not(:has(.se-motion)) .se-web-sign-a{grid-column:10/span 3;justify-self:end}

/* ---------- get, Every language. (Languages.astro) ---------- */
/* the chapter word on one line across 12, its two lines run together on a wider screen (a phone keeps them on two, so
   the rewrap only moves the full stop sideways there). During the rewrap each word is a box whose width tweens, its
   letters clipped by clip-path, not overflow, which would move the box's baseline */
.se-web-get-h .line{display:inline-block;width:auto}
.se-web-get-h .line+.line{margin-top:-.08em}
.se-web-say{display:inline-block;white-space:nowrap;vertical-align:baseline}
.se-web-get-h.is-rewrap .se-web-say{clip-path:inset(-.4em 0 -.4em 0)}
/* the answer at the Lead level in 1 to 6, the switch in 9 to 12, 40px under the word */
.se-web-get-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;margin-top:40px}
.se-web-answer{grid-column:1/span 6;margin:0;max-width:32ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;text-wrap:pretty}
.se-web-switch{grid-column:9/span 4}
.se-web-switch-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.se-web-switch-l{margin:0}
.se-web-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
/* outline pills (1px ring, 7px 14px, 13.5px, 500), the pressed one filled --fg, a 48px hit area */
.se-web-pill{position:relative;margin:0;padding:7px 14px;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px var(--line);font:500 13.5px/1.3 var(--text);color:var(--fg);cursor:pointer;transition:background-color .35s var(--e-out),color .35s var(--e-out),box-shadow .35s var(--e-out)}
.se-web-pill::after{content:"";position:absolute;inset:-8px -4px}
.se-web-pill:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.se-web-pill[aria-pressed="true"]{background:var(--fg);color:var(--bg);box-shadow:inset 0 0 0 1px var(--fg)}
.se-web-pill:focus-visible{outline:2px solid var(--red);outline-offset:4px}
/* without scripts the chapter stays in English and the switch, which would do nothing, is left out of sight */
html:not(.js) .se-web-switch,.no-libs .se-web-switch{display:none}
/* G, one frame across 12, 72px lower, a 1px ring with 18px corners, cut by two 1px rules in the gutters after column
   6 and after column 9 (cells 662, 319, 319 at 1440), no gaps. The cells share their rows (subgrid), so the numerals,
   the titles and the answers stand on the same lines whatever the pieces' heights, the pieces standing on the words */
.se-web-frame{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(4,auto);column-gap:24px;margin:72px 0 0;padding:0;list-style:none;border-radius:18px;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .8s var(--e-out)}
.se-web-cell{position:relative;display:grid;grid-row:1/span 4;grid-template-rows:subgrid;align-content:start;min-width:0;padding:24px 24px 32px}
.se-web-cell--6{grid-column:1/span 6}
.se-web-cell--3{grid-column:span 3}
.se-web-cell+.se-web-cell::before{content:"";position:absolute;left:-12.5px;top:0;bottom:0;width:1px;background:var(--line);transition:background-color .8s var(--e-out)}
.se-web-cell-m{align-self:end;width:100%}
.se-web-cell:last-child .se-web-cell-m{justify-self:center;width:min(237px,100%)}
.se-web-cell-n{margin:28px 0 0;font-variant-numeric:tabular-nums}
.se-web-cell-n:first-child{margin-top:0}
.se-web-cell-t{margin:12px 0 0;font:800 clamp(24px,2.05vw,34px)/.95 var(--display);letter-spacing:-.04em;text-wrap:balance}
.se-web-cell-a{margin:14px 0 0;max-width:42ch;font-size:15.5px;line-height:1.5;color:var(--fg-2);text-wrap:pretty;transition:color .8s var(--e-out)}
/* an anchor from the signs lands the cell under the nav, its numeral first */
.se-web-cell:target .se-web-cell-n{color:var(--fg)}

/* ---------- built, the judgement table (Built.astro) ---------- */
/* J, type only, one row a platform (review of 3 October 2026, the spec's columns read as the frame above them in a
   build). The intro at the Lead level in 1 to 6, 48px under it the column names over the first rule, then the rows on
   1px rules across 12, the renders at 40px and the name at the Statement level in 1 to 4, when we pick it at the Lead
   level in 5 to 9, the project built with it at the Small level in 10 to 12. The last row, In every build, its label
   in 1 to 4 and its sentence in 5 to 12 under a rule that draws once the rows have filled. Hover or focus on a row
   keeps its words --fg and turns the rest --fg-2 (0.35s). The renders are the supplied files, never dimmed or
   recoloured (rule 4) */
.se-web-built-intro{margin:clamp(28px,5vh,56px) 0 0;max-width:30ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;text-wrap:pretty}
.se-web-table{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:48px}
.se-web-tk{grid-column:1/-1;display:grid;grid-template-columns:subgrid;padding-bottom:14px}
.se-web-tk p{margin:0}
.se-web-tk-1{grid-column:5/span 5}
.se-web-tk-3{grid-column:10/span 3}
.se-web-trows{grid-column:1/-1;display:grid;grid-template-columns:subgrid;margin:0;padding:0;list-style:none}
.se-web-trow{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:baseline;padding:30px 0 34px;border-top:1px solid var(--line);transition:opacity .8s cubic-bezier(.215,.61,.355,1) var(--d,0s),transform .8s cubic-bezier(.215,.61,.355,1) var(--d,0s),color .35s var(--e-out),border-color .8s var(--e-out)}
/* the renders stand on the name's baseline, so the row's words share one line across the columns */
.se-web-tname{grid-column:1/span 4;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:0;font:700 clamp(30px,4.35vw,74px)/1.06 var(--display);letter-spacing:-.038em}
.se-web-tname-r{display:inline-flex;align-items:flex-end;gap:8px}
/* the supplied renders resized to the name's capital height at every width, only resized (rule 4) */
.se-web-tname-r img{display:block;width:auto;height:.7em}
.se-web-tname-w{font:500 15px/1.3 var(--text);letter-spacing:0;color:var(--fg-2);transition:color .35s var(--e-out)}
.se-web-twhen{grid-column:5/span 5;margin:0;max-width:30ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;text-wrap:pretty}
.se-web-tbuilt{grid-column:10/span 3;margin:0;font-size:15.5px;line-height:1.5;color:var(--fg-2)}
.se-web-platform-m{grid-column:5/span 8;width:min(100%,440px);margin-top:24px;align-self:start}
.se-web-tt{margin:0}
/* each cell's column name, read by a screen reader everywhere, shown on a phone alone, the row of names standing for
   it on a wide screen */
.se-web-tl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.se-web-table:has(.se-web-trow:hover) .se-web-trow:not(:hover),
.se-web-table:has(.se-web-trow:focus-within) .se-web-trow:not(:focus-within){color:var(--fg-2)}
/* the last row, In every build, its label in 1 to 4, its sentence across 5 to 12, its rule drawn once the rows have
   filled, after a short rule under the label */
.se-web-every{position:relative;grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:baseline;padding-top:30px}
.se-web-every::before{content:"";position:absolute;left:0;top:0;width:calc((100% - 11 * 24px) / 12 * 4 + 3 * 24px);height:1px;background:var(--line);transition:background-color .8s var(--e-out)}
.se-web-every-k{grid-column:1/span 4;margin:0}
.se-web-every-in{grid-column:5/span 8}
.se-web-access-m{grid-column:5/span 8;width:min(100%,440px);margin-top:24px;align-self:start}
.se-web-every-t{margin:0;max-width:40ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;text-wrap:pretty}
.se-web-every-rule{position:absolute;top:0;right:0;left:calc((100% - 11 * 24px) / 12 * 4 + 4 * 24px);height:1px;background:var(--line);transform-origin:0 50%;transition:transform .8s var(--e-out) .7s,background-color .8s var(--e-out)}
.js:not(.no-libs):not(.rm) [data-se-web-table]:not(.in) .se-web-every-rule{transform:scaleX(0)}
/* with a fine pointer only, where a Tab key is near */
.se-web-tab{margin:18px 0 0;font-size:15.5px;line-height:1.5;color:var(--fg-2)}

/* ---------- live, the device line (Live.astro) ---------- */
/* the chapter word in 1 to 6, the lead in 7 to 12 on its last baseline. 99px under, the floor, a 1px rule across 12
   running off the right edge, the pictures standing on it bottom aligned at three widths, Albania Inbound 1 to 7
   (775 by 485), Pentagram Academy 8 to 10 (319 by 425), ISLA Physio 11 to 12 (205 by 443), 10px corners, no chrome.
   Each caption 18px under the floor in its picture's columns. The pictures rise out of the floor (clip-path from the
   bottom, 1.1s expo.out, 0.15s apart, widest first), settling from 106 percent, as the floor draws */
.se-web-live-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;align-items:last baseline}
.se-web-live-h{grid-column:1/span 6}
.se-web-live-lead{grid-column:7/span 6}
.se-web-live-lead p{margin:0;max-width:30ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;text-wrap:pretty}
/* the lead a build shows with one site, shown in the dev server only under Show the build */
.se-web-pv-build{display:none}
.pv-build .se-web-pv-build{display:block}
.se-web-floor{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto;column-gap:24px;margin:clamp(70px,11vh,130px) 0 0;padding:0;list-style:none}
.se-web-floor::after{content:"";grid-column:1/-1;grid-row:2;align-self:start;height:1px;margin-right:calc(var(--pad) * -1);background:var(--line);transform-origin:0 50%;transition:transform .8s var(--e-out),background-color .8s var(--e-out)}
.se-web-work{display:grid;grid-row:1/span 2;grid-template-rows:subgrid;min-width:0}
.se-web-work--desktop{grid-column:1/span 7}
.se-web-work--tablet{grid-column:8/span 3}
.se-web-work--phone{grid-column:11/span 2}
.se-web-shot{position:relative;align-self:end;border-radius:10px;transition:clip-path 1.1s var(--e-out) var(--rd,0s)}
.se-web-work--tablet .se-web-shot{--rd:.15s}
.se-web-work--phone .se-web-shot{--rd:.3s}
.se-web-shot-img{display:block;width:100%;height:auto;aspect-ratio:16 / 10;border-radius:10px;object-fit:cover;object-position:50% 0;background:var(--mist);transition:transform 1.1s cubic-bezier(0,.202,.204,1) var(--rd,0s)}
/* the capture's own white meets the paper, so a 1px ring holds its edge */
.se-web-shot:has(.se-web-shot-img)::after{content:"";position:absolute;inset:0;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.se-web-shot:has(.se-web-shot-img){overflow:hidden}
.se-web-shot-m{width:100%}
.js:not(.no-libs):not(.rm) .se-web-floor:not(.in) .se-web-shot{clip-path:inset(100% 0 0 0 round 10px)}
.js:not(.no-libs):not(.rm) .se-web-floor:not(.in) .se-web-shot-img{transform:scale(1.06)}
.js:not(.no-libs):not(.rm) .se-web-floor:not(.in)::after{transform:scaleX(0)}
.se-web-shot{clip-path:inset(0 0 0 0 round 10px)}
@media (hover:hover){
  .se-web-work:hover .se-web-shot-img{transform:scale(1.03);transition-delay:0s}
}
.se-web-cap{padding-top:18px;min-width:0}
.se-web-cap p{margin:0}
.se-web-cap-l{max-width:34ch;font-size:15.5px;line-height:1.5;color:var(--fg-2);text-wrap:pretty;transition:color .8s var(--e-out)}
.se-web-cap-n{font-weight:600;color:var(--fg);transition:color .8s var(--e-out)}
.se-web-cap-a{padding-top:12px}
.se-web-cap-d{padding-top:12px}
/* W, a build's today, one site in 1 to 8 (891 by 557) with its caption in 9 to 12 on the floor (spec.md, live,
   Without its pieces), the dev server's Show the build too, which removes the other two */
.se-web-floor:has(> .se-web-work:only-child) .se-web-work{grid-column:1/-1;grid-row:1;grid-template-rows:none;grid-template-columns:subgrid;align-items:end}
.se-web-floor:has(> .se-web-work:only-child) .se-web-shot{grid-column:1/span 8}
.se-web-floor:has(> .se-web-work:only-child) .se-web-cap{grid-column:9/span 4;padding:0}
.se-web-floor:has(> .se-web-work:only-child)::after{margin-top:24px}
/* More we built, 64px under, its label in 1 to 2 and the line in 3 to 12 */
.se-web-more{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:baseline;margin:64px 0 0}
.se-web-more-l{grid-column:1/span 2}
.se-web-more-t{grid-column:3/span 10;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em}

/* ---------- measured, the page timing itself (Measured.astro) ---------- */
/* the word, then the reading. The chapter word in 1 to 8 at the top, under it the figure at the Closing level (the
   size of Contact's word, the page's one proof set larger than its chapter word, review of 3 October 2026, so the
   section is never the device line's word beside a lead again) across 1 to 8 with its unit at the Lead level on its
   baseline and its line under it, and in 9 to 12, standing on the same floor, the rows on 1px rules (the label --fg-2
   at the left, the value --fg at the right, tabular) and the footnote. The figure rolls once at 90% and the rows
   follow 0.15s apart once the page has loaded */
.se-web-m{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.se-web-measured-h{grid-column:1/span 8;grid-row:1}
.se-web-ledger{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:subgrid;align-items:end;margin-top:clamp(24px,4.5vh,48px)}
.se-web-fig{grid-column:1/span 8;margin:0}
.se-web-side{grid-column:9/span 4;min-width:0}
.se-web-fig-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:.08em .4em}
.se-web-fig-n{font:800 clamp(58px,11.2vw,210px)/.86 var(--display);letter-spacing:-.055em}
.se-web-fig-u{font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em}
.se-web-fig-l{display:block;margin-top:clamp(18px,2.6vh,28px);max-width:30ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;color:var(--fg-2);text-wrap:pretty;transition:color .8s var(--e-out)}
.se-web-rows{margin:0;padding:0}
.se-web-row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:14px 0;border-top:1px solid var(--line);transition:opacity .8s cubic-bezier(.215,.61,.355,1) var(--d,0s),transform .8s cubic-bezier(.215,.61,.355,1) var(--d,0s),border-color .8s var(--e-out)}
.se-web-row:last-child{border-bottom:1px solid var(--line)}
.se-web-row+.se-web-row{--d:.15s}
.se-web-row dt{color:var(--fg-2);transition:color .8s var(--e-out)}
.se-web-row dd{margin:0;font-variant-numeric:tabular-nums}
.js:not(.no-libs):not(.rm) [data-se-web-rows]:not(.in) .se-web-row{opacity:0;transform:translateY(14px)}
.se-web-foot{margin:18px 0 0;max-width:46ch;font-size:15.5px;line-height:1.5;color:var(--fg-2);transition:color .8s var(--e-out)}
/* without scripts, or where the browser reports no arrival, nothing was timed, so the ledger is left out and its one
   line says so, in the figure's place */
.se-web-off{display:none;grid-column:1/span 8;grid-row:2;margin:clamp(24px,4.5vh,48px) 0 0;max-width:30ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em}
html:not(.js) .se-web-ledger,.no-libs .se-web-ledger,[data-se-web-untimed] .se-web-ledger{display:none}
html:not(.js) .se-web-off,.no-libs .se-web-off,[data-se-web-untimed] .se-web-off{display:block}
/* the dev server's results piece, a named site before and after, under the reading in 1 to 6 */
.se-web-m-proof{grid-column:1/span 6;grid-row:3;margin-top:clamp(48px,8vh,80px)}
.se-web-m-motion{width:100%}
.se-web-m-proof-l{margin:14px 0 0;font-size:15.5px;line-height:1.5;color:var(--fg-2)}

/* ---------- runs, the strip (Runs.astro) ---------- */
/* across 12, a 1px rule with a tick at each step, spaced by its share, the step's name above at the Label size in
   --fg, the client's part under it in --fg-2, Launch day the last tick at the right end. The piece above the rule
   (the dev server's, bare) grows the winery's sitemap there. Hover lights a step and its part */
.se-web-strip{position:relative;margin-top:clamp(28px,5vh,56px)}
.se-web-strip-m{width:100%;margin-bottom:8px}
.se-web-stages{display:flex;margin:0;padding:0;list-style:none}
.se-web-stage{position:relative;display:flex;flex-direction:column;flex:var(--s) 1 0;min-width:0}
.se-web-stage-n{margin:0;padding:0 16px 16px 0;color:var(--fg);transition:color .35s var(--e-out)}
.se-web-stage-y{position:relative;margin:0;min-height:3em;padding:18px 20px 0 0;border-top:1px solid var(--line);font-size:15.5px;line-height:1.45;color:var(--fg-2);text-wrap:pretty;transition:color .35s var(--e-out),border-color .8s var(--e-out)}
.se-web-stage-y::before{content:"";position:absolute;left:0;top:-6px;width:1px;height:11px;background:var(--fg);transition:background-color .8s var(--e-out)}
.se-web-stage--end{flex:0 0 auto;text-align:right}
.se-web-stage--end .se-web-stage-n,.se-web-stage--end .se-web-stage-y{padding-right:0}
.se-web-stage--end .se-web-stage-y::before{left:auto;right:0}
.se-web-stages:has(.se-web-stage:hover) .se-web-stage:not(:hover) :is(.se-web-stage-n,.se-web-stage-y){color:var(--fg-3)}
/* the line that reads the strip in 1 to 6, the dev server's sample of how long it takes in 7 to 12 */
.se-web-runs-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:44px}
.se-web-runs-foot p{margin:0}
.se-web-runs-read{grid-column:1/span 6;max-width:44ch;color:var(--fg-2);transition:color .8s var(--e-out)}
.se-web-runs-takes{grid-column:7/span 6;justify-self:end;text-align:right}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  /* the signs, the link under the words, the vignette kept */
  .se-web-sign-q{grid-column:2/span 8}
  .se-web-sign-a{grid-column:2/span 8;grid-row:2;padding-top:14px}
  .se-web-sign-m{grid-column:11/span 2;grid-row:1/span 2}
  .se-web-sign:not(:has(.se-motion)) .se-web-sign-a{grid-column:2/span 8;justify-self:start}
  /* What you get, the switch under the answer */
  .se-web-answer{grid-column:1/span 8}
  .se-web-switch{grid-column:1/span 8;margin-top:28px}
  .se-web-get-row{align-items:start}
  /* the table, the names a column wider, the judgement a column narrower */
  .se-web-tk-1,.se-web-twhen{grid-column:6/span 4}
  .se-web-tname{grid-column:1/span 5}
  .se-web-every-k{grid-column:1/span 5}
  .se-web-every-in{grid-column:6/span 7}
  .se-web-platform-m,.se-web-access-m{grid-column:6/span 7}
  .se-web-every::before{width:calc((100% - 11 * 24px) / 12 * 5 + 4 * 24px)}
  .se-web-every-rule{left:calc((100% - 11 * 24px) / 12 * 5 + 5 * 24px)}
  /* the device line, the captions narrower */
  .se-web-live-lead{grid-column:7/span 6}
  /* the reading narrower, the ledger wider */
  .se-web-fig{grid-column:1/span 7}
  .se-web-side{grid-column:8/span 5}
}
@media (min-width:761px) and (max-width:960px){
  /* What you get, too narrow for three cells in a row (a 3 column cell under 180px breaks its title word by word), so
     the frame is cut 12 over 6 and 6, one rule across under the first cell, one in the gutter between the other two */
  .se-web-frame{grid-template-rows:repeat(8,auto)}
  .se-web-cell--6{grid-column:1/-1}
  .se-web-cell--6 .se-web-cell-m{width:min(100%,614px)}
  .se-web-cell--3{grid-column:span 6;grid-row:5/span 4}
  .se-web-cell+.se-web-cell::before{top:0;bottom:auto;left:0;right:-12.5px;width:auto;height:1px}
  .se-web-cell:last-child::before{left:-12.5px;right:0}
  .se-web-cell:last-child::after{content:"";position:absolute;left:-12.5px;top:0;bottom:0;width:1px;background:var(--line)}
}
@media (max-width:760px){
  .se-web-grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px}
  .se-web-grid i:nth-child(n+5){display:none}
  /* the signs, the numeral, the words in a 246px column with a 96 by 96 vignette at their right, the link under */
  .se-web-sign{grid-template-columns:minmax(0,1fr) 96px;column-gap:16px;row-gap:10px;min-height:0;padding:18px 0 22px}
  .se-web-sign-n{grid-column:1;grid-row:1;padding-top:0}
  /* no hung quote on a phone, it would sit 7px from the screen's edge, inside the page's side gutter */
  .se-web-sign-q{grid-column:1;grid-row:2;max-width:none;font-size:22px;line-height:1.22;text-indent:0}
  .se-web-sign-a,.se-web-sign:not(:has(.se-motion)) .se-web-sign-a{grid-column:1/-1;grid-row:3;justify-self:start;padding-top:6px}
  .se-web-sign-m{grid-column:2;grid-row:1/span 2;width:96px;align-self:start}
  .se-web-sign:not(:has(.se-motion)) .se-web-sign-q{grid-column:1/-1}
  /* What you get, the word on two fixed lines, the answer, the pills in one row, the frame stacked */
  .se-web-get-h .line{display:block;width:max-content;max-width:100%}
  .se-web-get-h .line+.line{margin-top:-.12em}
  .se-web-get-row{display:block;margin-top:28px}
  .se-web-answer{max-width:none}
  .se-web-switch{margin-top:28px}
  .se-web-pills{flex-wrap:nowrap}
  .se-web-frame{display:block;margin-top:48px}
  .se-web-cell{display:flex;flex-direction:column;padding:20px 20px 26px}
  .se-web-cell+.se-web-cell::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
  .se-web-cell-m{align-self:stretch}
  .se-web-cell:last-child .se-web-cell-m{width:100%}
  .se-web-cell-n{margin-top:22px}
  /* the table, each platform stacked, its name on its rule, then its lines under their column names, then the
     shared row */
  .se-web-built-intro{max-width:none}
  .se-web-table{display:block;margin-top:36px}
  .se-web-tk{display:none}
  .se-web-trows{display:block}
  .se-web-trow{display:block;padding:20px 0 26px}
  .se-web-tname{font-size:36px;gap:6px 12px}
  .se-web-twhen,.se-web-tbuilt{max-width:none;margin-top:16px}
  .se-web-platform-m,.se-web-access-m{width:100%;margin-top:24px}
  .se-web-twhen{font-size:20px}
  .se-web-tl{position:static;display:block;width:auto;height:auto;margin:0 0 4px;overflow:visible;clip-path:none;white-space:normal;font-size:14px;letter-spacing:0;color:var(--fg-2)}
  .se-web-every{display:block;padding-top:18px}
  .se-web-every::before{content:none}
  .se-web-every-rule{left:0}
  .se-web-every-t{margin-top:10px}
  /* the device line, Albania Inbound full width with its caption, then the tablet and the phone side by side, bottom
     aligned on their own floor (200 by 267 and 134 by 290 at 390) */
  .se-web-live-top{display:block}
  .se-web-live-lead{margin-top:24px}
  .se-web-floor{grid-template-columns:minmax(0,200fr) minmax(0,134fr);grid-template-rows:repeat(4,auto);column-gap:24px;margin-top:48px}
  .se-web-floor::before{content:"";grid-column:1/-1;grid-row:2;align-self:start;height:1px;margin-right:calc(var(--pad) * -1);background:var(--line)}
  .se-web-floor::after{grid-row:4}
  .se-web-work--desktop{grid-column:1/-1;grid-row:1/span 2}
  .se-web-work--desktop .se-web-cap{padding-bottom:40px}
  .se-web-work--tablet{grid-column:1;grid-row:3/span 2}
  .se-web-work--phone{grid-column:2;grid-row:3/span 2}
  .se-web-floor:has(> .se-web-work:only-child) .se-web-work{grid-column:1/-1;grid-row:1/span 2;grid-template-columns:none;grid-template-rows:subgrid}
  .se-web-floor:has(> .se-web-work:only-child) .se-web-shot,.se-web-floor:has(> .se-web-work:only-child) .se-web-cap{grid-column:auto}
  .se-web-floor:has(> .se-web-work:only-child) .se-web-cap{padding:18px 0 0}
  .se-web-floor:has(> .se-web-work:only-child)::before{content:none}
  .se-web-floor:has(> .se-web-work:only-child)::after{grid-row:2;margin-top:0}
  .se-web-more{display:block;margin-top:44px}
  .se-web-more-t{display:block;margin-top:8px}
  /* the word, the figure as wide as a phone allows (26vw, about 100px at 390, so 0.31 and its unit share a line), its
     line, the rows, the footnote, then the dev server's piece */
  .se-web-m,.se-web-ledger{display:flex;flex-direction:column}
  .se-web-ledger{align-items:stretch;margin-top:28px}
  .se-web-fig-n{font-size:26vw}
  .se-web-side{margin-top:32px}
  .se-web-off{margin-top:28px}
  .se-web-m-proof{margin-top:48px}
  /* the strip stands upright, its rule on the left, a tick at each step */
  .se-web-stages{flex-direction:column}
  .se-web-stage{flex:none;padding:0 0 22px 24px;border-left:1px solid var(--line)}
  .se-web-stage::before{content:"";position:absolute;left:-6px;top:.6em;width:11px;height:1px;background:var(--fg)}
  .se-web-stage-n{padding:0 0 4px}
  .se-web-stage-y{min-height:0;padding:0;border-top:0}
  .se-web-stage-y::before{content:none}
  .se-web-stage--end{text-align:left;padding-bottom:0}
  .se-web-runs-foot{display:block;margin-top:32px}
  .se-web-runs-takes{margin-top:12px;text-align:left}
}
@media (max-height:560px){
  .se-web-sign{min-height:0}
}
@media (hover:none),(pointer:coarse){
  .se-web-tab{display:none}
}
@media (forced-colors:active){
  .se-web-grid{display:none}
  .se-web-frame{box-shadow:none;border:1px solid CanvasText}
  .se-web-pill{box-shadow:none;border:1px solid CanvasText}
  .se-web-pill[aria-pressed="true"]{background:Highlight;color:HighlightText}
  .se-web-shot:has(.se-web-shot-img)::after{box-shadow:none;border:1px solid CanvasText}
}
.se-ec-art{position:absolute;inset:0;color:var(--fg)}
.se-ec-art-svg{display:block;width:100%;height:100%;overflow:visible}
.se-ec-art-svg text{fill:currentColor;font-family:var(--text);font-weight:500}
.se-ec-art-caption{font-size:21px;letter-spacing:-.025em}
.se-ec-art-text{font-size:24px;letter-spacing:-.02em}
.se-ec-art-small{font-size:16px}
.se-ec-art-message{font-size:14px}
.se-ec-art-svg .se-ec-art-heading{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-1.2px}
.se-ec-art-svg .se-ec-art-money{font-family:var(--display);font-weight:800;font-size:120px;letter-spacing:-7px}
.se-ec-art-svg .se-ec-art-muted{fill:var(--fg-2)}
.se-ec-art-rule{stroke:var(--line);stroke-width:1.25}
.se-ec-art-stroke{stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.se-ec-art-bar{stroke:var(--fg-2);stroke-width:5;stroke-linecap:round;opacity:.48}
.se-ec-art-image{fill:var(--line)}
.se-ec-art-paper{stroke:var(--fg-2);stroke-width:1;fill:var(--se-panel,var(--bg))}
.se-ec-art-module,.se-ec-art-selection{fill:currentColor}
.se-ec-art-stop{fill:var(--red);stroke:none}
.se-ec-art-dashed{stroke-dasharray:4 5}
.se-ec-art-transient{opacity:0}
.se-ec-art-portrait{display:none}
@media (max-width:760px){
  .se-ec-art--head .se-ec-art-landscape{display:none}
  .se-ec-art--head .se-ec-art-portrait{display:block}
}
@media (forced-colors:active){
  .se-ec-art-rule,.se-ec-art-stroke,.se-ec-art-bar{stroke:CanvasText}
  .se-ec-art-image{fill:CanvasText;opacity:.15}
  .se-ec-art-paper{fill:Canvas;stroke:CanvasText}
  .se-ec-art-stop{fill:CanvasText}
}
/* /services/e-commerce/, The store in parts, the service's own stylesheet (research/service/design/spec.md section 3),
   imported by Entry.astro after service.css. Classes se-ec- only, never a part's class (se-head, se-ch, se-motion,
   se-act and the rest are placed through the class each part takes). Sections in page order, start states only behind
   .js:not(.no-libs):not(.rm), so the page reads whole without scripts and under reduced motion, responsive rules at
   the end. Colours from the theme's tokens only, so every block follows the ground the order pass gives it, and the
   red stays the dot's, but for one drawn full stop at the end of the strip.
   The material is a receipt. Dotted rules and leaders, numbered part discs, a double rule at the foot. Every value is
   the site's or docs/14's unless a comment gives the reason. */

/* ---------- the part disc (Disc.astro) ---------- */
/* 24 to 28px, a two digit numeral, filled where the store has the part (the ground's text colour, the numeral in the
   ground's), hollow where a shop lacks it (a 1px ring). It prints with the landing curve where a block plays it */
.se-ec-disc{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--fg);color:var(--bg);font:600 11px/1 var(--text);font-variant-numeric:tabular-nums;letter-spacing:.02em;transition:background-color .8s var(--e-out),color .8s var(--e-out),box-shadow .35s var(--e-out),transform .45s cubic-bezier(.3,1.7,.5,1)}
.se-ec-disc.is-hollow{background:none;color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg-2)}

/* ---------- the signs, inside the head's section ---------- */
/* halves under one rule and its label, each a hollow disc in its own margin, the vignette 433 wide, the sentence at
   Lead, the pointer down to its part. Without the vignettes, disc, sentence and pointer */
.se-ec-signs-l{margin:0}
.se-ec-signs-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:56px;margin:clamp(32px,5vh,48px) 0 0;padding:0;list-style:none}
.se-ec-sign{grid-column:span 6;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:22px;align-items:start;min-width:0}
.se-ec-sign-disc{width:28px;height:28px;font-size:11.5px}
.se-ec-sign-in{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.se-ec-sign-motion{width:min(433px,100%);margin-bottom:28px}
.se-ec-sign-says{margin:0;max-width:24ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;text-wrap:pretty}
/* without its vignette the disc stands on the sentence's first line */
.se-ec-sign-in>.se-ec-sign-says:first-child{margin-top:calc((clamp(20px,1.75vw,27px) * 1.25 - 28px) / 2 * -1)}
.se-ec-sign-ptr{margin:22px 0 0}
/* the pointer's arrow drops 4px on hover or focus (spec.md, Signs, Move) */
.se-ec-ptr>span[aria-hidden="true"]{display:inline-block;margin-left:.3em;transition:transform .3s var(--e-out)}
.se-ec-sign:hover .se-ec-ptr>span[aria-hidden="true"],.se-ec-sign:focus-within .se-ec-ptr>span[aria-hidden="true"]{transform:translateY(4px)}

/* ---------- get, the whole store, the receipt ---------- */
/* the chapter word in 1 to 8, the about in 9 to 12 on its bottom line, 56px under them the receipt in 1 to 5 and the
   one panel in 7 to 12, top aligned. The panel follows the line pointed at (e-commerce.ts), never sticky, never pinned */
.se-ec-get-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
.se-ec-get-h{grid-column:1/span 8}
.se-ec-get-about{grid-column:9/span 4;margin:0;max-width:38ch;color:var(--fg-2);text-wrap:pretty;transition:color .8s var(--e-out)}
.se-ec-get-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;margin-top:56px}
.se-ec-rcpt{grid-column:1/span 5;grid-row:1;margin:0;padding:0;list-style:none}
.se-ec-panel{position:relative;grid-column:7/span 6;grid-row:1;display:grid;border-radius:18px;overflow:hidden}
/* the eight pieces share the panel, one shown, the next filling in (the panel fill, 0.3s, rubric.json) */
.se-ec-pane{grid-area:1/1;width:100%;opacity:0;visibility:hidden;transform:scale(1.05);transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1),visibility 0s linear .3s,background-color .8s var(--e-out)}
.se-ec-pane.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
/* without its pieces (a build today, Show the build), the receipt alone across 1 to 8 */
.se-ec-get-in:not(:has([data-motion-slot])) .se-ec-rcpt{grid-column:1/span 8}
.se-ec-get-in:not(:has([data-motion-slot])) .se-ec-panel{display:none}

/* a group, its verb as a label on a dotted rule that prints left to right as the list fills */
.se-ec-grp+.se-ec-grp{margin-top:22px}
.se-ec-grp-l{position:relative;margin:0;padding-top:14px}
.se-ec-grp-l::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:radial-gradient(circle at 1px 1px,var(--fg-3) .9px,transparent 1.1px) 0 0/5px 2px repeat-x;transition:clip-path .9s cubic-bezier(.215,.61,.355,1) var(--d,0s)}
.se-ec-grp-list{margin:0;padding:0;list-style:none}
/* a line, the disc, the title at Lead, the dotted leader and, where a receipt prints the price, its proof, all on the
   title's last baseline, the answer open under it at Small */
.se-ec-ln{padding:14px 0 12px;scroll-margin-top:calc(env(safe-area-inset-top,0px) + 120px);cursor:default}
.se-ec-ln-top{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px;row-gap:2px;margin:0;padding-left:40px}
.se-ec-ln-disc{position:absolute;left:0;top:calc((clamp(20px,1.75vw,27px) * 1.25 - 26px) / 2)}
.se-ec-ln-t{flex:0 1 auto;min-width:0;margin:0;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;text-wrap:pretty}
/* a long title pushes its proof to the next line, as a receipt does a long item's price, the leader filling the first */
.se-ec-ln-dots{flex:1 1 24px;min-width:24px;height:3px;margin-left:-4px;background:radial-gradient(circle at 1.5px 1.5px,var(--fg-3) 1px,transparent 1.25px) 0 0/7px 3px repeat-x;transition:opacity .35s var(--e-out)}
.se-ec-ln-proof{display:inline-flex;flex:none;align-items:center;gap:10px;margin-left:auto;white-space:nowrap}
.se-ec-ln-proof>.pv-tag{margin-left:0}
.se-ec-ln-tools{display:inline-flex;align-items:center;gap:6px}
.se-ec-ln-a{font-size:15.5px}
.se-ec-ln-ans{margin:6px 0 0 40px;max-width:46ch;font-size:15.5px;line-height:1.5;color:var(--fg-2);text-wrap:pretty;transition:color .8s var(--e-out)}
/* the line in the panel, its disc ringed and its leader inked, only once there is a panel to play in */
.has-panel .se-ec-ln{cursor:pointer}
.has-panel .se-ec-ln.is-on .se-ec-ln-disc{box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--fg)}
.has-panel .se-ec-ln:not(.is-on) .se-ec-ln-dots{opacity:.55}
/* the receipt's foot, a double rule, where a receipt prints its total, and no total */
.se-ec-rcpt::after{content:"";display:block;height:4px;margin-top:20px;border-block:1px solid var(--line);transition:border-color .8s var(--e-out)}

/* ---------- taken apart, the signature ---------- */
/* the object exploded and centred, the page's only centred block. The chapter word in 1 to 8 on two lines, 96px under
   it the stack in 4 to 9, its discs in column 3 on a 1px leader each, the footnote across 2 to 11, the two tone line
   in 2 to 9 and the links on one row. The layers' places are shared by the stack and its discs, the still is the
   layers apart in a shallow three quarter view, about rotateX 38deg and rotateZ -24deg (e-commerce.ts plays the
   rest), flat on a phone */
.se-ec-apart-h{max-width:calc((100% - 264px) / 12 * 8 + 168px)}
.se-ec-x{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:96px}
.se-ec-x-fig{grid-column:4/span 6;grid-row:1}
/* the stage, its perspective for the layers, each layer a band of the checkout, 128 of its 1,050, apart their centres
   180 from each other from 130, so the nearest corner stays inside the frame */
.se-ec-x-stage{position:absolute;inset:0;perspective:1800px;perspective-origin:50% 45%}
.se-ec-x-layer{position:absolute;left:0;width:100%;height:12.19%;top:calc(6.29% + var(--i) * 17.14%);transform:rotateX(38deg) scale(.8);transform-style:preserve-3d;transition:opacity .45s var(--e-out)}
.se-ec-x-plate{position:absolute;inset:0;transform:rotate(-24deg);transform-style:preserve-3d}
/* a plate, mist with a 1px ring, standing in for its band of the capture, drawn in the ground's own lines */
.se-ec-x-lift{--se-ec-sk:color-mix(in srgb,var(--ink) 16%,transparent);position:absolute;inset:0;display:flex;align-items:center;gap:4.5%;padding:0 6%;border-radius:10px;background:var(--mist);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent);transition:transform .45s var(--e-out),box-shadow .45s var(--e-out)}
:where(.se-ec-x-lift i){display:block;flex:none}
.se-ec-x-col{display:flex;flex-direction:column;gap:9px;flex:1 1 0;min-width:0}
.se-ec-x-col.is-wide{flex-direction:row;gap:5%}
.se-ec-x-bar{height:8px;border-radius:4px;background:var(--se-ec-sk)}
.se-ec-x-bar.is-name{width:72%;height:12px}
.se-ec-x-bar.is-note{width:88%}
.se-ec-x-bar.is-short{width:54%}
.se-ec-x-bar.is-label{width:34%;height:7px}
.se-ec-x-bar.is-sum{width:58%;height:14px;border-radius:5px}
.se-ec-x-bar.is-opt{flex:1;width:auto}
.se-ec-x-bar.is-long{flex:1.6}
.se-ec-x-pic{width:15%;aspect-ratio:1;border-radius:6px;background:var(--se-ec-sk)}
.se-ec-x-pill{width:22%;height:30px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--se-ec-sk)}
.se-ec-x-pill.is-apply{width:18%}
.se-ec-x-pill.is-order{width:30%;height:34px;background:var(--se-ec-sk);box-shadow:none}
.se-ec-x-field{position:relative;height:30px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--se-ec-sk)}
.se-ec-x-field.is-code{flex:1}
.se-ec-x-chip{position:absolute;left:8px;top:8px;width:30%;height:14px;border-radius:999px;background:var(--se-ec-sk)}
.se-ec-x-opt{display:flex;align-items:center;gap:10px;flex:1;height:38px;padding:0 12px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--se-ec-sk)}
.se-ec-x-opt.is-on{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 55%,transparent)}
.se-ec-x-ring{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 40%,transparent)}
.se-ec-x-opt.is-on .se-ec-x-ring{box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--ink) 70%,transparent)}
/* a disc pointed at, or its line in the footnote, lifts its layer 12px and dims the others to 40 percent */
.se-ec-x-stage.is-pick .se-ec-x-layer:not(.is-up){opacity:.4}
.se-ec-x-layer.is-up .se-ec-x-lift{transform:translateZ(14px)}
/* the discs, in column 3 on their leaders, at the height of each layer's near corner. --c is a column of the eight
   the tags span (2 to 9), so the leader reaches into the stack's first tenth, where the layer begins */
.se-ec-x-tags{--c:calc((100% - 168px) / 8);position:relative;z-index:1;grid-column:2/span 8;grid-row:1;margin:0;padding:0;list-style:none;pointer-events:none}
.se-ec-x-tag{position:absolute;left:0;right:0;top:calc(17.05% + var(--i) * 17.14%);height:0}
.se-ec-x-lead{position:absolute;top:0;height:1px;left:calc(var(--c) * 2 + 24px - 2px);width:calc(.1 * (var(--c) * 6 + 120px) + 26px);background:var(--fg-3);transform-origin:0 50%;transition:background-color .8s var(--e-out)}
.se-ec-x-a{position:absolute;top:-14px;left:calc(var(--c) * 2 + 24px - 30px);display:block;border-radius:50%;pointer-events:auto}
.se-ec-x-a::after{content:"";position:absolute;inset:-10px}
.se-ec-x-a:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.se-ec-x-disc{width:28px;height:28px;font-size:11.5px;box-shadow:0 0 0 3px var(--bg)}
.se-ec-x-a:hover .se-ec-x-disc,.se-ec-x-a:focus-visible .se-ec-x-disc{box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--fg)}
/* the footnote, five lines across 2 to 11, each with its disc, at Small */
.se-ec-x-foot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:24px;width:calc((100% - 264px) / 12 * 10 + 216px);margin:48px 0 0 calc((100% - 264px) / 12 + 24px);padding:0;list-style:none}
.se-ec-x-fn{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;align-items:start;padding-top:14px;border-top:1px solid var(--line);font-size:15.5px;line-height:1.5;color:var(--fg-2);transition:border-color .8s var(--e-out),color .35s var(--e-out)}
.se-ec-x-fn-disc{width:24px;height:24px;font-size:10.5px}
.se-ec-x-fn:hover,.se-ec-x-fn.is-on{color:var(--fg)}
.se-ec-x-end{margin:72px 0 0 calc((100% - 264px) / 12 + 24px);width:calc((100% - 264px) / 12 * 8 + 168px)}
.se-ec-x-line{margin:0;font:500 clamp(26px,2.6vw,40px)/1.25 var(--text);letter-spacing:-.012em;text-wrap:pretty}
.se-ec-x-rest{color:var(--fg-2);transition:color .8s var(--e-out)}
.se-ec-x-links{display:flex;flex-wrap:wrap;gap:14px 36px;margin:32px 0 0;padding:0;list-style:none}

/* ---------- to the door ---------- */
/* split, the map left in 1 to 6 (662 by 828), the words right in 8 to 12 from its top, the label row with its filled
   disc over the words only */
.se-ec-door-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr;column-gap:24px;align-items:start}
.se-ec-door-map{grid-column:1/span 6;grid-row:1/span 2}
/* a blank map is drawn on the ground, so the dev server rings it to show its place */
.se-ec-door-map[data-se-dev]{box-shadow:inset 0 0 0 1px var(--line);border-radius:10px}
.se-ec-door-w{grid-column:8/span 5;grid-row:1;min-width:0}
.se-ec-door-foot{grid-column:8/span 5;grid-row:2;min-width:0}
.se-ec-door-l{display:inline-flex;align-items:center;gap:12px;margin:0}
.se-ec-door-disc{width:24px;height:24px;font-size:10.5px}
.se-ec-door-lead{margin:32px 0 0;max-width:26ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;text-wrap:pretty}
.se-ec-door-rest{color:var(--fg-2);transition:color .8s var(--e-out)}
.se-ec-door-proof{margin:40px 0 0;max-width:40ch;padding-top:14px;border-top:1px solid var(--line);color:var(--fg);transition:border-color .8s var(--e-out)}
.se-ec-door-act{margin:18px 0 0}

/* ---------- sold, the results ---------- */
/* one figure with its breakdown, centred in 4 to 9, the rule parted at 78 percent (--se-ec-share) with a label under
   each part, the source in --fg-3. It plays once at 90% (e-commerce.ts adds .is-in) */
.se-ec-sold-h{max-width:calc((100% - 264px) / 12 * 8 + 168px)}
.se-ec-fig{width:calc((100% - 264px) / 12 * 6 + 120px);margin:80px auto 0;text-align:center}
.se-ec-fig-n{margin:0;font:800 clamp(56px,6vw,104px)/.9 var(--display);letter-spacing:-.05em}
.se-ec-fig-said{margin:16px 0 0;color:var(--fg-2);transition:color .8s var(--e-out)}
.se-ec-fig-rule{display:flex;height:1px;margin-top:56px}
.se-ec-fig-a{flex:0 0 var(--se-ec-share);background:var(--fg);transform-origin:0 50%;transition:transform 1.1s cubic-bezier(.215,.61,.355,1),background-color .8s var(--e-out)}
.se-ec-fig-b{flex:1 1 0;margin-left:10px;background:var(--fg-3);transform-origin:100% 50%;transition:transform .6s cubic-bezier(.215,.61,.355,1) .7s,margin-left .45s var(--e-out) 1.1s,background-color .8s var(--e-out)}
.se-ec-fig-parts{display:flex;margin-top:14px;text-align:start}
.se-ec-fig-p{flex:0 0 var(--se-ec-share);margin:0;padding-right:16px;font-size:15.5px;line-height:1.45;transition:opacity 1s cubic-bezier(.215,.61,.355,1) 1.2s,transform 1s cubic-bezier(.215,.61,.355,1) 1.2s}
.se-ec-fig-p.is-b{flex:1 1 0;padding:0 0 0 10px;color:var(--fg-2);transition-delay:1.35s}
.se-ec-fig-src{margin-top:44px;font-size:15.5px;line-height:1.5;color:var(--fg-3);transition:color .8s var(--e-out)}

/* ---------- how it runs, the strip with a client lane ---------- */
/* the stages as lengths on one 1px rule ticked in units, Launch day the end tick in its own column, the shop's lane
   under the rule in --fg-2. It plays as the shared fill (.in at 86%), the rule drawing, the stages filling, their
   discs printing, the end tick landing and printing its small drawn full stop */
.se-ec-strip{display:grid;grid-template-columns:minmax(0,var(--uf,13fr)) minmax(0,3fr);margin-top:clamp(56px,9vh,96px)}
.se-ec-strip-l{grid-column:1;grid-row:1;margin:0 0 20px}
.se-ec-stages{grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(var(--u),minmax(0,1fr));margin:0;padding:0;list-style:none}
.se-ec-stage{grid-column:var(--at)/span var(--w);display:flex;flex-direction:column;gap:14px;min-width:0;padding-right:10px;transition:opacity .8s cubic-bezier(.215,.61,.355,1) var(--d,0s),transform .8s cubic-bezier(.215,.61,.355,1) var(--d,0s),filter .3s var(--e-out)}
.se-ec-stage-t{font:600 16px/1.3 var(--text);text-wrap:balance}
.se-ec-stage-parts{display:flex;gap:6px;margin-top:auto}
.se-ec-stage-parts+.se-ec-stage-bar{margin-top:0}
.se-ec-stage-disc{width:24px;height:24px;font-size:10.5px}
.se-ec-stage-bar{display:block;flex:none;height:3px;margin-top:auto;border-radius:2px;background:var(--fg);transform-origin:0 50%;transition:transform .8s cubic-bezier(.4,0,.2,1) calc(var(--d,0s) + .2s),background-color .8s var(--e-out)}
/* the rule, its ticks one a unit, relative lengths, never weeks */
.se-ec-rule{grid-column:1;grid-row:3;height:8px;margin-top:10px;border-top:1px solid var(--fg-3);background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 100%) 0 0/calc(100% / var(--u)) 7px repeat-x;transition:clip-path 1.3s var(--e-out) .1s,border-color .8s var(--e-out)}
.se-ec-end{position:relative;grid-column:2;grid-row:2/4;display:flex;align-items:flex-end;margin:0;padding:0 0 0 22px}
.se-ec-end-tick{position:absolute;left:0;top:0;bottom:-6px;width:1px;background:var(--fg);transform-origin:50% 100%;transition:transform .7s var(--e-out) 1.2s,background-color .8s var(--e-out)}
.se-ec-end-t{display:block;max-width:14ch;margin-bottom:-6px;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;transition:opacity 1s cubic-bezier(.215,.61,.355,1) 1.35s}
.se-ec-end-stop{transform-origin:50% 100%;transition:transform .45s cubic-bezier(.3,1.7,.5,1) 1.9s}
.se-ec-strip-l.is-you{grid-row:4;margin:30px 0 14px}
.se-ec-brings{grid-column:1;grid-row:5;display:grid;grid-template-columns:repeat(var(--u),minmax(0,1fr));row-gap:12px;margin:0;padding:0;list-style:none}
.se-ec-bring{position:relative;grid-column:var(--at)/span var(--w);grid-row:var(--row);margin-right:10px;padding-top:10px;color:var(--fg-2);font-size:15.5px;line-height:1.4;transition:opacity .8s cubic-bezier(.215,.61,.355,1) var(--d,0s),transform .8s cubic-bezier(.215,.61,.355,1) var(--d,0s),filter .3s var(--e-out),color .8s var(--e-out)}
/* each a bracket, a 1px line with its two end ticks */
.se-ec-bring::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border:1px solid var(--fg-3);border-bottom:0;transition:border-color .8s var(--e-out)}
.se-ec-bring-t{display:block}
/* a stage pointed at, the shop's part beside it, the rest at 40 percent */
.se-ec-strip.is-pick .se-ec-stage:not(.is-on),.se-ec-strip.is-pick .se-ec-bring:not(.is-on){filter:opacity(.4)}
.se-ec-runs-takes{margin:clamp(40px,6vh,56px) 0 0;color:var(--fg-2);transition:color .8s var(--e-out)}

/* ---------- start states, behind the guard ---------- */
/* the receipt's discs print and its rules draw as it fills, the signature's and the results' start states are set by
   e-commerce.ts, the strip draws on .in */
.js:not(.no-libs):not(.rm) .se-ec-ln:not(.in) .se-ec-ln-disc{transform:scale(0)}
.se-ec-rcpt .se-ec-ln-disc{transition-delay:0s,0s,0s,calc(var(--d,0s) + .35s)}
.js:not(.no-libs):not(.rm) .se-ec-grp-l:not(.in)::before{clip-path:inset(0 100% 0 0)}
.js:not(.no-libs):not(.rm) .se-ec-fig:not(.is-in) .se-ec-fig-a{transform:scaleX(0)}
.js:not(.no-libs):not(.rm) .se-ec-fig:not(.is-in) .se-ec-fig-b{transform:scaleX(0);margin-left:0}
.js:not(.no-libs):not(.rm) .se-ec-fig:not(.is-in) .se-ec-fig-p{opacity:0;transform:translateY(14px)}
.js:not(.no-libs):not(.rm) .se-ec-strip:not(.in) .se-ec-rule{clip-path:inset(0 100% 0 0)}
.js:not(.no-libs):not(.rm) .se-ec-stage:not(.in) .se-ec-stage-bar{transform:scaleX(0)}
.js:not(.no-libs):not(.rm) .se-ec-stage:not(.in) .se-ec-stage-disc{transform:scale(0)}
.se-ec-stage-disc{transition-delay:0s,0s,0s,calc(var(--d,0s) + .55s)}
.js:not(.no-libs):not(.rm) .se-ec-strip:not(.in) .se-ec-end-tick{transform:scaleY(0)}
.js:not(.no-libs):not(.rm) .se-ec-strip:not(.in) .se-ec-end-t{opacity:0}
.js:not(.no-libs):not(.rm) .se-ec-strip:not(.in) .se-ec-end-stop{transform:scale(0)}
.js:not(.no-libs):not(.rm) .se-ec-strip.in .se-ec-end-stop{transform:scale(.96)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  /* the receipt under the word and the about, the panel above it across 1 to 8 */
  .se-ec-get-h{grid-column:1/-1}
  .se-ec-get-about{grid-column:1/span 8;margin-top:28px}
  .se-ec-panel{grid-column:1/span 8;grid-row:1}
  .se-ec-rcpt{grid-column:1/span 10;grid-row:2;margin-top:48px}
  .se-ec-get-in:not(:has([data-motion-slot])) .se-ec-rcpt{grid-column:1/span 10;margin-top:0}
  /* the stack wider, its discs in column 2 */
  .se-ec-x-fig{grid-column:4/span 7}
  .se-ec-x-tags{--c:calc((100% - 192px) / 9);grid-column:2/span 9}
  .se-ec-x-lead{width:calc(.1 * (var(--c) * 7 + 144px) + 26px)}
  .se-ec-x-foot{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:24px;width:auto;margin-left:0}
  .se-ec-x-end{width:auto;margin-left:0}
  /* the door's words over the map, the map in 4 to 12 */
  .se-ec-door-in{grid-template-rows:none}
  .se-ec-door-w,.se-ec-door-foot{grid-column:1/span 9;grid-row:1}
  .se-ec-door-map{grid-column:4/span 9;grid-row:2;margin-top:56px}
  .se-ec-door-foot{grid-row:3}
  .se-ec-fig{width:calc((100% - 264px) / 12 * 8 + 168px)}
  .se-ec-stage-t{font-size:15px}
}
@media (max-width:760px){
  /* the signs stacked */
  .se-ec-signs-list{grid-template-columns:minmax(0,1fr);row-gap:48px}
  /* the vignette across, then the disc hanging beside the sentence and the pointer */
  .se-ec-sign{grid-column:1/-1;column-gap:14px}
  .se-ec-sign-in{display:contents}
  .se-ec-sign-motion{grid-column:1/-1;grid-row:1;width:100%;margin-bottom:22px}
  .se-ec-sign-disc{grid-column:1;grid-row:2;margin-top:calc((20px * 1.25 - 28px) / 2)}
  .se-ec-sign-says,.se-ec-sign-ptr{grid-column:2}
  .se-ec-sign-in>.se-ec-sign-says:first-child{margin-top:0}
  /* the word, the about, the panel 358 by 268, then the receipt, every answer open */
  .se-ec-get-top,.se-ec-get-in{grid-template-columns:minmax(0,1fr)}
  .se-ec-get-h,.se-ec-get-about,.se-ec-panel,.se-ec-rcpt,.se-ec-get-in:not(:has([data-motion-slot])) .se-ec-rcpt{grid-column:1/-1}
  .se-ec-get-about{margin-top:24px}
  .se-ec-get-in{margin-top:40px}
  .se-ec-panel{border-radius:10px}
  .se-ec-rcpt{margin-top:40px}
  /* the layers flat at 358, 24px apart, the discs at their top left corners */
  .se-ec-x{grid-template-columns:minmax(0,1fr);margin-top:56px}
  .se-ec-x-fig,.se-ec-x-tags{grid-column:1/-1}
  .se-ec-x-layer{height:17.87%;top:calc(var(--i) * 20.53%);transform:none}
  .se-ec-x-plate{transform:none}
  .se-ec-x-tag{top:calc(var(--i) * 20.53%)}
  .se-ec-x-lead{display:none}
  .se-ec-x-a{left:-6px;top:-10px}
  .se-ec-x-lift{flex-wrap:wrap;align-content:center;gap:12px 5%;padding:0 7%}
  .se-ec-x-foot{grid-template-columns:minmax(0,1fr);row-gap:0;margin-top:40px}
  .se-ec-x-fn{padding-block:12px}
  .se-ec-x-end{margin-top:48px}
  .se-ec-x-links{flex-direction:column;align-items:flex-start;gap:16px}
  /* the door, the label, the word, the Lead, the map 358 by 448, the proof line */
  .se-ec-door-in{grid-template-columns:minmax(0,1fr)}
  .se-ec-door-w,.se-ec-door-map,.se-ec-door-foot{grid-column:1/-1}
  .se-ec-door-map{margin-top:40px}
  .se-ec-door-lead{margin-top:28px}
  /* the figure at 56px, the rule at 358, the labels stacked */
  .se-ec-fig{width:100%;margin-top:56px}
  .se-ec-fig-n{font-size:56px}
  .se-ec-fig-parts{flex-direction:column;gap:6px}
  .se-ec-fig-p,.se-ec-fig-p.is-b{flex:none;padding:0}
  /* the strip upright, the stages down one rule, the end under them, the shop's lane last */
  .se-ec-strip{grid-template-columns:minmax(0,1fr)}
  .se-ec-strip-l{margin-bottom:16px}
  .se-ec-stages{display:flex;flex-direction:column;margin-left:6px;padding-left:22px;border-left:1px solid var(--fg-3)}
  .se-ec-stage{position:relative;min-height:calc(var(--w) * 24px);padding:0 0 22px;gap:10px}
  .se-ec-stage-parts{margin-top:0}
  .se-ec-stage-bar{position:absolute;left:-24px;top:2px;bottom:22px;width:3px;height:auto;margin:0;transform-origin:50% 0}
  .js:not(.no-libs):not(.rm) .se-ec-strip:not(.in) .se-ec-stage-bar{transform:scaleY(0)}
  .se-ec-rule{display:none}
  .se-ec-end{grid-column:1;grid-row:3;margin-left:6px;padding:16px 0 0 22px}
  .se-ec-end-tick{top:auto;bottom:auto;left:-1px;top:0;width:12px;height:1px;transform-origin:0 50%}
  .js:not(.no-libs):not(.rm) .se-ec-strip:not(.in) .se-ec-end-tick{transform:scaleX(0)}
  .se-ec-end-t{max-width:none;margin:0}
  .se-ec-brings{display:flex;flex-direction:column;gap:0}
  .se-ec-bring{margin:0;padding:12px 0;border-top:1px solid var(--line)}
  .se-ec-bring::before{content:none}
}
@media (max-height:560px) and (min-width:761px) and (max-width:1100px){
  /* a short screen 761 to 1100 wide (a phone on its side, 844 by 390), where the 1100px rules would hang a 4:3
     panel and a 4:5 map taller than two screens. The panel keeps half the width, so it shows whole in one screen, and
     the map goes back beside the words, as on a wide screen, so the chapter word and its map share the screen */
  .se-ec-panel{grid-column:1/span 6}
  .se-ec-door-in{grid-template-rows:auto 1fr}
  .se-ec-door-map{grid-column:1/span 6;grid-row:1/span 2;margin-top:0}
  .se-ec-door-w{grid-column:8/span 5;grid-row:1}
  .se-ec-door-foot{grid-column:8/span 5;grid-row:2}
}
@media (forced-colors:active){
  .se-ec-disc{background:CanvasText;color:Canvas}
  .se-ec-disc.is-hollow{background:none;color:CanvasText;box-shadow:none;border:1px solid CanvasText}
  .se-ec-ln-dots,.se-ec-grp-l::before{background:none;border-bottom:2px dotted CanvasText}
  .se-ec-x-lift{border:1px solid CanvasText}
  .se-ec-fig-a,.se-ec-fig-b,.se-ec-stage-bar,.se-ec-end-tick{background:CanvasText}
}
/* /services/seo/, Read, then found, the service's own stylesheet (research/service/design/spec.md section 4), imported
   by Entry.astro after service.css. Classes se-seo- only, never a part's class nor another service's, sections in page
   order, start states only behind .js:not(.no-libs):not(.rm), responsive rules at the end. Two readings of one page,
   the material is a results list and an outline in our type, plain words on 1px rules, never Google's page, a code
   face, a score or a grade. Every colour is a token or the ground's own (--fg, --fg-2, --line, --se-panel), the
   findings' marks in --stone, the only red one drawn full stop at the end of the signature. Values are the site's or
   docs/14's unless a comment gives the reason. */

/* ---------- shared within the page ---------- */
/* a row whose 1px rule draws left to right at 88% (seo.ts adds .in), the signs and the months */
[data-se-seo-rule]{position:relative}
[data-se-seo-rule]::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:0 50%;transition:transform 1.1s var(--e-out) var(--d,0s),background-color .8s var(--e-out)}
.js:not(.no-libs):not(.rm) [data-se-seo-rule]:not(.in)::before{transform:scaleX(0)}
/* two faces in one cell, a (as found) and b (as fixed), b showing without scripts, the flip verb in seo.ts. Padded as
   a headline's line, so the cell's clip never cuts a descender */
.se-seo-v{display:inline-grid;vertical-align:bottom;overflow:hidden;padding:.08em .02em .06em;margin:-.08em -.02em -.06em}
.se-seo-v>span{grid-area:1/1;transform-origin:0 50%}
.se-seo-v-a{opacity:0;transform:translateY(-100%)}
/* a finding's mark, found then fixed, in --stone, the findings' one colour (spec.md, Risks) */
.se-seo-mark{font:600 12.5px/1.3 var(--text);letter-spacing:.02em;white-space:nowrap}
.se-seo-mark>span{padding:3px 9px;border-radius:999px}
.se-seo-mark .se-seo-v-a{box-shadow:inset 0 0 0 1px var(--stone);color:var(--mk,var(--fg-2))}
.se-seo-mark .se-seo-v-b{background:var(--stone);color:var(--white)}

/* ---------- the signs, inside the head's section ---------- */
/* three ruled rows across 12, the index, the sentence in its owner's words, the answer, the vignette */
.se-seo-signs{margin:0;padding:0;list-style:none}
.se-seo-sign{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;min-height:96px;padding:24px 0}
.se-seo-sign:last-child{border-bottom:1px solid var(--line);transition:border-color .8s var(--e-out)}
.se-seo-sign p{margin:0}
.se-seo-sign-i{grid-column:1/span 2}
/* the sentence at Lead, its opening quote hung outside the column, so the words line up with the rule's start */
.se-seo-sign-s{grid-column:3/span 6;max-width:30ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;text-indent:-.42em;text-wrap:balance}
.se-seo-sign-a{grid-column:9/span 3}
/* 96 by 96 in column 12 (spec.md), wider than the column at 1440, so it stands on the column's right edge */
.se-seo-sign-m{grid-column:12;justify-self:end;width:96px}

/* ---------- get, Found., the word beside three frames ---------- */
.se-seo-get-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:stretch}
.se-seo-get-col{grid-column:1/span 5;min-width:0}
.se-seo-get-hold{display:flex;flex-direction:column}
/* the word holds its place inside its own column while the frames pass, a reading move, only while frames are in the
   page. Its height keeps Found.'s full stop a screen above Read.'s when the column lets go (the dot's rule, a screen
   between stations), 76vh, measured at 1440 by 900, 1280 by 720 and 1024 by 768 with a margin */
.se-seo-get-in:has(.se-seo-frame-m) .se-seo-get-hold{position:sticky;top:calc(env(safe-area-inset-top,0px) + 104px);min-height:76vh}
.se-seo-get-words{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:clamp(36px,6vh,64px)}
.se-seo-get-words p{margin:0}
.se-seo-get-lead{max-width:22em;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;text-wrap:pretty}
.se-seo-get-rest{max-width:38ch;font-size:15.5px;line-height:1.5;color:var(--fg-2);text-wrap:pretty;transition:color .8s var(--e-out)}
.se-seo-tools{margin-top:6px!important;padding-top:16px;border-top:1px solid var(--line);font-size:15.5px;line-height:2;color:var(--fg-2);transition:color .8s var(--e-out),border-color .8s var(--e-out)}
/* the words and the renders as one row of centred pieces, so the plain words sit on the same line as the tools' names
   (a render's own box centres its name on the picture), the full stop kept with the last name */
.se-seo-tools{display:flex;flex-wrap:wrap;align-items:center;column-gap:.32em}
.se-seo-tools-end{display:inline-flex;align-items:center}
/* the first frame level with the top of the word */
.se-seo-frames{grid-column:7/span 6;display:flex;flex-direction:column;gap:56px;margin:clamp(28px,5vh,56px) 0 0;padding:0;list-style:none;min-width:0}
.se-seo-frame{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 112px)}
.se-seo-frame-m{width:100%}
/* the caption, its number at Title in --fg-3, the include in --fg and its answer in --fg-2 at Lead, two tones */
.se-seo-cap{display:grid;grid-template-columns:3.2em minmax(0,1fr);column-gap:12px;margin-top:22px}
.se-seo-cap-n{padding-top:.08em;font:800 clamp(20px,1.6vw,26px)/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--fg-3);transition:color .8s var(--e-out)}
.se-seo-cap-t{margin:0;max-width:30em;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;text-wrap:pretty}
.se-seo-cap-i{color:var(--fg)}
.se-seo-cap-a{color:var(--fg-2);transition:color .8s var(--e-out)}
/* without its piece the caption stands on its own rule, the three a ruled list */
.se-seo-cap:first-child{margin-top:0;padding:22px 0 26px;border-top:1px solid var(--line)}
.se-seo-frames:not(:has(.se-seo-frame-m)){gap:0}
.se-seo-frames:not(:has(.se-seo-frame-m))>.se-seo-frame:last-child{border-bottom:1px solid var(--line)}

/* ---------- read, Read., the lens ---------- */
.se-seo-read-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
.se-seo-read-h{grid-column:1/span 6}
/* the two tone line on the word's baseline, the first sentence in --fg, the second in --fg-2 */
.se-seo-say{grid-column:7/span 6;max-width:26em;margin:0 0 .3em;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;text-wrap:pretty}
.se-seo-say-2{color:var(--fg-2);transition:color .8s var(--e-out)}
/* the stage, centred in 2 to 11 at 16 to 9 (1119 by 629 at 1440), 18px corners and a 1px ring. Its inside is sized in
   the stage's own width (cqw), so the illustration scales as one picture. A press anywhere moves the line, a mouse's
   only, a finger scrolls the page unless it holds the handle */
.se-seo-stage{position:relative;width:calc((100% - 11 * 24px) / 12 * 10 + 9 * 24px);margin:64px auto 0;aspect-ratio:16 / 9;border-radius:18px;overflow:hidden;isolation:isolate;container-type:inline-size;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.se-seo-stage::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
/* each reading on one grid, the same areas, so every piece of the reading lies over the piece it reads */
.se-seo-layer{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:4.2cqw 6.2cqw minmax(0,1fr) 9.6cqw;column-gap:2.1cqw;row-gap:2.6cqw;padding:2.4cqw 3.6cqw 3.2cqw;transform-origin:50% 50%}
.se-seo-corner{grid-row:1;grid-column:1/span 6;align-self:center;font:500 max(11px,1.12cqw)/1.2 var(--text);color:var(--sr-2,var(--fg-2))}
.se-seo-corner--page{grid-column:7/span 6;justify-self:end}
.se-seo-a-brand{grid-row:2;grid-column:1/span 5}
/* the nav's reading starts on column 7, on the same guide as the picture's and the sitemap's, so it never straddles the
   lens at 50 (the still) and the reading's right half reads as one column */
.se-seo-a-nav{grid-row:2;grid-column:7/span 6}
.se-seo-a-hero{grid-row:3;grid-column:1/span 6}
.se-seo-a-pic{grid-row:3;grid-column:7/span 6}
.se-seo-a-foot{grid-row:4;grid-column:1/span 6}
.se-seo-a-side{grid-row:4;grid-column:7/span 6}
/* the page's language switch at the nav's end, its nav before it */
.se-seo-a-lang{grid-row:2;grid-column:12;justify-self:end;align-self:center}
.se-seo-page .se-seo-a-nav{grid-column:6/span 6}
/* the page as people see it, a sample restaurant's home page on the ground's panel, its own type and its own button */
.se-seo-page{background:var(--se-panel);color:var(--fg);transition:background-color .8s var(--e-out),color .8s var(--e-out)}
.se-seo-pg-brand{align-self:center;font:800 2.2cqw/1 var(--display);letter-spacing:-.045em}
.se-seo-pg-nav{display:flex;justify-content:flex-end;align-items:center;gap:2.6cqw;font:500 1.32cqw/1.2 var(--text)}
.se-seo-pg-lang{padding:.42cqw .95cqw;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font:500 1.1cqw/1.2 var(--text);letter-spacing:.04em;white-space:nowrap}
.se-seo-pg-menu{display:none}
.se-seo-pg-hero{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:0}
.se-seo-pg-h{max-width:10.5em;font:800 4.6cqw/.9 var(--display);letter-spacing:-.05em;text-wrap:balance}
.se-seo-pg-sub{margin-top:1.5cqw;font:400 1.36cqw/1.4 var(--text);color:var(--fg-2)}
.se-seo-pg-btn{margin-top:2.2cqw;padding:1.05cqw 1.9cqw;border-radius:999px;background:var(--fg);color:var(--bg);font:600 1.24cqw/1 var(--text);transition:background-color .8s var(--e-out),color .8s var(--e-out)}
/* the picture, a plate of fish drawn flat in the ground's own tones, never a photograph, never red */
.se-seo-pg-pic{border-radius:8px;overflow:hidden;background:color-mix(in srgb,var(--fg) 7%,transparent)}
.se-seo-pg-pic svg{display:block;width:100%;height:100%}
.se-seo-pg-sea{fill:color-mix(in srgb,var(--fg) 6%,transparent)}
.se-seo-pg-plate{fill:var(--bg);stroke:color-mix(in srgb,var(--fg) 16%,transparent);stroke-width:1;vector-effect:non-scaling-stroke}
.se-seo-pg-fish{fill:color-mix(in srgb,var(--fg) 30%,transparent)}
.se-seo-pg-eye{fill:var(--bg)}
.se-seo-pg-foot{display:flex;flex-direction:column;justify-content:flex-end;gap:.6cqw;padding-top:1.4cqw;border-top:1px solid var(--line)}
.se-seo-pg-foot-t{font:700 1.9cqw/1 var(--display);letter-spacing:-.03em}
.se-seo-pg-foot-n,.se-seo-pg-side{font-size:1.22cqw;line-height:1.3;color:var(--fg-2)}
.se-seo-pg-side{display:flex;justify-content:flex-end;align-items:flex-end;padding-top:1.4cqw;border-top:1px solid var(--line)}
/* the page as a search engine reads it, the ground inverted (--fg the ground, --bg the words), an outline of plain
   words on 1px guides, clipped at the lens, the reading on its left (on its top on a phone) */
.se-seo-reading{--sr-2:color-mix(in srgb,var(--bg) 56%,transparent);--sr-l:color-mix(in srgb,var(--bg) 22%,transparent);--mk:var(--sr-2);background:var(--fg);color:var(--bg);clip-path:inset(0 calc(100% - var(--x,50) * 1%) 0 0);transition:background-color .8s var(--e-out),color .8s var(--e-out)}
.se-seo-box{display:flex;flex-direction:column;justify-content:center;gap:.7cqw;min-width:0;padding-left:1.2cqw;border-left:1px solid var(--sr-l);font:500 max(11px,1.3cqw)/1.35 var(--text);transition:box-shadow .45s var(--e-out)}
/* each piece of the reading as tall as its words, level with the piece of the page it reads, its guide its own height */
.se-seo-box{align-self:center}
.se-seo-box.se-seo-a-nav{gap:.2cqw}
.se-seo-box.se-seo-a-foot,.se-seo-box.se-seo-a-side{align-self:end}
/* a finding the legend points at is lit for a moment, its guide brightened (seo.ts) */
.se-seo-box.is-lit{box-shadow:-1px 0 0 0 var(--bg)}
.se-seo-ln{display:grid;grid-template-columns:7.4em minmax(0,1fr) auto;column-gap:.9cqw;align-items:baseline;min-width:0}
.se-seo-ln--in{margin-left:.9cqw;padding-left:1.1cqw;border-left:1px solid var(--sr-l);grid-template-columns:calc(7.4em - 2cqw) minmax(0,1fr) auto}
.se-seo-tg{color:var(--sr-2)}
.se-seo-val{min-width:0;overflow-wrap:anywhere}
.se-seo-box .se-seo-mark{font-size:max(9.5px,.98cqw)}
.se-seo-box .se-seo-mark>span{padding:.22cqw .7cqw}
/* the drawn red full stop after the reading's title, printed last, the signature's one red (rubric, dot) */
.se-seo-stop{transform:scale(.96)}
/* the lens, a 1px line in --stone and its handle, the slider */
.se-seo-lens{position:absolute;top:0;bottom:0;left:calc(var(--x,50) * 1%);z-index:3;width:0;pointer-events:none}
.se-seo-lens::before{content:"";position:absolute;top:0;bottom:0;left:-.5px;width:1px;background:var(--stone)}
/* the handle stays whole inside the stage at either end */
.se-seo-handle{position:absolute;top:50%;left:clamp(calc(22px - var(--x,50) * 1cqw),0px,calc((100 - var(--x,50)) * 1cqw - 22px));display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:50%;background:var(--stone);color:var(--white);cursor:ew-resize;pointer-events:auto;touch-action:none;transition:transform .35s var(--e-out)}
.se-seo-handle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.se-seo-handle:hover{transform:scale(1.08)}
.se-seo-stage.is-drag .se-seo-handle{transform:scale(.92)}
.se-seo-handle:focus-visible{outline:2px solid var(--red);outline-offset:4px}
/* the legend, one sentence at Lead, its findings buttons, each struck through and marked once fixed */
.se-seo-legend{width:calc((100% - 11 * 24px) / 12 * 10 + 9 * 24px);margin:36px auto 0;font:500 clamp(20px,1.75vw,27px)/1.6 var(--display);letter-spacing:-.022em;text-align:center;text-wrap:balance}
.se-seo-lg-i{white-space:nowrap}
.se-seo-lg{position:relative;display:inline;margin:0;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;line-height:inherit;color:var(--fg);text-align:inherit;cursor:pointer}
.se-seo-lg::after{content:"";position:absolute;inset:-6px -4px}
.se-seo-lg-w{position:relative;border-bottom:1px solid var(--line);transition:border-color .3s}
.se-seo-lg-w::after{content:"";position:absolute;left:-.06em;right:-.06em;top:56%;height:1px;background:var(--fg-2);transform:scaleX(var(--s,1));transform-origin:0 50%}
.se-seo-lg:hover .se-seo-lg-w{border-bottom-color:var(--red)}
.se-seo-lg:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.se-seo-lg-m{max-width:6em;margin-left:.4em;vertical-align:.32em}
.se-seo-lg-end{color:var(--fg-2);transition:color .8s var(--e-out)}
/* the two pills, the lens at 0 or at 100, pressed when it is there */
.se-seo-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}
.se-seo-to{min-height:48px;padding:12px 20px;border:0;border-radius:999px;background:none;box-shadow:inset 0 0 0 1px var(--line);font:500 16px/1.2 var(--text);color:var(--fg);cursor:pointer;transition:box-shadow .3s,background-color .35s var(--e-out),color .35s var(--e-out)}
.se-seo-to:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.se-seo-to[aria-pressed="true"]{background:var(--fg);color:var(--bg);box-shadow:inset 0 0 0 1px var(--fg)}
.se-seo-to:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.se-seo-illus{margin:22px 0 0;text-align:center;font-size:13.5px;line-height:1.3;color:var(--fg-2);transition:color .8s var(--e-out)}

/* ---------- climbing, Climbing., a word beside a table ---------- */
.se-seo-climb-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.se-seo-climb-h{grid-column:1/span 5}
/* the table's head row level with the top of the word */
.se-seo-climb-t{grid-column:7/span 6;min-width:0;margin-top:clamp(28px,5vh,56px)}
.se-seo-table{width:100%;border-collapse:collapse}
.se-seo-table th,.se-seo-table td{padding:20px 0;border-top:1px solid var(--line);font-weight:400;text-align:left;vertical-align:baseline;transition:border-color .8s var(--e-out)}
.se-seo-table thead th{padding:0 0 12px;border-top:0;font-weight:500}
.se-seo-table tbody tr:last-child>*{border-bottom:1px solid var(--line)}
.se-seo-table .se-seo-num{width:6.5em;text-align:right}
.se-seo-q{padding-right:16px!important;font-size:17px;line-height:1.4}
.se-seo-pos{font:800 clamp(24px,2.05vw,34px)/.95 var(--display);letter-spacing:-.04em}
.se-seo-before .se-seo-pos,.se-seo-past{color:var(--fg-2);transition:color .8s var(--e-out)}
.se-seo-past{font:500 15.5px/1.2 var(--text)}
.se-seo-src{max-width:46ch;margin:18px 0 0;font-size:15.5px;line-height:1.5;color:var(--fg-2);transition:color .8s var(--e-out)}

/* ---------- runs, How it runs, the strip in months ---------- */
.se-seo-runs-m{margin-top:clamp(28px,5vh,56px)}
.se-seo-months{margin:clamp(28px,5vh,56px) 0 0;padding:0;list-style:none}
.se-seo-month{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:baseline;padding:26px 0 30px}
.se-seo-month:last-child{border-bottom:1px solid var(--line);transition:border-color .8s var(--e-out)}
.se-seo-month p{margin:0}
.se-seo-month-w{grid-column:1/span 3}
.se-seo-month-s{grid-column:4/span 5;max-width:22em;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;text-wrap:pretty}
.se-seo-month-y{grid-column:9/span 4;display:flex;flex-direction:column;gap:6px}
.se-seo-month-yt{max-width:34ch;color:var(--fg-2);text-wrap:pretty;transition:color .8s var(--e-out)}
.se-seo-first{margin:22px 0 0;font-size:15.5px;line-height:1.5;color:var(--fg-2);transition:color .8s var(--e-out)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .se-seo-sign-i{grid-column:1/span 2}
  .se-seo-sign-s{grid-column:3/span 6}
  .se-seo-sign-a{grid-column:9/span 3}
  .se-seo-sign-m{width:72px}
  .se-seo-get-col{grid-column:1/span 5}
  .se-seo-frames{grid-column:6/span 7}
  .se-seo-stage,.se-seo-legend{width:100%}
  .se-seo-climb-h{grid-column:1/span 5}
  .se-seo-climb-t{grid-column:6/span 7}
}
@media (max-width:760px){
  /* the signs, the index, the sentence with its vignette beside it, the link */
  .se-seo-sign{grid-template-columns:minmax(0,1fr) 72px;column-gap:16px;row-gap:12px;align-items:start;min-height:0;padding:20px 0 22px}
  .se-seo-sign-i{grid-column:1/-1;grid-row:1}
  .se-seo-sign-s{grid-column:1;grid-row:2;max-width:none;text-indent:0}
  .se-seo-sign-m{grid-column:2;grid-row:2;width:72px}
  .se-seo-sign-a{grid-column:1/-1;grid-row:3;margin-top:4px!important}
  /* the word, the about, the tools, then each frame with its caption, nothing held */
  .se-seo-get-in{grid-template-columns:minmax(0,1fr)}
  .se-seo-get-col,.se-seo-frames{grid-column:1/-1}
  .se-seo-get-in:has(.se-seo-frame-m) .se-seo-get-hold{position:static;min-height:0}
  .se-seo-frames{margin-top:48px;gap:40px}
  .se-seo-cap{grid-template-columns:2.6em minmax(0,1fr);margin-top:16px}
  /* the lens across a phone page at 4 to 5, the reading on top, dragged up and down by its 44px handle */
  .se-seo-read-top{grid-template-columns:minmax(0,1fr)}
  .se-seo-read-h,.se-seo-say{grid-column:1/-1}
  .se-seo-say{margin:22px 0 0}
  .se-seo-stage{margin-top:40px;aspect-ratio:4 / 5;border-radius:10px;cursor:auto;touch-action:auto}
  /* a phone page, seven rows, the title's reading across the top, the language switch at the foot of the page */
  .se-seo-layer{grid-template-rows:6cqw 10cqw minmax(0,1fr) 23cqw 10.5cqw 7cqw 7.5cqw;column-gap:2cqw;row-gap:2.6cqw;padding:4.2cqw 5cqw 4.6cqw}
  .se-seo-corner{font-size:3.1cqw}
  .se-seo-a-brand{grid-row:2;grid-column:1/span 8}
  .se-seo-page .se-seo-a-nav{grid-row:2;grid-column:9/span 4}
  .se-seo-reading .se-seo-a-brand{grid-column:1/-1}
  .se-seo-reading .se-seo-a-nav{grid-row:7;grid-column:1/-1}
  .se-seo-a-lang{grid-row:7;grid-column:1/-1;justify-self:start}
  .se-seo-a-hero{grid-row:3;grid-column:1/-1}
  .se-seo-a-pic{grid-row:4;grid-column:1/-1}
  .se-seo-a-foot{grid-row:5;grid-column:1/-1}
  .se-seo-a-side{grid-row:6;grid-column:1/-1}
  .se-seo-wide{display:none!important}
  .se-seo-pg-brand{font-size:4.9cqw}
  .se-seo-pg-nav{gap:3cqw;font-size:3.3cqw}
  .se-seo-pg-lang{padding:.9cqw 2cqw;font-size:2.8cqw}
  .se-seo-pg-menu{display:block}
  .se-seo-pg-h{font-size:7.4cqw}
  .se-seo-pg-sub{margin-top:2.2cqw;font-size:3.4cqw}
  .se-seo-pg-btn{margin-top:3.2cqw;padding:2.4cqw 4cqw;font-size:3.3cqw}
  .se-seo-pg-foot{flex-direction:row;align-items:baseline;justify-content:space-between;gap:3cqw;padding-top:2.6cqw}
  .se-seo-pg-foot-t{font-size:4.4cqw}
  .se-seo-pg-foot-n,.se-seo-pg-side{font-size:3.1cqw}
  .se-seo-pg-side{justify-content:flex-start;align-items:center;padding-top:0;border-top:0}
  .se-seo-reading{clip-path:inset(0 0 calc(100% - var(--x,50) * 1%) 0)}
  .se-seo-box{gap:1.3cqw;padding-left:2.6cqw;font-size:3.35cqw}
  .se-seo-box.se-seo-a-foot,.se-seo-box.se-seo-a-side{align-self:center}
  .se-seo-ln{grid-template-columns:6.6em minmax(0,1fr) auto;column-gap:2cqw}
  .se-seo-ln--in{margin-left:2cqw;padding-left:2.4cqw;grid-template-columns:calc(6.6em - 4.4cqw) minmax(0,1fr) auto}
  .se-seo-box .se-seo-mark{font-size:2.8cqw}
  .se-seo-box .se-seo-mark>span{padding:.5cqw 1.6cqw}
  .se-seo-lens{top:calc(var(--x,50) * 1%);right:0;bottom:auto;left:0;width:auto;height:0}
  .se-seo-lens::before{top:-.5px;right:0;bottom:auto;left:0;width:auto;height:1px}
  /* the stage is 125cqw tall at 4 to 5, so a percent of its height is 1.25cqw */
  .se-seo-handle{top:clamp(calc(22px - var(--x,50) * 1.25cqw),0px,calc((100 - var(--x,50)) * 1.25cqw - 22px));left:50%;cursor:ns-resize}
  .se-seo-handle svg{transform:rotate(90deg)}
  /* the legend, a ruled list, each finding a row with its mark at the right */
  .se-seo-legend{display:flex;flex-direction:column;margin-top:28px;font:500 17px/1.4 var(--text);letter-spacing:0;text-align:left}
  .se-seo-lg-i{display:block;white-space:normal}
  .se-seo-lg{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;min-height:52px;padding:12px 0;border-top:1px solid var(--line);transition:border-color .8s var(--e-out)}
  .se-seo-lg::after{inset:0}
  .se-seo-lg-w{display:inline-block;border-bottom:0}
  .se-seo-lg-w::first-letter{text-transform:uppercase}
  .se-seo-lg-m{vertical-align:0}
  .se-seo-lg-c{display:none}
  .se-seo-lg-end{padding-top:14px;border-top:1px solid var(--line);font-size:15.5px;line-height:1.5}
  .se-seo-pills{flex-wrap:nowrap;justify-content:stretch;gap:8px;margin-top:24px}
  .se-seo-to{flex:1 1 0;padding:10px 12px;font-size:14.5px}
  .se-seo-illus{text-align:left}
  /* the word, then the table, each search a row with its two positions */
  .se-seo-climb-in{grid-template-columns:minmax(0,1fr)}
  .se-seo-climb-h,.se-seo-climb-t{grid-column:1/-1}
  .se-seo-climb-t{margin-top:36px}
  .se-seo-table .se-seo-num{width:4.6em}
  .se-seo-q{font-size:15.5px}
  .se-seo-past{font-size:14px}
  /* the strip upright, then each stretch stacked */
  .se-seo-month{grid-template-columns:minmax(0,1fr);row-gap:10px;padding:20px 0 24px}
  .se-seo-month-w,.se-seo-month-s,.se-seo-month-y{grid-column:1/-1}
  .se-seo-month-y{margin-top:6px}
}
@media (max-height:560px){
  /* a short screen cannot hold the word's column, it scrolls with its frames */
  .se-seo-get-in:has(.se-seo-frame-m) .se-seo-get-hold{position:static;min-height:0}
}@media (forced-colors:active){
  .se-seo-stage::after{box-shadow:none;border:1px solid CanvasText}
  .se-seo-reading{border-right:1px solid CanvasText}
  .se-seo-lens::before{background:CanvasText}
  .se-seo-handle{border:1px solid CanvasText}
  .se-seo-mark>span,.se-seo-to,.se-seo-pg-lang{border:1px solid CanvasText;box-shadow:none}
  .se-seo-lg-w::after{background:CanvasText}
}

/* Reference beats rebuilt in our palette. The markup is the telling final frame. */
.se-seo-art { width: 100%; height: 100%; position: relative; color: var(--fg); }
.se-seo-art-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.se-seo-art-line { stroke: var(--line); stroke-width: 1; }
.se-seo-art-rule, .se-seo-art-arrow { stroke: currentColor; stroke-width: 1.4; }
.se-seo-art-road { stroke: var(--fg-2); stroke-width: 1; opacity: .35; }
.se-seo-art-dashed { stroke-dasharray: 3 3; }
.se-seo-art-label { fill: currentColor; font: 600 16px var(--text); }
.se-seo-art-small, .se-seo-art-muted { fill: var(--fg-2); font: 500 13px var(--text); }
.se-seo-art-muted { opacity: .5; }
.se-seo-art-title { fill: currentColor; font: 800 26px var(--display); letter-spacing: -.8px; }
.se-seo-art-stop { fill: var(--accent, var(--red)); }
.se-seo-art-before { opacity: 0; }
.se-seo-art-map-fill { fill: var(--line); opacity: .55; }
.se-seo-art-pin { fill: currentColor; }
.se-seo-art-pin-eye { fill: var(--bg); }
.se-seo-art-kicker { color: var(--fg-2); font: 500 clamp(11px, 1.05vw, 15px)/1.35 var(--text); }
.se-seo-art-metadata { height: 100%; padding: 8% 9%; display: flex; flex-direction: column; justify-content: center; }
.se-seo-art-metadata dl { margin: 5% 0 0; }
.se-seo-art-meta-row { display: grid; grid-template-columns: 26% 1fr; border-top: 1px solid var(--line); padding: 4% 0; font: 500 clamp(11px, 1.15vw, 16px)/1.3 var(--text); }
.se-seo-art-meta-row dt { color: var(--fg-2); }
.se-seo-art-meta-row dd { position: relative; margin: 0; min-height: 1.3em; }
.se-seo-art-meta-row dd span { display: block; }
.se-seo-art-meta-row dd .se-seo-art-before { position: absolute; inset: 0; color: var(--fg-2); }
.se-seo-art-article { height: 100%; padding: 9% 10%; display: flex; flex-direction: column; justify-content: center; }
.se-seo-art-article > .se-seo-art-kicker { border-bottom: 1px solid var(--line); padding-bottom: 5%; margin-bottom: 6%; }
.se-seo-art-prose { font: 400 clamp(12px, 1.15vw, 16px)/1.6 var(--text); color: var(--fg-2); }
.se-seo-art-prose .se-seo-art-article-title { font: 800 clamp(20px, 2.1vw, 31px)/1.15 var(--display); letter-spacing: -.045em; color: var(--fg); margin-bottom: 5%; max-width: 12em; }
.se-seo-art-outline { list-style: none; position: absolute; inset: 34% 10% auto; font: 500 clamp(12px, 1.15vw, 16px)/1.5 var(--text); }
.se-seo-art-outline li { border-top: 1px solid var(--line); padding: 3% 0; }
.se-seo-art-process { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 10px 0; }
.se-seo-art-month { display: flex; justify-content: space-between; font: 500 clamp(12px, 1.1vw, 16px)/1.3 var(--text); color: var(--fg-2); }
.se-seo-art-year { display: grid; grid-template-columns: repeat(52, 1fr); gap: 4px; }
.se-seo-art-week { aspect-ratio: 1 / 1.25; border: 1px solid var(--line); }
.se-seo-art-week.is-work { background: var(--fg); border-color: var(--fg); }
.se-seo-art-phases { display: flex; justify-content: space-between; font: 600 clamp(13px, 1.4vw, 20px)/1.3 var(--text); }
.se-seo-art-audit { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 7% 8%; }
.se-seo-art-address { border-bottom: 1px solid var(--line); padding-bottom: 4%; display: flex; flex-direction: column; gap: 6px; font: 500 clamp(11px, 1.1vw, 15px)/1.3 var(--text); }
.se-seo-art-address span { color: var(--fg-2); }
.se-seo-art-address strong { font-weight: 600; }
.se-seo-art-scan-layout { display: grid; grid-template-columns: 37% 1fr; align-items: center; gap: 10%; margin-top: 7%; }
.se-seo-art-page { position: relative; aspect-ratio: 3 / 4; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8%; padding: 14% 10%; overflow: hidden; }
.se-seo-art-page > span { height: 4%; width: 80%; background: var(--line); }
.se-seo-art-page > .se-seo-art-page-head { height: 9%; width: 65%; background: var(--fg-2); }
.se-seo-art-page > .se-seo-art-page-image { height: 29%; width: 100%; }
.se-seo-art-page > i { position: absolute; top: 12%; left: 0; right: 0; height: 1px; background: var(--fg); }
.se-seo-art-scan-layout ul { list-style: none; display: flex; flex-direction: column; gap: 12px; font: 500 clamp(11px, 1.15vw, 16px)/1.3 var(--text); }
.se-seo-art-scan-layout li { display: flex; align-items: center; gap: 10px; }
.se-seo-art-scan-layout li svg { width: 15px; height: 15px; flex: none; }
.se-seo-art-audit-done { margin-top: 5%; text-align: right; font: 600 clamp(11px, 1.1vw, 15px)/1.3 var(--text); color: var(--fg-2); }
@media (max-width: 760px) {
  .se-seo-art-year { grid-template-columns: repeat(13, 1fr); gap: 5px; }
  .se-seo-art-week { aspect-ratio: 1.8; }
  .se-seo-art-process { gap: 18px; padding: 20px 0; }
  .se-seo-art-phases { font-size: 14px; }
  .se-seo-art-meta-row, .se-seo-art-prose { font-size: 12px; }
  .se-seo-art-kicker { font-size: 11px; }
  .se-seo-art-scan-layout ul { gap: 9px; }
}

.se-seo-art [data-se-seo-ping], .se-seo-art [data-se-seo-scan] { opacity: 0; }
/* /services/google-meta-ads/, Traced back, the service's own stylesheet (research/service/design/spec.md section 5),
   imported by Entry.astro after service.css. Classes se-ads- only, sections in page order, responsive rules at the end.
   A part is placed through the class given to it, never styled by its own class. Colours from the tokens, every one
   following the section's ground (body[data-bg]). The counted thing is a 2px by 22px red stroke, never a drawn round
   full stop, so nothing round and red competes with the dot. Start states are set by google-meta-ads.ts, so the page
   reads whole without scripts and under reduced motion. */

/* ---------- the signs, inside the head's section ---------- */
/* thirds, 1 to 4, 5 to 8, 9 to 12, the numeral, the vignette (3 to 2), the problem in two tones at Lead, its answer */
.se-ads-thirds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;margin:clamp(28px,5vh,56px) 0 0;padding:0;list-style:none}
.se-ads-third{min-width:0}
.se-ads-third-in{display:flex;flex-direction:column;align-items:flex-start;height:100%}
.se-ads-third-n{display:block;margin-bottom:14px;font-variant-numeric:tabular-nums}
.se-ads-vignette{width:100%;margin-bottom:26px}
.se-ads-third-s{margin:0;max-width:24ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;color:var(--fg);text-wrap:pretty;transition:color .8s var(--e-out)}
.se-ads-turn{color:var(--fg-2);transition:color .8s var(--e-out)}
.se-ads-third-a{margin:auto 0 0;padding-top:22px}
/* without their vignettes (a build) the words carry the thirds alone, said bigger at Brief with more air above, which
   also keeps the title's full stop and Counted.'s a screen apart under the type only head */
.se-ads-thirds:not(:has(.se-motion)){margin-top:clamp(56px,12vh,140px)}
.se-ads-thirds:not(:has(.se-motion)) .se-ads-third-s{max-width:none;font:500 clamp(26px,2.6vw,40px)/1.25 var(--text);letter-spacing:-.012em}
.se-ads-thirds:not(:has(.se-motion)) .se-ads-third-a{padding-top:32px}

/* ---------- get, Counted., W mirrored ---------- */
/* the panel in 1 to 7 on a stage that holds its place, the word, the about and the verbs in 9 to 12 */
.se-ads-get-in{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;margin-top:clamp(28px,5vh,56px)}
.se-ads-stage{grid-column:1/span 7;grid-row:1;align-self:center;aspect-ratio:4 / 3}
.se-ads-get-side{grid-column:9/span 4;grid-row:1;min-width:0}
.se-ads-get-h{margin-top:0}
.se-ads-about{margin:28px 0 0;max-width:30ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;color:var(--fg);text-wrap:pretty;transition:color .8s var(--e-out)}
.se-ads-verbs{margin:clamp(40px,6vh,64px) 0 0;padding:0;list-style:none}
.se-ads-verb{border-top:1px solid var(--line);transition:border-color .8s var(--e-out)}
.se-ads-verb:last-child{border-bottom:1px solid var(--line)}
.se-ads-verb-in{display:grid;grid-template-columns:2.4em minmax(0,1fr);column-gap:10px;align-items:start;padding:20px 0 24px}
.se-ads-verb-n{position:relative;grid-column:1;grid-row:1;padding-top:.15em;font-variant-numeric:tabular-nums}
/* the line in hand carries the page's mark, a stroke like the field's, 2px by 22px in --fg, left of its numeral */
.se-ads-verb-n::before{content:"";position:absolute;left:-14px;top:.2em;width:2px;height:22px;background:var(--fg);opacity:0;transform:scaleY(.3);transition:opacity .35s var(--e-out),transform .35s var(--e-out)}
.se-ads-verb.is-on .se-ads-verb-n::before{opacity:1;transform:none}
.se-ads-verb-in>p{grid-column:2;margin:0}
.se-ads-verb-t{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font:800 clamp(24px,2.05vw,34px)/.95 var(--display);letter-spacing:-.04em;color:var(--fg-2);transition:color .35s var(--e-out)}
.se-ads-verb-tools{display:inline-flex;align-items:center;gap:8px}
.se-ads-verb.is-on .se-ads-verb-t{color:var(--fg)}
.se-ads-verb-in>.se-ads-verb-a{margin-top:12px;max-width:40ch;font-size:17px;line-height:1.55;color:var(--fg-2);text-wrap:pretty;transition:color .8s var(--e-out)}
.se-ads-verb-in>.se-ads-verb-l{margin-top:16px}
/* the panels, one per verb, over the stage, the one in hand shown with the panel fill (0.3s, opacity and 1.05 to 1).
   The stage and its panels sit at the middle of the words' column, not at its top, so the panel stays beside the verbs
   it answers (the words run about 300px longer than the panel at 1440, 450px at 1024, and a top aligned panel was out
   of the screen by the time the third verb was in hand). The panel's top is the middle less half its own height, its
   width times 3 over 8, through a margin, whose percentages are of the width */
.se-ads-panel{--se-ads-pw:calc((100% - 11 * 24px) / 12 * 7 + 6 * 24px);position:absolute;left:0;top:50%;width:var(--se-ads-pw);margin-top:calc(var(--se-ads-pw) * -.375);opacity:0;visibility:hidden;transform:scale(1.05);transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1),visibility 0s linear .3s,background-color .8s var(--e-out)}
.se-ads-verb.is-on .se-ads-panel{opacity:1;visibility:visible;transform:none;transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1),visibility 0s,background-color .8s var(--e-out)}
/* without its pieces the three lines stand alone across 1 to 8 (a build, or the preview's Show the build) */
.se-ads-get-in.is-words .se-ads-get-side,.se-ads-get-in:not(:has(.se-motion)) .se-ads-get-side{grid-column:1/span 8}
.se-ads-get-in:not(:has(.se-motion)) .se-ads-stage{display:none}
.se-ads-get-in.is-words .se-ads-verb-t,.se-ads-get-in:not(:has(.se-motion)) .se-ads-verb-t{color:var(--fg)}
.se-ads-get-in.is-words .se-ads-verb-n::before,.se-ads-get-in:not(:has(.se-motion)) .se-ads-verb-n::before{content:none}
/* and each line reads across, the include beside its answer, so the 8 columns are used */
.se-ads-get-in.is-words .se-ads-verb-in,.se-ads-get-in:not(:has(.se-motion)) .se-ads-verb-in{grid-template-columns:2.4em minmax(0,1fr) minmax(0,1.25fr);column-gap:16px}
.se-ads-get-in.is-words .se-ads-verb-in>p:not(.se-ads-verb-t),.se-ads-get-in:not(:has(.se-motion)) .se-ads-verb-in>p:not(.se-ads-verb-t){grid-column:3}
.se-ads-get-in.is-words .se-ads-verb-in>.se-ads-verb-a,.se-ads-get-in:not(:has(.se-motion)) .se-ads-verb-in>.se-ads-verb-a{grid-row:1;margin-top:0}

/* ---------- traced, Traced back., the signature ---------- */
/* the word on one line in 1 to 9, the run in at Body in 10 to 12 on its baseline */
.se-ads-traced-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;margin-top:clamp(28px,5vh,56px)}
.se-ads-traced-h{grid-column:1/span 9;margin-top:0}
.se-ads-runin{grid-column:10/span 3;margin:0;padding-bottom:.35em;font-size:17px;line-height:1.55;color:var(--fg);text-wrap:pretty;transition:color .8s var(--e-out)}
.se-ads-quiet{color:var(--fg-2);transition:color .8s var(--e-out)}
/* the field, five rows of 96px on 1px rules across 12, the labels in 1 to 2, the tally in 3 to 9, the story in 10 to
   12, the lines over the tally, the week's days under it */
.se-ads-field{--se-ads-row:96px;position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:48px}
.se-ads-rows{grid-column:1/-1;grid-row:1}
.se-ads-row{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;height:var(--se-ads-row);box-shadow:inset 0 1px 0 var(--line);transition:box-shadow .8s var(--e-out)}
.se-ads-row:last-child::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--line);transition:background-color .8s var(--e-out)}
.se-ads-row-l{grid-column:1/span 2}
.se-ads-tally{position:relative;grid-column:3/span 7;align-self:stretch}
/* a stroke, 1px by 14px at its time of the week. A followed one 2px by 22px in --fg, a booking followed the red stroke,
   printing with the landing curve */
.se-ads-s{position:absolute;left:var(--x);top:50%;width:1px;height:14px;margin:-7px 0 0 -.5px;background:var(--fg);opacity:.34;transition:opacity .35s var(--e-out),transform .35s var(--e-out),background-color .35s var(--e-out)}
.se-ads-s.is-lit{opacity:1;transform:scale(2,1.5715)}
.se-ads-s.is-red{opacity:1;background:var(--red);transform:scale(2,1.5715);transition:opacity .45s var(--e-out),transform .45s cubic-bezier(.3,1.7,.5,1),background-color .2s var(--e-out)}
/* the lines, x in percent of the tally, y in px, the one followed in --fg, the one before it a ghost */
.se-ads-trace{grid-column:3/span 7;grid-row:1;align-self:start;display:block;overflow:visible;pointer-events:none}
.se-ads-trace--phone{display:none}
.se-ads-trace line{fill:none;stroke:var(--fg);stroke-width:1;transition:stroke .8s var(--e-out)}
.se-ads-tr{opacity:0;transition:opacity .35s var(--e-out)}
.se-ads-tr.is-on{opacity:1}
.se-ads-tr.is-ghost{opacity:.3}
/* the days of the week under the tally, each in the middle of its seventh */
.se-ads-days{position:relative;grid-column:3/span 7;grid-row:2;height:18px;margin:14px 0 0}
.se-ads-days>span{position:absolute;left:calc(var(--x) + 100% / 14);top:0;transform:translateX(-50%);font-size:12.5px;line-height:1.3;white-space:nowrap;color:var(--fg-3);transition:color .8s var(--e-out)}
.se-ads-day-s{display:none}
/* the story, a moment beside each row */
.se-ads-story{grid-column:10/span 3;grid-row:1;min-width:0}
.se-ads-moments{margin:0;padding:0;list-style:none}
.se-ads-moment{display:flex;flex-direction:column;justify-content:center;gap:5px;height:var(--se-ads-row);padding-right:8px}
.se-ads-when{font-variant-numeric:tabular-nums}
.se-ads-what{font-size:15.5px;line-height:1.4;color:var(--fg);text-wrap:pretty;transition:color .8s var(--e-out)}
/* under the tally and its days, the pills in 1 to 5 (with scripts only, both on one line), the source at Lead in 6 to 12,
   the caption */
.se-ads-pills{grid-column:1/span 5;grid-row:3;align-self:start;display:none;flex-wrap:wrap;gap:10px;margin-top:clamp(36px,5.5vh,60px)}
.js:not(.no-libs) .se-ads-pills{display:flex}
.se-ads-pill{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:12px 20px;border:0;border-radius:999px;background:none;box-shadow:inset 0 0 0 1px var(--line);font:500 16px/1.2 var(--text);color:var(--fg-2);cursor:pointer;transition:box-shadow .3s,color .3s}
.se-ads-pill::before{content:"";flex:none;width:2px;height:14px;background:currentColor;opacity:.45;transition:opacity .3s}
.se-ads-pill:hover,.se-ads-pill[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--fg);color:var(--fg)}
.se-ads-pill[aria-pressed="true"]::before{opacity:1}
.se-ads-pill:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.se-ads-source{grid-column:6/span 7;grid-row:3;min-width:0;margin-top:clamp(36px,5.5vh,60px)}
.se-ads-src{margin:0;max-width:34ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;color:var(--fg);transition:color .8s var(--e-out)}
.se-ads-cap{margin:16px 0 0;font-size:13.5px;line-height:1.4;color:var(--fg-2);transition:color .8s var(--e-out)}

/* ---------- one-number, One number., centred ---------- */
.se-ads-one-m{width:calc((100% - 11 * 24px) / 12 * 8 + 7 * 24px);margin:clamp(40px,6vh,64px) auto 0}
.se-ads-one-src{margin:22px auto 0;max-width:46ch;text-align:center;font-size:15.5px;line-height:1.5;color:var(--fg-2);transition:color .8s var(--e-out)}

/* ---------- yours, Yours., a split facing the other way ---------- */
/* the tree in 1 to 6, the word and the statements in 7 to 12. Without the tree, the word in 1 to 5 and the statements
   in 7 to 12 */
.se-ads-yours-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;margin-top:clamp(28px,5vh,56px)}
.se-ads-tree{grid-column:1/span 6;grid-row:1/span 2}
.se-ads-yours-h{grid-column:7/span 6;grid-row:1;margin-top:0}
.se-ads-owns{grid-column:7/span 6;grid-row:2;margin:clamp(36px,5.5vh,56px) 0 0;padding:0;list-style:none}
.se-ads-own{border-top:1px solid var(--line);transition:border-color .8s var(--e-out)}
.se-ads-own:last-child{border-bottom:1px solid var(--line)}
.se-ads-own-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0;padding:20px 0 22px}
.se-ads-own-tools{display:inline-flex;align-items:center;gap:8px}
.se-ads-own-t{max-width:34ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;color:var(--fg);text-wrap:pretty;transition:color .35s var(--e-out)}
.se-ads-owns:hover .se-ads-own-t{color:var(--fg-2)}
.se-ads-owns:hover .se-ads-own:hover .se-ads-own-t{color:var(--fg)}
.se-ads-yours-in.is-words .se-ads-yours-h,.se-ads-yours-in:not(:has(.se-motion)) .se-ads-yours-h{grid-column:1/span 5;grid-row:1}
.se-ads-yours-in.is-words .se-ads-owns,.se-ads-yours-in:not(:has(.se-motion)) .se-ads-owns{grid-column:7/span 6;grid-row:1;margin-top:0}

/* ---------- runs, How it runs, the weekly line and two ruled rows ---------- */
.se-ads-week{margin-top:clamp(28px,5vh,56px)}
.se-ads-runlist{margin:clamp(40px,6vh,64px) 0 0;padding:0}
.se-ads-run{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:baseline;padding:20px 0 24px;border-top:1px solid var(--line);transition:border-color .8s var(--e-out)}
.se-ads-run:last-child{border-bottom:1px solid var(--line)}
.se-ads-run-l{grid-column:1/span 3}
.se-ads-run-d{grid-column:4/span 7;margin:0}
.se-ads-run-t{margin:0;max-width:40ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;color:var(--fg);text-wrap:pretty;transition:color .8s var(--e-out)}
.se-ads-run-take{margin:12px 0 0;font-size:15.5px;line-height:1.5;color:var(--fg-2);transition:color .8s var(--e-out)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  /* get, the panel in 1 to 6 and the words in 7 to 12 */
  .se-ads-stage{grid-column:1/span 6}
  .se-ads-get-side{grid-column:7/span 6}
  .se-ads-panel{--se-ads-pw:calc((100% - 11 * 24px) / 12 * 6 + 5 * 24px)}
  /* traced, the word across, the run in under it, the tally in 3 to 8 and the story in 9 to 12 */
  .se-ads-traced-h{grid-column:1/-1}
  .se-ads-runin{grid-column:1/span 7;margin-top:24px;padding-bottom:0}
  .se-ads-tally,.se-ads-trace,.se-ads-days{grid-column:3/span 6}
  /* a seventh of the tally is narrower than Wednesday here, so the days take their short names */
  .se-ads-day-l{display:none}
  .se-ads-day-s{display:inline}
  .se-ads-story{grid-column:9/span 4}
  .se-ads-pills{grid-column:1/-1}
  .se-ads-source{grid-column:1/span 9;grid-row:4;margin-top:28px}
  /* one number, the piece across */
  .se-ads-one-m{width:100%}
  /* runs, the words wider */
  .se-ads-run-d{grid-column:4/span 9}
}
@media (max-width:760px){
  /* the signs stacked */
  .se-ads-thirds{grid-template-columns:minmax(0,1fr);row-gap:56px}
  .se-ads-third-s{max-width:none}
  .se-ads-third-a{padding-top:18px}
  /* get, the word, the about, each verb followed by its own panel */
  .se-ads-get-in{display:block}
  .se-ads-stage{display:none}
  .se-ads-about{max-width:none}
  .se-ads-verb-t{color:var(--fg)}
  .se-ads-verb-n::before{content:none}
  .se-ads-get-in.is-words .se-ads-verb-in,.se-ads-get-in:not(:has(.se-motion)) .se-ads-verb-in{grid-template-columns:2.4em minmax(0,1fr);column-gap:10px}
  .se-ads-get-in.is-words .se-ads-verb-in>p:not(.se-ads-verb-t),.se-ads-get-in:not(:has(.se-motion)) .se-ads-verb-in>p:not(.se-ads-verb-t){grid-column:2}
  .se-ads-get-in.is-words .se-ads-verb-in>.se-ads-verb-a,.se-ads-get-in:not(:has(.se-motion)) .se-ads-verb-in>.se-ads-verb-a{grid-row:auto;margin-top:12px}
  .se-ads-panel,.se-ads-verb.is-on .se-ads-panel{position:relative;top:auto;width:100%;margin:0 0 28px;opacity:1;visibility:visible;transform:none}
  /* traced, the word and the run in stacked, the field 358 wide in rows of 64px, each its label above its strokes,
     the story as a list under it, the days left out */
  .se-ads-traced-top{display:block}
  .se-ads-runin{margin-top:20px}
  .se-ads-field{--se-ads-row:64px;grid-template-columns:minmax(0,1fr);margin-top:36px}
  .se-ads-row{display:block}
  /* the label over the line where the two cross, on the ground's own colour */
  .se-ads-row-l{position:absolute;z-index:2;left:0;top:6px;padding-right:8px;background:var(--bg);font-size:13.5px;transition:color .8s var(--e-out),background-color .8s var(--e-out)}
  .se-ads-tally{position:absolute;left:0;right:0;top:26px;bottom:0}
  .se-ads-s.is-wide{display:none}
  .se-ads-trace,.se-ads-days,.se-ads-story,.se-ads-pills,.se-ads-source{grid-column:1}
  .se-ads-trace--wide,.se-ads-days{display:none}
  .se-ads-trace--phone{display:block}
  .se-ads-pills{grid-row:2;margin-top:24px}
  .se-ads-story{grid-row:3;margin-top:28px}
  .se-ads-source{grid-row:4;margin-top:28px}
  .se-ads-moment{height:auto;padding:12px 0 14px;border-top:1px solid var(--line);transition:border-color .8s var(--e-out)}
  .se-ads-moment:last-child{border-bottom:1px solid var(--line)}
  .se-ads-src{max-width:none}
  /* yours, the word, the tree, the statements */
  .se-ads-yours-in{grid-template-columns:minmax(0,1fr)}
  .se-ads-yours-in .se-ads-yours-h{grid-column:1;grid-row:1}
  .se-ads-tree{grid-column:1;grid-row:2;margin-top:32px}
  .se-ads-yours-in .se-ads-owns{grid-column:1;grid-row:3}
  .se-ads-yours-in.is-words .se-ads-yours-h,.se-ads-yours-in:not(:has(.se-motion)) .se-ads-yours-h{grid-column:1;grid-row:1}
  .se-ads-yours-in.is-words .se-ads-owns,.se-ads-yours-in:not(:has(.se-motion)) .se-ads-owns{grid-column:1;grid-row:2;margin-top:32px}
  /* runs, each label over its words */
  .se-ads-run{grid-template-columns:minmax(0,1fr);row-gap:10px}
  .se-ads-run-l,.se-ads-run-d{grid-column:1}
}
/* reduced motion (CLAUDE.md rule 6), a pill swaps line, story and source at once, a stroke lights without growing in
   front of the eye, and the panel in hand only fades, as a plain state change, never scaling */
.rm .se-ads-s,.rm .se-ads-s.is-red,.rm .se-ads-tr,.rm .se-ads-verb-n::before{transition:none}
.rm .se-ads-panel{transform:none}
@media (forced-colors:active){
  .se-ads-s,.se-ads-pill::before{background:CanvasText}
  .se-ads-s.is-red{background:Highlight}
  .se-ads-trace line{stroke:CanvasText}
  .se-ads-pill{border:1px solid CanvasText;box-shadow:none}
}

/* Original motion artwork. Every piece holds a complete final frame without scripts. */
.se-ads-art { position: relative; width: 100%; height: 100%; color: var(--fg); }
.se-ads-art-svg { display: block; width: 100%; height: 100%; }
.se-ads-art-line { stroke: var(--line); stroke-width: 1; }
.se-ads-art-rule { stroke: currentColor; stroke-width: 1.3; }
.se-ads-art-dashed { stroke-dasharray: 4 4; }
.se-ads-art-label { fill: currentColor; font: 600 16px var(--text); }
.se-ads-art-small, .se-ads-art-muted { fill: var(--fg-2); font: 500 13px var(--text); }
.se-ads-art-muted { opacity: .55; }
.se-ads-art-title { fill: currentColor; font: 800 25px var(--display); letter-spacing: -.8px; }
.se-ads-art-count { fill: currentColor; font: 800 82px var(--display); letter-spacing: -4px; }
.se-ads-art-button { fill: currentColor; }
.se-ads-art-button-text { fill: var(--bg); font: 600 13px var(--text); }
.se-ads-art-stop { fill: var(--accent, var(--red)); }
.se-ads-art-before { opacity: 0; }
.se-ads-art-note { fill: var(--bg); stroke: var(--line); stroke-width: 1; }
.se-ads-art-sign-count, .se-ads-art-sign-zero { fill: currentColor; font: 800 56px var(--display); letter-spacing: -2px; }
.se-ads-art-sign-zero { fill: var(--fg-2); opacity: .55; }
.se-ads-art-kicker { font: 500 clamp(12px, 1.1vw, 16px)/1.3 var(--text); color: var(--fg-2); }
.se-ads-art-search { height: 100%; padding: 8% 9%; display: flex; flex-direction: column; justify-content: center; }
.se-ads-art-search > .se-ads-art-kicker { margin-bottom: 7%; }
.se-ads-art-ad-row { border-top: 1px solid var(--line); padding: 5% 0; position: relative; }
.se-ads-art-tag, .se-ads-art-address, .se-ads-art-choice { font: 500 clamp(10px, 1.05vw, 15px)/1.3 var(--text); color: var(--fg-2); }
.se-ads-art-headlines { display: grid; margin-top: 3%; overflow: hidden; }
.se-ads-art-headline { grid-area: 1 / 1; font: 800 clamp(22px, 2.55vw, 36px)/1.1 var(--display); letter-spacing: -.045em; padding: .1em 0; }
.se-ads-art-address { margin-top: 2%; }
.se-ads-art-choice { position: absolute; right: 0; bottom: 7%; font-weight: 600; }
.se-ads-art-other-row { border-top: 1px solid var(--line); padding: 4% 0; color: var(--fg-2); font: 500 clamp(12px, 1.25vw, 18px)/1.3 var(--text); }
.se-ads-art-other-row > i { display: block; margin-top: 10px; height: 1px; width: 73%; background: var(--line); }
.se-ads-art-other-row > i:last-child { width: 49%; margin-top: 6px; }
.se-ads-art-social { width: 100%; height: 100%; position: relative; }
.se-ads-art-creative { position: absolute; width: 44%; height: 67%; top: 11%; left: 28%; border: 1px solid var(--fg); background: var(--bg); padding: 6% 4%; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.se-ads-art-creative > p { font: 800 clamp(22px, 3.2vw, 44px)/.99 var(--display); letter-spacing: -.055em; max-width: 9ch; }
.se-ads-art-creative > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 600 clamp(10px, 1vw, 15px)/1.2 var(--text); border-top: 1px solid var(--line); padding-top: 10px; }
.se-ads-art-creative > span i { font-style: normal; }
.se-ads-art-creative-line { position: absolute; top: 10px; left: 12px; right: 12px; height: 1px; background: var(--fg-2); }
.se-ads-art-format-ghost { position: absolute; border: 1px solid var(--line); color: var(--fg-2); font: 500 clamp(10px, 1vw, 14px)/1.3 var(--text); }
.se-ads-art-format-ghost > span { position: absolute; left: 8px; top: 8px; }
.se-ads-art-ghost-story { width: 34%; height: 78%; left: 19%; top: 7%; }
.se-ads-art-ghost-reel { width: 34%; height: 78%; left: 49%; top: 7%; }
.se-ads-art-ghost-video { width: 78%; height: 43%; top: 25%; left: 11%; }
.se-ads-art-format-name { position: absolute; bottom: 7%; left: 10%; right: 10%; display: grid; text-align: center; font: 600 clamp(13px, 1.2vw, 17px)/1.2 var(--text); }
.se-ads-art-format-name > span { grid-area: 1 / 1; }
.se-ads-art-events { height: 100%; padding: 9% 10%; display: flex; flex-direction: column; justify-content: center; }
.se-ads-art-events ol { list-style: none; display: flex; flex-direction: column-reverse; margin-top: 8%; }
.se-ads-art-events li { display: grid; grid-template-columns: 1fr auto; padding: 5% 0; border-top: 1px solid var(--line); column-gap: 12px; row-gap: 5px; }
.se-ads-art-event-name { font: 600 clamp(17px, 1.9vw, 27px)/1.2 var(--text); }
.se-ads-art-event-detail { grid-column: 1; font: 500 clamp(11px, 1.1vw, 16px)/1.3 var(--text); color: var(--fg-2); }
.se-ads-art-events time { grid-column: 2; grid-row: 2; font: 500 clamp(10px, 1vw, 14px)/1.3 var(--text); font-variant-numeric: tabular-nums; color: var(--fg-2); }
.se-ads-art-events li svg { grid-column: 2; grid-row: 1; width: 20px; height: 20px; align-self: center; }
.se-ads-art-results { height: 100%; padding: 8% 11%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.se-ads-art-result-number { font: 800 clamp(74px, 9.5vw, 138px)/.9 var(--display); letter-spacing: -.075em; font-variant-numeric: tabular-nums; }
.se-ads-art-result-words { max-width: 29ch; font: 500 clamp(14px, 1.5vw, 22px)/1.4 var(--text); margin-top: 5%; color: var(--fg-2); }
.se-ads-art-sources { margin-top: 8%; padding-top: 5%; border-top: 1px solid var(--line); width: 100%; display: flex; justify-content: space-between; gap: 12px; }
.se-ads-art-sources dt { color: var(--fg-2); font: 500 clamp(11px, 1.1vw, 16px)/1.3 var(--text); }
.se-ads-art-sources dd { margin-top: 5px; font: 800 clamp(23px, 3vw, 43px)/1 var(--display); letter-spacing: -.05em; }
.se-ads-art-process { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.se-ads-art-week-label { display: flex; justify-content: space-between; gap: 16px; font: 500 clamp(12px, 1.1vw, 16px)/1.3 var(--text); color: var(--fg-2); }
.se-ads-art-week-row { display: grid; grid-template-columns: repeat(6, 1fr); }
.se-ads-art-week-row > div { border-top: 1px solid var(--line); padding: 13px 0 0; display: flex; align-items: baseline; gap: 14px; }
.se-ads-art-week-index { font: 500 clamp(11px, 1vw, 14px)/1.2 var(--text); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.se-ads-art-week-word { font: 600 clamp(16px, 1.5vw, 22px)/1.2 var(--text); }
@media (max-width: 760px) {
  .se-ads-art-headline { font-size: 24px; }
  .se-ads-art-choice { font-size: 10px; }
  .se-ads-art-creative > p { font-size: 27px; }
  .se-ads-art-week-row { grid-template-columns: repeat(3, 1fr); gap: 28px 14px; }
  .se-ads-art-week-label { flex-direction: column; gap: 8px; }
  .se-ads-art-process { gap: 32px; padding: 18px 0; }
  .se-ads-art-week-row > div { gap: 8px; }
  .se-ads-art-week-word { font-size: 17px; }
}
.se-soc-art{width:100%;height:100%;color:var(--fg);overflow:hidden}
.se-soc-art-svg{display:block;width:100%;height:100%;overflow:hidden}
.se-soc-art-line,.se-soc-art-ink{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.se-soc-art-ink{stroke:var(--fg)}
.se-soc-art-soft{fill:var(--line);stroke:none}
.se-soc-art-paper{fill:var(--bg);stroke:var(--fg-2);stroke-width:1;vector-effect:non-scaling-stroke}
.se-soc-art-label{fill:var(--fg-2);font:500 13px var(--text);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.se-soc-art-text{fill:var(--fg);font:500 20px var(--text)}
.se-soc-art-display{fill:var(--fg);font:800 42px var(--display);letter-spacing:-.045em}
.se-soc-art-display--small{font-size:27px}
.se-soc-art-display--caption{font-size:32px}
.se-soc-art-number{fill:var(--fg);font:800 46px var(--display);letter-spacing:-.055em}
.se-soc-art-muted{fill:var(--fg-3)}
.se-soc-art-hidden{opacity:0}
.se-soc-art-stop{fill:var(--red);stroke:none;transform-box:fill-box;transform-origin:center}
.se-soc-art-inline{margin:0;color:var(--fg);font:800 32px/1.15 var(--display);letter-spacing:-.045em;white-space:nowrap}
.se-soc-art-inline--head{font-size:42px}
.se-soc-art-inline--small{font-size:27px}
.se-soc-art-inline-stop{transform-origin:center}
.se-soc-art--five-looks .se-soc-art-paper{fill:var(--bg)}
.se-soc-art-cycle{position:relative;height:100%;padding:13% 9% 6%;display:flex;flex-direction:column;justify-content:center}
.se-soc-art-first{position:absolute;top:7%;left:9%;margin:0;font:500 15px var(--text);color:var(--fg-2)}
.se-soc-art-cycle-rule{position:absolute;inset:19% 5% 10%;width:90%;height:65%}
.se-soc-art-cycle-rule-phone{display:none}
.se-soc-art-cycle-stages{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.se-soc-art-cycle-stages li{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:500 clamp(12px,1.4vw,19px) var(--text)}
.se-soc-art-cycle-tick{width:1px;height:18px;background:var(--fg);display:block;flex:0 0 1px}
.se-soc-art-cycle-stop{height:5px;width:5px;border-radius:50%;background:var(--red);transform-origin:center;flex:0 0 5px}
.se-soc-art-next{position:absolute;right:14%;bottom:18%;margin:0;font:500 13px var(--text);color:var(--fg-2)}
@media(max-width:760px){.se-soc-art-cycle{padding:20% 24% 20% 20%;justify-content:flex-start}.se-soc-art-first{top:8%;left:20%}.se-soc-art-cycle-rule{display:none}.se-soc-art-cycle-rule-phone{display:block;position:absolute;inset:19% 9% 13%;width:82%;height:68%}.se-soc-art-cycle-stages{height:100%;width:100%;grid-template-columns:1fr;gap:25px}.se-soc-art-cycle-stages li{font-size:17px}.se-soc-art-next{right:23%;bottom:7%}}
/* /services/social-media-content/, A month, top to bottom (research/service/design/spec.md section 6), the service's own
   stylesheet, imported by Entry.astro after service.css. Classes se-soc- only, never a part's class styled (each part
   placed through its class prop), sections in page order, start states only behind .js:not(.no-libs):not(.rm),
   responsive rules at the end. Every page of the template carries it, so nothing here reaches past .se-soc-.
   The material is a wall calendar and a contact sheet, hairlines and words, so every rule is 1px --line (or --fg where a
   line is the drawing), colours from the theme tokens, red only in the calendar's one drawn full stop. Never a card, a
   colour panel, an avatar, a platform icon or a coloured chip. Values are the site's and docs/14's, the type levels by
   name (Lead, Small, Tag, Title, Number), unless a comment gives the reason. */

/* the strike's strength, registered so a hover can fade it (voice) */
@property --se-soc-sa{syntax:'<number>';inherits:true;initial-value:1}

/* ---------- the signs, the month before, inside the head's section ---------- */
/* R with a stamp column, three rows of 132px on 1px rules across 12 (spec.md, Signs) */
.se-soc-signs{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--line);transition:border-color .8s var(--e-out)}
.se-soc-sign{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;min-height:132px;padding:18px 0;border-top:1px solid var(--line);transition:border-color .8s var(--e-out)}
.se-soc-stamp{grid-column:1/span 2;margin:0;color:var(--fg-3);font-variant-numeric:tabular-nums;transition:color .8s var(--e-out)}
.se-soc-stamp-n{color:var(--fg-2)}
/* the clock's two figures, its colon drawn here so the digit strips never hold one (copy rule 3, a clock time) */
.se-soc-clock{display:inline-flex;align-items:flex-end}
.se-soc-clock-m::before{content:":" / "";line-height:1;padding:0 .05em}
.se-soc-say{grid-column:3/span 6;margin:0;max-width:30ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;color:var(--fg);text-wrap:pretty}
.se-soc-to{grid-column:9/span 3;margin:0}
.se-soc-vig{grid-column:12;justify-self:end;width:96px}

/* ---------- plan, #a-monthly-plan, the calendar (the signature) ---------- */
/* the chapter word in 1 to 8, the about in 9 to 12 standing on its baseline */
.se-soc-plan-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
.se-soc-plan-h{grid-column:1/span 8}
.se-soc-plan-about{grid-column:9/span 4;margin:0 0 .35em;max-width:38ch;font-size:17px;line-height:1.55;color:var(--fg-2);text-wrap:pretty;transition:color .8s var(--e-out)}
/* the calendar across 12, 56px under, its name at Title over the weekday row, the cadence at the right */
.se-soc-cal{position:relative;margin-top:56px}
.se-soc-cal-h{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding-bottom:18px}
.se-soc-cal-t{margin:0;font:800 clamp(24px,2.05vw,34px)/.95 var(--display);letter-spacing:-.04em}
.se-soc-cal-y{margin-left:.32em;color:var(--fg-3);transition:color .8s var(--e-out)}
.se-soc-cal-y:empty{display:none}
.se-soc-cal-r{display:grid;justify-items:end;row-gap:6px}
.se-soc-cal-cad{margin:0;max-width:56ch;font-size:15px;line-height:1.45;color:var(--fg-2);text-align:right;transition:color .8s var(--e-out)}
.se-soc-cal-themes{font-size:13px;color:var(--fg-3)}
/* seven hairline columns of 192.6px, no gaps, a 32px weekday row at Tag, always five rows of 120px */
.se-soc-grid{width:100%;border-collapse:collapse;table-layout:fixed}
.se-soc-grid th{height:32px;padding:0 14px;border-top:1px solid var(--fg);border-bottom:1px solid var(--line);font:500 13px/1.3 var(--text);color:var(--fg-2);text-align:left;vertical-align:middle;transition:border-color .8s var(--e-out),color .8s var(--e-out)}
.se-soc-grid th+th,.se-soc-d+.se-soc-d{border-left:1px solid var(--line)}
.se-soc-d{position:relative;height:120px;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;transition:box-shadow .3s var(--e-out),border-color .8s var(--e-out)}
/* a day's number, printed large as a wall calendar prints it, Epilogue's figures, tabular, the folded day after its
   slash (24 over 31). The days ahead in --fg-3 and the days behind in --fg, so where today stands in the month reads
   across the room */
.se-soc-n{position:relative;display:inline-flex;align-items:baseline;font:500 clamp(18px,1.85vw,28px)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--fg);transition:color .45s var(--e-out)}
.se-soc-n1,.se-soc-nd{position:relative}
.se-soc-n2{margin-left:.3em;font-size:.72em;color:var(--fg-2)}
.se-soc-n2::before{content:"/" / "";margin-right:.28em;color:var(--fg-3)}
/* at most two entries, a mark (its 4 by 5 box, a post drawn at its own shape) and two short lines, the first at 14px
   600 and the second at Tag. A folded cell holding two entries keeps their first lines only, so its row stays 120px
   and nothing below moves */
.se-soc-es{display:grid;gap:9px;margin:12px 0 0;padding:0;list-style:none}
.se-soc-e{display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:9px;align-items:start;font-size:14px;line-height:1.28}
.se-soc-e>.se-soc-mk{grid-row:1/span 2;width:16px;height:20px}
.se-soc-es:has(>:nth-child(2)) .se-soc-e-f{display:none}
.se-soc-e-t{font-weight:600;color:var(--fg);transition:color .45s var(--e-out)}
.se-soc-e-f{font-size:13px;color:var(--fg-2)}
.se-soc-mk{display:block;flex:none;color:var(--fg);overflow:visible;transition:color .45s var(--e-out)}
.se-soc-mk *{vector-effect:non-scaling-stroke}
/* the report's drawn full stop, the calendar's one red point */
.se-soc-stop{transform-origin:50% 60%}
/* the real month, the days behind done in --fg with their marks filled, the days ahead scheduled in --fg-3, today ringed */
.se-soc-d.is-done .se-soc-mk rect{fill:currentColor;fill-opacity:.16}
.se-soc-d.is-ahead .se-soc-n{color:var(--fg-3)}
.se-soc-d.is-ahead .se-soc-e-t{color:var(--fg-2)}
.se-soc-d.is-ahead .se-soc-mk{color:var(--fg-3)}
.se-soc-ring{position:absolute;left:50%;top:50%;width:1.75em;height:1.75em;transform:translate(-50%,-52%);pointer-events:none}
.se-soc-nd>.se-soc-ring{width:2.3em;height:2.3em}
.se-soc-ring svg{display:block;width:100%;height:100%;overflow:visible}
.se-soc-ring circle{fill:none;stroke:var(--fg);stroke-width:1}
.se-soc-today{position:absolute;top:13px;right:14px;font:500 12px/1.3 var(--text);color:var(--fg-2)}
/* a day with an entry is a button over its cell, its rule turning --fg when it is the day in focus (0.3s) */
.se-soc-b{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;cursor:pointer;appearance:none}
.se-soc-b:focus-visible{outline:2px solid var(--red);outline-offset:-3px}
.se-soc-d.is-entry:hover{box-shadow:inset 0 0 0 1px var(--fg-3)}
.se-soc-d.is-on,.se-soc-d.is-on:hover{box-shadow:inset 0 0 0 1px var(--fg)}
/* an include lights its days, the rest dim to 40 percent */
.se-soc-d>.se-soc-n,.se-soc-d>.se-soc-es{transition:opacity .3s var(--e-out),color .45s var(--e-out)}
.se-soc-cal[data-se-soc-lit] .se-soc-d:not(.is-lit)>:is(.se-soc-n,.se-soc-es){opacity:.4}
/* the day line, 56px on a 1px rule, the day in focus and the chapter that opens it */
.se-soc-day{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:56px;padding:14px 0;border-bottom:1px solid var(--line);transition:border-color .8s var(--e-out)}
.se-soc-line{flex:1;min-width:0;margin:0;font-size:16px;line-height:1.45;color:var(--fg-2);transition:opacity .3s var(--e-out),color .8s var(--e-out)}
.se-soc-line.is-swap{opacity:0}
.se-soc-line-d{font-weight:600;color:var(--fg)}
.se-soc-line-to{flex:none;margin:0}
.se-soc-line-to[hidden]{display:none}
/* the agenda is the phone's, one ruled row per day with an entry */
.se-soc-agenda{display:none}
.se-soc-cal template{display:none}
/* the three includes as thirds, 48px under, each its mark, its name at Lead, its answer at Small, the tools in the line
   they serve. The plan's own name is lit, the other two lead down to the chapters that open them */
.se-soc-inc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;margin:48px 0 0;padding:0;list-style:none}
.se-soc-inc-it{position:relative;min-width:0;padding-right:clamp(0px,2vw,36px)}
/* the key, the marks of the days an include lights, as the cells draw them, a step larger */
.se-soc-inc-mks{display:flex;align-items:flex-end;gap:10px;height:28px}
.se-soc-inc-mks .se-soc-mk{width:22.4px;height:28px}
.se-soc-inc-n{margin:16px 0 0;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;color:var(--fg)}
.se-soc-inc-a{position:relative;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .3s}
.se-soc-inc-a::after{content:"";position:absolute;inset:-10px -6px}
.se-soc-inc-a:hover{border-bottom-color:var(--red)}
.se-soc-inc-a:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.se-soc-inc-p{margin:12px 0 0;max-width:38ch;font-size:15.5px;line-height:1.5;color:var(--fg-2);text-wrap:pretty;transition:color .8s var(--e-out)}
.se-soc-inc-tools{margin:14px 0 0;font-size:15.5px;line-height:1.5;color:var(--fg-2);transition:color .8s var(--e-out)}
.se-soc-inc-tools+.se-soc-inc-tools{margin-top:6px}
.se-soc-inc-tools .se-tool{color:var(--fg)}
/* the fill's start, cells empty until the month prints day by day (social-media-content.ts), the ring undrawn and the
   report's full stop unprinted, behind the guard so the still reads without scripts */
.js:not(.no-libs):not(.rm) .se-soc-cal:not(.in) .se-soc-d>:is(.se-soc-n,.se-soc-es){opacity:0}
.js:not(.no-libs):not(.rm) .se-soc-cal:not(.in) .se-soc-stop{transform:scale(0)}
.js:not(.no-libs):not(.rm) .se-soc-cal:not(.in) .se-soc-today{opacity:0}

/* ---------- shoot, #photo-and-video ---------- */
/* a frame and a column, the sheet in 1 to 8, the words in 9 to 12, the cut standing at the column's foot */
.se-soc-shoot-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:stretch;margin-top:64px}
.se-soc-sheet{grid-column:1/span 8;align-self:start}
.se-soc-shoot-col{grid-column:9/span 4;display:flex;flex-direction:column;min-width:0}
.se-soc-two{margin:0;max-width:30ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;color:var(--fg-2);text-wrap:pretty;transition:color .8s var(--e-out)}
.se-soc-two-a{color:var(--fg);transition:color .8s var(--e-out)}
.se-soc-ans{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);transition:border-color .8s var(--e-out)}
.se-soc-two+.se-soc-ans{margin-top:40px}
.se-soc-ans--video{order:4;margin-bottom:36px}
.se-soc-ans-n{margin:0;font:600 15px/1.3 var(--text);color:var(--fg)}
.se-soc-ans-a{margin:8px 0 0;max-width:42ch;font-size:16px;line-height:1.6;color:var(--fg-2);text-wrap:pretty;transition:color .8s var(--e-out)}
.se-soc-ans-a .se-tool{color:var(--fg)}
.se-soc-cut{order:5;margin-top:auto}
/* a build shows the pieces once filled, so without them the column's words collapse into 1 to 8, the line over the
   two answers side by side */
.se-soc-shoot-in:not(:has(.se-motion)) .se-soc-shoot-col{grid-column:1/span 8;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.se-soc-shoot-in:not(:has(.se-motion)) .se-soc-two{grid-column:1/-1;max-width:34ch}
.se-soc-shoot-in:not(:has(.se-motion)) .se-soc-ans{margin:40px 0 0}

/* ---------- voice, #posts-in-your-voice, draft rows (a demonstration, dev until D3) ---------- */
.se-soc-drafts{margin:56px 0 0;padding:0;list-style:none;border-bottom:1px solid var(--line);transition:border-color .8s var(--e-out)}
.se-soc-draft{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;min-height:120px;padding:28px 0;border-top:1px solid var(--line);transition:border-color .8s var(--e-out)}
.se-soc-draft-n{grid-column:1;display:flex;flex-direction:column;gap:4px;margin:0;padding-top:.35em;font-size:13px;line-height:1.3}
.se-soc-draft-name{font-weight:600;color:var(--fg)}
.se-soc-draft-s{color:var(--fg-3)}
.se-soc-draft-c{grid-column:2/span 6;min-width:0}
.se-soc-cap,.se-soc-cap-sq{margin:0;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;color:var(--fg);text-wrap:pretty}
.se-soc-cap-sq{margin-top:12px;color:var(--fg-2)}
.se-soc-cap-l{display:block}
.se-soc-draft-note{grid-column:8/span 2;margin:0;padding-top:.3em;font-size:15px;line-height:1.5;color:var(--fg-2);text-wrap:pretty}
.se-soc-post{grid-column:10/span 3}
/* the strike, a drawn 1px --stone line through each line of the dropped caption, an inline background that sweeps line
   by line (box-decoration-break slice), draft 2 after draft 1. Hover fades it to 30 percent so the words can be read */
.se-soc-cap-s{--se-soc-strike:color-mix(in srgb,var(--stone) calc(var(--se-soc-sa) * 100%),transparent);color:var(--fg-2);text-decoration:none;background-image:linear-gradient(var(--se-soc-strike),var(--se-soc-strike));background-repeat:no-repeat;background-position:0 58%;background-size:100% 1px;transition:background-size .6s var(--e-out) var(--d,0s),--se-soc-sa .3s var(--e-out)}
.se-soc-draft.is-struck:hover{--se-soc-sa:.3}
/* draft 3 rises line by line once the strikes are drawn */
.se-soc-draft.is-kept .se-soc-cap-l{transition:opacity 1s cubic-bezier(.215,.61,.355,1) calc(1.15s + var(--k,0) * .12s),transform 1s cubic-bezier(.215,.61,.355,1) calc(1.15s + var(--k,0) * .12s)}
.js:not(.no-libs):not(.rm) .se-soc-drafts:not(.in) .se-soc-cap-s{background-size:0 1px}
.js:not(.no-libs):not(.rm) .se-soc-drafts:not(.in) .se-soc-draft.is-kept .se-soc-cap-l{opacity:0;transform:translateY(14px)}
.se-soc-voice-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:48px}
.se-soc-voice-foot .se-soc-two{grid-column:2/span 8;max-width:none}
.se-soc-voice-cap{grid-column:2/span 8;margin:18px 0 0;font-size:13px;line-height:1.4;color:var(--fg-3)}

/* ---------- the-month, #the-month, the month in twelve columns (a sample, dev only) ---------- */
.se-soc-row{margin-top:64px}
.se-soc-twelve{width:100%}
.se-soc-dates{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin:12px 0 0;padding:0;list-style:none;font-size:13px;line-height:1.3;color:var(--fg-3);font-variant-numeric:tabular-nums}
.se-soc-saves{margin-top:24px;width:100%}
.se-soc-month-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:64px}
.se-soc-month-two{grid-column:1/span 8;grid-row:1}
/* one 1px rule across 12 between the line and the figure with the report */
.se-soc-month-foot::before{content:"";grid-column:1/-1;grid-row:2;height:1px;margin-top:44px;background:var(--line);transition:background-color .8s var(--e-out)}
.se-soc-fig{grid-column:1/span 6;grid-row:3;padding-top:32px}
.se-soc-fig-n{margin:0;font:800 clamp(56px,6vw,104px)/.9 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.se-soc-fig-l{margin:16px 0 0;max-width:34ch;font-size:17px;line-height:1.5;color:var(--fg)}
.se-soc-fig-s{margin:6px 0 0;max-width:44ch;font-size:13px;line-height:1.4;color:var(--fg-3)}
.se-soc-rep{grid-column:7/span 6;grid-row:3;margin:0;padding-top:32px}
.se-soc-rep-it{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:24px;padding:14px 0;border-bottom:1px solid var(--line);transition:border-color .8s var(--e-out)}
.se-soc-rep-it:first-child{padding-top:0}
.se-soc-rep-k{font-size:13px;line-height:1.5;color:var(--fg-3)}
.se-soc-rep-v{margin:0;font-size:16px;line-height:1.5;color:var(--fg)}

/* ---------- runs, #how-it-runs, a line that becomes a ring ---------- */
.se-soc-runs-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;margin-top:48px}
.se-soc-runs-art{grid-column:1/span 9;min-width:0}
.se-soc-cycle{width:100%}
/* the diagram in words, two ruled lines, the start once, then the month as a 1px line that turns back under itself to
   its start, the ring drawn flat. Never filled, never red */
.se-soc-lines{display:grid;row-gap:44px}
.se-soc-cycle+.se-soc-lines{margin-top:40px}
.se-soc-way{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,7fr);column-gap:24px;align-items:start}
.se-soc-way-l{margin:0;padding-top:16px}
.se-soc-way-s{position:relative;display:flex;justify-content:space-between;gap:16px;margin:0;padding:16px 0 0;list-style:none;border-top:1px solid var(--fg);transition:border-color .8s var(--e-out)}
.se-soc-way-s li{position:relative;max-width:16ch;font-size:15.5px;line-height:1.35;color:var(--fg)}
.se-soc-way-s li::before{content:"";position:absolute;left:0;top:-21px;width:1px;height:10px;background:var(--fg);transition:background-color .8s var(--e-out)}
.se-soc-way--month .se-soc-way-s{padding:16px 16px 26px 0}
.se-soc-way--month .se-soc-way-s::after{content:"";position:absolute;inset:-1px 0 0;border:1px solid var(--fg);border-top:0;border-radius:0 0 26px 26px;pointer-events:none;transition:border-color .8s var(--e-out)}
.se-soc-way--month .se-soc-way-s li{padding-left:14px}
.se-soc-way--month .se-soc-way-s li::before{left:14px}
.se-soc-way-again{grid-column:2;margin:12px 0 0;color:var(--fg-2)}
/* the start's line runs on and drops into the month's, so the line becomes the ring, its last step clear of the drop */
.se-soc-way--start .se-soc-way-s{padding-right:32px}
.se-soc-way--start .se-soc-way-s::after{content:"";position:absolute;right:0;top:-1px;width:1px;height:calc(100% + 45px);background:var(--fg);transition:background-color .8s var(--e-out)}
.se-soc-part{grid-column:10/span 3}
.se-soc-part-l{margin:0;padding-top:2px}
.se-soc-part-list{margin:14px 0 0;padding:0;list-style:none;border-bottom:1px solid var(--line);transition:border-color .8s var(--e-out)}
.se-soc-part-list li{padding:14px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.5;color:var(--fg);text-wrap:pretty;transition:border-color .8s var(--e-out)}
.se-soc-part-d{margin:20px 0 0;font-size:15px;line-height:1.5;color:var(--fg-2)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .se-soc-stamp{grid-column:1/span 3}
  .se-soc-say{grid-column:4/span 5}
  .se-soc-vig{width:72px}
  .se-soc-plan-h{grid-column:1/-1}
  .se-soc-plan-about{grid-column:1/span 8;margin:28px 0 0}
  .se-soc-d{height:108px;padding:10px}
  .se-soc-ring{width:1.9em;height:1.9em}
  .se-soc-e-f{display:none}
  .se-soc-inc-it{padding-right:0}
  /* the sheet in 1 to 7 and the column in 8 to 12, the words a step smaller */
  .se-soc-sheet{grid-column:1/span 7}
  .se-soc-shoot-col{grid-column:8/span 5}
  .se-soc-ans-a{font-size:15.5px}
  .se-soc-shoot-in:not(:has(.se-motion)) .se-soc-shoot-col{grid-column:1/-1}
  .se-soc-draft-c{grid-column:2/span 7}
  .se-soc-draft-note{grid-column:9/span 4}
  /* the kept draft's note under its caption, the post beside both, its extra height in a last row */
  .se-soc-draft.is-kept{grid-template-rows:auto auto minmax(0,1fr)}
  .se-soc-draft.is-kept .se-soc-draft-note{grid-column:2/span 7;grid-row:2;margin-top:16px}
  .se-soc-post{grid-column:9/span 4;grid-row:1/span 3}
  .se-soc-voice-foot .se-soc-two,.se-soc-voice-cap{grid-column:1/-1}
  .se-soc-runs-art{grid-column:1/-1}
  .se-soc-part{grid-column:1/span 8;margin-top:56px}
}
@media (max-width:760px){
  /* the signs, stamp, sentence and pointer in one column, the 72 by 72 vignette beside them */
  .se-soc-sign{grid-template-columns:minmax(0,1fr) 72px;column-gap:16px;row-gap:8px;align-items:start;min-height:0;padding:22px 0}
  .se-soc-stamp,.se-soc-say,.se-soc-to{grid-column:1}
  .se-soc-say{max-width:none}
  .se-soc-to{margin-top:6px}
  .se-soc-vig{grid-column:2;grid-row:1/span 3;width:72px}
  /* the calendar compact, 358 by about 300, marks only (the words stay for screen readers in the table), then the day
     line, then the month as an agenda */
  .se-soc-plan-about{grid-column:1/-1}
  .se-soc-cal{margin-top:44px}
  .se-soc-cal-h{flex-direction:column;align-items:flex-start;gap:10px}
  .se-soc-cal-r{justify-items:start}
  .se-soc-cal-cad{text-align:left;font-size:14px}
  .se-soc-cal-themes{font-size:13px}
  .se-soc-grid th{height:30px;padding:0;text-align:center;font-size:12px}
  .se-soc-d{height:54px;padding:6px 0 0;text-align:center}
  .se-soc-n{font-size:14px}
  /* the folded day stays, tight, so a month folding today under the 24th still rings it */
  .se-soc-n2{margin-left:.1em;letter-spacing:-.04em}
  .se-soc-n2::before{margin-right:.08em}
  .se-soc-es{display:flex;justify-content:center;gap:2px;margin-top:6px}
  .se-soc-e{display:block}
  .se-soc-e>.se-soc-mk{width:12px;height:15px;margin:0}
  .se-soc-e-t,.se-soc-e-f{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .se-soc-ring{width:1.9em;height:1.9em}
  .se-soc-today{display:none}
  .se-soc-day{flex-direction:column;align-items:flex-start;gap:10px}
  .se-soc-line{font-size:15.5px}
  .se-soc-agenda{display:block;margin:20px 0 0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
  .se-soc-ag{display:grid;grid-template-columns:64px 16px minmax(0,1fr);column-gap:10px;align-items:center;min-height:44px;padding:10px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.3}
  .se-soc-ag-d{color:var(--fg-2);font-variant-numeric:tabular-nums}
  .se-soc-ag>.se-soc-mk{width:16px;height:20px}
  .se-soc-ag-t{font-weight:600;color:var(--fg)}
  .se-soc-ag-f{grid-column:3;color:var(--fg-2);font-size:13px}
  .se-soc-ag.is-ahead .se-soc-ag-t{color:var(--fg-2)}
  .se-soc-ag.is-ahead .se-soc-mk{color:var(--fg-3)}
  .se-soc-inc{grid-template-columns:minmax(0,1fr);row-gap:36px;margin-top:44px}
  .se-soc-inc-n{margin-top:14px}
  /* the shoot, the word, the sheet, the line, Photo, the cut, Video */
  .se-soc-shoot-in{margin-top:40px}
  .se-soc-sheet,.se-soc-shoot-col{grid-column:1/-1}
  .se-soc-shoot-col,.se-soc-shoot-in:not(:has(.se-motion)) .se-soc-shoot-col{display:flex;flex-direction:column;margin-top:32px}
  .se-soc-shoot-in:not(:has(.se-motion)) .se-soc-ans{margin-top:28px}
  .se-soc-shoot-in:not(:has(.se-motion)) .se-soc-shoot-col{margin-top:0}
  .se-soc-ans--video,.se-soc-cut{order:0}
  .se-soc-cut{margin-top:32px}
  /* the drafts, each its name, caption and note, the kept draft's post at full width */
  .se-soc-drafts{margin-top:40px}
  .se-soc-draft{display:flex;flex-direction:column;gap:12px;min-height:0;padding:22px 0}
  .se-soc-draft-n{flex-direction:row;gap:10px;padding-top:0}
  .se-soc-draft.is-kept .se-soc-draft-note{margin-top:0}
  .se-soc-post{width:100%;margin-top:8px}
  .se-soc-voice-foot{margin-top:36px}
  /* the month's work, a ruled list (its motion placeholder), the bars inside it, so the dates and the bare bars go */
  .se-soc-row{margin-top:40px}
  .se-soc-dates,.se-soc-saves{display:none}
  .se-soc-month-foot{margin-top:40px}
  .se-soc-month-two,.se-soc-fig,.se-soc-rep{grid-column:1/-1}
  .se-soc-month-foot::before{margin-top:32px}
  .se-soc-rep{grid-row:4;padding-top:36px}
  /* the ring, the line drops down the left, the month's line closes on itself */
  .se-soc-runs-in{margin-top:36px}
  .se-soc-way{grid-template-columns:minmax(0,1fr);row-gap:12px}
  /* the labels beside the line, never on it, so the start's drop runs clear of the month's label */
  .se-soc-way-l{padding:0 0 0 22px}
  .se-soc-way-s{flex-direction:column;gap:14px;padding:4px 0 4px 22px;border-top:0;border-left:1px solid var(--fg)}
  .se-soc-way-s li{max-width:none}
  .se-soc-way-s li::before{left:-22px;top:.65em;width:10px;height:1px}
  .se-soc-way--month .se-soc-way-s{padding:14px 26px 14px 22px}
  .se-soc-way--month .se-soc-way-s::after{inset:0 0 0 -1px;border:1px solid var(--fg);border-left:0;border-radius:0 22px 22px 0}
  .se-soc-way--month .se-soc-way-s li{padding-left:0}
  .se-soc-way--month .se-soc-way-s li::before{left:-22px}
  .se-soc-way-again{grid-column:1;margin-top:4px;padding-left:22px}
  .se-soc-way--start .se-soc-way-s::after{left:-1px;right:auto;top:100%;height:calc(44px + 12px + 19px)}
  .se-soc-part{grid-column:1/-1;margin-top:48px}
}
@media (prefers-reduced-motion:reduce){
  .se-soc-cap-s,.se-soc-draft.is-kept .se-soc-cap-l{transition:none}
}
@media (forced-colors:active){
  .se-soc-d.is-on{outline:2px solid CanvasText;outline-offset:-2px}
  .se-soc-ring circle{stroke:CanvasText}
  .se-soc-cap-s{text-decoration:line-through;background:none}
}
.se-crm-art{width:100%;height:100%;color:var(--fg);overflow:hidden}
.se-crm-art-svg{display:block;width:100%;height:100%;overflow:hidden}
.se-crm-art-line,.se-crm-art-wire{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.se-crm-art-wire{stroke:var(--fg-2)}
.se-crm-art-label{fill:var(--fg-2);color:var(--fg-2);font:500 15px var(--text);font-variant-numeric:tabular-nums}
.se-crm-art-text{fill:var(--fg);font:500 17px var(--text)}
.se-crm-art-muted{fill:var(--fg-3);font:500 12px var(--text)}
.se-crm-art-number{fill:var(--fg);font:800 70px var(--display);letter-spacing:-.055em}
.se-crm-art-deal{fill:var(--fg);font:800 16px var(--display);letter-spacing:-.04em}
.se-crm-art-display{fill:var(--fg);font:800 23px var(--display);letter-spacing:-.04em}
.se-crm-art-hidden{opacity:0}
.se-crm-art-point{fill:var(--fg);stroke:none}
.se-crm-art-stop{fill:var(--red);stroke:none;transform-box:fill-box;transform-origin:center}
span.se-crm-art-stop{display:inline-block;width:5px;height:5px;margin-left:3px;border-radius:50%;background:var(--red);vertical-align:baseline;font-size:inherit}
.se-crm-art-converge{position:relative;height:100%;display:grid;grid-template-columns:22% 40% 16%;gap:11%;align-items:center;padding:3% 4%}
.se-crm-art-sources{display:grid;gap:22px}
.se-crm-art-source{position:relative;font:500 13px var(--text);color:var(--fg-2)}
.se-crm-art-source-rule{display:block;width:100%;height:1px;margin-top:8px;background:var(--line)}
.se-crm-art-head-beams{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.se-crm-art-head-beams--phone{display:none}
.se-crm-art-record{position:relative;min-width:0}
.se-crm-art-record-title{margin:0;padding-bottom:14px;border-bottom:1px solid var(--fg);font:800 clamp(18px,2.5vw,31px)/1 var(--display);letter-spacing:-.04em}
.se-crm-art-record-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:14px}
.se-crm-art-record-cols p{margin:0}
.se-crm-art-record-cols .se-crm-art-label{font-size:12px}
.se-crm-art-record-row{padding:12px 0;border-bottom:1px solid var(--line);font:500 clamp(11px,1.2vw,15px) var(--text)}
.se-crm-art-folded{height:0;opacity:0;padding:0;overflow:hidden;border:none}
.se-crm-art-order-mark{font:800 18px var(--display);padding-top:10px;color:var(--fg-2)}
.se-crm-art-record-foot{margin:14px 0 0;font:500 13px var(--text);color:var(--fg-2)}
.se-crm-art-totals{display:grid;gap:22px}
.se-crm-art-totals>div{display:grid;gap:5px}
.se-crm-art-totals .se-crm-art-label{font-size:12px}
.se-crm-art-roll{display:block;height:1em;overflow:hidden;font:800 clamp(28px,3vw,42px)/1 var(--display);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.se-crm-art-roll-strip{display:flex;flex-direction:column}
.se-crm-art-roll-strip span{display:block;height:1em;line-height:1em}
.se-crm-art-roll-strip--two{transform:translateY(-50%)}
.se-crm-art-roll-strip--four{transform:translateY(-75%)}
.se-crm-art-stock{height:100%;padding:5% 6%;display:grid;grid-template-columns:1fr 1fr;column-gap:12%;grid-template-rows:auto 1px 1fr auto;row-gap:15px}
.se-crm-art-stock-head{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between}
.se-crm-art-roll--stock{font-size:clamp(35px,5vw,68px)}
.se-crm-art-stock-rule{grid-column:1/-1;height:1px;background:var(--fg);transform-origin:left}
.se-crm-art-stock-orders{margin:0;padding:0;list-style:none;display:grid;align-content:start;gap:11px}
.se-crm-art-stock-orders li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font:500 clamp(11px,1.2vw,15px) var(--text);color:var(--fg-2)}
.se-crm-art-stock-places{display:grid;align-content:start;gap:11px}
.se-crm-art-stock-places>div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font:500 clamp(11px,1.2vw,15px) var(--text)}
.se-crm-art-reorder{grid-column:1/-1;margin:0;font:800 clamp(17px,2.2vw,27px) var(--display);letter-spacing:-.035em}
.se-crm-art-process{height:100%;padding:3% 0}
.se-crm-art-process ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;height:100%;padding:0;margin:0;list-style:none}
.se-crm-art-process li{min-width:0;padding-right:20px}
.se-crm-art-process p{margin:0;font:500 clamp(12px,1.4vw,19px) var(--text)}
.se-crm-art-process-rule{position:relative;display:block;height:1px;background:var(--fg);margin:15px 0 12px;transform-origin:left}
.se-crm-art-process-rule::before{content:"";position:absolute;left:0;bottom:0;width:1px;height:10px;background:var(--fg)}
.se-crm-art-process .se-crm-art-process-part{font-size:clamp(10px,1.1vw,14px);color:var(--fg-2)}
.se-crm-art-train{display:block;padding-top:7px;font:500 13px var(--text);letter-spacing:3px;color:var(--fg-2)}
@media(max-width:760px){.se-crm-art-converge{padding:6% 7%;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;gap:0}.se-crm-art-sources{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;align-self:start}.se-crm-art-source{font-size:9px}.se-crm-art-source-rule{margin-top:5px}.se-crm-art-head-beams--wide{display:none}.se-crm-art-head-beams--phone{display:block}.se-crm-art-record{width:100%;align-self:center;padding-top:25px}.se-crm-art-record-title{font-size:29px}.se-crm-art-record-cols{gap:24px}.se-crm-art-record-row{font-size:12px;padding:13px 0}.se-crm-art-totals{display:grid;grid-template-columns:1fr 1fr;gap:24px}.se-crm-art-totals>div{display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid var(--line);padding-top:10px}.se-crm-art-roll{font-size:35px}.se-crm-art-stock{row-gap:9px;padding:5% 6%}.se-crm-art-stock-head>.se-crm-art-label{font-size:12px}.se-crm-art-stock-orders,.se-crm-art-stock-places{gap:4px}.se-crm-art-stock-orders li,.se-crm-art-stock-places>div{padding:7px 0}.se-crm-art-reorder{font-size:20px}.se-crm-art-process{padding:5% 10%}.se-crm-art-process ol{grid-template-columns:1fr;gap:0}.se-crm-art-process li{position:relative;padding:0 0 12px 25px}.se-crm-art-process p{font-size:17px}.se-crm-art-process .se-crm-art-process-part{font-size:12px;margin-top:4px}.se-crm-art-process-rule{position:absolute;top:0;bottom:0;left:0;width:1px;height:auto;margin:0;transform-origin:top}.se-crm-art-process-rule::before{width:10px;height:1px;bottom:auto;top:0}.se-crm-art-train{position:absolute;right:0;top:0;font-size:11px}}
/* /services/crm-erp-systems/, One record, the service's own stylesheet (research/service/design/spec.md section 7),
   imported by Entry.astro after service.css. Classes se-crm- only, sections in page order, start states only behind
   .js:not(.no-libs):not(.rm), responsive rules at the end. A part is placed through the class given to it, never styled
   by its own class. Colours from the tokens, every one following the section's ground (body[data-bg]).
   The material is a ledger, rows on 1px rules and tabular figures. The art direction is the beam, a 1px line from a
   cause to its effect, drawn in --fg and fading to --line once the effect has landed. The only red is a drawn .se-stop
   at the end of a beat (the reorder note, After's end, Go live), never a circle the size of the dot.
   No KPI tiles, side bar, status pills or chart junk anywhere, never the homepage's CRM card. */

/* ---------- the signs, inside the head's section ---------- */
/* halves, 1 to 6 and 7 to 12, each its vignette in its first three columns and its words in its last three */
.se-crm-halves{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:48px;margin:clamp(28px,5vh,56px) 0 0;padding:0;list-style:none}
.se-crm-half{grid-column:span 6;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:24px;align-items:stretch;min-width:0}
.se-crm-vig{grid-column:1/span 3;align-self:start}
.se-crm-half-w{grid-column:4/span 3;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.se-crm-half-n{display:block;margin-bottom:14px;font-variant-numeric:tabular-nums}
.se-crm-half-s{margin:0;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;color:var(--fg);text-wrap:pretty;transition:color .8s var(--e-out)}
.se-crm-turn{color:var(--fg-2);transition:color .8s var(--e-out)}
.se-crm-half-a{margin:auto 0 0;padding-top:22px}
/* without their vignettes (a build, Show the build) the words carry the halves alone, said at Statement with more air
   above, which keeps the title's full stop and One picture.'s a screen apart under the type only head */
.se-crm-halves:not(:has(.se-motion)){margin-top:clamp(48px,9vh,96px)}
.se-crm-halves:not(:has(.se-motion)) .se-crm-half-w{grid-column:1/-1}
.se-crm-halves:not(:has(.se-motion)) .se-crm-half-s{max-width:15ch;font:700 clamp(30px,4.35vw,74px)/1.06 var(--display);letter-spacing:-.038em}
.se-crm-halves:not(:has(.se-motion)) .se-crm-half-a{padding-top:clamp(28px,4vh,44px)}

/* ---------- get, One picture., the record and its tab row ---------- */
/* the word in 1 to 8, the content's about in 9 to 12 standing on its baseline */
.se-crm-get-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
.se-crm-get-h{grid-column:1/span 8;grid-row:1}
.se-crm-about{grid-column:9/span 4;grid-row:1;margin:0 0 .35em;max-width:36ch;font-size:17px;line-height:1.55;color:var(--fg-2);text-wrap:pretty;transition:color .8s var(--e-out)}
/* the frame across 12, its 1px ring and 18px corners, 24px inside. Its panels share one cell, so a tab press never
   moves the tab row, the closed ones hidden only while the tabs work (scripts and libraries) */
.se-crm-rec{display:flex;flex-direction:column;margin-top:clamp(36px,6vh,56px)}
.se-crm-frame{position:relative;padding:24px;border-radius:18px}
.se-crm-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none;transition:box-shadow .8s var(--e-out)}
.js:not(.no-libs) .se-crm-frame{display:grid}
.js:not(.no-libs) .se-crm-panel{grid-area:1/1}
.js:not(.no-libs) .se-crm-panel:not(.is-open){visibility:hidden}
.se-crm-panel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:stretch;min-width:0}
.se-crm-panel:focus{outline:none}
.se-crm-panel:focus-visible{outline:2px solid var(--red);outline-offset:6px;border-radius:12px}
/* a panel's name, read only when the panels stand stacked without their tabs */
.se-crm-pname{grid-column:1/-1;margin:0 0 24px;font:800 clamp(24px,2.05vw,34px)/.95 var(--display);letter-spacing:-.04em}
.se-crm-pname-n{margin-right:10px;font-variant-numeric:tabular-nums;vertical-align:.35em}
.js:not(.no-libs) .se-crm-pname{display:none}
:is(html:not(.js),.no-libs) .se-crm-panel+.se-crm-panel{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.se-crm-pw{grid-column:1/span 4;display:flex;flex-direction:column;justify-content:space-between;gap:32px;min-width:0;padding:6px 12px 2px 4px}
.se-crm-answer{margin:0;max-width:22ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;color:var(--fg);text-wrap:pretty}
.se-crm-tools{margin:0;max-width:34ch;font-size:15.5px;line-height:2;color:var(--fg-2);text-wrap:pretty;transition:color .8s var(--e-out)}
.se-crm-pm{grid-column:5/span 8}
/* in a build, before the pieces exist, the answers alone, at Brief in 1 to 8, the tool sentence in 9 to 12 */
.se-crm-panel:not(:has(.se-motion)) .se-crm-pw{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;padding:clamp(16px,3vh,32px) 8px clamp(16px,3vh,32px) 8px}
.se-crm-panel:not(:has(.se-motion)) .se-crm-answer{grid-column:1/span 8;max-width:28ch;font:500 clamp(26px,2.6vw,40px)/1.25 var(--text);letter-spacing:-.012em}
.se-crm-panel:not(:has(.se-motion)) .se-crm-tools{grid-column:9/span 4}
/* a tab press, the panel fill (rubric, panel fill 0.3s) and the answer fading up */
.se-crm-panel.is-fill .se-crm-pm{animation:se-crm-fill .3s cubic-bezier(.4,0,.2,1) both}
.se-crm-panel.is-fill .se-crm-pw{animation:se-crm-up .45s var(--e-out) both}
@keyframes se-crm-fill{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}
@keyframes se-crm-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* the tab row on its 1px rule across 12, the way a spreadsheet keeps its sheets under the sheet, four tabs of three
   columns, the open one's rule in --fg, drawn from its left like a beam. Only while the tabs work */
.se-crm-tabs{display:none}
.js:not(.no-libs) .se-crm-tabs{order:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px;margin-top:20px;border-top:1px solid var(--line);transition:border-color .8s var(--e-out)}
.se-crm-tab{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0;margin:0;padding:18px 12px 8px 0;border:0;background:none;color:var(--fg-2);font:inherit;text-align:left;cursor:pointer;transition:color .35s var(--e-out)}
.se-crm-tab::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--fg);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--e-out)}
.se-crm-tab.is-open::before{transform:none}
.se-crm-tab::after{content:"";position:absolute;inset:-6px -10px -10px}
.se-crm-tab:hover,.se-crm-tab.is-open{color:var(--fg)}
.se-crm-tab:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.js:not(.no-libs) .se-crm-tabs{counter-reset:se-crm-tab}
.se-crm-tab{counter-increment:se-crm-tab}
.se-crm-tab-n{font-variant-numeric:tabular-nums;color:inherit}
.se-crm-tab-n::before{content:counter(se-crm-tab,decimal-leading-zero)}
.se-crm-tab-t{font:800 clamp(22px,2.05vw,34px)/.95 var(--display);letter-spacing:-.04em;text-wrap:balance}

/* ---------- sale, One sale., the signature ---------- */
/* a 5 and 7 split, stepped. The word in 1 to 5 on the first row, the shop's name standing on its baseline in 6 to 12,
   the stage hanging from it, the two tone line beside the stage's top and the button, the narration and the caption
   on the stage's foot */
.se-crm-sale-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto auto 1fr auto;column-gap:24px;margin-top:clamp(28px,5vh,56px)}
.se-crm-sale-h{grid-column:1/span 5;grid-row:1/span 2;margin-top:0}
.se-crm-shop{grid-column:6/span 7;grid-row:2;align-self:end;margin:0 0 14px;display:flex;align-items:baseline;gap:10px}
.se-crm-sale-lead{grid-column:1/span 5;grid-row:3;align-self:start;margin:clamp(28px,4.5vh,44px) 0 0;max-width:24ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;color:var(--fg);text-wrap:pretty;transition:color .8s var(--e-out)}
.se-crm-sale-do{grid-column:1/span 5;grid-row:5;align-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding-top:clamp(32px,5vh,48px)}
.se-crm-sell{border:0;cursor:pointer;font-family:var(--text)}
.se-crm-sell:hover{transform:translateY(-2px)}
.se-crm-sell:focus-visible{outline:2px solid var(--red);outline-offset:4px}
/* the button does its work only with scripts and the libraries, so it is not there without them */
:is(html:not(.js),.no-libs) .se-crm-sell{display:none}
.se-crm-said{margin:0;min-height:3em;max-width:34ch;font-size:15.5px;line-height:1.5;color:var(--fg-2);text-wrap:pretty;transition:color .8s var(--e-out)}
.se-crm-cap{margin:0;font-size:13px;line-height:1.4;color:var(--fg-2);transition:color .8s var(--e-out)}
/* the stage, 4 to 3, its rows and columns the geometry's fractions (Sale.astro), so the beams' SVG, scaled to the
   same box, meets every pane. Its type follows its own width (container units), so it reads at every width */
.se-crm-stage{position:relative;grid-column:6/span 7;grid-row:3/span 3;align-self:start;display:grid;grid-template-rows:var(--rows);grid-template-columns:var(--cols);aspect-ratio:4 / 3;container-type:inline-size;font-size:clamp(11.5px,1.85cqi,15px);line-height:1.35}
.se-crm-beams{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none}
.se-crm-beams--phone{display:none}
.se-crm-wire,.se-crm-run{fill:none;stroke-width:1.3;stroke-linecap:round}
.se-crm-beams--phone :is(.se-crm-wire,.se-crm-run){stroke-width:2.4}
.se-crm-wire{stroke:var(--line);transition:stroke .8s var(--e-out)}
.se-crm-run{stroke:var(--fg);stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0}
/* the sale row across the top, its number and time rolling, Waiting for a sale before the first */
.se-crm-row{position:relative;grid-row:1;grid-column:1/-1;display:flex;align-items:center;gap:2.6cqi;min-width:0;padding:0 2.8cqi;border-radius:10px;background:var(--se-panel);transition:background-color .8s var(--e-out)}
.se-crm-row::after,.se-crm-view::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none;transition:box-shadow .8s var(--e-out)}
.se-crm-row-l{flex:none;font-size:clamp(11px,1.8cqi,15px)}
.se-crm-row-cut{display:grid;flex:1;align-items:center;min-width:0;height:100%;overflow:hidden}
.se-crm-row-wait,.se-crm-row-in{grid-area:1/1;min-width:0}
.se-crm-row-wait{color:var(--fg-3);opacity:0;transition:opacity .45s var(--e-out),color .8s var(--e-out)}
.se-crm-row-in{display:flex;align-items:center;gap:2.4cqi;font-size:clamp(13px,2.35cqi,19px);font-weight:500;white-space:nowrap}
.se-crm-row-no{font-weight:600;color:var(--fg)}
.se-crm-row-what{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--fg)}
.se-crm-row-time{color:var(--fg-2)}
[data-se-crm-sold="0"] .se-crm-row-wait{opacity:1}
[data-se-crm-sold="0"] .se-crm-row-in{opacity:0}
/* the four views, each a --se-panel pane, its ring brightening to --fg as its beam lands and fading back */
.se-crm-view{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;padding:2.6cqi 2.8cqi;border-radius:10px;background:var(--se-panel);transition:background-color .8s var(--e-out)}
.se-crm-view.is-hit::after{box-shadow:inset 0 0 0 1px var(--fg);transition-duration:.15s}
.se-crm-view--customer{grid-row:3;grid-column:1}
.se-crm-view--orders{grid-row:3;grid-column:3}
.se-crm-view--stock{grid-row:5;grid-column:1}
.se-crm-view--today{grid-row:5;grid-column:3}
.se-crm-view-l{flex:none;margin:0 0 1.6cqi;font-size:clamp(11px,1.8cqi,15px)}
.se-crm-small{margin:0;font-size:clamp(11px,1.75cqi,14.5px);line-height:1.4;color:var(--fg-2);transition:color .8s var(--e-out)}
.se-crm-who{margin:0;font:800 clamp(16px,3.4cqi,30px)/1 var(--display);letter-spacing:-.035em;color:var(--fg)}
.se-crm-who-note{margin-top:.9cqi}
/* a ledger's rows, each unfolding from no height as it is added (grid rows 0 to 1), on a 1px rule */
.se-crm-list{margin:0;padding:0;list-style:none}
.se-crm-list--cust{margin-top:auto}
.se-crm-li{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--e-out)}
.se-crm-li.is-on{grid-template-rows:1fr}
.se-crm-li-in{min-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .45s var(--e-out),visibility 0s .45s}
.se-crm-li.is-on>.se-crm-li-in{opacity:1;visibility:visible;transition:opacity .45s var(--e-out) .12s,visibility 0s}
.se-crm-li-c{display:flex;align-items:baseline;gap:1.6cqi;padding:.6cqi 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums;transition:border-color .8s var(--e-out)}
.se-crm-li-c>:first-child{flex:1;min-width:0}
.se-crm-li-no{flex:none!important;color:var(--fg-2)}
.se-crm-li-w{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.se-crm-li-r{flex:none;color:var(--fg-2)}
.se-crm-short{display:none}
/* the stock, its count rolling, then the reorder note unfolding, its drawn red full stop landing last */
.se-crm-item{max-width:24ch}
.se-crm-fig{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4em 1.4cqi;margin:auto 0 0}
.se-crm-fig-n{font:800 clamp(34px,9cqi,76px)/1 var(--display);letter-spacing:-.05em;color:var(--fg)}
.se-crm-unit{color:var(--fg-2);transition:color .8s var(--e-out)}
.se-crm-note{display:grid;grid-template-rows:0fr;margin:0;transition:grid-template-rows .45s var(--e-out)}
.se-crm-note.is-on{grid-template-rows:1fr}
.se-crm-note-in{min-height:0;overflow:hidden}
.se-crm-note-c{display:block;margin-top:1.4cqi;padding-top:1cqi;border-top:1px solid var(--line);font-size:clamp(12px,2.15cqi,17px);font-weight:600;line-height:1.3;color:var(--fg);transition:border-color .8s var(--e-out)}
.se-crm-stop{transform:scale(.96);transition:transform .45s cubic-bezier(.3,1.7,.5,1) .3s}
.se-crm-note:not(.is-on) .se-crm-stop{transform:scale(0);transition-delay:0s}
/* today, its count rolling, a bar per hour from 08 to 17, the hour of the last sale in --fg */
.se-crm-view--today .se-crm-fig{margin:0}
.se-crm-day{display:flex;flex-direction:column;gap:.8cqi;margin-top:auto}
.se-crm-bars{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));align-items:end;gap:1cqi;height:7.5cqi;border-bottom:1px solid var(--line);transition:border-color .8s var(--e-out)}
.se-crm-bar{display:block;height:100%;border-radius:2px 2px 0 0;background:var(--fg-3);transform:scaleY(var(--n,0));transform-origin:50% 100%;transition:transform .8s cubic-bezier(.215,.61,.355,1),background-color .45s var(--e-out)}
.se-crm-bar.is-now{background:var(--fg)}
.se-crm-hours{display:flex;justify-content:space-between;font-size:clamp(10.5px,1.6cqi,13px);font-variant-numeric:tabular-nums;color:var(--fg-2)}
/* a reset (Start again) and reduced motion change the views at once */
.se-crm-stage.is-snap *,.rm .se-crm-stage *{transition:none!important}

/* ---------- running, Running., the work (dev) ---------- */
/* W, the frame in 1 to 8, the line and the way to the case in 9 to 12 on the frame's foot */
.se-crm-running-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;margin-top:clamp(56px,11vh,110px)}
.se-crm-work{grid-column:1/span 8}
.se-crm-running-w{grid-column:9/span 4;display:flex;flex-direction:column;align-items:flex-start;gap:24px;min-width:0}
.se-crm-running-s{margin:0;max-width:26ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;color:var(--fg);text-wrap:pretty}
.se-crm-running-a{margin:0}

/* ---------- saved, Saved., two bars (dev) ---------- */
/* the results piece's still, two 1px framed bars on one scale, the label in 1 to 2, the bar from 3, its figure at its
   end, After's drawn red full stop at its end */
.se-crm-two-m{margin-top:clamp(40px,7vh,72px)}
.se-crm-two{position:absolute;inset:0 0 50px;display:grid;grid-template-rows:repeat(2,minmax(0,1fr));align-items:center;row-gap:8px}
.se-crm-two-r{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
.se-crm-two-l{grid-column:1/span 2}
/* the track from 3 to 12, the longer bar 72% of it, each bar its length on that scale, then its figure. Before in
   --fg-3, the hours it took, After in --fg, what is left, the stage's own language (an hour past in --fg-3, the hour
   of the sale in --fg). Square cornered like a ledger's bars, never a ring, which read as an empty field to type in */
.se-crm-two-track{position:relative;grid-column:3/-1;display:flex;align-items:center;gap:18px;min-width:0;height:clamp(26px,4vh,40px)}
.se-crm-two-fill{flex:none;width:calc(var(--len,1) * 72%);height:100%;border-radius:3px;background:var(--fg-3);transition:background-color .8s var(--e-out)}
.se-crm-two-r.is-short .se-crm-two-fill{background:var(--fg)}
.se-crm-two-stop{flex:none;align-self:flex-end;margin:0 0 2px -12px;font-size:clamp(30px,4.6vh,46px)}
.se-crm-two-fig{display:flex;flex-direction:column;gap:4px;min-width:0}
.se-crm-two-n{font:800 clamp(24px,2.05vw,34px)/.95 var(--display);letter-spacing:-.04em;white-space:nowrap;color:var(--fg)}
.se-crm-two-what{font-size:15px;line-height:1.35;color:var(--fg-2);transition:color .8s var(--e-out)}
.se-crm-src{margin:24px 0 0;max-width:60ch;font-size:15.5px;line-height:1.5;color:var(--fg-2);transition:color .8s var(--e-out)}

/* ---------- runs, How it runs, the strip ---------- */
/* the stages as lengths on one 1px rule across 12, a tick at each start, the name above at Lead, the work under it */
.se-crm-runs-m{margin-top:clamp(28px,5vh,56px)}
.se-crm-strip{margin-top:clamp(36px,6vh,64px)}
.se-crm-steps{display:grid;grid-template-columns:var(--cols);grid-template-rows:auto 1px auto auto;row-gap:18px;margin:0;padding:0;list-style:none}
/* every step on the strip's four rows (subgrid), its name standing on the rule, so the rule runs level */
.se-crm-step{grid-row:span 4;display:grid;grid-template-rows:subgrid;min-width:0;padding-right:24px}
.se-crm-step-t{align-self:end;margin:0;font:500 clamp(18px,1.75vw,27px)/1.2 var(--display);letter-spacing:-.022em;color:var(--fg);transition:color .35s var(--e-out)}
.se-crm-step-rule{position:relative;display:block;height:1px;margin-right:-24px;background:var(--line);transform-origin:0 50%;transition:transform .9s var(--e-out) var(--d,0s),background-color .8s var(--e-out)}
.se-crm-step-rule::before{content:"";position:absolute;left:0;top:-7px;width:1px;height:15px;background:var(--fg);transition:background-color .8s var(--e-out)}
.se-crm-step--end .se-crm-step-rule{background:none}
.se-crm-step-w{margin:0;max-width:26ch;font-size:15.5px;line-height:1.5;color:var(--fg-2);text-wrap:pretty;transition:color .35s var(--e-out)}
.se-crm-rows{display:flex;align-items:baseline;gap:6px;margin:0;font-size:15.5px;color:var(--fg)}
.se-crm-rows-n{font-weight:600}
.se-crm-end-stop{transition:transform .45s cubic-bezier(.3,1.7,.5,1) calc(var(--d,0s) + .6s)}
.js:not(.no-libs):not(.rm) .se-crm-step:not(.in) .se-crm-step-rule{transform:scaleX(0)}
.js:not(.no-libs):not(.rm) .se-crm-step:not(.in) .se-crm-end-stop{transform:scale(0)}
/* a stage pointed at keeps its words, the others fall back */
.se-crm-steps:has(.se-crm-step:hover) .se-crm-step:not(:hover) :is(.se-crm-step-t,.se-crm-step-w){color:var(--fg-3)}
/* your part on its own rule, the second ruled line */
.se-crm-yours{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:clamp(40px,7vh,72px);padding-top:15px;border-top:1px solid var(--line);transition:border-color .8s var(--e-out)}
.se-crm-yours-l{grid-column:1/span 2;margin:0}
.se-crm-yours-w{grid-column:3/span 7;min-width:0}
.se-crm-yours-t{margin:0;max-width:40ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;color:var(--fg-2);text-wrap:pretty;transition:color .8s var(--e-out)}
.se-crm-yours-takes{margin:14px 0 0;font-size:15.5px;line-height:1.5;color:var(--fg-2)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  /* the record, the about under the word, the answer in 1 to 5 */
  .se-crm-get-h{grid-column:1/-1}
  .se-crm-about{grid-column:1/span 8;grid-row:2;margin:24px 0 0}
  .se-crm-pw{grid-column:1/span 5}
  .se-crm-pm{grid-column:6/span 7}
  /* the sale, the word and the line over the stage in 1 to 9, the button, the narration and the caption beside the
     stage's foot in 10 to 12, so the reader's press and the four views it changes share one screen (a stage across
     12 under the button stood a screen below it at 1024 by 768) */
  .se-crm-sale-in{grid-template-rows:none}
  .se-crm-sale-h{grid-column:1/-1;grid-row:1}
  .se-crm-sale-lead{grid-column:1/span 8;grid-row:2;max-width:34ch}
  .se-crm-shop{grid-column:1/span 9;grid-row:3;margin-top:clamp(36px,6vh,56px)}
  .se-crm-stage{grid-column:1/span 9;grid-row:4}
  .se-crm-sale-do{grid-column:10/span 3;grid-row:4;gap:14px;padding-top:0}
  .se-crm-running-w{grid-column:9/span 4}
  .se-crm-two-fill{width:calc(var(--len,1) * 62%)}
  /* the piece's place is lower than a row of two lines, so the figure stands alone (the words are said in full above) */
  .se-crm-two-what{display:none}
}
@media (max-width:760px){
  /* the signs stacked, each vignette 358 by 268 over its sentence */
  .se-crm-halves{grid-template-columns:minmax(0,1fr);row-gap:44px}
  .se-crm-half{grid-column:1/-1;display:flex;flex-direction:column;align-items:stretch}
  .se-crm-vig{align-self:stretch;margin-bottom:22px}
  .se-crm-half-w{align-items:flex-start}
  .se-crm-halves:not(:has(.se-motion)) .se-crm-half-s{max-width:none}
  /* the record, the tabs above the frame as a 2 by 2 ruled grid, the open panel its answer then its piece */
  .se-crm-get-top{display:block}
  .se-crm-about{margin-top:20px}
  .js:not(.no-libs) .se-crm-tabs{order:0;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;margin:0 0 20px;border-top:0}
  .se-crm-tab{gap:8px;padding:12px 8px 14px 0;border-top:1px solid var(--line)}
  .se-crm-tab-t{font-size:20px}
  .se-crm-frame{padding:14px}
  .se-crm-panel,.se-crm-panel:not(:has(.se-motion)) .se-crm-pw{display:flex;flex-direction:column}
  .se-crm-pw{gap:20px;padding:6px 4px 20px}
  .se-crm-panel:not(:has(.se-motion)) .se-crm-pw{gap:24px;padding:8px 4px}
  .se-crm-panel:not(:has(.se-motion)) .se-crm-answer{font-size:24px}
  /* the sale, the word, the line, the stage 358 by 448, the button full width, the narration, the caption */
  .se-crm-sale-in{display:flex;flex-direction:column;align-items:stretch}
  .se-crm-sale-h{order:1}
  .se-crm-sale-lead{order:2;align-self:stretch}
  .se-crm-shop{order:3;align-self:stretch;margin:32px 0 12px}
  .se-crm-stage{order:4;align-self:stretch;width:100%;aspect-ratio:4 / 5;grid-template-rows:var(--prows);grid-template-columns:var(--pcols)}
  .se-crm-sale-do{order:5;align-self:stretch;display:flex;flex-direction:column;align-items:stretch;gap:14px;padding-top:24px}
  .se-crm-sell{justify-content:center}
  .se-crm-beams--wide{display:none}
  .se-crm-beams--phone{display:block}
  .se-crm-stage{font-size:11.5px}
  .se-crm-row{gap:8px;padding:0 10px}
  .se-crm-row-in{gap:8px;font-size:12.5px}
  .se-crm-view{padding:9px 10px}
  .se-crm-view-l{margin-bottom:5px}
  .se-crm-who{font-size:15px}
  .se-crm-who-note{display:none}
  .se-crm-long{display:none}
  .se-crm-short{display:inline}
  .se-crm-li-c{gap:6px;padding:3px 0}
  .se-crm-item{font-size:11px}
  .se-crm-fig-n{font-size:34px}
  .se-crm-unit{font-size:11px}
  .se-crm-note-c{margin-top:5px;padding-top:4px;font-size:11px;line-height:1.3}
  .se-crm-bars{height:22px;gap:3px}
  /* the work, the word, the frame, the line, the link */
  .se-crm-running-in{display:flex;flex-direction:column;align-items:stretch;gap:72px;margin-top:80px}
  .se-crm-running-w{gap:32px}
  /* the bars 358 wide, each its label over it and its figure under it */
  .se-crm-two{row-gap:6px}
  .se-crm-two-r{display:flex;flex-direction:column;align-items:stretch;gap:6px}
  .se-crm-two{inset:0 0 40px}
  .se-crm-two-track{height:18px;gap:12px}
  .se-crm-two-fill{width:calc(var(--len,1) * 50%)}
  .se-crm-two-stop{margin:0 0 1px -8px;font-size:22px}
  .se-crm-two-n{font-size:20px}
  .se-crm-two-what{display:none}
  /* the strip stands upright, its rule on the left, a tick at each stage */
  .se-crm-steps{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:0}
  .se-crm-step{grid-row:auto;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;row-gap:8px;padding:0 0 28px}
  .se-crm-step-t,.se-crm-step-w,.se-crm-rows{grid-column:2}
  /* the rule 7px into its column, so its ticks stay inside the content edge */
  .se-crm-step-rule{grid-column:1;grid-row:1/span 3;width:1px;height:auto;margin:10px 0 -38px 7px;transform-origin:50% 0}
  .se-crm-step--end .se-crm-step-rule{margin-bottom:0}
  .se-crm-step-rule::before{left:-7px;top:0;width:15px;height:1px}
  .js:not(.no-libs):not(.rm) .se-crm-step:not(.in) .se-crm-step-rule{transform:scaleY(0)}
  .se-crm-yours{display:flex;flex-direction:column;gap:12px}
}
/* a narrow stage (a tablet's 1 to 9, a phone on its side) says its rows short, as the phone does */
@container (max-width:620px){
  .se-crm-who-note,.se-crm-long{display:none}
  .se-crm-short{display:inline}
}
@media (forced-colors:active){
  .se-crm-frame::after,.se-crm-row::after,.se-crm-view::after{box-shadow:none;border:1px solid CanvasText}
  .se-crm-wire,.se-crm-run{stroke:CanvasText}
  .se-crm-bar,.se-crm-two-fill{background:CanvasText}
  .se-crm-tab.is-open::before,.se-crm-step-rule,.se-crm-step-rule::before{background:CanvasText}
}
/* /services/hosting-care/, Last night's copy, the service's own stylesheet (research/service/design/spec.md section 8),
   imported by Entry.astro after service.css. Classes se-host- only. It places the shared parts through the classes
   given to them (se-host-get-h, se-host-row-m and the rest) and never styles a part's own class. Hour.astro writes
   Digits' strips with their own classes so the template's stylesheet rolls them, and only its separator is styled here.
   Sections in page order, start states only behind .js:not(.no-libs):not(.rm), responsive rules at the end. Colours
   from the theme tokens, so every piece follows its section's ground (ink or paper), --stone for what is past or
   broken. The one red is the shared .se-stop, on the log's 03:14 line and on Today's tick, never near a station.
   Values are the site's and docs/14's (the type levels by name, 1px rules, 10px and 18px corners, the 0.15s row
   stagger) unless a comment gives the reason. */

/* ---------- the head's side, the live time in Tirana ---------- */
/* a plain .clock that src/common/clock.ts fills, tabular so the minute never shifts the line. Without scripts the
   clock cannot tell the time, so the side reads Tirana time */
.se-host-now{white-space:nowrap}
.se-host-now time{font-variant-numeric:tabular-nums}
.se-host-now-off,.se-host-now-s{display:none}
html:not(.js) .se-host-now-on{display:none}
html:not(.js) .se-host-now-off{display:inline}

/* ---------- a ring, still open or closed ---------- */
/* the signs' hour sits after a 7px hollow --stone ring, still open. The log's rows fill it, closed */
.se-host-ring{flex:none;display:inline-block;width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--stone)}
.se-host-ring.is-closed{background:currentColor;box-shadow:none}

/* ---------- an hour that rolls (Hour.astro) ---------- */
/* Digits' strips, the colon drawn from data-ch so the copy checker reads only the time in the .vh */
.se-host-sep{line-height:1}
.se-host-sep::before{content:attr(data-ch)}

/* ---------- the signs, still open ---------- */
/* thirds under their own label row, whose rule draws once at 86% (hosting-care.ts). Each third, the hour, the vignette
   (433 by 289 at 1440), the sentence at the Lead level, the way down */
.se-host-signs-h{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:15px}
.se-host-signs-h::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:0 50%;transition:transform 1.1s var(--e-out),background-color .8s var(--e-out)}
.se-host-signs-h .lbl{margin:0}
.se-host-signs-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;margin:clamp(28px,5vh,56px) 0 0;padding:0;list-style:none}
.se-host-sign{display:flex;flex-direction:column;min-width:0}
.se-host-sign-at{display:flex;align-items:center;gap:10px;margin:0;font-variant-numeric:tabular-nums}
.se-host-sign-m{margin-top:18px}
.se-host-sign-t{margin:22px 0 0;max-width:21ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;text-wrap:pretty}
.se-host-sign-a{margin:18px 0 0}
/* the rule draws once at 86% (hosting-care.ts), the thirds fill as a grid fills (service.ts, data-se-fill) */
.js:not(.no-libs):not(.rm) .se-host-signs-h:not(.in)::before{transform:scaleX(0)}
/* words only (a build, until the vignettes are filled), the head is shorter by the vignettes and the loop (h0), and
   the title's full stop came within a screen of Looked after.'s, 832px apart at 1440 by 900 with the headings at rest,
   870 at 1512 by 982, 867 at 1920 by 1080 (review of 3 October 2026). The signs keep the difference below them, so
   the two stations stay a screen apart at any height on a wide screen, nothing at 720 high or less */
/* and with no picture to carry them, the three things a business lives with are said big, at a Statement's weight, so
   the head that ships says what is still open before the log closes it */
.se-host-signs-l:not(:has(.se-host-sign-m)) .se-host-sign-t{max-width:15ch;font:700 clamp(28px,2.9vw,46px)/1.06 var(--display);letter-spacing:-.038em;text-wrap:balance}
/* (the guard itself is now the template's, service.css, the station guard of a type only head, for every page, design
   lead, 3 October 2026) */

/* ---------- get, Looked after., the night's log ---------- */
/* the chapter word right aligned in 6 to 12, the about on its baseline in 1 to 5, the note hanging under it */
.se-host-get-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
.se-host-get-h{grid-column:6/-1;grid-row:1}
.se-host-get-about{grid-column:1/span 5;grid-row:1;margin:0;max-width:30ch;padding-bottom:.08em;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;text-wrap:pretty}
.se-host-get-note{grid-column:1/span 5;grid-row:2;margin:14px 0 0;max-width:40ch;font-size:15.5px;line-height:1.5;color:var(--fg-2);transition:color .8s var(--e-out)}
/* four rows on 1px rules across 12, about 227px each at 1440, the hour, the line, the answer, the piece */
.se-host-log{margin:72px 0 0;padding:0;list-style:none}
.se-host-row{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;padding:24px 0;scroll-margin-top:calc(env(safe-area-inset-top,0px) + 96px)}
.se-host-row::before,.se-host-row:last-child::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--line);transform-origin:0 50%;transition:transform 1.1s var(--e-out) var(--d,0s),background-color .8s var(--e-out)}
.se-host-row::before{top:0}
.se-host-row:last-child::after{bottom:0}
.se-host-row>*{transition:opacity 1s cubic-bezier(.215,.61,.355,1) calc(var(--d,0s) + .12s),transform 1s cubic-bezier(.215,.61,.355,1) calc(var(--d,0s) + .12s),color .8s var(--e-out)}
.se-host-row-at{grid-column:1/span 2;display:flex;align-items:center;gap:12px;margin:0;font:800 clamp(24px,2.05vw,34px)/.95 var(--display);letter-spacing:-.04em;color:var(--fg-2)}
.se-host-row-at .se-host-ring{width:9px;height:9px}
.se-host-row-t{grid-column:3/span 3;margin:0;padding-right:16px;font:800 clamp(24px,2.05vw,34px)/.95 var(--display);letter-spacing:-.04em;text-wrap:balance}
.se-host-row-w{grid-column:6/span 4;min-width:0;padding-right:clamp(0px,2vw,32px)}
.se-host-row-a{margin:0;max-width:44ch;font-size:17px;line-height:1.55;text-wrap:pretty}
.se-host-row-o{margin:12px 0 0;font-size:15.5px;line-height:1.5;color:var(--fg-2);transition:color .8s var(--e-out)}
/* the piece keeps the placeholder's own ground change with the row's arrival */
.se-host-row-m{grid-column:10/span 3;transition:opacity 1s cubic-bezier(.215,.61,.355,1) calc(var(--d,0s) + .12s),transform 1s cubic-bezier(.215,.61,.355,1) calc(var(--d,0s) + .12s),background-color .8s var(--e-out)}
/* without its piece (a build, until the row's piece is filled), how often takes the right column, a timetable's last
   column, rather than four rows with their right quarter empty */
.se-host-row:not(:has(.se-host-row-m)) .se-host-row-w{grid-column:6/-1;display:grid;grid-template-columns:subgrid;align-items:baseline;padding-right:0}
.se-host-row:not(:has(.se-host-row-m)) .se-host-row-a{grid-column:1/span 4}
.se-host-row:not(:has(.se-host-row-m)) .se-host-row-o{grid-column:5/-1;margin:0}
/* the rows print once (hosting-care.ts), each rule drawing, its words fading up, its hour rolling in */
.js:not(.no-libs):not(.rm) .se-host-row:not(.in)::before,.js:not(.no-libs):not(.rm) .se-host-row:not(.in):last-child::after{transform:scaleX(0)}
.js:not(.no-libs):not(.rm) .se-host-row:not(.in)>*{opacity:0;transform:translateY(14px)}

/* ---------- night, Put back., the stage ---------- */
/* the chapter word in 1 to 6, the answer on its baseline in 8 to 12 */
.se-host-night-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
.se-host-night-h{grid-column:1/span 6;grid-row:1}
.se-host-night-a{grid-column:8/span 5;grid-row:1;margin:0;max-width:32ch;padding-bottom:.08em;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;text-wrap:pretty}
/* the frame in 1 to 9 over three rows, the restore column in 10 to 12 beside it, the replay at its foot, the status
   and the night's log under the frame. The escaping letter is placed in this box by hosting-care.ts */
.se-host-night-in{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto minmax(0,1fr) auto auto;column-gap:24px;margin-top:72px}
.se-host-stage{grid-column:1/span 9;grid-row:1/span 3;min-width:0;aspect-ratio:16 / 10}
.se-host-frame{position:relative;height:100%;border-radius:18px;background:var(--se-panel);overflow:hidden;container-type:inline-size;transition:background-color .8s var(--e-out)}
.se-host-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
/* the clinic's page, sized by its frame (cqi), so it is the same page at every width. 58px title at 1005px */
.se-host-pg{position:absolute;inset:0;display:flex;flex-direction:column;padding:3.6cqi 4.2cqi 3.4cqi;color:var(--fg)}
.se-host-pg-bar{display:flex;align-items:center;gap:2.6cqi;padding-bottom:1.8cqi;border-bottom:1px solid var(--line);font:500 max(11px,1.5cqi)/1.2 var(--text)}
.se-host-pg-logo{margin-right:auto;font:800 max(13px,1.9cqi)/1 var(--display);letter-spacing:-.03em}
.se-host-swap{display:inline-grid;align-items:center}
.se-host-swap>*{grid-area:1/1}
.se-host-pg-links{display:flex;gap:2.4cqi}
.se-host-pg-book>[data-se-host-word]{padding:.62em 1.1em;border-radius:999px;background:var(--fg);color:var(--bg);font-weight:600}
/* what the menu and the button read once the page is broken, their template's names, from data-raw */
.se-host-raw{visibility:hidden;opacity:0;white-space:nowrap}
.se-host-raw::before{content:attr(data-raw)}
.se-host-pg-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2cqi;flex:1;min-height:0;margin-top:4.4cqi}
.se-host-pg-copy{grid-column:1/span 7;min-width:0}
.se-host-pg-title{margin:0;font:800 5.77cqi/.95 var(--display);letter-spacing:-.045em}
.se-host-w{display:inline-block;white-space:nowrap}
.se-host-l{display:inline-block;transform-origin:50% 80%}
/* the page's own full stop, drawn in --fg, never the red one */
.se-host-pg-stop{width:.2em;height:.2em;margin-left:.04em;border-radius:50%;background:currentColor;vertical-align:baseline}
.se-host-pg-line{margin:2.2cqi 0 0;max-width:30ch;font-size:max(11px,1.6cqi);line-height:1.45;color:var(--fg-2)}
.se-host-pg-pic{grid-column:8/span 5;position:relative;min-height:0;border-radius:8px;overflow:hidden;background:var(--bg);transition:background-color .8s var(--e-out)}
.se-host-pic{position:absolute;inset:0;display:block;width:100%;height:100%}
.se-host-pic-wall{fill:var(--bg)}
.se-host-pic-win{fill:var(--se-panel);stroke:var(--fg);stroke-width:1.5;vector-effect:non-scaling-stroke}
.se-host-pic-l,.se-host-pic-floor,.se-host-pic-lamp{fill:none;stroke:var(--fg);stroke-width:1.5;vector-effect:non-scaling-stroke}
.se-host-pic-chair{fill:var(--fg)}
.se-host-torn{position:absolute;left:50%;top:50%;width:max(26px,4cqi);translate:-50% -50%;fill:none;stroke:var(--fg-3);stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke;visibility:hidden;opacity:0}
.se-host-pg-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:2.4cqi;margin-top:3cqi;padding-top:1.8cqi;border-top:1px solid var(--line)}
.se-host-pg-col{min-width:0}
.se-host-pg-col p{margin:0}
.se-host-pg-ch{font:800 max(12px,1.7cqi)/1.1 var(--display);letter-spacing:-.02em}
.se-host-pg-cp{margin-top:.5em!important;font-size:max(10.5px,1.4cqi);line-height:1.4;color:var(--fg-2)}
/* the break's type, the reader's own serif, local families only, nothing downloads under the built policy */
.se-host-night-in[data-type="fallback"] .se-host-pg,.se-host-night-in[data-type="fallback"] .se-host-esc{font-family:Georgia,'Times New Roman',Times,serif}
.se-host-night-in[data-type="fallback"] .se-host-pg *,.se-host-night-in[data-type="fallback"] .se-host-esc{font-weight:400;letter-spacing:0}
.se-host-night-in[data-type="fallback"] .se-host-pg *{font-family:inherit}
/* the 1px line that climbs the frame while the night runs back */
.se-host-scan{position:absolute;left:0;right:0;top:0;height:1px;background:var(--fg-3);visibility:hidden;opacity:0;pointer-events:none}
/* the letter that leaves the frame, over the page, placed and sized by hosting-care.ts */
.se-host-esc{position:absolute;left:var(--ex,0);top:var(--ey,0);z-index:2;display:inline-block;font:800 var(--es,58px)/.95 var(--display);letter-spacing:-.045em;color:var(--fg);transform-origin:50% 80%;visibility:hidden;opacity:0;pointer-events:none}
/* the status under the frame, live and answering, or broken in --stone, the version at its right */
.se-host-status{grid-column:1/span 9;grid-row:4;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;margin:16px 0 0;font-size:15.5px;line-height:1.5;color:var(--fg-2);transition:color .8s var(--e-out)}
.se-host-st{grid-area:1/1;display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.se-host-st--broken{color:var(--stone);visibility:hidden;opacity:0}
.se-host-ver{grid-column:3;display:inline-flex;align-items:center;gap:.35em;line-height:1;font-variant-numeric:tabular-nums}
/* the restore column, This page, as of, the big time at the Number level */
.se-host-asof{grid-column:10/span 3;grid-row:1;min-width:0}
.se-host-asof-l{margin:0}
.se-host-big{margin:12px 0 0;font:800 clamp(56px,6vw,104px)/.9 var(--display);letter-spacing:-.05em}
.se-host-rp-w{grid-column:10/span 3;grid-row:2;min-width:0;margin-top:28px}
.se-host-rp-in{position:relative}
.se-host-rp{margin:0;padding:0;list-style:none;border-top:1px solid var(--line);transition:border-color .8s var(--e-out)}
.se-host-rp-r{display:flex;align-items:center;gap:16px;height:48px;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--fg-2);transition:color .45s var(--e-out),border-color .8s var(--e-out)}
.se-host-rp-t{flex:none;width:3.2em;font-variant-numeric:tabular-nums}
.se-host-rp-x{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.se-host-rp-r[data-on="1"]{color:var(--fg);font-weight:600}
.se-host-rp-r[data-past="1"]{color:var(--stone)}
/* the playhead, two 1px --fg rules bracketing the chosen point, on the 02:00 copy at rest, moved by y */
.se-host-ph{position:absolute;left:0;right:0;top:48px;height:49px;border-top:1px solid var(--fg);border-bottom:1px solid var(--fg);pointer-events:none;transition:border-color .8s var(--e-out)}
.se-host-kept{margin:14px 0 0;font-size:15.5px;line-height:1.5;color:var(--fg-2);transition:color .8s var(--e-out)}
/* the replay, a text link's look (.se-act), at the column's foot, level with the frame's foot */
.se-host-again{grid-column:10/span 3;grid-row:3;align-self:end;margin:24px 0 0}
.se-host-replay{position:relative;padding:0 0 2px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;font:600 17px/1.4 var(--text);color:var(--fg);text-align:start;cursor:pointer;transition:border-color .3s}
.se-host-replay::after{content:"";position:absolute;inset:-10px -6px}
.se-host-replay:hover{border-bottom-color:var(--red)}
.se-host-replay:focus-visible{outline:2px solid var(--red);outline-offset:4px}
html:not(.js) .se-host-again,.no-libs .se-host-again{display:none}
/* the night's log, four lines at Body, the hours in a 64px tabular column, 08:40 in --fg-2 */
.se-host-nlog{grid-column:1/span 9;grid-row:5;margin:40px 0 0;padding:0;list-style:none;border-top:1px solid var(--line);transition:border-color .8s var(--e-out)}
.se-host-nl{display:grid;grid-template-columns:64px minmax(0,1fr);padding:12px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.55;transition:border-color .8s var(--e-out),color .8s var(--e-out)}
.se-host-nl-t{font-variant-numeric:tabular-nums;color:var(--fg-2)}
.se-host-nl:last-child{color:var(--fg-2)}

/* ---------- ninety-days, Ninety days., the dev server's only ---------- */
/* the chapter word centred and the figure centred under it, a status read out once. Right aligned, the word's station
   stood straight over Today's red full stop at the row's right end, and the block repeated the log's word right,
   words left. Centred, the two red points sit far apart, and the three chapter words of the page stand right, left,
   centre */
.se-host-ninety-top{display:flex;flex-direction:column;align-items:center;text-align:center}
.se-host-ninety-h{width:100%}
.se-host-ninety-fig{margin:28px 0 0;max-width:30ch;font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;text-wrap:balance}
.se-host-ticks-w{position:relative;margin-top:56px}
/* ninety ticks, 10px wide and about 15px apart at 1440, bottom aligned, the hitch shorter in --fg-3 with its words
   over it, Today's with a drawn red full stop. Never green squares */
.se-host-ticks{position:absolute;left:0;right:0;top:24px;bottom:0;display:grid;grid-template-columns:repeat(90,minmax(0,1fr));column-gap:5px;align-items:end}
.se-host-tick{position:relative;display:block;height:100%;border-radius:2px;background:var(--fg);transform-origin:50% 100%;transition:background-color .8s var(--e-out)}
.se-host-tick.is-hitch{height:40%;background:var(--fg-3)}
.se-host-tick-stop{position:absolute;left:50%;top:-11px;font-size:34px;translate:-50% 0;transform-origin:50% 50%}
.se-host-hitch{position:absolute;top:0;left:calc(var(--x) * (100% - 10px));font-size:13.5px;line-height:1.3;color:var(--fg-2);white-space:nowrap;transition:opacity .3s}
/* a fine pointer reads a day, over the row where the hitch's words sit */
.se-host-read{position:absolute;top:0;left:var(--rx,0);font-size:13.5px;line-height:1.3;color:var(--fg);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s}
.se-host-ticks-m.is-reading .se-host-read{opacity:1}
.se-host-ticks-m.is-reading .se-host-hitch{opacity:0}
.se-host-ticks-m.is-reading .se-host-tick:not(.is-on){opacity:.45}
.se-host-legend{display:flex;justify-content:space-between;gap:16px;margin:12px 0 0;font-size:15.5px;color:var(--fg-2)}
.se-host-hitch-l{display:none}
/* halves, the updates in 1 to 6, the answers in 7 to 12, each indexed by its date or its time, the source across 12 */
.se-host-halves{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:40px;margin-top:72px}
.se-host-half{grid-column:span 6;min-width:0}
.se-host-half-l{margin:0}
.se-host-half-rows{margin:14px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.se-host-half-r{display:grid;grid-template-columns:8.5em minmax(0,1fr);column-gap:24px;padding:14px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.55}
.se-host-half-at{color:var(--fg-2);font-variant-numeric:tabular-nums}
.se-host-source{grid-column:1/-1;margin:0;max-width:72ch;font-size:15.5px;line-height:1.5;color:var(--fg-2)}

/* ---------- covered, the rating plate ---------- */
.se-host-plate-lead{margin:clamp(28px,5vh,56px) 0 0;max-width:calc((100% - 11 * 24px) / 12 * 8 + 7 * 24px);font:500 clamp(20px,1.75vw,27px)/1.25 var(--display);letter-spacing:-.022em;text-wrap:pretty}
/* a 1px frame with 18px corners drawn once round the plate (--L, its length, set by hosting-care.ts), a rivet in each
   corner, six cells across 12 split by 1px rules in the gutters */
.se-host-plate{position:relative;margin-top:48px}
.se-host-plate-f{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.se-host-plate-f rect{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:var(--L,none);stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--e-out),stroke .8s var(--e-out)}
.se-host-rivet{position:absolute;width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--fg-3);transition:opacity .8s var(--e-out) .5s}
.se-host-rivet--tl{left:12px;top:12px}
.se-host-rivet--tr{right:12px;top:12px}
.se-host-rivet--br{right:12px;bottom:12px}
.se-host-rivet--bl{left:12px;bottom:12px}
/* each cell spans the three rows of its row of cells (subgrid), so the labels, the values and the qualifiers of a row
   stand on shared lines, a one line value on the foot of a two line one, as a plate is engraved */
.se-host-cells{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);min-height:240px;margin:0}
.se-host-cell{position:relative;display:grid;grid-row:span 3;grid-template-rows:subgrid;min-width:0;padding:30px 24px 28px;transition:opacity .8s cubic-bezier(.215,.61,.355,1) var(--d,0s),transform .8s cubic-bezier(.215,.61,.355,1) var(--d,0s)}
.se-host-cell+.se-host-cell::before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:1px;background:var(--line);transition:background-color .8s var(--e-out)}
.se-host-cell-l{margin:0}
.se-host-val{align-self:end;margin:0;padding-top:40px;font:800 clamp(24px,2.05vw,34px)/.95 var(--display);letter-spacing:-.04em;text-wrap:balance}
.se-host-val>span{display:inline-block;width:var(--w,auto);height:var(--h,auto)}
.se-host-more{align-self:start;margin:12px 0 0;font-size:15.5px;line-height:1.5;color:var(--fg-2);text-wrap:balance;transition:color .8s var(--e-out)}
.se-host-moving{margin:40px 0 0;max-width:calc((100% - 11 * 24px) / 12 * 8 + 7 * 24px);font-size:17px;line-height:1.55;color:var(--fg-2);transition:color .8s var(--e-out)}
/* the plate arrives once at 86% (hosting-care.ts), the frame draws, the rivets show, the cells fill left to right */
.js:not(.no-libs):not(.rm) .se-host-plate:not(.in) .se-host-plate-f rect{stroke-dashoffset:var(--L,0)}
.js:not(.no-libs):not(.rm) .se-host-plate:not(.in) .se-host-rivet{opacity:0}
.js:not(.no-libs):not(.rm) .se-host-plate:not(.in) .se-host-cell{opacity:0;transform:translateY(14px)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  /* the log, the line and the answer stacked in 3 to 8, the piece in 9 to 12 */
  .se-host-get-h{grid-column:4/-1}
  .se-host-get-about,.se-host-get-note{grid-column:1/span 6}
  .se-host-row-t{grid-column:3/span 6;padding-right:0}
  .se-host-row-w{grid-column:3/span 6;grid-row:2;margin-top:14px;padding-right:0}
  .se-host-row-m{grid-column:9/span 4;grid-row:1/span 2}
  .se-host-row:not(:has(.se-host-row-m)) .se-host-row-w{grid-column:3/-1}
  .se-host-row:not(:has(.se-host-row-m)) .se-host-row-a{grid-column:1/span 6}
  .se-host-row:not(:has(.se-host-row-m)) .se-host-row-o{grid-column:7/-1}
  /* the stage, the answer under the word */
  .se-host-night-h{grid-column:1/-1}
  .se-host-night-a{grid-column:1/span 8;grid-row:2;margin-top:28px}
  .se-host-ticks{column-gap:3px}
  /* the plate in three by two, a rule between the rows */
  .se-host-cells{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;min-height:0}
  .se-host-cell:nth-child(3n+1)::before{content:none}
  .se-host-cell:nth-child(n+4)::after{content:"";position:absolute;left:24px;right:24px;top:0;height:1px;background:var(--line)}
  .se-host-cell{min-height:0}
}
@media (max-width:760px){
  /* the signs, rows with a 96px vignette beside the words, words alone without it */
  .se-host-signs-l{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .se-host-sign:has(.se-host-sign-m){display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:16px;align-content:start}
  .se-host-sign:has(.se-host-sign-m)>*{grid-column:2}
  .se-host-sign .se-host-sign-m{grid-column:1;grid-row:1/span 3;width:96px;margin:0;overflow:hidden}
  .se-host-now-w{display:none}
  .se-host-now-s{display:inline}
  html:not(.js) .se-host-now-s{display:none}
  .se-host-sign-t{margin-top:12px;max-width:none}
  .se-host-sign-a{margin-top:12px}
  /* the log, the word, the about, each row the hour and the line on one line, the answer, how often, the piece */
  .se-host-get-h{grid-column:1/-1}
  .se-host-get-about,.se-host-get-note{grid-column:1/-1;grid-row:auto;margin-top:28px;max-width:none}
  .se-host-ninety-fig{margin-top:24px}
  .se-host-get-note{margin-top:12px}
  .se-host-log{margin-top:48px}
  .se-host-row{grid-template-columns:auto minmax(0,1fr);column-gap:14px;padding:22px 0 24px}
  .se-host-row-at{grid-column:1;grid-row:1;align-self:baseline;gap:10px}
  .se-host-row-t{grid-column:2;grid-row:1;align-self:baseline}
  .se-host-row-w{grid-column:1/-1;grid-row:2;margin-top:16px}
  .se-host-row:not(:has(.se-host-row-m)) .se-host-row-w{grid-column:1/-1;display:block}
  .se-host-row:not(:has(.se-host-row-m)) .se-host-row-o{margin-top:12px}
  .se-host-row-m{grid-column:1/-1;grid-row:3;margin-top:20px}
  /* the stage, the word, the answer, the big time, the frame (358 by 448, the page as a phone page), the status, four
     restore points, the log, the replay */
  .se-host-night-a{grid-column:1/-1}
  .se-host-night-in{grid-template-columns:minmax(0,1fr);grid-template-rows:none;margin-top:40px}
  .se-host-asof{grid-column:1;grid-row:1}
  .se-host-big{font-size:56px;margin-top:6px}
  .se-host-stage{grid-column:1;grid-row:2;margin-top:20px;aspect-ratio:4 / 5}
  .se-host-status{grid-column:1;grid-row:3}
  .se-host-rp-w{grid-column:1;grid-row:4;margin-top:28px}
  .se-host-rp-r:nth-child(n+5){display:none}
  .se-host-nlog{grid-column:1;grid-row:5;margin-top:28px}
  .se-host-nl{grid-template-columns:56px minmax(0,1fr);font-size:16px}
  .se-host-again{grid-column:1;grid-row:6;margin-top:28px}
  .se-host-pg{padding:6cqi 6cqi 5.5cqi}
  .se-host-pg-bar{font-size:12px;gap:3cqi;padding-bottom:3.4cqi}
  .se-host-pg-logo{font-size:15px}
  .se-host-pg-nav{display:none}
  .se-host-pg-book{font-size:12px}
  .se-host-pg-hero{display:flex;flex-direction:column;margin-top:6cqi}
  .se-host-pg-title{font-size:9cqi;line-height:.96}
  .se-host-pg-line{margin-top:3cqi;font-size:12.5px}
  .se-host-pg-pic{flex:1;min-height:60px;margin-top:5cqi}
  .se-host-pg-cols{column-gap:3.5cqi;margin-top:5cqi;padding-top:3.4cqi}
  .se-host-pg-ch{font-size:12px}
  .se-host-pg-cp{font-size:11px}
  /* the ticks as three rows of thirty, the hitch told under the legend */
  .se-host-ticks{top:0;grid-template-columns:repeat(30,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));column-gap:4px;row-gap:14px}
  .se-host-tick-stop{top:-9px;font-size:28px}
  .se-host-hitch{display:none}
  .se-host-hitch-l{display:flex;align-items:center;gap:10px;margin:10px 0 0;font-size:15.5px;line-height:1.5;color:var(--fg-2)}
  .se-host-hitch-g{flex:none;width:7px;height:12px;border-radius:2px;background:var(--fg-3)}
  .se-host-halves{grid-template-columns:minmax(0,1fr);margin-top:48px}
  .se-host-half{grid-column:1/-1}
  .se-host-half-r{grid-template-columns:7.5em minmax(0,1fr);column-gap:16px;font-size:16px}
  /* the plate in two by three */
  .se-host-plate{margin-top:36px}
  .se-host-cells{grid-template-columns:repeat(2,minmax(0,1fr))}
  .se-host-cell{padding:22px 16px 20px}
  .se-host-cell:nth-child(3n+1)::before{content:""}
  .se-host-cell:nth-child(2n+1)::before{content:none}
  .se-host-cell:nth-child(n+4)::after{content:none}
  .se-host-cell:nth-child(n+3)::after{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;background:var(--line)}
  .se-host-cell+.se-host-cell::before{top:20px;bottom:20px}
  .se-host-val{padding-top:24px}
  .se-host-more{font-size:14.5px}
  .se-host-rivet--tl,.se-host-rivet--bl{left:9px}
  .se-host-rivet--tr,.se-host-rivet--br{right:9px}
  .se-host-rivet--tl,.se-host-rivet--tr{top:9px}
  .se-host-rivet--bl,.se-host-rivet--br{bottom:9px}
}
@media (forced-colors:active){
  .se-host-ring{box-shadow:none;border:1px solid CanvasText}
  .se-host-ring.is-closed{background:CanvasText}
  .se-host-signs-h::before,.se-host-row::before,.se-host-row:last-child::after,.se-host-cell::before,.se-host-cell::after{background:CanvasText}
  .se-host-frame::after{box-shadow:none;border:1px solid CanvasText}
  .se-host-tick{background:CanvasText}
  .se-host-tick.is-hitch{background:GrayText}
  .se-host-plate-f rect{stroke:CanvasText}
  .se-host-rivet{box-shadow:none;border:1px solid CanvasText}
  .se-host-ph{border-color:Highlight}
  .se-host-replay{border-bottom-color:CanvasText}
}
.se-host-demo{position:absolute;inset:0;color:var(--fg);font-family:var(--text);container-type:inline-size;overflow:hidden}
.se-host-demo svg{width:100%;height:100%;fill:none;overflow:visible}
.se-host-demo text{fill:var(--fg);font:16px var(--text)}
.se-host-demo text.se-host-demo-small{fill:var(--fg-2);font-size:13px}
.se-host-demo-outline,.se-host-demo-lock,.se-host-demo-ruler{stroke:var(--fg-3);stroke-width:1.2;fill:none}
.se-host-demo-lock{stroke:var(--fg);stroke-width:2}
.se-host-demo-dashes{stroke:var(--line);stroke-dasharray:4 6}
.se-host-demo-marker,.se-host-demo-segments,.se-host-demo-route,.se-host-demo-schedule{stroke:var(--fg);stroke-width:2}
.se-host-demo-node{stroke:var(--fg);stroke-width:1.5;fill:var(--se-panel)}
.se-host-demo-night{position:absolute;inset:9% 8%;display:flex;flex-direction:column;gap:8%;justify-content:space-between}
.se-host-demo-caption{font-size:clamp(10px,2.2cqw,14px);color:var(--fg-3)}
.se-host-demo-night>strong{font:800 clamp(24px,6cqw,42px)/1 var(--display);letter-spacing:-.05em}
.se-host-demo-bars{display:flex;gap:1%;align-items:flex-end;height:12%;min-height:26px}
.se-host-demo-bars>i{flex:1;height:100%;background:var(--fg);opacity:.85}.se-host-demo-bars>i.is-short{height:60%;opacity:.4}
.se-host-demo-night-log{display:flex;flex-direction:column;flex:1;justify-content:flex-end}
.se-host-demo-night-log>div{display:grid;grid-template-columns:25% 1fr;border-top:1px solid var(--line);padding:5% 0;gap:4%;font-size:clamp(11px,2.65cqw,16px)}
.se-host-demo-night-log>div>span{color:var(--fg-2)}.se-host-demo-night-log p{margin:0;text-wrap:pretty}
.se-host-demo-stop{display:inline-block;width:4px;height:4px;border-radius:50%;margin-left:3px;background:var(--red)}
.se-host-demo-waiting{position:absolute;inset:12% 13%;display:flex;flex-direction:column;gap:10%;justify-content:center;font-size:clamp(10px,3cqw,16px)}
.se-host-demo-waiting>span{color:var(--fg-2)}.se-host-demo-waiting>strong{font:800 clamp(40px,22cqw,100px)/.9 var(--display);letter-spacing:-.06em}
.se-host-demo-waiting>div{display:flex;justify-content:space-between;gap:10px;color:var(--fg-3);font-size:clamp(9px,2.8cqw,14px)}
.se-host-demo-waiting>div>span{display:flex;flex-direction:column;gap:9px;flex:1}.se-host-demo-waiting i{height:1px;background:var(--line)}
.se-host-demo--process text{stroke:none;font-size:16px}.se-host-demo-process{margin-top:48px}
.se-host-demo .se-host-demo-phone{display:none}
@media(max-width:760px){.se-host-demo .se-host-demo-phone{display:block}.se-host-demo .se-host-demo-wide{display:none}}
@media(max-width:760px){.se-host-demo-night{inset:10% 8%}.se-host-demo-night-log>div{grid-template-columns:1fr;padding:6% 0;gap:7px}}
.se-reference{position:absolute;inset:0;color:var(--fg)}
  .se-reference-video{display:block;width:100%;height:100%;min-height:0;object-fit:contain}
  .se-reference[data-error] .se-reference-video{visibility:hidden}
  .se-reference-error{position:absolute;top:40%;left:12px;right:12px;text-align:center;color:var(--fg-2);font:500 14px/1.4 var(--text)}
/* Study clips are screens to inspect, so tiny service vignettes expand while this mode is active. */
  .se-motion--study{align-self:start;background:none}
  .se-motion--study::after{content:none}
  .se-study :is(.se-web-sign-m,.se-seo-sign-m,.se-soc-vig).se-motion--study{grid-column:3/span 6;grid-row:2;width:100%;justify-self:stretch;margin-top:20px}
  @media(max-width:760px){
    .se-study :is(.se-br-sign,.se-host-sign,.se-web-sign,.se-seo-sign,.se-soc-sign):has(.se-motion--study){display:block}
    .se-study :is(.se-br-sign-m,.se-host-sign-m,.se-web-sign-m,.se-seo-sign-m,.se-soc-vig).se-motion--study{width:100%;margin:0 0 20px}
    .se-study :is(.se-web-sign-m,.se-seo-sign-m,.se-soc-vig).se-motion--study{margin:20px 0 0}
  }
/* Original films keep their source proportions and existing frame sizes.
   Only filled film frames match these rules. Approved media and the original art retain their layout. */
.se-motion.se-motion--film[data-motion-slot]{min-width:0;max-width:100%;height:auto;aspect-ratio:var(--se-film-r,var(--se-r,16 / 9));align-self:start;overflow:hidden}
.se-motion.se-motion--film .se-film{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.se-motion.se-motion--film .se-film-video{position:absolute;inset:0;display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover;object-position:var(--se-film-p,center)}
.se-motion.se-motion--film .se-film-play{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:inherit;background:transparent;color:transparent;cursor:pointer;touch-action:manipulation}
.se-motion.se-motion--film .se-film-play:focus-visible{outline:2px solid var(--red);outline-offset:-4px}
.se-br-application-film{width:min(960px,100%);margin:56px auto 0}
.se-br-application-caption{max-width:42ch;margin-top:28px}
.se-signature-film{width:min(960px,100%);margin:56px auto 0}
.se-crm-sale-film{grid-column:6/span 7;grid-row:2/span 3;min-width:0}
.se-crm-panel .se-motion--film,.se-crm-sale-film{width:100%}
.se-soc-shoot-col>.se-soc-cut.se-motion--film{width:100%}

/* Small diagnostic vignettes retain their place beside their sentences. */
.se-motion.se-motion--film[data-motion-slot*=':signs:']{aspect-ratio:var(--se-r,3 / 2)}

/* The wide CRM header is an inset film rather than a shallow crop of a full interface. */
.se-motion.se-motion--film[data-motion-slot='crm-erp-systems:head']{width:min(640px,100%);margin-inline:auto;justify-self:center}

/* The checkout source is square. Keep its complete form without making an 891px-tall hero. */
.se-motion.se-motion--film[data-motion-slot='e-commerce:head']{width:min(600px,100%);margin-inline:auto;justify-self:center}

/* A process film is separate from the original thin timeline and its words. */
.se-motion.se-motion--film[data-motion-slot$=':process']{width:min(640px,100%);margin-inline:auto;justify-self:center}
.se-br-strip:has(>.se-motion--film){grid-template-rows:auto auto minmax(64px,auto) auto}
.se-br-strip:has(>.se-motion--film)>.se-br-strip-m{grid-row:1;margin-bottom:32px}
.se-br-strip:has(>.se-motion--film) .se-br-step{grid-row:2/span 3}
.se-br-strip:has(>.se-motion--film)>.se-br-end{grid-row:3}

/* This portrait detail occupies an existing small infrastructure row. */
.se-motion.se-motion--film[data-motion-slot='hosting-care:capability:hosting-in-the-eu']{width:min(120px,100%);margin-inline:auto;justify-self:center}

/* ---------- responsive ---------- */
@media(max-width:760px){
  .se-motion.se-motion--film[data-motion-slot]{aspect-ratio:var(--se-film-rp,var(--se-film-r,var(--se-rp,var(--se-r,16 / 9))))}
  .se-motion.se-motion--film[data-motion-slot*=':signs:']{aspect-ratio:var(--se-rp,var(--se-r,3 / 2))}
  .se-motion.se-motion--film[data-motion-slot='social-media-content:head']{width:min(252px,70%);margin-inline:auto;align-self:center}
  .se-br-strip:has(>.se-motion--film)>.se-br-strip-m{margin-bottom:36px}
  .se-crm-sale-film{grid-column:1/-1;grid-row:auto;margin-top:24px}
  .se-br-application-film,.se-signature-film{margin-top:36px}
}
.se-study-extras{max-width:980px;margin-inline:auto}
  .se-study-example{margin-top:32px}