/* The two families the brief names, served from here (no Google Fonts: nothing leaves
   for a third party before a visitor has agreed to anything). Variable fonts: one file a
   script covers every weight. */
@font-face{font-family:"Unbounded";font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/unbounded-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/unbounded-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/manrope-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/manrope-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Layout: the page walks down the board. Hero, a personal "why", then the three zones side by side
   in board order (Dreamer pink, Realist sage, Critic lilac), cards, and the two products side by side. */
body{margin:0}img{max-width:100%}[hidden]{display:none!important}
html{scroll-padding-top:84px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.skip{position:absolute;left:12px;top:-60px;z-index:30;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:700}
.skip:focus{top:12px}
:root{
  --bg:#FFF7F5; --surface:#FFFFFF; --ink:#1F2A4A; --muted:#5B6485; --line:#E9D9DA;
  --accent:#E2503A; --on-accent:#FFFFFF;
  --z-d:#F6C2C8; --z-r:#CFE3CE; --z-c:#B9C3EC; --z-ink:#1F2A4A;
  --dark:#1F2A4A; --on-dark:#FFF7F5; --on-dark-muted:#C3CAE6;
  --display:"Unbounded","Verdana",sans-serif;
  --body:"Manrope","Segoe UI",system-ui,sans-serif;
  --h1:clamp(1.9rem,4.4vw,3.1rem); --h2:clamp(1.45rem,3vw,2.05rem); --h3:1.05rem;
  --dw:500; --dls:-0.02em; --dlh:1.15; --r:22px; --rb:14px; --rc:12px; /* as in the game: buttons 14px, chips 12px */ --tilt:-2deg;
  /* The accent where small text sits on it or is in it: #E2503A gives white text 3.9:1
     and itself 3.7:1 on the page, under the brief's 4.5:1. Fills, dots and large
     headings keep #E2503A. */
  --accent-strong:#C8402B;
  color-scheme:light;
}
*{box-sizing:border-box}
img{height:auto}
main{overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65}
h1,h2,h3{font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dls);line-height:var(--dlh);margin:0;text-wrap:balance}
h1{font-size:var(--h1)} h2{font-size:var(--h2)} h3{font-size:var(--h3);line-height:1.2}
p{margin:0} a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:20px}
.band{padding-block:clamp(48px,8vw,96px)}
.stack{display:flex;flex-direction:column;gap:18px}
.lead{font-size:1.15rem;max-width:62ch}
.prose{max-width:64ch}
.muted{color:var(--muted)}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-strong)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 26px;border-radius:var(--rb);font:700 1rem var(--body);text-decoration:none;border:2px solid var(--accent-strong);background:var(--accent-strong);color:var(--on-accent);cursor:pointer;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn.sm{min-height:44px;padding:8px 18px;font-size:.9rem}
.note{font-size:.92rem;color:var(--muted)}
.dark .note{color:var(--on-dark-muted)}
.ctaband{background:var(--surface);border-radius:var(--r);padding:clamp(24px,4vw,40px);display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
.ctaband>div{min-width:0;flex:1 1 320px;display:flex;flex-direction:column;gap:8px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}

.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:12px}
.logo{font-family:var(--display);font-weight:var(--dw);font-size:1.4rem;line-height:1;text-decoration:none;margin-right:auto}
.nav{display:flex;gap:20px;font-size:.92rem;font-weight:500}
.nav a{text-decoration:none}.nav a:hover{text-decoration:underline}
/* The language: one small button (globe, RU ▾) opening a two-line menu. */
.lang{position:relative}
/* Not a FAQ entry: without the FAQ's details{} borders and padding, which drew thin lines
   above and below it and made the header taller (2026-10-14). */
.top .lang{border:0;padding:0}
.lang summary{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--rc);font:700 .8rem var(--body);text-transform:uppercase;cursor:pointer;list-style:none;user-select:none}
.lang summary::-webkit-details-marker{display:none}
.lang summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);margin-left:2px}
.lang[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.lang-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:150px;background:var(--surface);border:1px solid var(--line);border-radius:var(--rc);box-shadow:0 12px 28px rgba(20,25,50,.14);padding:6px;display:flex;flex-direction:column;z-index:30}
.lang-menu a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;color:var(--ink);font:600 .95rem var(--body);text-decoration:none}
.lang-menu a:hover{background:var(--bg)}
.lang-menu a[aria-current="page"]{font-weight:800}
.lang-menu a[aria-current="page"]::after{content:"";width:6px;height:11px;margin-left:auto;border-right:2px solid var(--accent-strong);border-bottom:2px solid var(--accent-strong);transform:rotate(45deg)}
@media (max-width:820px){.nav{display:none}}
/* One line at every width (2026-10-14; with the life audit added to the menu it wrapped,
   the language falling to a second row): the whole menu where it fits, a little tighter;
   below that the life audit alone (the owner's first item); on a phone, none. */
@media (min-width:1181px){.top .wrap{gap:12px}.nav{gap:16px}.logo{font-size:1.25rem}}
@media (max-width:1180px){.nav a:not(.nav-audit){display:none}}
/* On a phone the header keeps the name and the language switch (the brief); Play is in
   the first screen right below. */
@media (max-width:600px){.top .btn.sm{display:none}}
/* The name and the language on one line on a phone, the English name too (the owner,
   2026-10-14): the name gives way, a little smaller, rather than the switch wrapping. */
@media (max-width:600px){.top .wrap{flex-wrap:nowrap}.logo{min-width:0;font-size:clamp(1rem,4.4vw,1.4rem)}}
/* The Russian name is the owner's logo, «Итаки» (2026-10-15, her mockup): about 40 px
   high in the header, which stays as tall, and a thin line between it and the menu, the
   menu following it. Where the menu is hidden, no line: the logo alone, as the name was. */
.logo.mark{display:flex;align-items:center;align-self:stretch;flex:none;margin-right:0;padding-right:20px;border-right:1px solid var(--line)}
.logo.mark img{display:block;height:40px;width:auto}
.logo.mark+.nav{margin-right:auto}
@media (max-width:820px){.logo.mark{margin-right:auto;padding-right:0;border-right:0}}

.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero .stack{min-width:0;gap:22px}
.hero h1 em{font-style:normal;color:var(--accent)}
.cta{display:flex;flex-wrap:wrap;gap:12px}
/* The hero's foot: the payment line right under the buttons, with a tick. */
.hero .note{display:flex;align-items:center;gap:8px;margin-top:-8px}
.hero .note::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:var(--z-r) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.5L13 6.5' fill='none' stroke='%231F2A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.shot{margin:0;position:relative;transform:rotate(var(--tilt))}
.shot img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);box-shadow:0 18px 40px rgba(20,25,50,.22)}
/* The line under the board: a label on the photo's corner. */
.shot figcaption{position:absolute;left:18px;bottom:18px;max-width:72%;background:rgba(255,247,245,.94);border-radius:var(--rc);padding:12px 16px;font-family:var(--display);font-weight:var(--dw);font-size:.98rem;line-height:1.3;color:var(--ink);box-shadow:0 6px 16px rgba(20,25,50,.18)}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.split>*{min-width:0}
.split.narrow{grid-template-columns:.8fr 1.2fr}
@media (max-width:820px){.split,.split.narrow{grid-template-columns:1fr}}
.aside{background:var(--surface);border-radius:var(--r);padding:20px 22px;font-size:.98rem}

/* for whom: situation on the left, what the game does with it on the right */
/* for whom: six cards, five situations with a picture from the game each, and the
   honest note as the sixth, framed like the online card's «call before you play». */
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.who{display:contents;list-style:none}
.who li{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:0 8px 20px rgba(20,25,50,.07);min-width:0}
/* Each situation shows a scene from the board, on a plate in a zone colour. */
.who li::before{content:"";height:128px;margin-bottom:6px;border-radius:calc(var(--r) - 8px);background:var(--z-d) center/auto 92px no-repeat}
.who li:nth-child(1)::before{background:var(--z-d) url(/img/cells/D10.webp) 30% 40%/cover no-repeat}
.who li:nth-child(2)::before{background:var(--z-r) url(/img/cells/C9.webp) 30% 70%/cover no-repeat}
.who li:nth-child(3)::before{background:var(--z-c) url(/img/cells/R8.webp) 20% 60%/cover no-repeat}
.who li:nth-child(4)::before{background:var(--z-r) url(/img/cells/D8.webp) 50% 14%/cover no-repeat}
.who li:nth-child(5)::before{background:var(--z-d) url(/img/cells/D12.webp) 30% 60%/cover no-repeat}
.who h3{font-size:1.15rem}
/* Who each card is for (the Russian page, 2026-10-22): one audience a card. */
.who-tag{font:700 .78rem var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-strong);margin-bottom:-4px}
.who-note{border:2px dashed var(--accent);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.who-note b{font:700 .78rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-strong)}
@media (max-width:980px){.who-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.who-grid{grid-template-columns:1fr}}

/* The three zones side by side, each a card in its zone colour (one under another on a phone). */
.zones{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.zone{color:var(--z-ink);border-radius:var(--r);padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:12px;min-width:0}
.zone.d{background:var(--z-d)}.zone.r{background:var(--z-r)}.zone.c{background:var(--z-c)}
.zone h3{font:700 .78rem var(--body);letter-spacing:.14em;text-transform:uppercase}
.zone blockquote{margin:0 0 4px;font-family:var(--display);font-weight:var(--dw);font-size:clamp(1.3rem,2.1vw,1.6rem);line-height:1.15}
.zone p{font-size:.98rem}
@media (max-width:900px){.zones{grid-template-columns:1fr}}

/* question cards */
.qs{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:18px;align-items:stretch}
.qcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;display:flex;align-items:center;min-width:0;box-shadow:0 8px 20px rgba(20,25,50,.07)}
.qcard:nth-child(1){transform:rotate(-1.2deg)}.qcard:nth-child(2){transform:rotate(1deg)}.qcard:nth-child(3){transform:rotate(-.6deg)}
.qcard p{font-family:var(--display);font-weight:var(--dw);font-size:.98rem;line-height:1.45}
@media (max-width:900px){.qs{grid-template-columns:1fr}.qcard{transform:none!important}}
.decks{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.deck{border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:8px;min-width:0}
.deck p{font-size:.95rem}
.deck.q{background:var(--surface);border:1px solid var(--line)}
.deck.res{background:#F7DF73;color:#2B2A4A}
.deck.fear{background:#1B2440;color:#F4EDE3}
.deck.fear h3{color:#FF7A66}
.deck.door{background:#2F6B4A;color:#FFF7F5}
@media (max-width:900px){.decks{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.decks{grid-template-columns:1fr}}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.pair>*{min-width:0}
.pair img{display:block;width:100%;border-radius:var(--r);aspect-ratio:4/3;object-fit:cover}
@media (max-width:820px){.pair{grid-template-columns:1fr}}

.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px 32px}
.steps li{counter-increment:s;display:flex;flex-direction:column;gap:6px;min-width:0}
.steps li::before{content:counter(s);font-family:var(--display);font-weight:var(--dw);font-size:2.4rem;line-height:1;color:var(--accent)}
.steps p{font-size:.98rem}
@media (max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.trio>div{border-top:3px solid var(--ink);padding-top:14px;display:flex;flex-direction:column;gap:6px;min-width:0}
/* who to play with: the three ways as cards, a picture from the game on each */
.ways>div{border-top:0;background:var(--bg);border-radius:var(--r);padding:24px;gap:8px}
.ways img{height:96px;width:100%;object-fit:contain;padding:14px;border-radius:calc(var(--r) - 8px);background:var(--z-d);margin-bottom:6px}
.ways div:nth-child(2) img{background:var(--z-r)}.ways div:nth-child(3) img{background:var(--z-c)}
@media (max-width:700px){.trio{grid-template-columns:1fr}}

.quote{margin:0;background:var(--surface);border-radius:var(--r);padding:clamp(24px,4vw,44px);display:flex;flex-direction:column;gap:16px;box-shadow:0 8px 20px rgba(20,25,50,.07)}
.quote blockquote{margin:0;font-family:var(--display);font-weight:var(--dw);font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.15;text-wrap:balance}
.quote figcaption{font-weight:700;font-size:.95rem}
/* A two-sentence review, not a one-line saying: a size that sits beside the heading, not over it. */
/* A two-sentence review in italic text type (the display face has no italic). */
#closeness .quote blockquote{font-family:var(--body);font-style:italic;font-weight:500;font-size:clamp(1.25rem,2.1vw,1.55rem);line-height:1.45}
/* Reviews: one card at a time once site.js is on (all three stacked without it). The cards
   share one grid cell, so the block keeps the tallest card's height and nothing jumps. */
.reviews{width:100%;max-width:860px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:20px}
#reviews .eyebrow{text-align:center}
.slides{width:100%}
.review{justify-content:center;text-align:center}
.slides{display:grid;gap:20px}
.review blockquote{font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.3}
.review figcaption{font-weight:500}
.review figcaption b{color:var(--ink)}
.review figcaption b::after{content:", "}
.review figcaption::before{content:"";display:inline-block;vertical-align:-1px;margin-right:10px;width:12px;height:12px;border-radius:50%;background:var(--z-d)}
.review figcaption.r::before{background:var(--z-r)}.review figcaption.c::before{background:var(--z-c)}.review figcaption.a::before{background:var(--accent)}
.reviews.on .review{grid-area:1/1;visibility:hidden;cursor:pointer}
.reviews.on .review.active{visibility:visible;animation:review-in .35s ease}
@keyframes review-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ctrl{display:flex;align-items:center;gap:12px}
.btn.round{width:50px;padding:0}
.dots{display:flex}
.dots button{width:28px;height:44px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.dots button::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--ink);box-sizing:border-box}
.dots button[aria-current="true"]::before{background:var(--accent);border-color:var(--accent)}
@media (prefers-reduced-motion:reduce){.reviews.on .review.active{animation:none}}
.quote .after{border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:12px}
.quote figcaption{color:var(--muted)}
.quote .after b{color:var(--ink)}
.dark{background:var(--dark);color:var(--on-dark)}
.dark .muted{color:var(--on-dark-muted)}
.dark .prod .muted{color:var(--muted)}
.shop{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.prod{background:var(--surface);color:var(--ink);border-radius:var(--r);padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:16px;min-width:0}
.price{font-family:var(--display);font-weight:var(--dw);font-size:2.8rem;line-height:1;font-variant-numeric:tabular-nums}
.price small{font:500 .95rem var(--body);color:var(--muted);display:block;margin-top:8px}
/* A sale (prices.js): the list price struck beside the price, and how much off. */
.pr s{opacity:.75;font-size:.82em;font-weight:500;margin-right:.35em}
/* The header's small Play: the price alone; the first screen and the card show the sale. */
.top .pr s{display:none}
.price .price-was{font:500 1.25rem var(--body);color:var(--muted);margin-left:.45em}
.price .price-off{display:inline-block;margin-left:.5em;padding:4px 10px;border-radius:999px;background:var(--accent-strong);color:var(--on-accent);font:700 .9rem var(--body);vertical-align:.55em}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.98rem}
.ticks li{padding-left:22px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.call{border:2px dashed var(--accent);border-radius:var(--r);padding:16px 18px;font-size:.98rem}
.call b{display:block;margin-bottom:4px}
.prod>.btn{margin-top:auto;align-self:flex-start}
.prod h3{font-size:1.25rem}
.tag{align-self:flex-start;display:inline-flex;align-items:center;min-height:30px;padding:3px 12px;border:1px solid var(--line);border-radius:var(--rc);background:var(--bg);font:700 .8rem var(--body);line-height:1.3}
.btn[aria-disabled="true"]{cursor:default;opacity:.55}.btn[aria-disabled="true"]:hover{transform:none}
/* Playing with the author: the one premium offer, under the three cards, framed in the accent. */
.coach{border:3px solid var(--accent);display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(20px,4vw,48px);align-items:center}
.coach>*{min-width:0}
.coach h3{font-size:var(--h2)}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.mail{overflow-wrap:anywhere}
.mail a{font-weight:700}
form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form label{display:flex;flex-direction:column;gap:4px;font-size:.82rem;font-weight:700;min-width:0}
form .full{grid-column:1/-1}
input,select{font:400 1rem var(--body);min-height:46px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);width:100%}
input[aria-invalid="true"]{border-color:var(--accent-strong);box-shadow:0 0 0 1px var(--accent-strong)}
.consent{flex-direction:row!important;align-items:flex-start;gap:10px!important;font-weight:500!important;font-size:.88rem!important;line-height:1.5;min-height:44px;padding-top:4px}
.consent input{width:22px;height:22px;min-height:0;flex:none;margin:1px 0 0;padding:0;accent-color:var(--accent-strong)}
.consent a{color:inherit}
.form-error{background:#FCE7E3;color:#8E2A1B;border-radius:10px;padding:12px 14px;font-size:.92rem;font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.done{font-weight:600}
.done{background:var(--z-r);color:var(--z-ink);border-radius:10px;padding:14px 16px;font-size:.95rem}
@media (max-width:980px){.shop{grid-template-columns:1fr}}
@media (max-width:820px){.coach{grid-template-columns:1fr}}
@media (max-width:480px){form{grid-template-columns:1fr}}

.author .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,64px);align-items:center}
.author .wrap>*{min-width:0}
.author img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:60% 30%;border-radius:var(--r)}
.sign{font-family:var(--display);font-weight:var(--dw);font-size:1.3rem}
@media (max-width:820px){.author .wrap{grid-template-columns:1fr}.author img{max-width:420px}}
details{border-top:1px solid var(--line);padding:16px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:700;font-size:1.05rem}
details p{margin-top:10px;max-width:62ch}
footer{border-top:1px solid var(--line);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 28px;padding-block:28px}


/* «Зачем эта игра»: the way through the three zones, after the book cover. Each paragraph
   beside a cell of the board, left and right in turn, a path in the accent winding
   between them behind. */
.journey{position:relative;display:flex;flex-direction:column;margin-top:clamp(20px,3vw,36px)}
.journey svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* Each paragraph starts a little below its cell's top, so the path runs above it; the next
   pair rises into the space beside the previous cell. */
.step{position:relative;display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:clamp(20px,4vw,48px);align-items:start}
.step+.step{margin-top:calc(-1 * clamp(12px,2.5vw,36px))}
.step.flip{grid-template-columns:1fr minmax(150px,220px)}
.step .prose{font-size:1.12rem;max-width:56ch;position:relative;background:var(--z-d);border-radius:12px;padding:6px 10px;margin:clamp(42px,5vw,60px) -10px -6px}
.step .tile{z-index:1}
.step.flip .prose{justify-self:end}
.tile{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:var(--r);border:6px solid var(--surface);box-shadow:0 14px 30px rgba(20,25,50,.2);background:var(--surface)}
/* The picture overflows the frame to the top right, so the cell's number badge stays outside. */
.tile img{position:absolute;width:122%;max-width:none;left:-4%;top:-18%}
.tile.t1{transform:rotate(-5deg)}.tile.t2{transform:rotate(4deg)}.tile.t3{transform:rotate(-3deg)}
.tile i{position:absolute;left:10px;bottom:10px;font:700 .7rem var(--body);font-style:normal;letter-spacing:.1em;text-transform:uppercase;background:var(--surface);color:var(--ink);padding:4px 9px;border-radius:var(--rc)}
@media (max-width:700px){.journey svg{display:none}.step,.step.flip{grid-template-columns:1fr;gap:16px}.step+.step{margin-top:28px}.step .prose{margin-top:0}.step .tile{width:min(62%,240px)}.step.flip .tile{order:-1;justify-self:end}}

/* «Каждая игра другая»: the number large, the text beside it. */
/* «Каждая игра другая»: a fan of the real card backs, the number on a badge over it. */
.fan{position:relative;height:clamp(300px,32vw,380px)}
.fan img{position:absolute;left:50%;bottom:40px;width:clamp(120px,14vw,168px);height:auto;border-radius:12px;box-shadow:0 10px 24px rgba(20,25,50,.2);transform-origin:50% 130%}
.fan img:nth-child(1){transform:translateX(-50%) rotate(-26deg)}
.fan img:nth-child(2){transform:translateX(-50%) rotate(-13deg)}
.fan img:nth-child(3){transform:translateX(-50%)}
.fan img:nth-child(4){transform:translateX(-50%) rotate(13deg)}
.fan img:nth-child(5){transform:translateX(-50%) rotate(26deg)}
.stat{position:absolute;left:50%;bottom:0;transform:translateX(-50%) rotate(-3deg);display:flex;flex-direction:column;align-items:center;white-space:nowrap;background:var(--accent-strong);color:var(--on-accent);border-radius:var(--r);padding:12px 22px;font-weight:600;box-shadow:0 10px 24px rgba(20,25,50,.2)}
.stat b{font-family:var(--display);font-weight:var(--dw);font-size:clamp(1.8rem,3.4vw,2.4rem);line-height:1.05}
#replay .split{align-items:center}

/* «Дайте слово каждому»: three overlapping voices, «Вы» where they meet. */
.voices{align-items:center}
#voices .wrap{width:100%}
#voices .venn circle{mix-blend-mode:normal;opacity:.92}
#voices .venn circle:last-of-type{opacity:1}
#voices .you{border-top-color:rgba(255,247,245,.25)}
.venn{width:100%;max-width:380px;margin-top:8px}
.venn circle{mix-blend-mode:multiply}
.venn circle:last-of-type{mix-blend-mode:normal}
.venn g text{text-transform:uppercase}
.louder{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-weight:600}
.louder li{display:flex;gap:12px;align-items:baseline}
.louder li::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;transform:translateY(1px)}
.louder .c::before{background:var(--z-c)}.louder .d::before{background:var(--z-d)}.louder .r::before{background:var(--z-r)}
.you{font-family:var(--display);font-weight:var(--dw);font-size:1.2rem;line-height:1.35;border-top:1px solid var(--line);padding-top:16px}


/* The page in sections: cream, white, pink and sage from the game, navy for prices and the
   footer. On pink and sage the coral eyebrows and grey text fall under 4.5:1, so they go ink. */
#why{background:var(--z-d)}
#replay,#reviews{background:var(--z-r)}
#game,#how,#people,#faq{background:var(--surface)}
#game{padding-block:clamp(48px,8vw,96px)}
#why .eyebrow,#replay .eyebrow,#reviews .eyebrow{color:var(--ink)}
#why .muted,#reviews .quote figcaption{color:var(--ink)}
#people .aside{background:var(--bg)}
footer{background:var(--dark);color:var(--on-dark);border-top:0}

/* «Зачем эта игра»: agency, the game's point, as a wide quote under the way. */
.agency{margin-top:clamp(28px,4vw,48px);background:var(--surface);border-radius:var(--r);border-left:6px solid var(--accent);padding:clamp(22px,4vw,40px);font-size:1.05rem}
.agency b{display:block;font-family:var(--display);font-weight:var(--dw);font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.2;margin-bottom:10px}
@media (max-width:820px){.fan{height:280px}}

/* Under the hero: the game in four numbers, each on a card. */
.hero .stats{display:grid;grid-template-columns:repeat(4,1fr);align-items:stretch;gap:16px;margin-top:clamp(32px,5vw,56px)}
.stats p{background:var(--surface);border-radius:var(--r);padding:20px 22px;display:flex;flex-direction:column;gap:6px;font-size:.95rem;color:var(--muted);box-shadow:0 8px 20px rgba(20,25,50,.06);min-width:0}
.stats b{font-family:var(--display);font-weight:var(--dw);font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1;color:var(--ink)}
@media (max-width:820px){.hero .stats{grid-template-columns:1fr 1fr}}

/* A ribbon of the game's words, tilted like the cover's path, running slowly sideways. */
.ribbon{background:var(--dark);color:var(--on-dark);overflow:hidden;transform:rotate(-1.5deg);width:104%;margin:clamp(8px,2vw,20px) -2%;padding:14px 0;position:relative;z-index:1}
.ribbon ul{display:flex;width:max-content;margin:0;padding:0;list-style:none;animation:ribbon 48s linear infinite}
.ribbon li{display:flex;align-items:center;gap:22px;padding-right:22px;font:600 1rem var(--body);white-space:nowrap}
.ribbon li::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
@keyframes ribbon{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ribbon ul{animation:none}}

/* The coloured sections as sheets: rounded, a little in from the screen's edges, on the
   cream page, like cards on the table. Cream sections stay the page itself. */
#why,#game,#voices,#how,#replay,#people,#reviews,#buy,#faq{margin:12px clamp(8px,2vw,24px);border-radius:clamp(24px,3vw,40px)}

/* A marker in the game's yellow under a phrase or two that carry a block. */
mark{background:linear-gradient(transparent 52%,#F7DF73 52%,#F7DF73 92%,transparent 92%);color:inherit;padding:0 .1em}

/* The hero's «ближе»: a hand-drawn line under it, the cover's path. */
.hero h1 em{position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:-3%;right:-3%;bottom:-.16em;height:.32em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C 40 4, 70 18, 105 9 S 170 4, 197 11' fill='none' stroke='%23E2503A' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}

/* Agency bridges two sections: it hangs over the pink sheet's bottom edge into the next,
   carrying the reader from one zone of the page to the other. */
#why{--hang:clamp(70px,9vw,110px);padding-bottom:0;position:relative;z-index:2}
#why .agency{position:relative;top:var(--hang);margin-top:calc(clamp(28px,4vw,48px) - var(--hang));margin-bottom:0;box-shadow:0 18px 40px rgba(20,25,50,.14)}
#who{padding-top:calc(clamp(48px,8vw,96px) + clamp(70px,9vw,110px))}

/* The story from one game fits a screen: a smaller quote and text, the photo kept in view. */
#story .pair{align-items:start}
#story .quote{padding:clamp(22px,3vw,36px);gap:12px}
#story .quote blockquote{font-size:clamp(1.35rem,2.2vw,1.75rem)}
#story .after{gap:10px;padding-top:12px}
#story .after p{font-size:.98rem;line-height:1.55}
@media (min-width:821px){#story .pair{align-items:stretch}#story .pair img{height:100%;aspect-ratio:auto;object-fit:cover;object-position:60% 50%}}

/* Under the price cards: how the online game and the year can be paid for, for now. */
.paynote{display:flex;align-items:center;gap:10px;margin-top:-12px;font-size:.95rem;color:var(--on-dark-muted)}
.paynote a{color:inherit;font-weight:700;text-underline-offset:3px}
.paynote::before{content:"";flex:none;width:22px;height:16px;border:2px solid currentColor;border-radius:4px;box-shadow:inset 0 4px 0 -1px currentColor}

/* «От автора»: the facts about the author as chips stacked on the photo's corner. */
.author-photo{position:relative;margin:0}
.facts-col{position:absolute;left:-14px;bottom:24px;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.facts-col li{background:var(--surface);border-radius:var(--rc);padding:8px 14px;font-size:.88rem;font-weight:700;box-shadow:0 8px 20px rgba(20,25,50,.14)}
@media (min-width:821px){.author h2{font-size:clamp(2rem,4.2vw,3.2rem)}}
@media (max-width:820px){.facts-col{left:12px;bottom:12px}}

/* The manifesto: one line from the author, very large, centred, on a screen of its own. */
#manifesto .wrap{text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
#manifesto p:first-child{font-family:var(--display);font-weight:var(--dw);font-size:clamp(2rem,5.4vw,4.2rem);line-height:1.1;letter-spacing:var(--dls);max-width:20ch;text-wrap:balance}
#manifesto .by{font-weight:700;color:var(--muted)}
@media (min-width:821px){.author .wrap{align-items:center}}

/* «Во что я верю»: the author's two beliefs under her photo, each on a card with the accent bar of the quotes. */
.beliefs{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.beliefs ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:12px}
.author-side{display:flex;flex-direction:column;gap:clamp(24px,3vw,36px);min-width:0}
.beliefs li{background:var(--surface);border-left:4px solid var(--accent);border-radius:12px;padding:14px 16px;font-family:var(--display);font-weight:var(--dw);font-size:1rem;line-height:1.35}

/* The phone's floating Play button (site.js shows it between the first screen and the prices). */
.float-cta{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:25;box-shadow:0 10px 28px rgba(20,25,50,.3);white-space:nowrap}
@media (min-width:601px){.float-cta{display:none!important}}
/* The life audit, first (the owner, 2026-10-12): the offer, and the coach's note beside it. */
.hero-audit{margin-top:-6px;font-weight:600}
.hero-audit a{color:var(--ink);text-decoration-color:var(--accent);text-underline-offset:4px}
#lifeaudit{background:var(--surface);margin:12px clamp(8px,2vw,24px);border-radius:clamp(24px,3vw,40px)}
.la{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center}
.la-small{color:var(--muted);font-size:.92rem}
.la-note{position:relative;margin:0;padding:28px 28px 24px;border-radius:var(--r);background:#FCF6E3;border:1px solid #F0E2B6}
.la-wheel{width:96px;height:96px;margin-bottom:10px}
.la-label{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.la-note blockquote{margin:8px 0 16px;font-style:italic;font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.5}
.la-note figcaption{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.95rem}
.la-note figcaption img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 20%}
@media (max-width:820px){.la{grid-template-columns:1fr}}
/* The menu's audit: a soft chip with a small wheel, so it stands apart from the anchors. */
.nav .nav-audit{display:inline-flex;align-items:center;gap:6px;margin:-6px 0;padding:6px 12px;border-radius:var(--rc);background:#FCF6E3;border:1px solid #F0E2B6;font-weight:700;text-decoration:none}
.nav .nav-audit:hover{text-decoration:none;border-color:#D6AE3E}
/* The five-minute card: bottom right; on a phone, above the floating Play. */
.nudge{position:fixed;right:clamp(12px,3vw,28px);bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:40;width:min(360px,calc(100vw - 24px));padding:20px 20px 18px;border-radius:var(--r);background:var(--surface);border:1px solid #F0E2B6;box-shadow:0 18px 44px rgba(20,25,50,.22);animation:nudge-in .45s ease-out}
.nudge[hidden]{display:none}
.nudge-wheel{width:40px;height:40px;margin-bottom:8px}
.nudge-title{font:600 1.1rem var(--display);margin-bottom:6px}
.nudge p{font-size:.95rem}
.nudge-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:14px}
.nudge-later{background:none;border:0;padding:8px 0;font:600 .95rem var(--body);color:var(--muted);cursor:pointer}
.nudge-x{position:absolute;top:8px;right:8px;width:36px;height:36px;border:0;border-radius:50%;background:none;font-size:1.4rem;line-height:1;color:var(--muted);cursor:pointer}
.nudge-x:hover,.nudge-later:hover{color:var(--ink)}
@keyframes nudge-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.nudge{animation:none}}
@media (max-width:600px){.nudge{right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
/* «Наедине с собой» short, the rest a click away (the owner, 2026-10-12). */
.ways .more summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;cursor:pointer;list-style:none;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.ways .more summary::-webkit-details-marker{display:none}
.ways .more summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.ways .more[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.ways .more p{margin-top:4px}

.ways details.more{border:0;padding:0;margin:0}
/* The Russian page's prices (the owner, 2026-10-22): one offer, the month for the whole group, in a wide
   card; the year as a line under it; the box beside its sign-up form. */
.prod.main,.prod.box{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,4vw,48px);align-items:start}
.prod.main>*,.prod.box>*{min-width:0;gap:16px}
.prod.main h3{font-size:var(--h2)}
.prod.main .btn{align-self:flex-start}
.prod.main .note{color:var(--muted)}
.price .sale{color:var(--accent-strong);font-weight:700}
.year-line{margin-top:-12px;font-size:1.02rem;color:var(--on-dark-muted)}
.year-line a{color:var(--on-dark);font-weight:700;text-underline-offset:4px;text-decoration-color:var(--accent)}
@media (max-width:820px){.prod.main,.prod.box{grid-template-columns:1fr}}
/* The Russian page's first screen, under test (the owner, 2026-10-22, after the review's
   example): one dark card. The English page keeps the first screen it had. */
.hero .wrap:has(.hero-card){grid-template-columns:1fr}
.hero:has(.hero-card){padding-bottom:0}
/* Sized to fit the screen whole, a laptop's included (the owner, 2026-10-22). */
.hero:has(.hero-card){padding-top:clamp(10px,2.5vh,40px)}
.hero-card{max-width:1060px;padding:clamp(18px,3.4vh,44px) clamp(22px,4vw,48px);border-radius:28px;gap:clamp(10px,1.8vh,18px);box-shadow:0 24px 50px rgba(20,25,50,.18)}
.hero-card .eyebrow{color:var(--accent)}
.hero-card h1{color:var(--on-dark);font-size:clamp(1.7rem,min(4vw,5.2vh),2.9rem)}
.hero-card .lead{color:var(--on-dark);font-size:clamp(.98rem,2vh,1.1rem);line-height:1.45}
.facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.facts li{padding:5px 15px;border:1.5px solid var(--on-dark-muted);border-radius:999px;font-weight:700;font-size:.92rem}
.hero-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-size:clamp(2.1rem,5vh,2.8rem)}
.hero-price small{display:inline;margin:0;color:var(--on-dark);font-size:1.02rem}
.hero-price .price-was,.hero-price .price-off,.hero-card .btn .pr s{display:none}
.hero-card .note{font-size:.95rem;color:var(--on-dark-muted);margin-top:0}
.hero-card .note::before{display:none}
.note a{color:inherit;font-weight:700}
.hero-card .btn{min-height:clamp(44px,6vh,50px)}
.hero-card .btn.ghost{color:var(--on-dark);border-color:var(--on-dark)}
/* «Купить игру за 10 €»: a button is a flex box, so its gap, not a space, sits before the price. */
.hero-card .btn{gap:.3em}
#demo .shot{transform:none}
.shot.demo:has(video){transform:none}
.shot video{display:block;width:100%;height:auto;aspect-ratio:1440/900;border-radius:var(--r);box-shadow:0 18px 40px rgba(20,25,50,.22);background:var(--surface)}
.shot video+figcaption{position:static;max-width:none;margin-top:12px;background:none;box-shadow:none;padding:0;font-size:.95rem;color:var(--muted)}