/* components part 15 of 16 — split for the host's 16KB FTP ceiling.
   Generated by split_for_ftp.py; edit the prototype, not this. */
@media(max-width:380px){.hero-txt>h1{font-size:30px;line-height:1.08}}@media(max-width:760px){
  .hero .hero-txt ul.checks,.hero .hero-row ul.checks{display:none}
  .hero.hero-keep-checks .hero-txt ul.checks{display:flex}   /* /tools/ai-render/: the offer lives in the checks (26 Oct 2026) */
  .hero .hero-sub{font-size:15.5px;line-height:1.55}}@media(max-width:700px){
  .timeline,.vs-cols,.cardgrid.four{scroll-snap-type:x proximity;overflow-y:hidden;overscroll-behavior-x:contain}
  .cardgrid.svc-strip,.craft-cols,.cardgrid.three.why3-grid,.cardgrid.swipe{display:grid;grid-template-columns:none!important;
    grid-auto-flow:column;grid-auto-columns:80%;gap:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scroll-padding-inline:var(--gut,16px);padding:0 var(--gut,16px) 12px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cardgrid.svc-strip::-webkit-scrollbar,.craft-cols::-webkit-scrollbar,.why3-grid::-webkit-scrollbar,.cardgrid.swipe::-webkit-scrollbar{display:none}
  .cardgrid.svc-strip>.mini,.craft-cols>.craft-col,.why3-grid>.mini,.cardgrid.swipe>.mini{scroll-snap-align:start}
  .cardgrid.swipe{margin-inline:calc(-1*var(--gut))}   /* one sideways row, edge to edge (/contact/, /about/ offices) */
  .cardgrid.svc-strip .mini.svc{border:1px solid var(--hair);border-radius:12px;overflow:hidden}
  .cardgrid.svc-strip .mini.svc .svc-body,
  .cardgrid.svc-strip .mini.svc:nth-child(n) .svc-body{padding:16px 18px 20px}
  .cardgrid.svc-strip .mini.svc.mob-only{display:none}
  .craft-cols>.craft-col{border:1px solid var(--hair);border-radius:12px;overflow:hidden}
  .craft-col .cc-body{padding:18px}
  .cardgrid.ind{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .cardgrid.ind .mini.svc{flex-direction:column;text-align:center;padding:14px 10px}
  .cardgrid.ind .mini.svc .svc-img{width:112px;height:112px}
  .cardgrid.ind .mini.svc .svc-more{border-bottom-color:transparent}   /* whole card is the link */
  /* Services strip: ONE sideways row on phones, never 2 (Siim, 29 Sep: "no double scroll, one row at a time"). */
  .cardgrid.ind .mini.svc .svc-img{flex:0 0 112px;aspect-ratio:1;align-self:center;max-width:none}   /* circles, not ovals: max-width:none lifts the 104px cap from the max-width:900px block (it made them 104x112) */
  .tst-trust .trust-stats{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;gap:32px;
    padding-inline:var(--gut,16px);scrollbar-width:none}
  .tst-trust .trust-stats::-webkit-scrollbar{display:none}
  .tst-trust .trust-stats .s{flex:0 0 auto}
  .cardgrid.plans{scroll-snap-type:none}   /* free swipe: even proximity pulled back on a short drag */
  .cardgrid.plans>.plans-ent{display:flex;flex-direction:column}
  .cardgrid.plans>.plans-ent .guide-form{margin-top:auto}
  /* pricing cards: shorter on a phone, the full list is one tap away in the quote */
  .cardgrid.plans .checks li:nth-child(n+4){display:none}
  .cardgrid.plans .plan-art{height:110px}
  /* Long card rows (Siim, 30 Sep: "2 rows, but not scrolling at the same time"): a services
     strip or tool list of 6+ cards becomes TWO sideways rows that each scroll on their own.
     One row was too long to swipe through; two rows in one scroller moved together.
     theme/build.py writes the cards into two .srow boxes in the HTML (never after load:
     that moved the page, CLS 0.39); above 700px the boxes are display:contents. */
  .cardgrid.split{display:flex;flex-direction:column;gap:12px;overflow:visible;padding:0;scroll-snap-type:none}
  .cardgrid.split>.srow{display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:12px;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    scroll-padding-inline:var(--gut,16px);padding:0 var(--gut,16px) 4px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cardgrid.split>.srow::-webkit-scrollbar{display:none}
  .cardgrid.split>.srow>.mini{scroll-snap-align:start}}
/* Pricing cards (Siim, 29 Sep): one "Get a quote" button per card, full width, pinned to the
   bottom so every card's button lines up; "Best value" is a badge on the card's top edge at the
   right (Siim, 2 Oct: SaaS style, not on the picture), so the launch package heading sits level
   with the other cards. */
.cardgrid.plans>.mini:not(.plans-ent),.cardgrid.plans>.guide-card{display:flex;flex-direction:column}
.cardgrid.plans>.mini:not(.plans-ent) .guide-form,.cardgrid.plans>.guide-card .guide-form{margin-top:auto}
.cardgrid.plans .guide-form .btn{width:100%;justify-content:center}
/* /pricing/ tightening (Siim, 23 Oct 2026, after pageloot.com/pricing/): less padding in and between
   the cards, small checkmarks, and ONE title size on all six plan cards (the launch package's). */
.cardgrid.plans{gap:14px;--pp:clamp(18px,1.7vw,22px)}
.cardgrid.plans>.mini,.cardgrid.plans>.guide-card{padding:var(--pp)}
.cardgrid.plans>.mini:not(.plans-ent) .plan-art,.cardgrid.plans>.guide-card .plan-art{margin:calc(-1*var(--pp)) calc(-1*var(--pp)) 18px}
.cardgrid.plans h3,.cardgrid.plans>.mini h3,.cardgrid.plans .guide-card h3{font-size:clamp(20px,1.9vw,24px);font-weight:700;letter-spacing:-0.02em;line-height:1.12;margin-bottom:8px}
.cardgrid.plans>.mini p,.cardgrid.plans>.guide-card .gsub,.cardgrid.plans>.guide-card>p{font-size:15px;line-height:1.5;margin-bottom:0}
.cardgrid.plans .checks{gap:9px;margin:16px 0 20px}
.cardgrid.plans .checks li{gap:8px;font-size:14.5px;line-height:1.35}
.cardgrid.plans .checks .ci{width:18px;height:18px;flex:0 0 18px;margin-top:1px}
body .cardgrid.plans .checks .ci svg,body.chk-bold .cardgrid.plans .checks .ci svg{width:16px;height:16px}
.cardgrid.plans>.plans-ent .checks{gap:9px 20px}
/* 23 Oct 2026 (Siim): premium finish. Black "Best value" badge (red clashed with the photos), more air under
   the four cards' buttons, and taller wide cards with a fixed-width button instead of a full stretch. */
body .cardgrid.plans>.guide-card .ph{background:var(--ink);color:#fff}
.cardgrid.plans>.mini:not(.plans-ent),.cardgrid.plans>.guide-card{padding-bottom:calc(var(--pp) + 14px)}
.cardgrid.plans>.plans-ent{padding:clamp(34px,3.4vw,48px) clamp(28px,3vw,42px)}
.cardgrid.plans>.plans-ent .checks{margin:22px 0 30px}
.cardgrid.plans>.plans-ent .guide-form{align-self:flex-start}
.cardgrid.plans>.plans-ent .guide-form .btn{width:auto;min-width:220px;padding-inline:32px}
/* 23 Oct 2026 (Siim): "Best value" sits INSIDE the card, top right, styled like the "4K" pill. Hanging half off the top
   edge it was clipped by the phone card scroller (overflow-x). The two wide plans are one per row: text and button on the
   left, the list on the right, so nothing is squeezed. */
body .cardgrid.plans>.guide-card .ph{top:10px;right:10px;transform:none;padding:4px 8px;font-size:10.5px;font-weight:800;letter-spacing:.06em}@media(min-width:901px){
  .cardgrid.plans>.plans-ent{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    grid-template-areas:"head checks" "form checks";column-gap:clamp(32px,5vw,80px);align-content:center;align-items:start}
  .cardgrid.plans>.plans-ent>div:first-of-type{grid-area:head}
  .cardgrid.plans>.plans-ent .checks{grid-area:checks;grid-template-columns:1fr;align-self:center;margin:0}
  .cardgrid.plans>.plans-ent .guide-form{grid-area:form;margin-top:26px;justify-self:start}}
/* 23 Oct 2026 (Siim, after featurebase.app/pricing): plan lists read lighter. Regular-weight text in the body colour,
   a thin muted tick, and in the wide dark cards a capped text width and a fixed-width button. */
.cardgrid.plans .checks li{font-weight:400;color:var(--body);font-size:14.5px;line-height:1.4}
.cardgrid.plans>.guide-card .checks li{font-weight:400;color:var(--body)}
body .cardgrid.plans .checks .ci svg,body.chk-bold .cardgrid.plans .checks .ci svg,body .cardgrid.plans>.guide-card .checks .ci svg{color:var(--faint);width:15px;height:15px}
body.chk-bold .cardgrid.plans .checks .ci svg path{stroke-width:2.2}
.cardgrid.plans .checks .ci{width:16px;flex:0 0 16px}
.cardgrid.plans>.plans-ent .checks li{color:rgba(255,255,255,.9);font-weight:400}
body .cardgrid.plans>.plans-ent .checks .ci svg{color:rgba(255,255,255,.6)}@media(min-width:901px){
  .cardgrid.plans>.plans-ent>div:first-of-type{max-width:520px}
  .cardgrid.plans>.plans-ent .guide-form .btn{width:260px;min-width:0;max-width:100%}}
/* 23 Oct 2026 (Siim): more height inside the four cards, and the two dark cards held to a reading width. */
.cardgrid.plans{--pt:24px;--pb:40px}
.cardgrid.plans>.mini:not(.plans-ent),.cardgrid.plans>.guide-card{padding:var(--pt) var(--pp) var(--pb)}
.cardgrid.plans>.mini:not(.plans-ent) .plan-art,.cardgrid.plans>.guide-card .plan-art{margin:calc(-1*var(--pt)) calc(-1*var(--pp)) 30px}
.cardgrid.plans>.mini:not(.plans-ent) h3,.cardgrid.plans>.guide-card h3{margin-bottom:12px}
.cardgrid.plans>.mini:not(.plans-ent) p,.cardgrid.plans>.guide-card .gsub{line-height:1.6}
.cardgrid.plans>.mini:not(.plans-ent) .checks,.cardgrid.plans>.guide-card .checks{gap:12px;margin:24px 0 34px}@media(min-width:901px){
  .cardgrid.plans>.plans-ent{max-width:960px;width:100%;justify-self:center}}
.plans-more{margin:28px auto 0;max-width:960px;text-align:center;font-size:15.5px;line-height:1.5;color:var(--body)}
/* 24 Oct 2026 (Siim): "4K" and "Best value" both sit on the card's top edge (visible, same style); the phone scroller gets
   headroom so they are not cut off; the sales-launch card is full card width (only its text column is capped); the
   two "ways to get an image" cards carry a picture instead of an icon. */
body .cardgrid.plans>.mini .ph,body .cardgrid.plans>.guide-card .ph{position:absolute;z-index:3;top:0;right:clamp(18px,2vw,26px);transform:translateY(-50%);margin:0;padding:7px 13px;border-radius:999px;background:var(--ink);color:#fff;font-size:11px;font-weight:800;letter-spacing:.12em;line-height:1;text-transform:uppercase}
.cardgrid.plans>.mini{position:relative}@media(max-width:700px){.cardgrid.plans.four{padding-top:20px;margin-top:-20px}}@media(min-width:901px){.cardgrid.plans>.plans-ent{max-width:none;width:auto;justify-self:stretch}}
.path-img{margin:-6px 0 20px;border-radius:10px;overflow:hidden;aspect-ratio:16/10;background:var(--grey)}
.path-img img{display:block;width:100%;height:100%;object-fit:cover}
.plans-intro .checks{margin:0;gap:12px}
.plans-intro .checks li{font-size:clamp(15.5px,1.3vw,17px);font-weight:500;line-height:1.45;color:var(--body)}
.plans-intro .checks li b{color:var(--ink);font-weight:700}
.cardgrid.plans>.guide-card{position:relative;top:auto}