/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Newsreader-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Newsreader-italic-latin.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;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/Newsreader-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/Newsreader-latin.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:"GM Rukopis"; src:url("fonts/GoodManRukopis.woff2") format("woff2"); font-display:swap; }
  :root {
    --ink:#161616; --mute:#5b5b5b; --line:#e3e6e1; --green:#13803f; --green-dark:#0e6a33; --soft:#f3f5f1; --paper:#ffffff;
    --serif:"Newsreader", Georgia, "Times New Roman", serif; --hand:"GM Rukopis", "Newsreader", cursive;
    --pen:url("pen.png");
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  [hidden] { display:none !important; }
  html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
  body { font-family:var(--serif); color:var(--ink); background:var(--paper); font-size:18px; line-height:1.55; font-optical-sizing:auto; }
  a { color:inherit; }
  .wrap { max-width:1120px; margin:0 auto; padding:0 24px; }
  .narrow { max-width:660px; }
  .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

  /* pen: crossed-out sentence + handwritten fix */
  del { text-decoration:none; position:relative; display:inline-block; color:var(--mute); }
  del::after { content:""; position:absolute; left:-4%; width:108%; top:52%; height:.55em; transform:translateY(-50%) rotate(-1.2deg); background:var(--green);
    -webkit-mask:var(--pen) no-repeat center/100% 100%; mask:var(--pen) no-repeat center/100% 100%; }
  ins, .hand { text-decoration:none; font-family:var(--hand); color:var(--green); display:block; font-weight:400; letter-spacing:.01em; }
  .tilt { transform:rotate(-2deg); transform-origin:left center; }

  /* header */
  header { padding:22px 0; }
  header .wrap { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
  .wm { display:inline-block; line-height:0; }
  .wm svg { height:44px; width:auto; margin-left:-8px; }
  .wm i { font-weight:400; }
  .toplink { font-size:16px; color:var(--mute); text-underline-offset:3px; }

  /* hero */
  .hero { padding:36px 0 72px; }
  .hero .wrap { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:64px; align-items:center; }
  .hero .auto { font-size:23px; line-height:1.25; }
  .hero .fix1 { font-size:34px; line-height:1; margin:12px 0 0 14px; }
  h1 { font-size:clamp(40px, 5.6vw, 68px); line-height:1.02; font-weight:500; letter-spacing:-.025em; margin-top:0; }
  .claim { display:inline-block; position:relative; }
  .hero .fix2 { font-size:clamp(44px, 5.6vw, 66px); line-height:1; text-align:left; margin-top:.02em; margin-left:-.02em; transform:rotate(-3deg); transform-origin:left center; position:relative; }
  .lead { font-size:19px; line-height:1.5; margin-top:18px; color:#2a2a2a; max-width:520px; }

  form.signup, .signup-fallback { margin-top:28px; max-width:480px; }
  form.signup .field { display:flex; flex-direction:column; gap:12px; }
  form.signup input[type="email"] { width:100%; font:inherit; font-size:18px; padding:12px 2px; border:0; border-bottom:1.5px solid var(--ink); background:transparent; color:var(--ink); border-radius:0; outline:none; }
  form.signup input[type="email"]:focus { border-bottom-color:var(--green); box-shadow:0 1.5px 0 var(--green); }
  .signup-option { display:flex; align-items:baseline; gap:8px; font-size:16px; line-height:1.3; cursor:pointer; }
  .signup-option input, .consent input { accent-color:var(--green); width:1em; height:1em; flex:none; }
  form.signup button, .signup-mail { font:inherit; font-size:18px; font-weight:600; padding:15px 22px; border:0; border-radius:4px; background:var(--green); color:#fff; cursor:pointer; }
  form.signup button:hover, .signup-mail:hover { background:var(--green-dark); }
  .signup-mail { display:block; text-align:center; text-decoration:none; }
  form.signup button:disabled { opacity:.7; cursor:default; }
  :focus-visible { outline:2px solid var(--green-dark); outline-offset:3px; }
  .note { font-size:15px; color:var(--mute); margin-top:12px; max-width:480px; line-height:1.45; }
  .err { font-size:15px; color:#a12a1a; }
  .err:not(:empty) { margin-top:8px; }
  .thanks { margin-top:28px; max-width:480px; outline:none; }
  .thanks .hand { font-size:40px; }
  .thanks p { margin-top:8px; font-size:17px; color:#2a2a2a; }

  /* chapter preview */
  .sheets { position:relative; padding:18px 10px 30px 26px; }
  .sheet { background:#fff; border:1px solid var(--line); box-shadow:0 1px 0 rgba(0,0,0,.03), 0 22px 40px -26px rgba(0,0,0,.35); padding:36px 34px 40px; }
  .sheet.back { position:absolute; top:0; left:0; right:48px; height:72%; transform:rotate(-3deg); padding:24px 30px; background:#f4f7f2; border-color:#dfe6dc; }
  .sheet.back .story { font-size:16px; line-height:1.5; margin-top:12px; color:#2a2a2a; max-width:340px; }
  .sheet.back .dropcap { font-family:var(--hand); color:var(--green); font-size:46px; line-height:.8; float:left; margin:4px 8px 0 0; }
  .sheet.back .prask { position:absolute; right:26px; top:22px; font-size:34px; transform:rotate(8deg); }
  .sheet.back .kick { font-size:14px; color:var(--mute); }
  .sheet.back .t { font-size:24px; font-style:italic; margin-top:2px; }
  .sheet.front { position:relative; transform:rotate(1.3deg); margin-top:0; margin-left:22px; }
  .sheet .kick { font-size:14px; color:var(--mute); letter-spacing:.01em; }
  .sheet h2 { font-size:34px; line-height:1.05; font-weight:500; letter-spacing:-.02em; margin-top:4px; }
  .sheet .q { font-style:italic; font-size:19px; line-height:1.35; margin-top:14px; }
  .sheet p { font-size:15.5px; line-height:1.5; margin-top:16px; color:#2a2a2a; }
  .sheet ul { margin:10px 0 0 18px; font-size:15.5px; line-height:1.5; color:#2a2a2a; }
  .sheet li { margin-top:6px; }
  .uline { position:relative; }
  .uline::after { content:""; position:absolute; left:-2px; right:-4px; bottom:-6px; height:9px; background:var(--green);
    -webkit-mask:var(--pen) no-repeat center/100% 100%; mask:var(--pen) no-repeat center/100% 100%; }
  .margin-note { position:absolute; right:-18px; bottom:-44px; font-size:64px; line-height:1; transform:rotate(-7deg); }

  /* sections */
  section.block { padding:84px 0; }
  section.soft { background:var(--soft); }
  h2.sec { font-size:clamp(30px, 3.8vw, 44px); line-height:1.08; font-weight:500; letter-spacing:-.02em; max-width:760px; }
  .intro { font-size:19px; line-height:1.55; margin-top:18px; color:#2a2a2a; max-width:640px; }

  .pairs { margin-top:44px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:40px 36px; }
  .pair .auto { font-size:21px; line-height:1.3; }
  .pair ins { font-size:27px; line-height:1.15; margin:12px 0 0 8px; }
  .after { margin-top:48px; font-size:19px; line-height:1.55; color:#2a2a2a; max-width:680px; }

  section.polohy { background:#fff; }
  .axis2 { position:relative; margin-top:56px; display:grid; grid-template-columns:1fr 1.35fr 1fr; gap:28px; align-items:start; }
  .axis-line { position:absolute; left:0; right:0; top:10px; width:100%; height:24px; }
  .axis-line path { stroke:var(--ink); }
  .pos { position:relative; padding-top:52px; }
  .pos .dot { display:none; position:absolute; top:13px; left:0; width:14px; height:14px; border-radius:50%; background:var(--ink); }
  .pos.side h3 { font-size:24px; line-height:1.15; font-weight:500; letter-spacing:-.01em; }
  .pos.side:last-child { text-align:right; }
  .pos.side:last-child .dot { left:auto; right:0; }
  .pos .voice { font-style:italic; font-size:18px; line-height:1.45; margin-top:12px; color:var(--mute); }
  .pos.center { background:var(--green); color:#fff; padding:30px 28px 32px; margin-top:-14px; transform:rotate(-1.2deg); box-shadow:0 26px 40px -24px rgba(0,0,0,.4); text-align:center; }
  .pos.center .hand { color:#fff; font-size:clamp(26px, 2.6vw, 36px); line-height:1.1; }
  .pos.center .voice { color:#fff; }
  .axis-note { margin-top:48px; font-size:19px; line-height:1.6; max-width:700px; color:#2a2a2a; }
  .layers { margin-top:44px; display:grid; grid-template-columns:1fr 1fr; gap:28px; }
  .layer { background:#fff; border:1px solid var(--line); padding:30px 30px 34px; }
  .layer .hand { font-size:30px; }
  .layer h3 { font-size:24px; font-weight:500; margin-top:0; letter-spacing:-.01em; }
  .layer p { font-size:17px; margin-top:10px; color:#2a2a2a; }
  .topics { margin-top:52px; columns:3; column-gap:36px; list-style:none; counter-reset:t; }
  .topics li { break-inside:avoid; font-size:17px; line-height:1.35; padding:9px 0; border-top:1px solid var(--line); display:flex; gap:10px; align-items:baseline; }
  .topics li .n { color:var(--mute); font-size:15px; min-width:24px; }
  .topics li .free { font-family:var(--hand); color:var(--green); font-size:20px; margin-left:auto; padding-left:8px; }
  .topics-cap { margin-top:16px; font-size:15px; color:var(--mute); }

  .me { display:grid; grid-template-columns:1fr; max-width:660px; }
  .me p { font-size:19px; line-height:1.6; margin-top:18px; color:#2a2a2a; }
  .me .sig { font-size:46px; margin-top:20px; color:var(--green); }

  .final .hand.big { font-size:clamp(40px, 5vw, 58px); line-height:1; margin-top:12px; }

  .faq { margin-top:36px; max-width:720px; }
  .faq details { border-top:1px solid var(--line); padding:18px 0; }
  .faq details:last-child { border-bottom:1px solid var(--line); }
  .faq summary { font-size:20px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; }
  .faq summary::-webkit-details-marker { display:none; }
  .faq summary::after { content:"+"; font-family:var(--hand); color:var(--green); font-size:28px; line-height:1; }
  .faq details[open] summary::after { content:"–"; }
  .faq p { font-size:17px; margin-top:10px; color:#2a2a2a; max-width:640px; }

  footer { padding:36px 0 48px; border-top:1px solid var(--line); font-size:15px; color:var(--mute); }
  footer .wrap { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
  footer nav { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 18px; }
  .cookie-settings { border:0; background:none; font:inherit; color:inherit; text-decoration:underline; cursor:pointer; }

  .consent { margin:0 20px 16px; padding:16px 20px; border:1px solid var(--line); background:var(--paper); box-shadow:0 10px 30px #0001; border-radius:4px; font-size:16px; line-height:1.35; }
  .consent h2 { font-size:22px; font-weight:600; }
  .consent p { margin:5px 0 12px; }
  .cookie-actions { display:flex; align-items:stretch; flex-wrap:wrap; gap:8px; }
  .cookie-actions button { font:inherit; font-weight:600; color:var(--green-dark); background:var(--paper); border:1px solid var(--green-dark); border-radius:4px; padding:8px 10px; cursor:pointer; min-height:40px; }
  .cookie-actions button:hover { background:var(--soft); }
  .consent fieldset { margin:16px 0 12px; border:0; }
  .consent legend { font-weight:600; }
  .consent fieldset label { display:flex; align-items:baseline; gap:8px; margin-top:8px; cursor:pointer; }
  .privacy { max-width:720px; padding-top:32px; padding-bottom:64px; }
  .privacy h1 { font-size:clamp(38px, 6vw, 56px); margin:20px 0 24px; }
  .privacy h2 { font-size:28px; font-weight:500; line-height:1.15; margin-top:32px; }
  .privacy p, .privacy li { margin-top:10px; }
  .privacy ul { padding-left:22px; }
  .privacy a { overflow-wrap:anywhere; }

  @media (min-width:720px) {
    .consent { position:fixed; right:20px; bottom:20px; z-index:2; margin:0; width:460px; max-height:calc(100vh - 40px); overflow:auto; }
  }

  @media (max-width: 900px) {
    .hero .wrap { grid-template-columns:1fr; gap:48px; }
    .pairs { grid-template-columns:1fr; gap:34px; }
    .layers { grid-template-columns:1fr; }
    .topics { columns:2; }
    .axis2 { grid-template-columns:1fr; gap:26px; }
    .axis-line { display:none; }
    .pos { padding-top:0; padding-left:30px; }
    .pos .dot { display:block; top:8px; }
    .pos.side:last-child { text-align:left; }
    .pos.side:last-child .dot { left:0; right:auto; }
    .pos.center { margin-top:0; padding:24px 22px; text-align:left; }
  }
  @media (max-width: 560px) {
    body { font-size:17px; }
    .wm svg { height:36px; }
    .wrap { padding:0 20px; }
    .hero { padding:20px 0 56px; }
    .hero .auto { font-size:21px; }
    .hero .fix1 { font-size:25px; }
    h1 { margin-top:32px; }
    .hero .fix2 { margin-top:.04em; }
    section.block { padding:64px 0; }
    .topics { columns:1; }
    .sheets { padding:12px 6px 26px 14px; }
    .sheet { padding:28px 24px 32px; }
    .sheet h2 { font-size:29px; }
    .margin-note { font-size:48px; right:-4px; bottom:-36px; }
    .sheet.front { margin-top:0; margin-left:12px; }
    .sheet.back { right:24px; padding:20px 22px; height:226px; }
    .sheet.back .prask { display:none; }
    .sheet.back .story { font-size:15px; }
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }