/* * Public website (home /it /en /ru and prices /prezzi /en/pricing /ru/pricing). System fonts only, no script needed
 * for the layout. Sections in page order: base and type, shared layout blocks, header, hero,
 * engines strip, gallery (bento, lightbox), features, higher resolution, prices, questions, closing and footer.
 * Then one section per screen size (wider screens, tablets, phones), each in the same component order.
 * Breakpoints: 900 px (tablet), 620 px (phone).
 */

/* ===== Base and type ===== */
:root{
    --bg:#101315;
    --card:#171c20;
    --card2:#1d2327;
    --line:#2a3236;
    --fg:#f0f3ec;
    --soft:#c9d2cf;
    --muted:#a3adae;
    --accent:#d6f38a;
    --accent-fg:#101411;
    --violet:#b8a9f5;
    --mint:#94d8bf;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --display:var(--sans)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Home v2 */
body.site{margin:0;color:var(--fg);font:16px/1.6 var(--sans);overflow-x:hidden;background:#0c0f11}
a{color:var(--accent)}
a:hover{color:#e8fbb6}
h1, h2, h3{line-height:1.1;letter-spacing:-.01em;margin:0}
h1, h2, .brand, .engines{font-family:var(--display)}
h1{font-weight:800;font-size:clamp(44px,6.4vw,92px);line-height:.95;letter-spacing:-.03em}
h2{font-size:clamp(28px,4vw,44px);font-weight:800;margin-bottom:12px}
h2.small{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
h3{font-size:19px;font-weight:700;margin-bottom:8px}
p{margin:0 0 10px}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.accent{color:var(--accent)}
.muted{color:var(--muted)}
.small{font-size:13px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);margin-bottom:18px}
.lead{font-size:clamp(17px,1.6vw,20px);color:var(--soft);max-width:640px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--accent);color:var(--accent-fg);padding:10px 14px;border-radius:8px;z-index:10}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Buttons */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:44px;
    padding:0 20px;
    border-radius:8px;
    font-weight:700;
    font-size:15px;
    text-decoration:none;
    border:1px solid transparent
}
.btn.primary{background:var(--accent);color:var(--accent-fg)}
.btn.primary:hover{background:#e3f8a6;color:var(--accent-fg)}
.btn.ghost{border-color:#3a4448;color:var(--fg)}
.btn.ghost:hover{border-color:var(--soft);color:var(--fg)}
.btn.big{min-height:54px;padding:0 26px;font-size:17px}
.btn.full{width:100%}
h2.big{font-size:clamp(32px,4.6vw,64px);line-height:1;letter-spacing:-.02em;margin-bottom:12px}
h2.huge{font-size:clamp(40px,6vw,84px);line-height:.95;letter-spacing:-.03em;margin:0 0 26px}
/* Same room for a paragraph in every language (see siteHtml): the visible text and the hidden longest translation share one grid cell */
.same{display:grid}
.same>span, .same::before, .same::after{grid-area:1/1}
.same::before{content:attr(data-a);visibility:hidden;pointer-events:none}
.same::after{content:attr(data-b);visibility:hidden;pointer-events:none}
/* No line ends with one or two lonely words — every text block splits into lines of similar length; the lead under a section title may use the whole width it needs on computers (one line when it fits) */
main :is(p,li,summary,h2,h3,small), footer p{text-wrap:balance}

/* ===== Shared layout blocks ===== */
/* Sections */
.block{padding-bottom:8px;padding-top:96px}
/* Pricing headline: one sentence per line, same size in every language */
.block.top{padding-top:64px;container-type:inline-size}
.block.tight{padding-top:24px}
.block.top h1{font-size:clamp(36px,6vw,64px);margin-bottom:16px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:24px;min-width:0}
.card p{color:var(--soft)}
.card p:last-child{margin-bottom:0}
.band{background:linear-gradient(180deg,#12171a,#101315);border-top:1px solid var(--line);margin-top:72px;padding-bottom:72px}
.band .block{padding-top:72px}
.grid.pay{margin-top:20px}
.head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.head a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;text-decoration:none}
.tag{
    position:absolute;
    top:-12px;
    left:24px;
    background:var(--accent);
    color:var(--accent-fg);
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
    padding:3px 10px;
    border-radius:6px
}
.sub{margin-top:36px;font-size:22px}
.note{background:var(--card);border:1px dashed var(--line);border-radius:8px;padding:20px;color:var(--soft);max-width:640px}
.block.top h1.fit>span{display:block;white-space:nowrap}
.block.top h1.fit{font-size:min(64px,calc(100cqi / (var(--chars) * .6)))}
.head .lead{max-width:820px}

/* ===== Header and menu ===== */
/* Header */
.top-bar{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(16,19,21,.94);backdrop-filter:blur(8px);z-index:5}
.bar{display:flex;align-items:center;gap:24px;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none;font-size:22px;font-weight:800;min-height:44px}
.brand:hover{color:var(--fg)}
.nav-desk{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.nav-desk a, .nav-mob nav a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:0 10px;
    border-radius:8px;
    color:var(--soft);
    text-decoration:none;
    font-weight:600;
    font-size:15px
}
.nav-desk a:hover, .nav-desk a[aria-current]{color:var(--fg);background:var(--card)}
.langs{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.langs a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:44px;
    min-height:40px;
    font-size:13px;
    font-weight:700;
    color:var(--muted);
    text-decoration:none
}
.langs a[aria-current]{background:var(--card2);color:var(--fg)}
.login{color:var(--fg);font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:0 6px}
.nav-mob{display:none;position:relative}
.nav-mob summary{
    list-style:none;
    cursor:pointer;
    min-height:44px;
    min-width:44px;
    padding:0 14px;
    display:flex;
    align-items:center;
    border:1px solid var(--line);
    border-radius:8px;
    font-weight:700;
    font-size:15px
}
.nav-mob summary::-webkit-details-marker{display:none}
.nav-mob[open] summary{background:var(--card2)}
.nav-mob .langs{margin-top:8px}
.nav-mob .btn{display:none;margin-top:6px;color:var(--accent-fg)}
.nav-mob .langs a{flex:1}
.nav-mob nav{
    position:absolute;
    right:0;
    top:52px;
    width:min(280px,calc(100vw - 32px));
    display:flex;
    flex-direction:column;
    padding:8px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:8px;
    box-shadow:0 18px 40px rgba(0,0,0,.45)
}

/* «Funzioni»: the feature pages open under it on hover or keyboard focus, no script; on phones they lead the menu */
.drop{position:relative}
.nav-desk .drop-btn{gap:4px}
.nav-desk .drop-btn.is-on{color:var(--fg)}
.drop-menu{
    display:none;
    position:absolute;
    left:0;
    top:100%;
    z-index:6;
    width:300px;
    padding:8px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:8px;
    box-shadow:0 18px 40px rgba(0,0,0,.45)
}
.drop:hover .drop-menu, .drop:focus-within .drop-menu{display:grid;gap:2px}
.nav-desk .drop-menu a, .nav-mob nav a:has(small){flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:6px 10px;min-height:52px}
.drop-menu a strong, .nav-mob nav a strong{color:var(--fg);font-size:15px}
.drop-menu a small, .nav-mob nav a small{color:var(--muted);font-size:13px;font-weight:500}
.drop-menu a:hover, .drop-menu a[aria-current]{background:var(--card2)}
.mob-label{padding:8px 10px 2px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mob-sep{height:1px;background:var(--line);margin:6px 0}

/* ===== Hero ===== */
/* Hero: background clip, headline, and a composer that works until «Genera» */
.hero{position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:0;z-index:-1}
/* Brightness of the background videos, set in admin («Sito web» → layout) */
.hero-bg video{width:100%;height:100%;object-fit:cover;opacity:.75;filter:saturate(1.15) brightness(var(--bg-light,1))}
.hero-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(12,15,17,.92) 0%,rgba(12,15,17,.55) 55%,rgba(12,15,17,.3) 100%),linear-gradient(180deg,transparent 70%,#0c0f11 100%)
}
.hero-in{
    display:grid;
    gap:48px;
    align-items:center;
    min-height:min(820px,calc(100vh - 72px));
    padding-top:56px;
    padding-bottom:56px;
    grid-template-columns:minmax(0,1fr) minmax(0,540px)
}
.hero h1{margin-bottom:18px}
.trust{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:6px 20px;color:var(--soft);font-size:14px}
.trust li::before{content:"✓ ";color:var(--mint)}
/* The hero's only action */
.hero-go{margin-top:24px}
.hero-bg.ph{
    border:2px dashed #6b5fb0;
    background:repeating-linear-gradient(135deg,#1a1e2a 0 18px,#161a24 18px 36px);
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
    padding:14px
}
.hero-bg.ph::after{display:none}
.hero-bg.ph span{background:rgba(16,19,21,.85);color:var(--violet);font-size:13px;font-weight:700;padding:6px 10px;border-radius:8px}
.counter{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin:18px 0 0;
    padding:10px 14px;
    border:1px solid #3a4448;
    border-radius:8px;
    background:rgba(12,15,17,.6);
    font-size:15px
}
.counter i{width:8px;height:8px;border-radius:4px;background:var(--mint)}
.hero-bg.is-ph::after{display:none}
.hero-bg.is-ph .ph{align-items:flex-end;justify-content:flex-end;border-width:0}
/* Same layout in every language: the headline is always three lines (one per sentence) and its size comes from the longest sentence and the column width; the line above it, the upscale title and the closing title stay on one line on tablets and computers. --chars is written by the page (longest line, in characters). */
.hero-text, .up-text, .closing-in{container-type:inline-size;width:100%}
.hero h1.fit>span{display:block;white-space:nowrap}
.hero h1.fit{--h1-max:88px;font-size:min(var(--h1-max),calc(100cqi / (var(--chars) * .6)))}
.hero .eyebrow.fit{white-space:nowrap;letter-spacing:.1em;font-size:max(12px,min(13px,calc(100cqi / (var(--chars) * .74))))}
/* Balance also switches wrapping back on: the texts meant to stay on one line say so again */
.hero .trust li, .plan .price, .eyebrow.fit, .hero h1.fit>span, .block.top h1.fit>span{text-wrap:nowrap}

/* ===== Engines strip ===== */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#101315;padding:22px 0}
.engines{list-style:none;padding:0;display:flex;flex-wrap:nowrap;gap:34px;margin:0;overflow-x:auto;scrollbar-width:none}
.engines li{
    display:flex;
    flex-direction:column;
    border-radius:8px;
    min-width:0;
    flex:none;
    border:0;
    background:none;
    padding:0;
    font-size:22px;
    font-weight:700;
    color:var(--soft)
}
.engines strong{font-size:15px}
.engines span{font-size:12px;color:var(--muted)}
.strip-in{display:flex;align-items:center;gap:28px}
.strip h2.small{margin:0;flex:none}
.engines::-webkit-scrollbar{display:none}
/* Engine names: endless horizontal scroll (pauses on hover and focus, still with reduced motion) */
.marquee{
    display:flex;
    overflow:hidden;
    min-width:0;
    flex:1;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)
}
/* A wider gap after the last item */
.marquee .engines{flex:none;display:flex;gap:34px;overflow:visible;animation:t4k-marquee var(--speed,30s) linear infinite;padding-right:140px}
/* The strip keeps moving under the mouse */
@keyframes t4k-marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
/* Official engine logos (uploaded by the owner) before the names */
.marquee .engines li{flex-direction:row;align-items:center;gap:10px}
.marquee .engines img{height:28px;width:auto;max-width:120px;object-fit:contain;flex:none}
/* «+ new engines as soon as they launch» closes the list */
.marquee .engines li.more{color:var(--accent)}

/* ===== Gallery: bento, clips, lightbox ===== */
/* Showcase clips */
.clip{
    margin:0;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    position:relative
}
.clip video{width:100%;aspect-ratio:9/16;max-height:460px;object-fit:cover;background:#0b0e10;display:block}
.clip figcaption{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.clip strong{font-size:15px}
.clip p{margin:0;font-size:13px;color:var(--soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Admin-only preview of the home videos */
.preview-bar{background:#2a2640;color:var(--fg);font-size:14px;padding:10px 16px;text-align:center;border-bottom:1px solid #4d4470}
.preview-bar a{font-weight:700;margin-left:6px}
.ph{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px;
    border:2px dashed #6b5fb0;
    background:repeating-linear-gradient(135deg,#1a1f2b 0 22px,#151923 22px 44px)
}
.ph span{
    background:rgba(12,15,17,.88);
    color:var(--violet);
    font-size:13px;
    font-weight:700;
    padding:6px 10px;
    border-radius:8px;
    text-align:center;
    max-width:90%
}
.clip>.ph{position:relative;aspect-ratio:9/16;max-height:440px;border-width:0 0 2px 0}
.clip small{font-size:12px;color:var(--muted)}
/* Gallery pictures */
.clip img{width:100%;aspect-ratio:9/16;max-height:460px;object-fit:cover;background:#0b0e10;display:block}
/* Gallery in two rows — videos (with the upscale example), then images */
.reel-row+.reel-row{margin-top:36px}
.reel-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
.reel-head h3{margin:0;font-size:20px}
/* Gallery zoom */
.media-wrap{position:relative}
.media-wrap>img, .media-wrap>video{cursor:zoom-in}
.zoom{
    position:absolute;
    right:10px;
    bottom:10px;
    z-index:3;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(12,15,17,.78);
    color:#fff;
    cursor:pointer
}
.zoom svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zoom:hover{border-color:var(--accent);color:var(--accent)}
.lightbox{
    max-width:none;
    max-height:none;
    width:100vw;
    height:100dvh;
    margin:0;
    padding:56px 16px 16px;
    border:0;
    background:rgba(6,8,9,.94);
    color:var(--fg);
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px
}
.lightbox[open]{display:flex}
.lightbox::backdrop{background:rgba(6,8,9,.94)}
.lb-body{display:flex;align-items:center;justify-content:center;min-height:0;max-width:100%;flex:1}
.lb-body>img, .lb-body>video{
    max-width:min(96vw,1600px);
    max-height:calc(100dvh - 120px);
    width:auto;
    height:auto;
    object-fit:contain;
    border-radius:8px;
    display:block;
    background:#000
}
.lb-caption{margin:0;font-weight:700;text-align:center}
.lb-close{
    position:absolute;
    top:10px;
    right:12px;
    width:44px;
    height:44px;
    border-radius:8px;
    border:1px solid var(--line);
    background:var(--card);
    color:var(--fg);
    font-size:26px;
    line-height:1;
    cursor:pointer
}
.lb-body>img{cursor:zoom-out}
/* Each gallery row is one block without gaps — two 9:16 clips beside two stacked 16:9 clips of the same total height (one 16:9 clip: it leads, the vertical ones beside it). Title and prompt sit on the clip; the details in the top corner. */
.bento{display:grid;gap:16px}
.bento.v2.h2{grid-template-columns:308fr 308fr 472fr}
.bento.v1.h2{grid-template-columns:308fr 472fr}
.bento.v0.h2 .stack{grid-template-rows:none;grid-template-columns:1fr 1fr}
.bento.v2.h1{grid-template-columns:666fr 211fr 211fr}
.bento.v1.h1{grid-template-columns:666fr 211fr}
.bento.v0.h1{grid-template-columns:minmax(0,666px)}
.bento.h0{grid-template-columns:repeat(2,minmax(0,308px))}
.bento .stack{display:grid;grid-template-rows:1fr 1fr;gap:16px;min-width:0}
.bento .clip{position:relative;display:block;min-width:0;min-height:0}
.bento.h2 .is-vert, .bento.h0 .is-vert{aspect-ratio:9/16}
.bento.v0 .is-wide, .bento.h1 .is-wide{aspect-ratio:16/9}
.bento .media-wrap, .bento .clip>.ph{position:absolute;inset:0}
.bento .clip video, .bento .clip img, .bento .clip>.ph{width:100%;height:100%;aspect-ratio:auto;max-height:none}
.bento .clip>.ph{border-width:0}
.bento figcaption{
    position:absolute;
    inset:0;
    padding:14px;
    justify-content:flex-end;
    gap:4px;
    pointer-events:none;
    background:linear-gradient(transparent 30%,rgba(10,12,13,.6) 55%,rgba(10,12,13,.94) 85%);
    text-shadow:0 1px 2px rgba(0,0,0,.85)
}
.bento small{
    text-shadow:none;
    position:absolute;
    top:10px;
    left:10px;
    max-width:calc(100% - 70px);
    padding:3px 8px;
    border-radius:8px;
    background:rgba(16,19,21,.72);
    color:var(--fg);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.bento figcaption a{pointer-events:auto}
.bento strong{font-size:16px;line-height:1.25}
.bento .prompt{-webkit-line-clamp:3;color:#e6ece9}
.bento .zoom{top:8px;bottom:auto;right:8px}
/* The narrow vertical cards beside a horizontal one: details above the title, short button label */
.bento.h1 .is-vert figcaption{padding:10px}
.bento.h1 .is-vert .prompt{font-size:12px;-webkit-line-clamp:4}
.bento.h1 .is-vert small{
    position:static;
    order:-1;
    align-self:flex-start;
    max-width:100%;
    margin-bottom:4px;
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical
}
.bento.h1 .is-vert strong{font-size:15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ===== Features and how it works ===== */
.grid.features{grid-template-columns:repeat(4,minmax(0,1fr))}
.steps{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.num{
    display:inline-flex;
    width:36px;
    height:36px;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:#2a2640;
    color:var(--violet);
    font-weight:800;
    margin-bottom:14px
}
.rows{display:grid;gap:72px;margin-top:28px}
.row-f{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center}
.row-f.flip .row-media{order:2}
.row-media{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#0b0e10}
.row-media video, .row-media img{width:100%;height:100%;object-fit:cover;display:block} /* 0.3.120: + the image page's picture */
/* 0.3.133: the talking clip — clickable for sound; the button sits bottom-left over the video */
.row-media.talking{cursor:pointer;container-type:inline-size}
.sound{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid rgba(255,255,255,.35);border-radius:8px;background:rgba(10,12,14,.72);color:#fff;font:700 15px/1 var(--sans);white-space:nowrap;cursor:pointer;backdrop-filter:blur(6px)}
.sound:hover, .sound[aria-pressed="true"]{background:var(--mint);border-color:var(--mint);color:#0b0e10}
.sound[aria-pressed="false"] .sw{opacity:.35}
@container (max-width:280px){.sound{left:8px;bottom:8px;width:44px;padding:0;justify-content:center}.sound span{display:none}} /* phone rows: the speaker alone */
.row-num{font-family:var(--display);font-size:20px;font-weight:800;color:var(--mint)}
.row-text h3{font-family:var(--display);font-size:clamp(26px,3vw,44px);line-height:1.05;margin:10px 0 12px}
.row-text p{font-size:18px;color:var(--soft);max-width:520px}
.row-text a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;text-decoration:none}
.row-f:not(:has(.row-media)){grid-template-columns:minmax(0,1fr)}
.row-text a.more{margin-left:16px}
.up-text a.more{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:12px;font-weight:700;text-decoration:none}

/* ===== Higher resolution (upscale) ===== */
.levels{margin-top:24px}
.tagline{color:var(--mint) !important;font-weight:700;font-size:14px}
.up{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:56px;align-items:center}
.levels-list{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}
.levels-list li{padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.levels-list p{margin:4px 0 0;font-size:14px;color:var(--soft)}
.levels-list .tagline{font-size:13px}
.compare{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#0b0e10}
.compare video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.cmp-line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1px;background:var(--accent);pointer-events:none}
.cmp-line::after{
    content:"⟷";
    position:absolute;
    top:50%;
    left:50%;
    width:48px;
    height:48px;
    margin:-24px 0 0 -24px;
    border-radius:8px;
    background:var(--accent);
    color:var(--accent-fg);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:18px
}
.cmp-tag{
    position:absolute;
    top:14px;
    background:rgba(12,15,17,.85);
    font-size:13px;
    font-weight:700;
    padding:6px 10px;
    border-radius:8px;
    pointer-events:none
}
.cmp-tag.l{left:14px}
.cmp-tag.r{right:14px;color:var(--accent)}
.compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.compare input:focus-visible+*, .compare:focus-within .cmp-line{box-shadow:0 0 0 2px var(--fg)}
.compare.is-ph .ph{border-width:0}

/* ===== Prices and packs ===== */
.block.top .grid.plans, .block.top .note{margin-top:28px}
/* Shared layout blocks */
.block.top .sub+.grid{margin-top:12px}
.grid.plans.n1{grid-template-columns:minmax(0,420px)}
.grid.plans.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.packs{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.plan{display:flex;flex-direction:column;position:relative}
.plan.top{border-color:var(--accent)}
.plan .btn{margin-top:auto;min-height:42px}
.price{margin:6px 0 2px}
.price strong{font-size:40px;font-weight:800}
.price span{color:var(--muted)}
.ticks{list-style:none;padding:0;margin:16px 0 22px;display:grid;gap:8px}
.ticks li{display:flex;gap:10px;align-items:flex-start;color:var(--soft);font-size:15px}
.ticks svg{flex:none;color:var(--mint);margin-top:3px}
.bonus{color:var(--mint);font-weight:700}
.pay-band{border:1px solid var(--line);border-radius:8px;background:#141a1d;padding:48px}
.pay-band h2{font-size:clamp(30px,3.6vw,52px);line-height:1;margin-bottom:26px}
.pay-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pay-cols h3{font-size:18px}
.pay-cols p{color:var(--soft);margin:0}
/* Compact plan and pack cards; up to 4 plans in one row (2 × 2 on tablet portrait, a sideways row on phones) */
.grid.plans.n3, .grid.plans.n4{gap:12px}
.plan, .grid.packs .card{padding:18px 18px 16px}
.plan h3{font-size:17px;margin:0}
/* The monthly price never wraps (4 plans in a row on small computers) */
.plan .price{margin:8px 0 0;white-space:nowrap}
.plan .price strong{font-size:30px;line-height:1.1}
.plan .price span{font-size:14px}
.plan .muted{font-size:13px;margin:2px 0 0}
.plan .ticks{margin:12px 0 16px;gap:6px}
.plan .ticks li{font-size:13px;gap:8px;line-height:1.4}
.plan .ticks svg{margin-top:2px;width:14px;height:14px}
.plan .tag{left:18px}
.pack h3{font-size:24px;margin:0}
.pack p{margin:6px 0 0;font-size:14px}
.pack .muted{font-size:13px}
.pack .btn{margin-top:14px;width:100%;min-height:42px}
/* What the yearly billing saves, under the yearly price */
.plan .save{margin:2px 0 0;font-size:13px;font-weight:700;line-height:1.6;color:var(--accent)}
.plan span.save{display:block}

/* ===== Questions ===== */
.faq{display:grid;gap:10px;margin-top:20px;max-width:860px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:8px}
.faq summary{cursor:pointer;min-height:56px;padding:14px 20px;font-weight:700;font-size:17px;display:flex;align-items:center;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;padding-left:16px;color:var(--accent);font-size:22px}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 20px 18px;color:var(--soft)}
.faq-wrap{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:48px;align-items:start}
.faq-wrap .faq{margin-top:0;max-width:none}

/* ===== Feature pages ===== */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:16px;font-size:14px;color:var(--muted)}
.crumbs a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;color:var(--soft)}
.block.top.feat-top{padding-top:16px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center}
.block.top.feat-top.solo{grid-template-columns:minmax(0,1fr)}
/* on the upscale page the before/after comparison takes the whole width under the text */
.block.top.feat-top.wide{grid-template-columns:minmax(0,1fr);gap:32px}
.feat-top.wide .compare{aspect-ratio:16/9}
/* computers: title on the left, text and buttons on the right, so the comparison starts higher on the screen */
@media (min-width:901px){
    .feat-top.wide .feat-text{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:48px}
    .feat-top.wide .eyebrow{grid-column:1;grid-row:1;align-self:end}
    .feat-top.wide h1{grid-column:1;grid-row:2;margin:0}
    .feat-top.wide .lead{grid-column:2;grid-row:1;align-self:end;margin:0 0 4px}
    .feat-top.wide .feat-go{grid-column:2;grid-row:2;align-self:start;margin-top:16px}
}
/* phones: the comparison from edge to edge */
@media (max-width:620px){
    .feat-top.wide .compare{margin:0 -16px;aspect-ratio:4/3;border-radius:0;border-left:0;border-right:0}
}
.block.top.feat-top h1{font-size:clamp(36px,4.4vw,58px);line-height:1;text-wrap:balance}
.feat-go{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.feat-top .compare{margin:0}
.feat-steps{list-style:none;padding:0;margin:20px 0 0}
.feat-steps h3{margin-top:8px}
.price-from{margin:16px 0 4px}
.price-from strong{font-family:var(--display);font-size:clamp(30px,4vw,44px);font-weight:800;color:var(--accent)}
.price-from span{color:var(--soft)}
.price-table{max-width:640px;padding:6px 18px;margin:18px 0 10px}
.price-table table{width:100%;border-collapse:collapse}
.price-table th, .price-table td{text-align:left;padding:12px 8px;border-bottom:1px solid var(--line)}
.price-table tr:last-child>*{border-bottom:0}
.price-table thead th{font-size:13px;font-weight:700;color:var(--muted)}
.price-table td{font-weight:700;white-space:nowrap}
.feat-more a{color:var(--fg);text-decoration:none}
.feat-more a:hover{border-color:var(--soft)}
.feat-more h3{display:flex;align-items:center;gap:8px}

/* ===== Contact page ===== */
.contact .lead{margin-bottom:24px}
.contact-form{display:grid;gap:16px;max-width:640px;padding:24px}
.contact-form label{display:grid;gap:6px;font-weight:700;font-size:15px}
.contact-form label small{font-weight:500;color:var(--muted);font-size:13px}
.contact-form input, .contact-form textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:#0b0e10;color:var(--fg);font:inherit;font-size:16px}
.contact-form textarea{min-height:160px;resize:vertical}
.contact-form input:focus-visible, .contact-form textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.contact-form .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.contact-note{color:var(--soft);font-size:13px}
.contact-note a{display:inline-flex;align-items:center;min-height:40px;color:var(--fg)}
.contact-form .btn{justify-self:start}
.notice{max-width:640px;margin:0 0 16px;padding:12px 16px;border-radius:8px;border:1px solid var(--line)}
.notice.ok{border-color:var(--accent);color:var(--fg)}
.notice.warn{border-color:#e8a23a;color:var(--fg)}
.contact-faq{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:16px;font-weight:700;text-decoration:none}
@media (max-width:620px){
    .contact-form{padding:16px}
    .contact-form .btn{justify-self:stretch}
}

/* ===== Closing call to action and footer ===== */
.cta{
    border:1px solid var(--line);
    border-radius:8px;
    padding:48px 32px;
    text-align:center;
    background:radial-gradient(circle at 50% 0,#243019,var(--card) 70%)
}
.cta h2{margin-bottom:22px}
/* Footer */
.foot{border-top:1px solid var(--line);padding:32px 0 24px;margin-top:0}
.cols{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;margin-bottom:14px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 8px}
/* The brand and the link columns on a fixed grid: the same columns in every language (a longer Russian link used to push
   the last column under the others) */
.foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));align-items:start}
.foot .cols nav{flex-direction:column;gap:0;min-width:160px}
.foot .cols nav a{min-height:40px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--soft);text-decoration:none}
.foot nav a:hover{color:var(--fg)}
.closing{position:relative;overflow:hidden;isolation:isolate;margin-top:96px;border-top:1px solid var(--line)}
.closing .hero-bg::after{background:rgba(12,15,17,.62)}
.closing-in{
    min-height:460px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding-top:56px;
    padding-bottom:56px
}

/* ===== Wider screens (from 621 px; 901–1199 px) ===== */
@media (min-width:621px){
    /* Base and type */
    h2.big.fit{white-space:nowrap;font-size:min(64px,calc(100cqi / (var(--chars) * .58)))}
    h2.huge.fit{white-space:nowrap;font-size:min(84px,calc(100cqi / (var(--chars) * .6)))}
    main h2.fit{text-wrap:nowrap}
}
@media (min-width:901px){
    /* Hero */
    /* The three reassurances stay on one line on computers, in every language */
    .hero .trust{flex-wrap:nowrap;white-space:nowrap;gap:6px 18px}
}
@media (min-width:901px) and (max-width:1199px){
    /* Hero */
    /* Tablet and phone layouts */
    /* Small desktop and tablet landscape: two columns kept, a headline that fits the narrower column, no forced full-screen hero */
    .hero-in{min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:36px;padding-top:48px;padding-bottom:48px}
    .hero h1{font-size:clamp(40px,4.6vw,54px);line-height:1}
    .hero .eyebrow{font-size:12px;letter-spacing:.08em}
    .hero .trust{font-size:13px;gap:6px 14px}
    .hero h1.fit{--h1-max:60px}
    /* Features and how it works */
    .row-f{gap:36px}
}
@media (min-width:621px){
    /* Higher resolution (upscale) */
    .up .up-text{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
    .up .levels-list{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:22px}
    .up>.compare{aspect-ratio:16/9;width:100%}
}
@media (min-width:901px){
    /* Prices and packs */
    .grid.plans.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:901px) and (max-width:1199px){
    /* Prices and packs */
    .plan .price strong{font-size:26px}
}

/* ===== Tablets and small laptops (621–900 px, up to 1100 px) ===== */
@media (max-width:900px){
    /* Shared layout blocks */
    .grid, .steps, .grid.plans.n2, .grid.plans.n1{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1080px){
    /* Header and menu */
    .nav-desk{display:none}
    .nav-mob{display:block;margin-left:0}
    .bar{gap:12px}
    /* Header actions grouped on the right; on phones no more sideways card rows that hide content — features, plans and packs are stacked lists, compact, with no empty space */
    .bar>.brand{margin-right:auto}
}
@media (max-width:900px){
    /* Hero */
    .hero-in{gap:24px;min-height:0;grid-template-columns:minmax(0,1fr)}
}
@media (min-width:621px) and (max-width:900px){
    /* Hero */
    /* Tablet portrait: one centred column for the hero (text, then the composer at a readable width), side-by-side rows, three plans in a row, three pay columns */
    .hero-in{padding-top:44px;padding-bottom:48px;gap:28px;justify-items:center}
    .hero-text{max-width:640px;text-align:center;display:flex;flex-direction:column;align-items:center}
    .hero .eyebrow{margin-bottom:14px}
    .hero .lead{margin-left:auto;margin-right:auto}
    .hero .trust{justify-content:center}
    .hero h1{font-size:clamp(44px,6.6vw,58px);line-height:1}
    .hero h1.fit{--h1-max:64px}
}
@media (min-width:621px) and (max-width:1100px){
    /* Gallery: bento, clips, lightbox */
    .bento .is-vert .prompt{font-size:12px}
}
@media (min-width:621px) and (max-width:900px){
    /* Gallery: bento, clips, lightbox */
    .bento .stack .prompt{-webkit-line-clamp:2}
}
@media (max-width:1080px){
    /* Features and how it works */
    .grid.features{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
    /* Features and how it works */
    .row-f.flip .row-media{order:0}
}
@media (min-width:621px) and (max-width:900px){
    /* Features and how it works */
    .row-f.flip .row-media{order:2}
    .row-text h3{font-size:28px}
    .row-text p{font-size:16px}
    .rows{gap:44px}
}
@media (max-width:900px){
    /* Higher resolution (upscale) */
    .up, .row-f, .faq-wrap, .block.top.feat-top{grid-template-columns:minmax(0,1fr);gap:24px}
}
@media (min-width:621px) and (max-width:900px){
    /* Features and how it works */
    .row-f{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
}
@media (min-width:621px){
    /* Higher resolution (upscale) */
    /* On computer and tablet the upscale section is one column — title and text, the three levels side by side, then the comparison across the whole page width in 16:9 */
    .up{grid-template-columns:minmax(0,1fr);gap:28px}
}
@media (max-width:900px){
    /* Prices and packs */
    .pay-cols{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:901px){
    /* Prices and packs */
    .grid.packs{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:621px) and (max-width:900px){
    /* Prices and packs */
    .grid.plans.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .grid.plans.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .pay-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
    .pay-band{padding:32px}
    .grid.plans.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
    .grid.packs{grid-template-columns:repeat(2,minmax(0,1fr))}
    /* Questions */
    .faq-wrap{gap:20px}
    /* Closing call to action and footer */
    .closing-in{min-height:360px}
}

/* ===== Phones (up to 620 px; 420 px) ===== */
@media (max-width:620px){
    /* Base and type */
    .wrap{padding:0 16px}
    h2{font-size:26px}
    .lead{font-size:16px}
    h1{font-size:40px;line-height:.98}
    h2.huge{font-size:40px}
    h2.huge.fit{text-wrap:balance;font-size:min(40px,calc(200cqi / (var(--chars) * .62)))}
    h2.big{font-size:30px;margin-bottom:8px}
    /* Shared layout blocks */
    .band{margin-top:44px;padding-bottom:44px}
    .band .block{padding-top:44px}
    .card{padding:18px}
    .block{padding-top:48px}
    .head{flex-direction:column;align-items:flex-start;gap:0;margin-bottom:12px}
    .head a{min-height:40px}
    /* Header and menu */
    .bar{min-height:64px;gap:8px}
    .brand{font-size:19px}
    .brand svg{width:32px;height:32px}
    .bar>.langs, .bar>.login{display:none}
    .top-bar .btn{min-height:44px;padding:0 14px}
}
@media (max-width:420px){
    /* Header and menu */
    .top-bar .bar>.btn{display:none}
    .nav-mob .btn{display:flex}
}
@media (max-width:620px){
    /* Hero */
    .hero .eyebrow, .hero .lead, .trust{display:none}
    .hero-go{margin-top:16px;width:100%}
    /* Phone: less chrome and shorter sections */
    .hero h1{margin-bottom:0;font-size:30px;line-height:1.05}
    .counter{font-size:13px;padding:8px 12px;margin-top:10px}
    .hero .counter{display:inline-flex;margin-top:10px}
    /* Phone hero: headline + one line of value (price first, pay only if it arrives), the counter, then the button; the background clip shows behind the whole block */
    .hero-in{padding-top:18px;padding-bottom:22px;gap:14px;min-height:min(600px,calc(100svh - 64px));align-content:end}
    /* the text sits at the
       bottom of a taller hero, the clip shows clear above it and fades into the dark behind the text */
    .hero .hero-bg video{opacity:1}
    .hero .hero-bg::after{background:linear-gradient(180deg,rgba(12,15,17,0) 0%,rgba(12,15,17,.15) 22%,rgba(12,15,17,.85) 44%,rgba(12,15,17,.95) 100%)}
    .hero .lead{display:grid;font-size:15px;line-height:1.45;margin:8px 0 0;color:var(--soft)}
    .hero h1.fit{--h1-max:36px;line-height:1.05}
    /* Engines strip */
    .engines{padding:0 16px 6px}
    .strip-in{display:block}
    .strip h2.small{margin-bottom:8px}
    .engines li{font-size:18px}
    .marquee .engines{margin:0;padding:0 80px 0 0;overflow:visible;padding-right:80px}
    /* Gallery: bento, clips, lightbox */
    .preview-bar{text-align:left}
    .reel-head{margin-bottom:10px}
    .clip video, .clip img, .clip>.ph{aspect-ratio:3/4;max-height:none}
    .clip figcaption{padding:10px 10px 8px;gap:3px}
    .clip strong{font-size:14px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .clip p{font-size:12px;line-height:1.4;-webkit-line-clamp:2}
    .clip small{font-size:12px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .zoom{right:6px;bottom:6px}
    .ph span{font-size:12px;padding:5px 8px}
    .reel-row+.reel-row{margin-top:24px}
    .reel-head h3{font-size:18px}
    .bento figcaption{gap:4px;padding:10px}
    /* The id outweighs the desktop layouts (.bento.v2.h2 …) */
    #video .bento{grid-template-columns:1fr 1fr;gap:8px}
    .bento .stack, .bento .is-wide{grid-column:1/-1;order:2}
    .bento .stack{grid-template-rows:none;grid-template-columns:none;gap:8px}
    .bento .is-vert{aspect-ratio:9/16}
    .bento .is-wide{aspect-ratio:16/9}
    .bento .prompt{font-size:12px;line-height:1.35;-webkit-line-clamp:3}
    .bento strong{font-size:14px}
    .bento small{position:static;order:-1;align-self:flex-start;max-width:100%;margin-bottom:4px}
    .bento .zoom{top:6px;right:6px}
    /* Features and how it works */
    /* Long card lists become one swipeable row: the page gets much shorter on a phone */
    .grid.features, .levels, .grid.pay, .steps{
        display:grid;
        grid-auto-flow:column;
        grid-auto-columns:78%;
        grid-template-columns:none;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        gap:12px;
        margin-left:-16px;
        margin-right:-16px;
        padding:0 16px 8px;
        scrollbar-width:none
    }
    .grid.features::-webkit-scrollbar, .levels::-webkit-scrollbar, .grid.pay::-webkit-scrollbar, .steps::-webkit-scrollbar{display:none}
    .grid.features>*, .levels>*, .grid.pay>*, .steps>*{scroll-snap-align:start}
    /* «Cosa puoi fare»: one row per feature — the clip beside its text, all three in view at once, no repeated «Prova ora» */
    .rows{
        scroll-snap-type:x mandatory;
        scrollbar-width:none;
        display:grid;
        grid-auto-flow:row;
        grid-auto-columns:auto;
        grid-template-columns:minmax(0,1fr);
        overflow:visible;
        margin:16px 0 0;
        padding:0;
        gap:16px
    }
    .rows::-webkit-scrollbar{display:none}
    .row-f{
        flex-direction:column;
        scroll-snap-align:start;
        border-radius:8px;
        display:grid;
        grid-template-columns:minmax(0,42%) minmax(0,1fr);
        gap:12px;
        align-items:start;
        background:none;
        border:0;
        padding:0
    }
    /* Phone gallery as compact thumbnails — about 2 cards and a half in view, 3:4 previews (the full file opens with ⤢), short captions; every sideways row keeps the 16 px page margin when it snaps (before, the first card stuck to the screen edge) */
    .rows, .grid.features, .levels, .grid.pay, .steps, .grid.plans.n2, .grid.plans.n3, .grid.plans.n4, .grid.packs{
        scroll-padding-left:16px;
        scroll-padding-right:16px
    }
    .row-f:not(:has(.row-media)){grid-template-columns:minmax(0,1fr)}
    .row-f .row-media{order:0;aspect-ratio:16/10;border:1px solid var(--line)}
    .row-num{font-size:14px}
    .row-text h3{font-size:min(18px,4.6vw);margin:2px 0 4px}
    .row-text p{font-size:14px;line-height:1.4;margin:0}
    .row-text a{display:none}
    /* Prices and packs */
    .grid.plans.n2, .grid.plans.n3, .grid.plans.n4, .grid.packs{
        display:grid;
        grid-auto-flow:column;
        grid-auto-columns:84%;
        grid-template-columns:none;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        gap:12px;
        margin-left:-16px;
        margin-right:-16px;
        padding:14px 16px 8px;
        scrollbar-width:none
    }
    .grid.plans>*, .grid.packs>*{scroll-snap-align:start}
    /* «Paghi solo quello che arriva»: three short points, text in full lines */
    .pay-band{padding:20px}
    .pay-band h2{font-size:26px;margin-bottom:14px}
    .pay-cols{gap:12px}
    .pay-cols h3{font-size:16px;margin:0 0 2px}
    .pay-cols p{font-size:14px;line-height:1.45}
    .pay-band :is(p,h3){text-wrap:pretty}
    /* Plans: one under the other, as tall as their content; the «recommended» label inside the card */
    .grid.plans.n2, .grid.plans.n3, .grid.plans.n4{
        grid-auto-flow:row;
        grid-auto-columns:auto;
        grid-template-columns:minmax(0,1fr);
        overflow:visible;
        margin-left:0;
        margin-right:0;
        padding:0;
        gap:12px
    }
    /* Compact plan card: name and price on one line, then yearly price, saving and perks */
    .plan{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:baseline;padding:16px}
    .plan>*{grid-column:1/-1}
    .plan .tag{position:static;justify-self:start;margin:0 0 8px}
    .plan h3{grid-column:1;font-size:18px}
    .plan .price{grid-column:2;margin:0}
    .plan .price strong{font-size:26px}
    .plan .muted{margin:4px 0 0}
    .plan .save{margin:0}
    .plan span.save{display:none}
    .plan .ticks{margin:10px 0 14px;gap:4px}
    .plan .btn{margin-top:0}
    /* Packs: a 2 × 2 grid of small tiles */
    .grid.packs{
        grid-auto-flow:row;
        grid-auto-columns:auto;
        grid-template-columns:repeat(2,minmax(0,1fr));
        overflow:visible;
        margin-left:0;
        margin-right:0;
        padding:0;
        gap:10px
    }
    .grid.packs .card{padding:14px;display:flex;flex-direction:column}
    .grid.packs h3{font-size:22px;margin:0}
    .grid.packs p{font-size:13px;margin:4px 0 0}
    .grid.packs .btn{margin-top:auto;min-height:44px;padding:0 8px;font-size:14px}
    .grid.packs .muted{margin-bottom:10px}
    /* The extra credit on its own line: same height in every language */
    .grid.packs .bonus{display:block}
    /* Feature pages */
    .block.top.feat-top h1{font-size:34px}
    .feat-go .btn{width:100%}
    .price-table{padding:2px 12px}
    .price-table th, .price-table td{padding:10px 4px}
    .row-text a.more{display:flex;margin-left:0}
    .foot .cols nav{min-width:0}
    /* Closing call to action and footer */
    .cta{padding:32px 16px}
    .closing-in{padding-top:56px;padding-bottom:56px;min-height:260px}
    .closing{margin-top:44px}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
    /* Base and type */
    html{scroll-behavior:auto}
    /* Engines strip */
    .marquee .engines{animation:none}
    .marquee .engines[aria-hidden]{display:none}
    .marquee{overflow-x:auto}
}
/* blog list and article */
.grid.posts{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));margin-top:32px}
.post-card{display:flex;flex-direction:column;gap:10px;color:inherit;text-decoration:none}
.post-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
.post-card h2{font-size:20px;line-height:1.3;margin:0}
.post-card small{font-size:13px}
.post{max-width:820px}
.block.top.post h1{font-size:clamp(28px,4vw,44px);line-height:1.15;overflow-wrap:anywhere}
.post-hero{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;margin:8px 0 24px} /* space kept while loading (no layout shift); BabyLoveGrowth covers are 16:9, like the cards */
.post-body{font-size:17px;line-height:1.7;color:var(--soft);overflow-wrap:anywhere}
.post-body h2{font-size:26px;margin:36px 0 12px;color:var(--text,inherit)}
.post-body h3{font-size:21px;margin:28px 0 10px}
.post-body h4{font-size:18px;margin:22px 0 8px}
.post-body [id]{scroll-margin-top:88px} /* a table-of-contents jump stops below the sticky bar (65-73 px tall) */
.post-body img{max-width:100%;height:auto;border-radius:8px}
.post-body a{text-decoration:underline}
.post-body ul,.post-body ol{padding-left:22px}
.post-body blockquote{border-left:3px solid var(--line);margin:16px 0;padding:4px 16px}
.post-body pre{overflow-x:auto;padding:12px;border-radius:8px;background:var(--card)}
.post-body table{display:block;overflow-x:auto;border-collapse:collapse;max-width:100%}
.post-body th,.post-body td{border:1px solid var(--line);padding:8px 10px;text-align:left}
/* /the studio's social pages — official marks, monochrome; brand colour on hover; dimmed until the address is set */
.socials{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.socials-title{width:100%;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.soc{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);border-radius:8px;color:var(--soft)}
a.soc:hover,a.soc:focus-visible{border-color:currentColor}
a.soc-facebook:hover{color:#0866ff}a.soc-instagram:hover{color:#ff0069}a.soc-youtube:hover{color:#ff0000}a.soc-x:hover,a.soc-tiktok:hover{color:#fff}
.soc.is-soon{opacity:.45;cursor:default}
/* 0.3.126: the sample composer of «Prova il generatore» (a dialog over the page; «Crea» goes to the prices) */
.fake-gen{width:min(640px,calc(100vw - 32px));max-width:none;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg)}
.fake-gen::backdrop{background:rgba(6,8,9,.82)}
.fake-gen-box{position:relative;display:flex;flex-direction:column;gap:14px;margin:0;padding:22px 20px 20px}
.fake-gen-title{margin:0 52px 0 0;font-size:22px;line-height:1.3}
.fake-gen textarea{width:100%;min-height:132px;resize:vertical;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);font:16px/1.5 var(--sans)}
.fake-gen textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.fake-gen-bar{display:flex;justify-content:flex-end}
.fake-gen-bar .btn{min-height:48px;gap:8px;white-space:nowrap}
@media (max-width:620px){.fake-gen-bar .btn{width:100%;justify-content:center}}
/* 0.3.126 (audit F08): the closing button of a page stays on one line on a phone («Заставить фото говорить» wrapped at 360 px) */
@media (max-width:620px){.cta .btn{width:100%;padding:0 14px;white-space:nowrap;justify-content:center}}