/* content.css: content pages and blocks (FAQ, legal texts, references, reviews, contact, about,
   Epsis Mobile, how to charge, solutions, partnership). Built on base.css, components.css and
   blocks.css: tokens only, full width with fixed gutters, one H1, no eyebrows or subtitles.
   Every page opens with the page head band (site.css .page-head) that holds the breadcrumb and the H1.
   Sticky parts stay under the stuck glass header bar (--site-head-h, base.css). */

:root {
  --ct-sticky-top: calc(var(--site-head-h) + 12px);
}
@media (min-width: 1024px) {
  :root { --ct-sticky-top: calc(var(--site-head-h) + 20px); }
}

/* ---------- Drawings (public/assets/illustrations as <img class="il">, site lib/illustrations.js) ----------
   The colours live inside the SVG files. Plug and socket drawings are drawn for light grounds only:
   on a navy band their panel stays light (--light modifiers). */
.il { width: 100%; }

/* ---------- Under the page head band ---------- */
/* The first section after the band starts close to it; the band already separates the page top. */
.page-head + .ct-main, .ct-main--first { padding-top: var(--sp-10); }
/* The page's first tool sits in the band (search, filter chips, tabs). */
.page-head .ct-search { width: 100%; }
@media (min-width: 1024px) { .page-head .ct-search { width: min(40vw, 520px); } }
.page-head .ct-search input { border-color: transparent; }
.page-head .ct-chips--inline ul { flex-wrap: wrap; overflow: visible; }
/* Page hero in the band: the data line, the buttons and the store badges sit on the right (below the
   H1 on phones); the hero's picture or intro text follows right under the band. */
.ct-band-aside { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.ct-band-aside .hero-actions { margin: 0; }
.ct-band-aside .ct-hero-badges { margin: 0; }
@media (min-width: 1024px) { .ct-band-aside { align-items: flex-end; text-align: right; } .ct-band-aside .ct-hero-data { justify-content: flex-end; } }
.ct-hero-after { padding-block: var(--sp-8) 0; }
@media (min-width: 768px) { .ct-hero-after { padding-top: var(--sp-10); } }
.ct-hero-after .hero-photo { aspect-ratio: auto; height: clamp(220px, 34vw, 520px); }
.ct-hero-after .ct-hero-art, .ct-hero-after .ct-hero-phone { height: clamp(240px, 30vw, 440px); padding: var(--sp-6); }
.ct-hero-after .ct-hero-art .il, .ct-hero-after .ct-hero-art img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.ct-hero-after .ct-hero-intro { padding: 0; border: 0; }
.ct-hero-after .ct-hero-intro p { max-width: 68ch; }
/* The Epsis Mobile page: the app icon beside the H1 in the band. */
.ct-band-title { display: inline-flex; align-items: center; gap: var(--sp-4); }
.ct-band-title .ct-app-icon { width: 56px; height: 56px; border-radius: 14px; box-shadow: none; }
@media (min-width: 768px) { .ct-band-title { gap: var(--sp-5); } .ct-band-title .ct-app-icon { width: 72px; height: 72px; border-radius: 18px; } }

/* Breadcrumb: parents only, the page itself is the H1 */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); font-weight: var(--fw-medium); }
.crumbs li { display: inline-flex; align-items: center; gap: 4px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs .i { color: var(--muted); }
.on-band .crumbs a, .on-band .crumbs .i { color: var(--on-band-muted); }
.on-band .crumbs a:hover { color: var(--on-band); }

/* ---------- Text helpers ---------- */
.ct-intro { font-size: var(--fs-intro); line-height: 1.5; color: var(--ink-2); }
.section--navy .ct-intro, .on-band .ct-intro { color: var(--on-band-muted); }
.ct-muted { color: var(--muted); font-size: var(--fs-small); }
/* A code or number that must not break at its hyphen (licence number). */
.ct-nowrap { white-space: nowrap; }
.ct-prose { color: var(--ink-2); overflow-wrap: break-word; }
.ct-prose a { overflow-wrap: anywhere; }
.ct-prose > * + * { margin-top: var(--sp-4); }
.ct-prose h2 { font-size: 1.5rem; margin-top: var(--sp-10); }
.ct-prose h3 { font-size: 1.1875rem; margin-top: var(--sp-8); }
.ct-prose h2 + *, .ct-prose h3 + * { margin-top: var(--sp-3); }
.ct-prose ul, .ct-prose ol { padding-left: 1.3em; max-width: var(--measure); }
.ct-prose li + li { margin-top: var(--sp-2); }
.ct-prose a { color: var(--ink); font-weight: var(--fw-medium); }
.ct-prose a:hover { color: var(--accent-hover); }
.ct-prose strong { color: var(--ink); }
.ct-prose table { width: 100%; font-size: var(--fs-small); }
@media (max-width: 767.98px) { .ct-prose table { display: block; overflow-x: auto; } }
.ct-prose th, .ct-prose td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.section--navy .ct-prose { color: var(--on-band-muted); }
.section--navy .ct-prose strong, .section--navy .ct-prose a { color: var(--on-band); }
@media (min-width: 1024px) {
  .ct-prose--cols { columns: 2; column-gap: var(--sp-12); }
  .ct-prose--cols > * { break-inside: avoid; }
}
.ct-notice { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--stale-tint); color: var(--ink); font-weight: var(--fw-medium); max-width: var(--measure); }
.ct-notice--ok { background: var(--status-available-tint, #E6F4EE); }

/* Two column side layout: H2 and intro text in a narrow column beside the content (§12.1 rule 3) */
.ct-side-grid { align-items: start; row-gap: var(--sp-8); }
.ct-side { display: flex; flex-direction: column; gap: var(--sp-5); }
.ct-side h2 { max-width: 20ch; }
@media (max-width: 1599.98px) {
  .ct-side-grid--xl > .ct-side { margin-bottom: calc(var(--section-head-gap) - var(--sp-8)); }
  /* Stacked above its content the H2 has the full row: the section head measure, not the side column's. */
  .ct-side-grid--xl > .ct-side h2 { max-width: 28ch; }
}
@media (min-width: 1600px) {
  .ct-side-grid--xl .ct-side { position: sticky; top: var(--ct-sticky-top); }
}

/* ---------- content.hero (same component as the home hero, blocks.css .hero) ---------- */
.ct-hero .hero-main { justify-content: center; gap: var(--sp-5); }
.ct-hero .hero-actions { margin-top: var(--sp-3); align-items: center; }
.ct-hero-head { display: flex; align-items: center; gap: var(--sp-5); }
.ct-hero-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); max-width: 22ch; }
.ct-app-icon { width: 72px; height: 72px; border-radius: 18px; flex: none; box-shadow: var(--shadow-1); }
@media (min-width: 768px) { .ct-app-icon { width: 96px; height: 96px; border-radius: 22px; } }
.ct-hero-data { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--muted); font-size: .9375rem; max-width: none; }
.on-band .ct-hero-data { color: var(--on-band-muted); }
.ct-hero-phone-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 1.125rem; font-weight: var(--fw-bold); text-decoration: none; }
.ct-hero-phone-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.on-band .ct-hero-phone-link { color: var(--on-band); }
.ct-hero-badges { margin-top: var(--sp-2); }
.ct-hero-qr { display: none; }
@media (min-width: 1024px) { .ct-hero-qr { display: inline-flex; } }
.ct-hero-intro { display: flex; align-items: center; width: 100%; padding: var(--sp-6) 0 0; border-top: 1px solid var(--on-band-line); }
.ct-hero-intro p { font-size: var(--fs-intro); line-height: 1.55; }
.hero--gray .ct-hero-intro { border-top-color: var(--line); }
@media (min-width: 1280px) {
  .ct-hero-intro { padding: 0 0 0 var(--sp-10); border-top: 0; border-left: 1px solid var(--on-band-line); }
  .hero--gray .ct-hero-intro { border-left-color: var(--line); }
}
.ct-hero-art, .ct-hero-phone { display: grid; place-items: center; width: 100%; padding: var(--sp-5); border-radius: var(--r-lg); background: var(--bg-tint); }
.hero--gray .ct-hero-art, .hero--gray .ct-hero-phone { background: var(--surface); }
.hero--navy .ct-hero-art, .hero--navy .ct-hero-phone { background: var(--band-raised); }
.ct-hero-art .il { max-width: 560px; }
.hero--navy .ct-hero-art--light { background: var(--bg-tint); }
@media (min-width: 1280px) {
  .ct-hero .hero-media { align-self: stretch; }
  .ct-hero .hero-photo { min-height: 380px; }
}
.hero--navy .hero-photo { background: var(--band-raised); }
.ct-hero .hero-img { object-position: var(--focus, 50% 50%); }

/* Phone frame for the owner's raw app screenshots (CSS drawn, never a promo image) */
.ct-phone { position: relative; width: min(100%, 300px); aspect-ratio: 9 / 19.5; padding: 10px; border-radius: 42px; background: var(--il-face-4); box-shadow: var(--shadow-2); }
.ct-phone::before { content: ""; position: absolute; top: 18px; left: 50%; width: 30%; height: 20px; margin-left: -15%; border-radius: 12px; background: var(--il-face-4); z-index: 2; }
.ct-phone-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 32px; background: var(--il-face-3); }
.ct-phone-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ct-phone--sm { width: min(100%, 220px); padding: 8px; border-radius: 34px; }
.ct-phone--sm .ct-phone-screen { border-radius: 26px; }

/* ---------- content.text-media ---------- */
.ct-tm-grid { align-items: center; row-gap: var(--sp-8); }
.ct-tm-text { display: flex; flex-direction: column; gap: var(--sp-5); }
.ct-tm-title { max-width: 24ch; }
@media (min-width: 1024px) { .ct-tm--left .ct-tm-media { order: -1; } }
.ct-media { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--bg-tint); aspect-ratio: 16 / 10; }
.ct-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 40%); }
.ct-media--art { aspect-ratio: auto; display: grid; place-items: center; padding: var(--sp-6); }
.ct-media--art .il { max-width: 560px; }
.section--navy .ct-media--art { background: var(--band-raised); }
.section--navy .ct-media--light { background: var(--bg-tint); }
.ct-media-pair { display: grid; gap: var(--grid-gap); }
@media (min-width: 768px) { .ct-media-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) and (max-width: 1599.98px) { .ct-media-pair { grid-template-columns: minmax(0, 1fr); } }
.ct-tm--pair .ct-tm-grid { align-items: start; }
@media (min-width: 1024px) { .ct-tm--pair .ct-tm-media { position: sticky; top: var(--ct-sticky-top); } }
.ct-checks { display: grid; gap: var(--sp-4) var(--sp-8); margin: 0; padding: 0; list-style: none; }
.ct-checks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.ct-checks strong { display: block; color: var(--ink); font-weight: var(--fw-semibold); }
.ct-checks span { color: var(--ink-2); }
.ct-check-i { color: var(--ink); margin-top: 2px; }
.section--navy .ct-checks strong, .section--navy .ct-check-i { color: var(--on-band); }
.section--navy .ct-checks span { color: var(--on-band-muted); }
.ct-tm--solo .ct-tm-text { max-width: none; }
@media (min-width: 1024px) { .ct-tm--solo .ct-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .ct-tm--solo .ct-checks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- content.mosaic: photo mosaic with the network totals (any content page; about page first) ----------
   One bento grid of real field photos, the first one large, with a navy panel set into it: the network
   totals (locations, sockets, provinces, highest power; never availability) and the EPDK licence line.
   Phones: the large photo, two small ones side by side, the panel. 768 to 1279 px: the large photo
   beside two stacked ones, the panel under them. From 1280 px: the large photo over two rows on the
   left, two photos on the taller top row and the panel under them; from 1600 px a fourth photo ends the
   panel's row. From 1280 px the height follows the screen, so the band and the whole mosaic share the
   first screen of laptops and desktops when the mosaic opens the page. */
/* Right under the page head band the mosaic starts close to it (the band already separates the top). */
.blk-content-hero + .blk-content-mosaic > .ct-mosaic-sec { padding-top: var(--sp-6); }
@media (min-width: 768px) { .blk-content-hero + .blk-content-mosaic > .ct-mosaic-sec { padding-top: var(--sp-8); } }
/* Followed by a section of the same ground, the mosaic hands its bottom space to it and the hairline
   between the two is dropped (it would run along the photos' bottom edge). */
.blk-content-mosaic:has(+ .blk > .section--light) > .ct-mosaic-sec.section--light,
.blk-content-mosaic:has(+ .blk > .section--gray) > .ct-mosaic-sec.section--gray { padding-bottom: 0; }
.blk.blk-content-mosaic:has(> .section--light) + .blk:has(> .section--light) > .section.section--light::before,
.blk.blk-content-mosaic:has(> .section--gray) + .blk:has(> .section--gray) > .section.section--gray::before { display: none; }
.ct-mosaic {
  --mosaic-gap: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "a a" "b c" "p p";
  gap: var(--mosaic-gap);
}
.ct-mosaic--n1 { grid-template-areas: "a a" "p p"; }
.ct-mosaic--n2 { grid-template-areas: "a a" "b b" "p p"; }
.ct-mosaic--nopanel { grid-template-areas: "a a" "b c"; }
.ct-mosaic--nopanel.ct-mosaic--n1 { grid-template-areas: "a a"; }
.ct-mosaic--nopanel.ct-mosaic--n2 { grid-template-areas: "a a" "b b"; }
.ct-mosaic-tile { position: relative; min-width: 0; min-height: 0; margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--bg-tint); }
.ct-mosaic-tile--a { grid-area: a; aspect-ratio: 4 / 3; }
.ct-mosaic-tile--b { grid-area: b; aspect-ratio: 1; }
.ct-mosaic-tile--c { grid-area: c; aspect-ratio: 1; }
.ct-mosaic-tile--d { grid-area: d; display: none; }
.ct-mosaic--n2 .ct-mosaic-tile--b { aspect-ratio: 16 / 9; }
.ct-mosaic-tile picture { display: block; width: 100%; height: 100%; }
.ct-mosaic-tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
@media (min-width: 768px) {
  .ct-mosaic {
    --mosaic-gap: 12px;
    --mosaic-row: clamp(170px, 23vw, 280px);
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: repeat(2, var(--mosaic-row)) auto;
    grid-template-areas: "a a a a a b b b" "a a a a a c c c" "p p p p p p p p";
  }
  .ct-mosaic--n1 { grid-template-areas: "a a a a a a a a" "a a a a a a a a" "p p p p p p p p"; }
  .ct-mosaic--n2 { grid-template-areas: "a a a a a b b b" "a a a a a b b b" "p p p p p p p p"; }
  .ct-mosaic--nopanel { grid-template-rows: repeat(2, var(--mosaic-row)); grid-template-areas: "a a a a a b b b" "a a a a a c c c"; }
  .ct-mosaic--nopanel.ct-mosaic--n1 { grid-template-areas: "a a a a a a a a" "a a a a a a a a"; }
  .ct-mosaic--nopanel.ct-mosaic--n2 { grid-template-areas: "a a a a a b b b" "a a a a a b b b"; }
  .ct-mosaic-tile { aspect-ratio: auto !important; }
}
@media (min-width: 1280px) {
  .ct-mosaic {
    /* The band (about 240-300 px with the header) and the mosaic share the first screen. */
    --mosaic-h: clamp(420px, calc(100svh - 340px), 720px);
    --mosaic-gap: 16px;
    height: var(--mosaic-h);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas: "a a a a a b b b c c c c" "a a a a a p p p p p p p";
  }
  .ct-mosaic--n1 { grid-template-rows: repeat(2, minmax(0, 1fr)); grid-template-areas: "a a a a a a a p p p p p" "a a a a a a a p p p p p"; }
  .ct-mosaic--n2 { grid-template-areas: "a a a a a a a b b b b b" "a a a a a a a p p p p p"; }
  .ct-mosaic--nopanel { grid-template-rows: repeat(2, minmax(0, 1fr)); grid-template-areas: "a a a a a a b b b b b b" "a a a a a a c c c c c c"; }
  .ct-mosaic--nopanel.ct-mosaic--n1 { grid-template-areas: "a a a a a a a a a a a a" "a a a a a a a a a a a a"; }
  .ct-mosaic--nopanel.ct-mosaic--n2 { grid-template-areas: "a a a a a a a b b b b b" "a a a a a a a b b b b b"; }
}
@media (min-width: 1600px) {
  /* Wide screens earn a fourth photo at the end of the panel's row (the panel keeps five columns). */
  .ct-mosaic--n4 { grid-template-areas: "a a a a b b b c c c c c" "a a a a p p p p p d d d"; }
  .ct-mosaic--n4.ct-mosaic--nopanel { grid-template-areas: "a a a a b b b b c c c c" "a a a a b b b b d d d d"; }
  .ct-mosaic--n4 .ct-mosaic-tile--d { display: block; }
}
/* Motion. Opening the page (right after the page head band): on page load the photos open from inside
   one after another while each picture settles from a small zoom, and the panel rises after them.
   Further down a page the load entrance is off and the tiles rise in turn as they come into view
   (data-reveal-stagger on the grid; on the first screen motion.js shows them at once). Only clip-path,
   transform and opacity move. */
@keyframes ct-mosaic-open {
  from { clip-path: inset(7% 5% 7% 5% round var(--r-lg)); }
  to { clip-path: inset(0 0 0 0 round var(--r-lg)); }
}
@keyframes ct-mosaic-settle {
  from { transform: scale(1.14); }
  to { transform: none; }
}
html.motion :is(.ct-mosaic-tile, .ct-mosaic-panel)[data-intro] { animation: none; }
html.motion :is(.blk-content-hero, .page-head) + .blk-content-mosaic .ct-mosaic-tile[data-intro="clip"] {
  animation: ct-mosaic-open 1100ms var(--ease-out, ease-out) both;
  animation-delay: calc(var(--intro-i, 0) * 110ms);
}
html.motion :is(.blk-content-hero, .page-head) + .blk-content-mosaic .ct-mosaic-tile[data-intro="clip"] img {
  animation: ct-mosaic-settle 1700ms var(--ease-out, ease-out) both;
  animation-delay: calc(var(--intro-i, 0) * 110ms);
}
html.motion :is(.blk-content-hero, .page-head) + .blk-content-mosaic .ct-mosaic-panel[data-intro] {
  animation: m-intro-rise var(--dur-intro, 900ms) var(--ease-out, ease-out) both;
  animation-delay: calc(var(--intro-i, 0) * 90ms + 80ms);
}
/* Navy panel: the totals over the licence line. It is a size container: the totals stand 2 x 2 in a
   narrow panel and in one row with hairlines once its content box is 600 px wide, where the numbers
   follow the panel width (never past the large figure step). */
.ct-mosaic-panel {
  grid-area: p;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-6);
  min-width: 0;
  min-height: 0;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--band);
  color: var(--on-band-muted);
}
@media (min-width: 768px) { .ct-mosaic-panel { padding: var(--sp-6) var(--sp-8); } }
@media (min-width: 1280px) and (max-height: 820px) {
  /* Short laptop screens: the panel row keeps the room its content needs. */
  .ct-mosaic { grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr); }
  .ct-mosaic-panel { gap: var(--sp-4); padding-block: var(--sp-5); }
}
/* The totals stand in the middle of the room above the licence line. */
.ct-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); margin: auto 0; }
.ct-fig { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--sp-2); min-width: 0; }
.ct-fig dt { color: var(--on-band-muted); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.3; }
.ct-fig dd { margin: 0; }
/* The large figure step (48 to 64 px, the size of the price figures): the panel's numbers are the data
   of the page's opening moment. */
.ct-fig-num {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--on-band);
  font-size: var(--fs-price);
  font-weight: var(--fw-bold);
  font-stretch: var(--stretch-heading);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.ct-fig-unit { color: var(--on-band-muted); font-size: .38em; font-weight: var(--fw-semibold); letter-spacing: 0; }
@container (min-width: 600px) {
  .ct-figs { grid-template-columns: repeat(var(--figs, 4), minmax(0, 1fr)); gap: var(--sp-4); }
  .ct-fig + .ct-fig { padding-left: var(--sp-4); border-left: 1px solid var(--on-band-line); }
  .ct-fig-num { font-size: min(var(--fs-price), 8cqi); }
}
.ct-mosaic-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--on-band-line); }
.ct-mosaic-license { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0; max-width: none; color: var(--on-band-muted); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.45; }
.ct-mosaic-license-i { flex: none; color: var(--on-band); }
.ct-mosaic-license .num { color: var(--on-band); font-weight: var(--fw-semibold); white-space: nowrap; }
.ct-mosaic-link { flex: none; }
.ct-mosaic-panel--license { justify-content: center; }
.ct-mosaic-panel--license .ct-mosaic-foot { padding-top: 0; border-top: 0; }

/* ---------- content.statement: large statement and titled text blocks ----------
   Without a drawing the H2 stands alone on the left and the statement sits beside it in large type,
   its first sentence in full ink and the rest a step lighter. With a drawing, the drawing's light stage
   comes first (on the left from 1024 px) and the H2 and the statement stand beside it. The titled blocks
   follow in as many columns as keep a readable measure for their number. */
.ct-statement-head { align-items: start; row-gap: var(--sp-5); }
.ct-statement-title { max-width: 14ch; }
.ct-statement-title--wide { max-width: 22ch; }
.ct-statement {
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.25rem, .75rem + 1.3vw, 2.5rem);
  font-weight: var(--fw-semibold);
  font-stretch: var(--stretch-heading);
  line-height: 1.34;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
/* A long statement (the page's whole opening paragraph) steps down one size so it never becomes a wall. */
.ct-statement--long { font-size: clamp(1.25rem, 1rem + .6vw, 1.75rem); line-height: 1.42; }
.ct-statement-rest { color: var(--muted); }
/* With a drawing: the stage (16:10, the drawing's own frame) and the text vertically centred beside it. */
.ct-statement-head--art { align-items: center; row-gap: var(--sp-6); }
.ct-statement-head--art .ct-statement-body { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.ct-statement-head--art .ct-statement-title { max-width: 20ch; }
.ct-statement-stage { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; order: -1; margin: 0; padding: var(--sp-5) var(--sp-6); aspect-ratio: 16 / 10; border-radius: var(--r-lg); background: var(--bg-tint); }
.ct-statement-stage .il { width: 100%; height: 100%; object-fit: contain; }
.section--gray .ct-statement-stage { background: var(--surface); }
@media (min-width: 1024px) { .ct-statement-head--art { column-gap: var(--sp-12); } }
/* Opening the page right under the band, the section starts close to it (the band already separates). */
.blk-content-hero + .blk-content-statement > .ct-statement-sec { padding-top: var(--sp-8); }
@media (min-width: 768px) { .blk-content-hero + .blk-content-statement > .ct-statement-sec { padding-top: var(--sp-10); } }
.ct-textblocks { display: grid; gap: var(--sp-8) var(--grid-gap); margin-top: var(--section-head-gap); }
.ct-statement-sec--plain .ct-textblocks { margin-top: 0; }
@media (min-width: 768px) { .ct-textblocks { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-10); } }
@media (min-width: 1024px) {
  .ct-textblocks:is(.ct-textblocks--3, .ct-textblocks--5, .ct-textblocks--6) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
  .ct-textblocks--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ct-textblocks--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ct-textblocks--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.ct-textblock { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.ct-textblock-title { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-h3); }
.ct-textblock-i { flex: none; margin-top: -1px; color: var(--ink); }
.ct-textblock-text { max-width: 62ch; color: var(--ink-2); }
/* Power options as the shared power chips under the benefit's title (in place of a sentence of kW values). */
.ct-textblock-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; max-width: none; }
.ct-textblock-list { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-1) 0 0; padding: 0; list-style: none; color: var(--ink); font-weight: var(--fw-medium); }
.ct-textblock-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--sp-2); align-items: start; }
.ct-textblock-list .i { margin-top: 4px; color: var(--ink); }
.section--gray .ct-textblock { border-top-color: var(--line-hover); }

/* ---------- Drawing tile of the photo mosaic: one of our scenes on a light stage among the photos ---------- */
/* One definite track, so the drawing's 100% height resolves and contain keeps the whole scene in view. */
.ct-mosaic-tile--art { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: var(--sp-3) var(--sp-4); background: var(--bg-tint); }
.ct-mosaic-tile--art .il { width: 100%; height: 100%; max-width: 640px; object-fit: contain; }
@media (min-width: 768px) { .ct-mosaic-tile--art { padding: var(--sp-5) var(--sp-6); } }
html.motion :is(.blk-content-hero, .page-head) + .blk-content-mosaic .ct-mosaic-tile--art[data-intro="clip"] img { animation: none; }

/* ---------- content.power: the power options with the station drawings and the power chips ---------- */
.ct-power { display: grid; gap: var(--grid-gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .ct-power { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ct-power--3 .ct-power-card--note { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .ct-power--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ct-power--3 .ct-power-card--note { grid-column: auto; } }
.ct-power-card { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.ct-power-stage { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-2); padding: var(--sp-4); aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--bg-tint); }
@media (min-width: 768px) { .ct-power-stage { margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) var(--sp-2); } }
.ct-power-stage .il { width: 100%; height: 100%; object-fit: contain; }
.ct-power-title { font-size: var(--fs-h3); }
.ct-power-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; max-width: none; }
.ct-power-text { color: var(--ink-2); }
.section--gray .ct-power-stage { background: var(--bg-alt); }
/* Phones: each card is one row like the other drawn cards (the drawing small on the left, the title,
   the power chips and the text beside it). */
@media (max-width: 767.98px) {
  .ct-power-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: var(--sp-4); row-gap: var(--sp-2); align-content: start; }
  .ct-power-stage { grid-row: 1 / span 3; align-self: start; margin: 0; padding: var(--sp-2); aspect-ratio: 1; border-radius: var(--r-sm); }
  .ct-power-card > :not(.ct-power-stage) { grid-column: 2; }
}

/* ---------- content.feature-grid ---------- */
.ct-features { align-items: stretch; }
.ct-feature { display: flex; flex-direction: column; gap: var(--sp-3); }
.ct-feature-title { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: 1.125rem; line-height: 1.35; }
.ct-feature-i { color: var(--ink); flex: none; margin-top: -2px; }
.ct-features--plain .ct-feature { padding: var(--sp-5) 0; border-top: 1px solid var(--line); }
.ct-feature-text { color: var(--ink-2); }
.ct-feature-bullets { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--ink); font-weight: var(--fw-medium); }
.ct-feature-bullets li { display: flex; align-items: center; gap: 8px; }
.ct-feature--notice { background: var(--stale-tint); border-color: transparent; }
.ct-feature--notice .ct-feature-i { color: var(--stale); }
.section--navy .ct-features--plain .ct-feature { border-top-color: var(--on-band-line); }
.section--navy .ct-feature-text { color: var(--on-band-muted); }
.section--navy .ct-feature-i, .section--navy .ct-feature-bullets { color: var(--on-band); }

/* ---------- content.steps (numbered sequences) ---------- */
.ct-steps { display: grid; gap: var(--sp-6) var(--grid-gap); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ct-step { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.ct-step-head { display: flex; align-items: center; gap: var(--sp-3); }
.ct-step-num {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--band);
  color: var(--on-band);
  font-size: .9375rem;
  font-weight: var(--fw-bold);
}
.ct-step-name { font-size: 1.1875rem; line-height: 1.3; }
.ct-step-text { color: var(--ink-2); }
.ct-step-art { display: grid; place-items: center; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--bg-tint); aspect-ratio: 4 / 3; }
.section--gray .ct-step-art { background: var(--surface); }
.ct-step-art .il { max-width: 260px; }
.section--navy .ct-step-art { background: var(--band-raised); }
.section--navy .ct-step-art--light { background: var(--bg-tint); }
@media (min-width: 768px) {
  .ct-steps--horizontal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .ct-steps--horizontal { grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); }
  /* A thin line joins the numbers of a sequence without drawings. */
  .ct-steps--horizontal:not(.ct-steps--art) .ct-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 18px;
    left: 48px;
    right: calc(var(--grid-gap) * -1 + 8px);
    height: 1px;
    background: var(--line);
  }
}
/* Phones: a drawn step is one compact row (the drawing small on the left, number, name and text beside
   it), so a five step chain reads in one screen instead of five stacked picture tiles. */
@media (max-width: 767.98px) {
  .ct-steps--art { gap: var(--sp-4); }
  .ct-steps--art .ct-step { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: var(--sp-4); row-gap: var(--sp-1); align-items: start; }
  .ct-steps--art .ct-step-art { grid-row: 1 / span 2; padding: var(--sp-2); border-radius: var(--r-md); }
  .ct-steps--art .ct-step-head, .ct-steps--art .ct-step-text { grid-column: 2; }
  .ct-steps--art .ct-step-head { padding-top: var(--sp-2); }
  .ct-steps--art .ct-step-num { width: 28px; height: 28px; font-size: var(--fs-micro); }
}
/* Three steps stay in one row from 768 px (no lone step on a second row). */
@media (min-width: 768px) { .ct-steps--horizontal.ct-steps--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Three drawn steps share the width in wider tiles: a flatter stage keeps them from towering (1024 px up). */
@media (min-width: 1024px) { .ct-steps--art.ct-steps--n3 .ct-step-art { aspect-ratio: 16 / 9; } }
/* Icon steps (a system's flow, e.g. panels or grid, storage, charger and car): a bare icon in a small cool
   haze tile over the number and name; from 1024 px an arrow joins each tile to the next one. */
.ct-step-icon { display: grid; place-items: center; width: 96px; height: 96px; border-radius: var(--r-lg); background: var(--bg-tint); color: var(--ink); }
.ct-step-icon .i { width: 48px; height: 48px; stroke-width: 1.35; }
.section--gray .ct-step-icon { background: var(--surface); }
@media (min-width: 1024px) {
  /* Same weight as the thin line of plain sequences (base rule above), placed at the tiles' middle. */
  .ct-steps--horizontal.ct-steps--icons .ct-step:not(:last-child)::after { top: 48px; left: calc(96px + var(--sp-4)); right: calc(var(--grid-gap) * -1 + var(--sp-4)); background: var(--line-strong); }
  .ct-steps--horizontal.ct-steps--icons .ct-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 43.5px;
    right: calc(var(--grid-gap) * -1 + var(--sp-4));
    width: 9px;
    height: 9px;
    border-top: 1px solid var(--line-strong);
    border-right: 1px solid var(--line-strong);
    transform: rotate(45deg);
  }
}
@media (max-width: 767.98px) {
  .ct-steps--icons { gap: var(--sp-5); }
  .ct-steps--icons .ct-step { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--sp-4); row-gap: var(--sp-1); align-items: start; }
  .ct-steps--icons .ct-step-icon { grid-row: 1 / span 2; width: 64px; height: 64px; border-radius: var(--r-md); }
  .ct-steps--icons .ct-step-icon .i { width: 32px; height: 32px; }
  .ct-steps--icons .ct-step-head, .ct-steps--icons .ct-step-text { grid-column: 2; }
  .ct-steps--icons .ct-step-num { width: 28px; height: 28px; font-size: var(--fs-micro); }
}
.ct-steps--plain .ct-step-num { display: none; }
.ct-steps--vertical { max-width: 90ch; }
.ct-steps--vertical .ct-step { padding-left: 52px; }
.ct-steps--vertical .ct-step-head { margin-left: -52px; }
.section--navy .ct-step-num { background: transparent; border: 1.5px solid var(--on-band); }
.section--navy .ct-step-text { color: var(--on-band-muted); }
.section--navy .ct-steps--horizontal .ct-step:not(:last-child)::after { background: var(--on-band-line); }

/* ---------- content.app-steps: the phone step story (shared data-story component, docs/MOTION.md §9) ----------
   Below 1024 px every step carries its own small screenshot and the big phone is not printed;
   from 1024 px the phone stays in place (motion.css makes .story-media sticky) and motion.js swaps
   the frames. Inactive step styling only exists under html.motion: without JS every step reads normally. */
.ct-appstory-steps { gap: var(--sp-8); margin: 0; padding: 0; list-style: none; }
.ct-appstory-step { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--sp-4); }
.ct-appstory-body { display: flex; flex-direction: column; gap: var(--sp-2); }
.ct-appstory-body h3 { font-size: 1.25rem; }
.ct-appstory-body p { color: var(--ink-2); }
.ct-appstory-inline { margin-top: var(--sp-4); }
.ct-appstory-media { display: none; }
.ct-appstory .ct-phone-screen.story-frames { display: block; }
.ct-appstory .story-frame { position: absolute; inset: 0; }
.ct-story-dl { display: none; }
@media (min-width: 1024px) {
  .ct-appstory-media { display: grid; justify-items: center; gap: var(--sp-5); }
  .ct-phone--story { width: auto; height: min(62vh, 620px); }
  .ct-appstory-media .stripe-steps { width: min(100%, 260px); }
  .ct-appstory-inline { display: none; }
  .ct-appstory-steps { gap: 0; }
  .ct-appstory-step { min-height: 42vh; align-content: center; padding-block: var(--sp-8); }
  html.motion .ct-appstory-step .ct-step-num { transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
  html.motion .ct-appstory-step:not(.is-active) .ct-step-num { background: var(--line); color: var(--ink); }
}
@media (min-width: 1440px) and (min-height: 860px) {
  .ct-story-dl { display: flex; align-items: center; gap: var(--sp-4); width: min(100%, 420px); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); }
  .ct-story-dl p { color: var(--muted); font-size: var(--fs-small); }
}

/* ---------- content.tabs ---------- */
/* The tab row stays on one line (owner 05.10.2026: three long method names): it fits on desktop and
   scrolls sideways on phones, running to the screen edges there so the cut tab shows there is more. */
.ct-tablist {
  display: flex;
  gap: var(--sp-6);
  margin: 0 calc(-1 * var(--gutter)) var(--sp-8);
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.ct-tablist::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .ct-tablist { margin-inline: 0; padding-inline: 0; } }
.ct-tab:focus-visible { outline-offset: -2px; }
/* Opened from the address (#istasyon-kodu-ile): the tab row stops under the floating header, also when
   the browser itself scrolls to the panel (it keeps room for the tab row above it). */
.ct-tabs, .ct-tabsec[id] { scroll-margin-top: var(--ct-sticky-top); }
.ct-tabpanel[data-tab-anchor] { scroll-margin-top: calc(var(--ct-sticky-top) + var(--tap) + var(--sp-8) + 8px); }
.ct-tab {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-2) 0 var(--sp-3);
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.ct-tab-i { flex: none; }
.ct-tab:hover { color: var(--ink); }
.ct-tab[aria-selected="true"] { color: var(--ink); }
.ct-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); border-radius: 2px 2px 0 0; }
/* Steps tab: one column of numbered steps, then a calm result line, a small labelled note and the
   linked line; the drawing on a light stage beside the steps from 1024 px. */
.ct-method { display: grid; gap: var(--sp-6) var(--grid-gap); padding: var(--sp-6); border-radius: var(--r-lg); background: var(--bg-alt); }
.section--gray .ct-method { background: var(--surface); }
@media (min-width: 1024px) {
  .ct-method { padding: var(--sp-8); }
  .ct-method--art { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
}
.ct-method-steps { display: grid; gap: var(--sp-5); margin: 0; padding: 0; list-style: none; }
.ct-method-step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.ct-method-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--band); color: var(--on-band); font-size: .9375rem; font-weight: var(--fw-bold); }
.ct-method-text { padding-top: 3px; font-size: 1.0625rem; line-height: 1.5; }
.ct-method-result { display: flex; align-items: flex-start; gap: var(--sp-3); max-width: none; margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); font-weight: var(--fw-medium); }
.ct-method-result-i { flex: none; margin-top: 2px; color: var(--ink); }
.ct-method-note, .ct-method-more { margin-top: var(--sp-3); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.ct-method-result + .ct-method-note, .ct-method-result + .ct-method-more { margin-top: var(--sp-4); }
.ct-method-note-label { color: var(--ink); font-weight: var(--fw-semibold); }
.ct-method-more .link { font-weight: var(--fw-semibold); }
.ct-method-art { display: none; margin: 0; }
@media (min-width: 1024px) {
  .ct-method-art { display: grid; place-items: center; padding: var(--sp-6); border-radius: var(--r-md); background: var(--bg-tint); }
  .section--gray .ct-method-art { background: var(--bg-alt); }
  .ct-method-art .il { width: min(100%, 340px); max-height: 280px; height: auto; object-fit: contain; }
}
.ct-tabpanel + .ct-tabpanel { margin-top: var(--sp-10); }
.ct-tabs.is-enhanced .ct-tabpanel + .ct-tabpanel { margin-top: 0; }
.ct-tab-heading { font-size: var(--fs-h3); margin-bottom: var(--sp-5); }
.ct-tabs.is-enhanced .ct-tab-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ct-tab-cols { display: grid; gap: var(--sp-6) var(--grid-gap); }
@media (min-width: 1024px) { .ct-tab-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ct-tab-col { padding: var(--sp-6); border-radius: var(--r-md); background: var(--bg-alt); }
.section--gray .ct-tab-col { background: var(--surface); }
.ct-tab-col-title { font-size: 1.125rem; margin-bottom: var(--sp-4); }
.ct-tab-col .ct-prose ol, .ct-tab-col .ct-prose ul { padding-left: 1.2em; }

/* ---------- content.anatomy ---------- */
.ct-anatomy-grid { display: grid; gap: var(--sp-10) var(--grid-gap); align-items: start; }
@media (min-width: 768px) { .ct-anatomy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ct-anatomy-side { grid-column: 1 / -1; } }
.ct-anatomy-fig { display: grid; gap: var(--sp-5); margin: 0; }
@media (min-width: 1280px) { .ct-anatomy-fig { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; } }
.ct-anatomy-art { max-width: 400px; width: 100%; justify-self: center; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--bg-tint); }
.section--gray .ct-anatomy-art { background: var(--surface); }
.ct-anatomy-box { position: relative; container-type: inline-size; }
.ct-marker {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  background: var(--band);
  color: var(--on-band);
  font-size: .8125rem;
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-1);
}
/* On the drawing the numbers scale with it (anatomy-anchors.json), so the close parts of the DC front
   panel (1, 4, 5 are about 7 % of the width apart) never cover each other. */
.ct-anatomy-box .ct-marker { --m: clamp(18px, 6.6cqi, 28px); width: var(--m); height: var(--m); margin: calc(var(--m) / -2) 0 0 calc(var(--m) / -2); font-size: calc(var(--m) * .48); }
.ct-marker--list { position: static; left: auto; top: auto; margin: 0; border: 0; box-shadow: none; flex: none; }
.ct-anatomy-title { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.ct-anatomy-list { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.ct-anatomy-list li { display: flex; align-items: flex-start; gap: var(--sp-3); color: var(--ink-2); }
.ct-anatomy-side { display: flex; flex-direction: column; gap: var(--sp-5); }
.ct-legend { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); }
.ct-legend-row { display: flex; align-items: flex-start; gap: var(--sp-3); color: var(--ink-2); font-size: var(--fs-small); max-width: none; }
.ct-legend-row .tag { flex: none; }
.ct-anatomy-support { display: flex; align-items: flex-start; gap: var(--sp-3); color: var(--ink-2); max-width: none; }
.ct-anatomy-support a { color: var(--ink); font-weight: var(--fw-bold); white-space: nowrap; }
.ct-anatomy-support .i { color: var(--ink); flex: none; }

/* ---------- FAQ page (/sss) ---------- */
.ct-search { position: relative; width: 100%; }
@media (min-width: 1024px) { .ct-search { width: min(46vw, 560px); } }
.ct-search input {
  width: 100%;
  height: var(--control-h-lg);
  padding: 0 60px 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.0625rem;
}
.ct-search input::placeholder { color: var(--muted); }
.ct-search input:focus { outline: 2px solid var(--focus-ring); outline-offset: 0; border-color: var(--focus-ring); }
.ct-search-btn { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: var(--control-h-lg); height: var(--control-h-lg); border: 0; background: transparent; color: var(--ink); }
.ct-chips { position: sticky; top: var(--ct-sticky-top); z-index: 5; margin: 0 calc(var(--gutter) * -1) var(--sp-6); padding: var(--sp-3) var(--gutter); background: var(--bg); transition: top var(--dur-2) var(--ease); }
.ct-chips ul { display: flex; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.ct-chips ul::-webkit-scrollbar { display: none; }
.ct-chips .chip { white-space: nowrap; }
.ct-chips .chip[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.ct-chip-n { color: inherit; opacity: .75; }
.ct-chips--inline { position: static; margin: 0; padding: 0; background: none; }
@media (max-width: 1023.98px) {
  .ct-chips { top: calc(var(--header-h-mobile)); }
  html.hdr-hidden .ct-chips { top: 0; }
  .ct-chips--inline { top: auto; }
}
.ct-faq-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-10) var(--grid-gap); align-items: start; }
.ct-faq-main, .ct-faq-aside, .ct-faq-nav { min-width: 0; }
/* The sticky chips bar stops at the main column, so it never covers the support card beside it. */
@media (min-width: 1024px) { .ct-faq-main > .ct-chips { margin-right: 0; padding-right: 0; } }
@media (min-width: 1024px) {
  .ct-faq-layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .ct-faq-aside { position: sticky; top: var(--ct-sticky-top); }
}
@media (min-width: 1600px) { .ct-faq-layout { grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); } }
@media (min-width: 1600px) {
  .ct-faq-groups--cols { columns: 2; column-gap: var(--grid-gap); }
  .ct-faq-groups--cols .ct-faq-group { break-inside: avoid; }
}
.ct-faq-group { padding-bottom: var(--sp-10); }
.ct-faq-group h2 { font-size: 1.5rem; margin-bottom: var(--sp-4); scroll-margin-top: calc(var(--ct-sticky-top) + 64px); }
.ct-faq-group[hidden] { display: none; }
.ct-q { scroll-margin-top: calc(var(--ct-sticky-top) + 64px); }
.ct-q[hidden] { display: none; }
.ct-q mark { background: var(--stale-tint); color: var(--ink); border-radius: 2px; padding: 0 1px; }
.ct-q .acc-body > * + * { margin-top: var(--sp-3); }
.ct-q-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px dashed var(--line); }
.ct-helpful { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.ct-helpful-q { margin-right: var(--sp-2); color: var(--muted); font-size: var(--fs-small); }
.ct-helpful.is-done { color: var(--live); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.ct-copy { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 var(--sp-2); border: 0; background: none; color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-semibold); border-radius: var(--r-sm); }
.ct-copy:hover { color: var(--ink); background: var(--bg-alt); }
.ct-faq-status { margin-bottom: var(--sp-5); color: var(--ink-2); max-width: none; }
.ct-faq-empty { padding: var(--sp-8) 0; color: var(--ink-2); }
.ct-faq-empty p + p { margin-top: var(--sp-2); }
.ct-support { gap: var(--sp-4); }
.ct-support-links { display: flex; flex-direction: column; gap: var(--sp-2); max-width: none; }
/* Many questions: sticky category list · questions · sticky support card */
.ct-faq-nav { display: none; }
@media (min-width: 1024px) {
  .ct-faq-layout--many { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .ct-faq-layout--many .ct-faq-nav { display: block; position: sticky; top: var(--ct-sticky-top); }
  .ct-faq-layout--many .ct-faq-aside { position: static; grid-column: 2; }
}
@media (min-width: 1280px) {
  .ct-faq-layout--many { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); }
  .ct-faq-layout--many .ct-faq-aside { position: sticky; grid-column: auto; }
}
.ct-faq-nav ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ct-faq-nav a { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); color: var(--ink-2); font-weight: var(--fw-medium); text-decoration: none; }
.ct-faq-nav a:hover { background: var(--bg-alt); color: var(--ink); }

/* FAQ block, list layout: questions 8/12, troubleshooting links and support card 4/12 */
.ct-faq-list { align-items: start; }
.ct-faq-side { display: flex; flex-direction: column; gap: var(--sp-5); }
@media (min-width: 1024px) { .ct-faq-side { position: sticky; top: var(--ct-sticky-top); } }
.ct-tips { padding: var(--sp-5) var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.ct-tips-title { font-size: 1.0625rem; margin-bottom: var(--sp-3); }
.ct-tips ul { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }

/* ---------- Legal pages: reading layout filled edge to edge ---------- */
.ct-reading { display: grid; gap: var(--sp-8) var(--grid-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
.ct-toc, .ct-toc-mid { display: none; }
.ct-legal-text { min-width: 0; }
/* Update date and version above the text on phones (the side card shows them from 768 px). */
.ct-legal-data--top { margin: 0 0 var(--sp-6); }
.ct-legal-body { max-width: 68ch; }
.ct-legal-body h2, .ct-legal-body h3 { scroll-margin-top: calc(var(--ct-sticky-top) + 8px); }
.ct-legal-side { min-width: 0; }
.ct-sticky { display: flex; flex-direction: column; gap: var(--sp-6); }
.ct-side-title { margin: 0 0 var(--sp-3); color: var(--ink); font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0; max-width: none; }
.ct-toc-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); }
.ct-toc-list a { display: block; padding: 6px var(--sp-3); border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; line-height: 1.4; }
.ct-toc-list a:hover { background: var(--bg-alt); color: var(--ink); }
.ct-toc-mobile { margin-bottom: var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-md); }
.ct-toc-mobile summary { display: flex; align-items: center; min-height: 52px; padding: 0 var(--sp-4); color: var(--ink); font-weight: var(--fw-semibold); cursor: pointer; }
.ct-toc-mobile .ct-toc-list { padding: 0 var(--sp-2) var(--sp-3); }
.ct-legal-meta { display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--bg-alt); }
.ct-legal-data { display: flex; flex-wrap: wrap; gap: 4px 6px; color: var(--ink-2); font-size: var(--fs-small); max-width: none; }
.ct-legal-related ul { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); }
.ct-legal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
@media (min-width: 768px) {
  .ct-reading { grid-template-columns: minmax(0, 68ch) minmax(240px, 1fr); }
  .ct-toc-mobile, .ct-legal-data--top { display: none; }
  .ct-toc-mid { display: block; }
  .ct-legal-side .ct-sticky { position: sticky; top: var(--ct-sticky-top); max-height: calc(100vh - var(--ct-sticky-top) - 24px); overflow: auto; }
}
@media (min-width: 1280px) {
  .ct-reading { grid-template-columns: minmax(200px, 1fr) minmax(0, 68ch) minmax(240px, 1fr); column-gap: var(--sp-10); }
  .ct-toc { display: block; position: sticky; top: var(--ct-sticky-top); max-height: calc(100vh - var(--ct-sticky-top) - 24px); overflow: auto; }
  .ct-toc-mid { display: none; }
}
@media print {
  .site-header, .tstrip, .site-footer, .cookie, .ct-toc, .ct-legal-side, .ct-toc-mobile, .sticky-cta, .popup-slot, .campaign-band-slot { display: none !important; }
  .ct-reading { display: block; }
  .ct-legal-body { max-width: none; }
  .ct-legal-data--top { display: flex; }
}

/* ---------- References page ---------- */
.ct-refs-grid { align-items: start; row-gap: var(--sp-8); }
.ct-refs-side { display: flex; flex-direction: column; gap: var(--sp-5); }
@media (min-width: 1024px) { .ct-refs-side { position: sticky; top: var(--ct-sticky-top); } }
/* The organisation count as a figure over the intro (tabular, the label smaller and lighter). */
.ct-refs-count { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0; padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line-hover); color: var(--muted); font-weight: var(--fw-semibold); }
.ct-refs-n { color: var(--ink); font-size: var(--fs-price); font-weight: var(--fw-bold); font-stretch: var(--stretch-heading); line-height: 1; letter-spacing: -.02em; }
.ct-refs-unit { font-size: var(--fs-intro); }
.ct-refs-logos .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .ct-refs-logos .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ct-refs-logos .logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .ct-refs-logos .logo-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1920px) { .ct-refs-logos .logo-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.logo-tile[hidden] { display: none; }
.logo-tile > a { position: absolute; inset: 0; border-radius: inherit; }

/* ---------- Reviews ---------- */
.ct-review .review-quote p + details { margin-top: var(--sp-2); }
.ct-review-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); max-width: none; }
.ct-review-source { color: var(--muted); font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.ct-review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.ct-verified { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--sp-2); color: var(--live); font-weight: var(--fw-semibold); }
.ct-more summary { color: var(--ink); font-size: var(--fs-small); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; list-style: none; }
.ct-more summary::-webkit-details-marker { display: none; }
.ct-more[open] summary { display: none; }
.ct-review.is-more { display: none; }
.ct-review-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-8); margin-top: var(--sp-8); }
.ct-review-note { max-width: 60ch; }
.ct-tablinks ul { display: flex; gap: var(--sp-5); margin: 0; padding: 0; list-style: none; }
.ct-tab-link { position: relative; display: inline-flex; align-items: center; min-height: var(--tap); color: var(--muted); font-weight: var(--fw-semibold); text-decoration: none; }
.ct-tab-link:hover { color: var(--ink); }
.ct-tab-link.is-active { color: var(--ink); }
.ct-tab-link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 3px; border-radius: 2px; background: var(--accent); }
.ct-share-wrap { margin-top: var(--sp-12); padding-top: var(--sp-10); border-top: 1px solid var(--line); }
.ct-share > summary { list-style: none; width: fit-content; }
.ct-share > summary::-webkit-details-marker { display: none; }
.ct-share[open] > summary { margin-bottom: var(--sp-6); }
.ct-empty { display: grid; gap: var(--sp-10) var(--grid-gap); align-items: start; }
@media (min-width: 1024px) { .ct-empty { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.ct-empty-text { display: flex; flex-direction: column; gap: var(--sp-4); }
.ct-empty-text h2 { font-size: 1.75rem; max-width: 22ch; }
.ct-empty-text p { color: var(--ink-2); }

/* Small forms of the content module (review sharing) */
.ct-form { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 880px; }
.ct-form-grid { display: grid; gap: var(--sp-4) var(--grid-gap); }
@media (min-width: 768px) { .ct-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ct-field { display: flex; flex-direction: column; gap: 6px; }
.ct-field--wide { grid-column: 1 / -1; }
.ct-field label { color: var(--ink); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.ct-field input, .ct-field select, .ct-field textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
}
.ct-field textarea { min-height: 128px; resize: vertical; }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 0; border-color: var(--focus-ring); }
.ct-help { color: var(--muted); font-size: .8125rem; }
.ct-check { display: flex; align-items: flex-start; gap: var(--sp-3); color: var(--ink-2); font-size: var(--fs-small); }
.ct-check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--ink); flex: none; }
.ct-kvkk { color: var(--muted); font-size: .8125rem; }
.ct-kvkk a { color: var(--ink); }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Contact ---------- */
.ct-contact-grid { align-items: start; row-gap: var(--sp-10); }
/* Phones: the call center and the other channels come before the form (one tap to call). */
@media (max-width: 1023.98px) { .ct-contact-grid > .ct-contact-form { order: 2; } }
.ct-contact-form, .ct-contact-cta { display: flex; flex-direction: column; gap: var(--sp-5); }
.ct-form-title { font-size: var(--fs-h2); }
.ct-quick-title { margin-top: var(--sp-4); font-size: 1.125rem; }
.ct-quick { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .ct-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ct-quick-card { display: flex; align-items: center; gap: var(--sp-3); color: var(--ink); font-weight: var(--fw-semibold); text-decoration: none; }
.ct-quick-card .card-link { flex: 1; }
.ct-channels { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 1600px) { .ct-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ct-channel--call, .ct-channel--address { grid-column: 1 / -1; } }
.ct-channel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.ct-channel-title { font-size: 1.0625rem; }
.ct-channel--call .ct-channel-title { font-size: 1.25rem; }
.ct-channel-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: var(--fw-semibold); text-decoration: none; overflow-wrap: anywhere; }
.ct-channel-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ct-channel-text, .ct-channel-meta { color: var(--ink-2); max-width: none; }
.on-band .ct-channel-meta { color: var(--on-band-muted); }
.ct-channel-more { font-size: var(--fs-small); }
.ct-map { width: 100%; margin: var(--sp-2) 0; overflow: hidden; border-radius: var(--r-md); }
@media (min-width: 1600px) { .ct-channel--address { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-6); } .ct-channel--address .ct-map { grid-row: 1 / span 4; grid-column: 2; margin: 0; } }

/* ---------- content.cta ---------- */
.cta-card--1 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .cta-card--1 .cta-col { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
}
.ct-cta-text { color: var(--ink-2); font-size: var(--fs-intro); line-height: 1.5; }
.cta-band--navy .ct-cta-text { color: var(--on-band-muted); }
main:has(> .blk-content-cta:last-child) > .blk-content-cta:last-child,
main:has(> .blk-content-install-cta:last-child) > .blk-content-install-cta:last-child { flex-grow: 0; }
main:has(> .blk-content-cta:last-child) > :nth-last-child(2) { flex-grow: 1; }
main:has(> .blk-content-install-cta:last-child) > .blk-content-install-cta:last-child { flex-grow: 1; }

/* ---------- content.install-cta (Y-26 form slot) ---------- */
.ct-install-grid { align-items: start; row-gap: var(--sp-8); }
.ct-install-main { display: flex; flex-direction: column; gap: var(--sp-5); }
.ct-install-card { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--cta-pad); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); }
.ct-install-card h2 { max-width: 24ch; }
.ct-install-side { display: grid; gap: var(--sp-6) var(--grid-gap); }
@media (min-width: 1600px) { .ct-install-side { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ct-next { padding: var(--sp-5) var(--sp-6); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.ct-next-title { font-size: 1.0625rem; margin-bottom: var(--sp-4); }
.ct-next-list { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.ct-next-list li { display: flex; align-items: center; gap: var(--sp-3); color: var(--ink); font-weight: var(--fw-medium); }
.ct-next-list .ct-step-num { width: 28px; height: 28px; font-size: .8125rem; }
.ct-install-contact { display: flex; flex-direction: column; gap: var(--sp-4); }
.ct-install-line { display: flex; align-items: center; gap: var(--sp-3); color: var(--ink-2); max-width: none; }
.ct-install-line a { color: var(--ink); font-size: 1.125rem; font-weight: var(--fw-bold); text-decoration: none; }
.ct-install-line a:hover { text-decoration: underline; }
.ct-install-line .i { color: var(--ink); flex: none; }
.ct-pdf { display: flex; align-items: center; gap: var(--sp-4); color: var(--ink); text-decoration: none; }
.ct-pdf-body { display: flex; flex-direction: column; gap: 2px; }
.ct-pdf-body span { color: var(--muted); font-size: var(--fs-small); }

/* ---------- content.company-card (#lisans) ---------- */
.ct-doc { padding: var(--sp-8) var(--sp-6); border: 1.5px solid var(--ink); border-radius: var(--r-lg); }
@media (min-width: 768px) { .ct-doc { padding: var(--sp-10); } }
.ct-doc-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.ct-doc-i { color: var(--ink); }
.ct-doc-lead { color: var(--ink-2); margin-bottom: var(--sp-8); }
.ct-doc-list { display: grid; gap: var(--sp-5) var(--grid-gap); margin: 0; }
@media (min-width: 768px) { .ct-doc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ct-doc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .ct-doc-list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ct-doc-list div { display: flex; flex-direction: column; gap: 4px; padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.ct-doc-list dt { color: var(--muted); font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.ct-doc-list dd { margin: 0; color: var(--ink); font-weight: var(--fw-medium); overflow-wrap: anywhere; }

/* Trust strip layout (about page, owner 29.09.2026): no box; the head office photo and the details sit
   on the section ground in the page's rhythm (navy by default), the licence statement closes them as a
   seal line. The photo comes first on every width; the H2 stays first for screen readers. */
.ct-trust-grid { align-items: center; row-gap: var(--sp-8); }
.ct-trust-body { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; }
.ct-trust-title { max-width: 20ch; }
.ct-trust-media { position: relative; order: -1; margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--bg-tint); aspect-ratio: 16 / 10; }
/* The default photo is the head office: kept from its left edge, where the Form Elektrik sign is. */
.ct-trust-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 0% 50%); }
.ct-trust .ct-doc-list { row-gap: var(--sp-6); }
@media (min-width: 1600px) { .ct-trust .ct-doc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .ct-trust--solo .ct-doc-list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ct-trust .ct-doc-list dd { font-size: var(--fs-body); line-height: 1.45; }
.ct-trust-seal { display: flex; align-items: flex-start; gap: var(--sp-3); margin: 0; padding: var(--sp-4) var(--sp-5); max-width: none; border-radius: var(--r-md); background: var(--bg-alt); color: var(--ink); font-weight: var(--fw-medium); line-height: 1.45; }
.ct-trust-i { flex: none; color: var(--ink); }
.section--gray .ct-trust-seal { background: var(--surface); }
.section--navy .ct-trust-media { background: var(--band-raised); }
.section--navy.ct-trust .ct-doc-list div { border-top-color: var(--on-band-line); }
.section--navy.ct-trust .ct-doc-list dt { color: var(--on-band-subtle); }
.section--navy.ct-trust .ct-doc-list dd, .section--navy.ct-trust .ct-doc-list a { color: var(--on-band); }
.section--navy.ct-trust .ct-trust-seal { background: var(--band-raised); color: var(--on-band); }
.section--navy.ct-trust .ct-trust-i { color: var(--on-band); }

/* ---------- content.solution-cards ---------- */
.ct-sol { display: flex; flex-direction: column; gap: var(--sp-4); }
.ct-sol-photo { margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-1); overflow: hidden; border-radius: var(--r-md) var(--r-md) 0 0; aspect-ratio: 16 / 10; background: var(--bg-tint); }
@media (min-width: 768px) { .ct-sol-photo { margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) var(--sp-1); } }
.ct-sol-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
/* Scene drawing (16:10, same frame as the photos): the whole scene stays visible. */
.ct-sol-photo--art { display: grid; place-items: center; padding: var(--sp-3) var(--sp-4); }
.ct-sol-photo--art img { object-fit: contain; }
.ct-sol-title { font-size: var(--fs-h3); }
.ct-sol-i { color: var(--ink); }
.ct-sol-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--ink); font-weight: var(--fw-semibold); }
.ct-sol:hover .ct-sol-more .i { transform: translateX(3px); }
.ct-sol-more .i { transition: transform var(--dur-2) var(--ease); }
.ct-sol-cards--services .ct-sol { min-height: 180px; }
/* Phones: a drawn service card is one row (the scene small on the left, the name and "İncele" beside
   it); the whole card stays one link. */
@media (max-width: 767.98px) {
  .ct-sol-cards--services .ct-sol--art { display: grid; grid-template-columns: 124px minmax(0, 1fr); column-gap: var(--sp-4); row-gap: var(--sp-2); align-content: center; min-height: 0; padding: var(--sp-3); }
  .ct-sol-cards--services .ct-sol--art .ct-sol-photo--art { grid-row: 1 / span 2; align-self: center; margin: 0; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); }
  .ct-sol-cards--services .ct-sol--art :is(.ct-sol-title, .ct-sol-more) { grid-column: 2; }
  .ct-sol-cards--services .ct-sol--art .ct-sol-title { align-self: end; }
  .ct-sol-cards--services .ct-sol--art .ct-sol-more { align-self: start; margin-top: 0; }
}
/* Compact layout (a lighter list beside a row of full cards, e.g. the hub's services under its segments):
   the same row at every width; two to a row from 768 px, then as many as leave no lone row (misc.js). */
.ct-sol-cards--compact .ct-sol--art { display: grid; grid-template-columns: clamp(112px, 26%, 200px) minmax(0, 1fr); column-gap: var(--sp-4); row-gap: var(--sp-1); align-content: center; min-height: 0; padding: var(--sp-3); }
.ct-sol-cards--compact .ct-sol--art .ct-sol-photo--art { grid-row: 1 / span 2; align-self: center; margin: 0; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); }
.ct-sol-cards--compact .ct-sol--art :is(.ct-sol-title, .ct-sol-more) { grid-column: 2; }
.ct-sol-cards--compact .ct-sol--art .ct-sol-title { align-self: end; }
.ct-sol-cards--compact .ct-sol--art .ct-sol-more { align-self: start; margin-top: 0; }
/* The server sets the columns (no lone row); the names step down to the H4 size once rows are narrow. */
@media (min-width: 1024px) { .ct-sol-cards--compact .ct-sol--art .ct-sol-title { font-size: var(--fs-h4); } }

/* ---------- content.case, content.video ---------- */
.ct-case-facts { display: flex; flex-wrap: wrap; gap: 2px 6px; color: var(--ink); font-weight: var(--fw-semibold); max-width: none; }
.ct-quote { margin: 0; padding-left: var(--sp-5); border-left: 1px solid var(--line-strong); }
.ct-quote p { color: var(--ink); font-size: 1.125rem; }
.ct-quote footer { margin-top: var(--sp-2); color: var(--muted); font-size: var(--fs-small); }
.ct-video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-lg); background: var(--band); }
.ct-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Admin preview only: a data block without data ---------- */
.ct-preview-note { padding-block: var(--sp-5); }
.ct-preview-note p { padding: var(--sp-4) var(--sp-5); border: 1px dashed var(--line-hover); border-radius: var(--r-md); color: var(--muted); font-size: var(--fs-small); max-width: none; }