/* components part 14 of 16 — split for the host's 16KB FTP ceiling.
   Generated by split_for_ftp.py; edit the prototype, not this. */
@media(max-width:600px){.hs-user svg{width:18px;height:18px}.hs-user span{font-size:10.5px;margin-top:11px}.hs-user.u1{top:18%}.hs-user.u2{top:40%;left:20%}}
.ex-lights{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:6;display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(20,19,16,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ex-lights button{appearance:none;border:0;background:transparent;color:#fff;border-radius:999px;padding:5px 11px;font:600 11.5px/1.1 inherit;font-family:inherit;white-space:nowrap;cursor:pointer}
.ex-lights button.on{background:#fff;color:var(--ink)}
.svc-split img.ex-l{opacity:0;transition:opacity .7s ease}.svc-split img.ex-l.on{opacity:1}
/* WHY ROWS (.why-list, /tools/ai-render/, 5 Nov 2026): complaint on the left, what we do on the right. */
.why-list{max-width:1040px;margin:0 auto;display:grid;gap:12px}
.why-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,3vw,36px);align-items:center;padding:20px clamp(18px,2.4vw,28px);background:#fff;border:1px solid var(--hair);border-radius:14px}
.why-row p{margin:0}
.why-q{display:flex;gap:11px;align-items:flex-start;color:var(--muted);font-size:15.5px;line-height:1.45}
.why-q svg{flex:0 0 18px;width:18px;height:18px;margin-top:2px;color:#b43a33}
.hero-keep-checks .checks li b{font-weight:800}.hero-keep-checks .checks li span{font-weight:500}
.why-a{display:flex;gap:11px;align-items:flex-start;color:var(--ink);font-size:16px;font-weight:500;line-height:1.45}
.why-a .ci{flex:0 0 20px;margin:2px 0 0}.why-a .ci svg{width:18px;height:18px;color:#2e7d57}@media(max-width:760px){.why-row{grid-template-columns:1fr;gap:10px}}
/* SOFTWARE TILES (.prog-grid, /tools/ai-render/, 5 Nov 2026): logo first, so people find their program at a glance. */
.prog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.prog{background:#fff;border:1px solid var(--hair);border-radius:14px;transition:border-color .2s}
.prog[open]{border-color:var(--ink)}
.prog summary{display:flex;align-items:center;gap:13px;padding:16px 18px;cursor:pointer;list-style:none;font-family:var(--disp);font-weight:650;font-size:16.5px}
.prog summary::-webkit-details-marker{display:none}
.prog .prog-m{flex:0 0 28px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.prog .prog-m img{width:26px;height:26px}.prog .prog-m svg{width:24px;height:24px}
.prog .q{flex:1}
.prog .pl{position:relative;width:14px;height:14px;flex:none}
.prog .pl::before,.prog .pl::after{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:var(--ink);transition:transform .2s}
.prog .pl::after{transform:rotate(90deg)}.prog[open] .pl::after{transform:none}
.prog .a{padding:0 18px 18px;font-size:14.5px;line-height:1.55;color:var(--muted)}@media(max-width:900px){.prog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.prog-grid{grid-template-columns:1fr}}
/* GUIDE LIST (.glist, /tools/ai-render/, 5 Nov 2026): the other guides, in ink, no red link wall. */
.glist{display:grid;gap:12px;max-width:1040px;margin:clamp(28px,3.4vw,40px) auto 0}
.glist-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.glist-h{flex:0 0 120px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.glist-a{display:inline-block;padding:7px 13px;border:1px solid var(--hair);border-radius:999px;color:var(--ink);font-size:14px;line-height:1.2;background:#fff;transition:border-color .2s}
.glist-a:hover{border-color:var(--ink)}@media(max-width:560px){.glist-h{flex-basis:100%}}
/* PRICE SECTION, 5 Nov 2026 (Siim): coloured ticks, table header stays under the site header on desktop. */
#price .checks .ci svg,#price .ptable td .ci svg{color:#2e7d57}
#price .ci.ci-neg svg,#price .ptable td .ci.ci-neg svg{color:var(--faint,#b9b4aa)}@media(min-width:760px){.pt-scroll{overflow:clip}.ptable{border-collapse:separate;border-spacing:0}.ptable thead th{position:sticky;top:var(--head-h,81px);z-index:5;box-shadow:0 1px 0 var(--hair)}}
/* PLAN CARD ART (.plan-art, /pricing/): a white mini panel on a tinted ground at the top of
   each plan card, after the Cybsis prototype's feature cards. Decorative only. */
.plan-art{position:relative;height:132px;margin:0 0 22px;display:flex;align-items:stretch;justify-content:stretch}
.guide-card .plan-art{background:none}
.pa-panel{position:relative;flex:1;min-width:0;background:#fff;border-radius:12px;box-shadow:0 1px 0 rgba(20,18,14,.06);padding:12px}
.pa-one{padding:0;background:none;box-shadow:none;overflow:visible}
.guide-card .pa-panel{background:#2f2b26;box-shadow:none}
.pa-one img{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px}
.pa-pill{position:absolute;top:10px;right:10px;background:var(--ink,#141310);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.06em;padding:4px 8px;border-radius:999px}
.pa-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));overflow:hidden;gap:6px;padding:0;background:none!important;box-shadow:none!important}
.pa-grid img{display:block;width:100%;height:100%;min-height:0;object-fit:cover;border-radius:8px}
.pa-time{display:grid;align-content:center;gap:10px;padding:14px 18px 14px 50px}
.pa-clock{position:absolute;left:16px;top:50%;margin-top:-11px;width:22px;height:22px;color:var(--accent,#b08a5a)}
.pa-row{display:flex;align-items:center;gap:8px}
.pa-row i{display:block;height:7px;border-radius:4px;background:#e6e2da}
.pa-row b{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink,#141310);font-variant-numeric:tabular-nums}
.pa-cal{display:flex;flex-direction:column;padding:14px 16px}
.pa-cal-top{display:block;height:7px;width:46%;border-radius:4px;background:#e6e2da;margin-bottom:9px}
.pa-cells{flex:1;display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;gap:5px}
.pa-cells i{display:block;border-radius:4px;background:#f0ede7}
.pa-cells i.on{background:var(--accent,#b08a5a)}
/* Long translated labels ("SPØRG OM EN FASTHOLDELSESAFTALE") wrap inside the pill instead of
   running out of it. */
.cardgrid.plans .guide-form .btn{white-space:normal;text-align:center;line-height:1.25;padding-inline:18px}
section.plans-sec{padding-top:clamp(28px,3vw,44px)}
/* /pricing/ (Siim, 27 Sep): the highlighted plan is a light card with a red outline, not a
   black slab. Scoped to .cardgrid.plans so the .guide-card elsewhere is untouched. (Enterprise
   carried the dark image treatment until 14 Oct 2026; now it is light, see .plans-ent.) */
.cardgrid.plans>.guide-card{background:#FBF2F0;border:2px solid var(--accent);color:var(--ink)}
.cardgrid.plans>.guide-card h3{color:var(--ink)}
.cardgrid.plans>.guide-card .gsub,.cardgrid.plans>.guide-card>p{color:#55524b}
/* "Best value" sits on the card's top edge, right side, the way SaaS pricing flags its pick (Siim, 2 Oct). */
.cardgrid.plans>.guide-card .checks li{color:var(--ink)}
body .cardgrid.plans>.guide-card .checks .ci svg,body.chk-bold .cardgrid.plans>.guide-card .checks .ci svg{color:var(--ink)}
.cardgrid.plans>.guide-card .pa-panel{background:#fff;box-shadow:0 1px 0 rgba(20,18,14,.06)}
/* PLANS v2 (Siim, 18 Oct 2026). The card art runs edge to edge (it floated in a padded box and
   read small for no reason); the two icon cards (hourly, retainer) sit on a tinted ground
   instead of a photo. The sales launch and Enterprise cards are dark with a render behind
   them, a different one each. The render is a lazy <img>, not a CSS background, so it is
   never the LCP on a phone. */
.cardgrid.plans>.mini:not(.plans-ent) .plan-art,.cardgrid.plans>.guide-card .plan-art{
  height:clamp(150px,13vw,190px);margin:calc(-1*clamp(26px,2.6vw,34px)) calc(-1*clamp(26px,2.6vw,34px)) 24px;
  border-radius:11px 11px 0 0;overflow:hidden}
.cardgrid.plans>.guide-card .plan-art{border-radius:12px 12px 0 0}
.cardgrid.plans .plan-art .pa-panel{border-radius:0}
.cardgrid.plans .plan-art .pa-one img{border-radius:0}
.cardgrid.plans .plan-art .pa-grid{gap:2px}
.cardgrid.plans .plan-art .pa-grid img{border-radius:0}
.cardgrid.plans .plan-art.pa-tint{background:#E7E3DA;padding:20px 24px}
.cardgrid.plans .plan-art.pa-tint .pa-panel{border-radius:10px}
.cardgrid.plans>.plans-ent.pe-dark{position:relative;overflow:hidden;isolation:isolate;background:#141310;border-color:transparent;color:#fff}
.pe-dark .pe-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.pe-dark::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(14,12,10,.9) 0%,rgba(14,12,10,.74) 55%,rgba(14,12,10,.46) 100%)}
.pe-dark h3{color:#fff}
.pe-dark p{color:rgba(255,255,255,.82)}
.pe-dark .eyebrow{color:rgba(255,255,255,.7)}
.pe-dark .checks li{color:#fff}
body .pe-dark .checks .ci svg,body.chk-bold .pe-dark .checks .ci svg{color:#fff}
.pe-dark .btn-g{background:transparent;--btn-fg:#fff;color:#fff;border-color:rgba(255,255,255,.62)}
.pe-dark .btn-g:hover,.pe-dark .btn-g:focus{background:rgba(255,255,255,.16)}
.plans-intro{gap:clamp(20px,4vw,64px)}
.plans-intro .hero-sub{max-width:none;margin:0;font-size:clamp(16px,1.35vw,18px)}
section.plans-sec+section.plans-sec{padding-top:0}@media(max-width:700px){.cardgrid.plans>.mini:not(.plans-ent) .plan-art,.cardgrid.plans>.guide-card .plan-art{height:120px}}
/* COMPACT PAGE HEAD (.hero.page-head): breadcrumb, H1 and an optional one-line intro, no
   image. For utility pages that do not need a hero (Contact, FAQ, Pricing; Siim, 25 Sep).
   Built by _service.page_head(); the next section brings its own spacing. */
.hero.page-head{padding:clamp(30px,3.6vw,60px) 0 0}
/* Siim, 1 Oct: when a grey section follows (/about/, /partners/) the intro ran straight into it.
   A white section brings its own top padding, so only the coloured cases get space here. */
.hero.page-head:has(+ .bg-grey){padding-bottom:clamp(40px,4.4vw,64px)}
.hero.page-head h1{margin:12px 0 16px}
.hero.page-head .hero-sub{max-width:68ch;margin:0}@media(min-width:1041px){
  .hero.hero-fit .hero-media img.hero-img{position:absolute;inset:0;height:100%;min-height:0;object-position:var(--hero-pos,50% 60%)}}@media(max-width:640px){
  /* Both groups in ONE sideways-scrolling row (Siim, 28 Sep): two rows of chips was too
     much above the stories on a phone. A hairline separates countries from roles. */
  .tst-filters{flex-wrap:nowrap;justify-content:flex-start;gap:8px;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tst-filters::-webkit-scrollbar{display:none}
  .tst-frow{flex-wrap:nowrap;flex:0 0 auto}
  .tst-frow+.tst-frow{border-left:1px solid var(--hair);padding-left:8px}
  .tst-frow .tst-chip{flex:0 0 auto}}