/* components part 16 of 16 — split for the host's 16KB FTP ceiling.
   Generated by split_for_ftp.py; edit the prototype, not this. */

.cardgrid.plans>.guide-card .ph{position:absolute;z-index:2;top:0;right:clamp(18px,2vw,26px);transform:translateY(-50%);
  margin:0;padding:7px 13px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;letter-spacing:.12em;line-height:1}
/* Nothing may make the page itself scroll sideways on a phone (Siim, 29 Sep). clip, not
   hidden: hidden would create a scroll container and break every sticky bar. */
html,body{overflow-x:clip}
/* Before/after sliders: a finger drags them. A native range input only moves from its
   (invisible) thumb on a touch screen, so a tap jumped and a drag did nothing. pan-y keeps
   vertical page scrolling; the script below turns horizontal movement into the position. */
.ba-range{touch-action:pan-y}
/* Gallery gaps (Siim, 29 Sep): the same gap across and down. Once JS has built columns the
   column gap is the only vertical gap; the 7px card margin stays for the no-JS fallback. */
.masonry.cols .card{margin-bottom:0}@media(max-width:760px){.masonry,.masonry .mcol{gap:6px}}@media(max-width:820px){.price-grid>.guide-card{margin-inline:calc(-1 * var(--gut));border-radius:0;padding-inline:var(--gut)}}@media(max-width:900px){
  .trust-stats,.client-logos,.client-rating{overflow-y:hidden;overscroll-behavior-x:contain}
  .client-rating .rc{padding-bottom:2px}}@media(max-width:760px){
  .tst-list{margin-inline:calc(-1 * var(--gut))}
  .tst{border-radius:0;border-inline:0}
  .tst-filters{margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut)}}

/* ---- REVIEW WALL -------------------------------------------------------------------
   Every client quote at a glance, no project images. Used on the homepage and at the top
   of /reviews/, rendered from the same STORIES data as the detailed cards (pages/_wall.py).
   CSS columns rather than grid: the quotes are different lengths and columns pack them
   without the ragged gaps a 3-track grid leaves. break-inside stops a card splitting.
   NOTE: this belongs INSIDE the main <style> block. Appending it after the last </script>
   on 12 Oct printed the whole rule set as visible body text on the live homepage and left
   the wall unstyled, with logos rendering full size. */
.wall{columns:3;column-gap:clamp(14px,1.4vw,20px)}
/* The two row groups exist only for the phone layout. On desktop they must not create a
   box, or the multicol packing would see two giant children instead of thirteen cards. */
.wall-row{display:contents}
.wq{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
    border:1px solid var(--hair);border-radius:12px;background:var(--white);
    padding:clamp(16px,1.5vw,22px);margin:0 0 clamp(14px,1.4vw,20px)}
.wq blockquote{margin:0 0 14px}
.wq p{font-size:15px;line-height:1.56;margin:0;color:var(--ink)}
/* Matched to the phrase styling on /reviews/ exactly: same red, same 500 weight, same 2px
   underline at 5px offset, so one quote cannot look different in the two places. */
/* Red only, no underline. The cards on /reviews/ underline the phrase, but on the wall
   thirteen underlined phrases at once read as clutter (Siim, 13 Oct). */
.wq strong{color:#c8102e;font-weight:500;text-decoration:none}
.wq-who{display:flex;align-items:center;gap:10px;min-width:0}
.wq-who>img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 38px}
.wq-ph{width:38px;height:38px;border-radius:50%;flex:0 0 38px;display:flex;align-items:center;justify-content:center;background:var(--grey);border:1px solid var(--hair);color:var(--faint)}
.wq-ph svg{width:18px;height:18px}
.wq-id{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.wq-id b{font-size:14px;font-weight:650;color:var(--ink)}
.wq-id span{font-size:12.5px;color:var(--ink);opacity:.6}
.wq-mk{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;max-width:92px}
.wq-mk svg{height:22px;width:auto;max-width:92px;display:block}
/* A section on a dark photo (Siim, 21 Oct: the home testimonial wall "a bit boring", wanted a dark
   background with an image under it). The same scrim idea as .pe-dark on /pricing/, at section
   scale. Put <img class="sec-bg" alt="" aria-hidden="true"> first in the section. The cards keep
   their white, so they read as lit panels on the dark ground. If the still has a loop in
   loops.py, motion.js plays it behind the scrim: a quiet, living background. */
.sec-photo{position:relative;isolation:isolate;overflow:hidden;background:#141310}
.sec-photo>.sec-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.sec-photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,12,10,.88) 0%,rgba(14,12,10,.74) 45%,rgba(14,12,10,.9) 100%)}
.sec-photo .head h2{color:#fff}
.sec-photo .head p{color:rgba(255,255,255,.82)}
.sec-photo .head .tlink{color:#fff}
.wq-mk img{max-width:92px;max-height:22px;width:auto;height:auto;display:block;
           border-radius:0;object-fit:contain}@media(max-width:980px){.wall{columns:2}}@media(max-width:780px){
  .wall{columns:auto;display:block}
  .wall-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;
            -webkit-overflow-scrolling:touch;padding-bottom:10px;scrollbar-width:thin}
  .wall-row+.wall-row{margin-top:12px}
  .wq{flex:0 0 min(76vw,300px);margin:0;scroll-snap-align:start;break-inside:auto}}


/* ---------------------------------------------------------------- legal pages
   A long numbered document is scanned, not read top to bottom, so the layout is a
   sticky contents rail beside a single measure-width column. Everything else is
   tokens and the existing .wrap/.head components — the only genuinely new thing
   here is the rail. */
.lg-wrap{padding-block:clamp(30px,4vw,54px) clamp(52px,7vw,96px)}
.lg-head{max-width:var(--measure);margin-bottom:clamp(26px,3.4vw,40px)}
.lg-head h1{margin:0 0 14px}
.lg-meta{display:flex;flex-wrap:wrap;gap:8px}
.lg-tag{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
        color:var(--muted);background:var(--grey);border-radius:999px;padding:6px 12px}
.lg-grid{display:grid;grid-template-columns:220px minmax(0,1fr);
         gap:clamp(24px,4vw,64px);align-items:start}
.lg-toc{position:sticky;top:96px;font-size:13px;line-height:1.5}
.lg-toc h2{font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.11em;
           text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.lg-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.lg-toc a{display:block;padding:4px 0;color:var(--muted);text-decoration:none;
          border-left:2px solid transparent;padding-left:10px;margin-left:-12px;
          transition:color .15s,border-color .15s}
.lg-toc a:hover,.lg-toc a:focus-visible{color:var(--ink);border-color:var(--accent)}
.lg-doc{max-width:var(--measure)}
.lg-doc .intro{font-size:clamp(16px,1.15vw,17.5px);line-height:1.65;color:var(--ink);
               padding-bottom:clamp(20px,2.6vw,30px);margin-bottom:clamp(16px,2.4vw,28px);
               border-bottom:1px solid var(--hair)}
.lg-doc section{scroll-margin-top:96px;margin-bottom:clamp(26px,3.4vw,38px)}
.lg-doc h2{font-size:clamp(18px,1.5vw,21px);margin:0 0 10px;letter-spacing:-0.01em}
.lg-doc h2 .n{color:var(--accent);font-variant-numeric:tabular-nums;margin-right:8px}
.lg-doc p{margin:0 0 12px;line-height:1.68;color:var(--muted)}
.lg-doc ul{margin:0 0 12px;padding-left:20px;color:var(--muted)}
.lg-doc li{margin-bottom:7px;line-height:1.6}
.lg-doc strong{color:var(--ink);font-weight:700}
/* Links inherit the accent from the design system rather than the parent theme's pink. */
.lg-doc a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;
          text-decoration-thickness:1px}
.lg-doc a:hover,.lg-doc a:focus-visible{color:var(--ink)}
.lg-id{margin-top:clamp(28px,3.6vw,42px);padding:clamp(18px,2.2vw,26px);
       background:var(--grey);border-radius:3px}
.lg-id dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px}
.lg-id dt{color:var(--muted);font-weight:600}
.lg-id dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums}@media(max-width:900px){
  .lg-grid{grid-template-columns:1fr}
  .lg-toc{position:static;border-bottom:1px solid var(--hair);padding-bottom:18px}
  .lg-toc ol{flex-direction:row;flex-wrap:wrap;gap:6px 14px}
  .lg-toc a{border-left:0;padding-left:0;margin-left:0}}