@font-face{font-family:'Lexend';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/Lexend-vietnamese-400-700.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Lexend';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/Lexend-latin-ext-400-700.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lexend';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/Lexend-latin-400-700.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:'Zilla Slab';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ZillaSlab-latin-ext-600.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ZillaSlab-latin-600.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:'Zilla Slab';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ZillaSlab-latin-ext-700.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ZillaSlab-latin-700.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}
:root{
  --paper:#FBFBF8; --sheet:#FFFFFF; --grid:rgba(37,84,199,.05); --wash:rgba(37,84,199,.035);
  --ink:#1E2E48; --ink-strong:#14213A; --muted:#5A6B84;
  --cobalt:#2554C7; --cobalt-dark:#1B41A0; --cobalt-soft:#E7EDFB;
  --redpen:#C7402D; --hl:#FFD98F; --hl-soft:#FFF1D6;
  --line:#E3E1D6; --board:#1B2A47; --radius:10px;
  --display:'Zilla Slab',Georgia,'Times New Roman',serif;
  --body:'Lexend',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;
  color:var(--ink);font-family:var(--body);font-size:1.05rem;line-height:1.75;
}
::selection{background:var(--hl);color:var(--ink-strong)}
.nb-wrap{max-width:1080px;margin:0 auto;padding:0 22px}
a{color:var(--cobalt)}
h1,h2,h3{font-family:var(--display);line-height:1.18;font-weight:700;color:var(--ink-strong)}
h2{font-size:2rem;margin-bottom:.4em;text-wrap:balance}

/* margin line of the notebook — the signature: runs through every light section */
main section{position:relative}
main section:not(.nb-final) > .nb-wrap{position:relative;padding-inline-start:44px}
main section:not(.nb-final) > .nb-wrap::before{
  content:'';position:absolute;inset-inline-start:16px;top:-14px;bottom:-14px;width:2px;
  background:var(--redpen);opacity:.38;
}

/* highlighter kicker */
.nb-kicker{
  display:inline-block;font-family:var(--body);font-size:.76rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-strong);
  background:linear-gradient(101deg,transparent 1.5%,var(--hl) 1.5% 98.5%,transparent 98.5%);
  padding:.28em .85em;margin-bottom:1.1em;transform:rotate(-.5deg);
}

/* ---------- top risk bar ---------- */
.nb-riskbar{background:#F5F4EE;border-bottom:1px solid var(--line);font-size:.8rem;color:var(--muted);padding:.55em 0;text-align:center}

/* ---------- header ---------- */
.nb-head{background:var(--paper);border-bottom:1px solid var(--line)}
.nb-head .nb-wrap{display:flex;align-items:center;gap:28px;padding-top:14px;padding-bottom:14px}
.nb-logo img{height:34px;display:block}
.nb-nav{display:flex;gap:24px;margin-inline-start:auto;font-size:.94rem}
.nb-nav a{color:var(--ink);text-decoration:none;font-weight:600;padding:.35em 0;border-bottom:2px solid transparent}
.nb-nav a:hover{border-bottom-color:var(--cobalt);color:var(--cobalt)}
.nb-cta{background:var(--cobalt);color:#fff !important;text-decoration:none;font-weight:600;padding:.6em 1.25em;border-radius:8px;white-space:nowrap}
.nb-cta:hover{background:var(--cobalt-dark)}

/* ---------- hero ---------- */
.nb-hero{padding:66px 0 58px}
.nb-hero .nb-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
.nb-hero h1{font-size:clamp(2.3rem,4.8vw,3.5rem);margin-bottom:.45em}
.nb-hero h1::after{
  content:'';display:block;width:150px;height:9px;margin-top:.18em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 9'%3E%3Cpath d='M2 6 C 38 2, 75 8, 148 3' stroke='%23C7402D' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
}
.nb-hero .nb-sub{font-size:1.14rem;color:var(--muted);max-width:33em;margin-bottom:1.4em}
.nb-btnrow{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:1.1em}
.nb-btn{display:inline-block;text-decoration:none;font-weight:600;padding:.85em 1.5em;border-radius:8px}
.nb-btn-primary{background:var(--cobalt);color:#fff}
.nb-btn-primary:hover{background:var(--cobalt-dark)}
.nb-btn-ghost{border:2px solid var(--ink);color:var(--ink-strong)}
.nb-btn-ghost:hover{background:var(--cobalt-soft);border-color:var(--cobalt);color:var(--cobalt-dark)}
.nb-reassure{font-size:.88rem;color:var(--muted);max-width:38em}
.nb-reassure + .nb-reassure{margin-top:.6em}

/* signature card: first-steps path — a notebook sheet */
.nb-path{
  background:var(--sheet);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 26px 20px;
  box-shadow:0 1px 0 var(--line),0 10px 26px rgba(20,33,58,.07);
}
.nb-path-title{font-family:var(--display);font-weight:700;font-size:1.12rem;color:var(--ink-strong);margin-bottom:.8em}
.nb-path ol{list-style:none}
.nb-path li{display:flex;gap:14px;align-items:flex-start;padding:.6em 0;border-bottom:1px dashed var(--line)}
.nb-path li:last-child{border-bottom:none}
.nb-path li a{color:inherit;text-decoration:underline;text-decoration-color:rgba(37,84,199,.45);text-underline-offset:3px}
.nb-path li a:hover{color:var(--cobalt)}
.nb-stepnum{
  flex:0 0 30px;height:30px;border-radius:50%;border:2px solid var(--ink);
  background:transparent;color:var(--ink-strong);font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:.88rem;margin-top:.12em;
}
.nb-path .nb-free{background:var(--hl);border-color:transparent}
.nb-path-note{font-size:.84rem;color:var(--muted);margin-top:.9em}

/* ---------- sections ---------- */
section{padding:58px 0}
.nb-alt{background:var(--wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nb-lead{color:var(--muted);max-width:44em;margin-bottom:2em}

.nb-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.nb-card{background:var(--sheet);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 1px 0 var(--line)}
.nb-card h3{font-size:1.18rem;margin-bottom:.5em}
.nb-card p{font-size:.95rem;color:var(--muted)}
.nb-card a{font-weight:600;font-size:.9rem}

/* glossary: handwriting-practice sheets */
.nb-words{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.nb-word{background:var(--sheet);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:0 1px 0 var(--line)}
.nb-word dt{font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--ink-strong);display:inline-block;border-bottom:2px dotted rgba(37,84,199,.5);padding-bottom:.1em}
.nb-word dd{font-size:.92rem;color:var(--muted);margin-top:.45em}

/* steps */
.nb-steps{display:grid;gap:18px;max-width:760px;list-style:none}
.nb-step{display:flex;gap:20px;background:var(--sheet);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:0 1px 0 var(--line)}
.nb-step .nb-stepnum{flex-basis:38px;height:38px;font-size:1.02rem}
.nb-step h3{font-size:1.22rem;margin-bottom:.3em}
.nb-step p{color:var(--muted);font-size:.95rem}

/* USP cards */
.nb-usps{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.nb-usp{background:var(--sheet);border:1px solid var(--line);border-top:3px solid var(--cobalt);border-radius:var(--radius);padding:24px;box-shadow:0 1px 0 var(--line)}
.nb-usp h3{font-size:1.18rem;margin-bottom:.4em}
.nb-usp p{font-size:.95rem}
.nb-disclaimer{font-size:.8rem;color:var(--muted);margin-top:.65em;padding-top:.65em;border-top:1px dashed var(--line)}
.nb-reg{margin-top:1.6em;font-size:.93rem;color:var(--muted);max-width:44em}

/* honesty box — the teacher's red-pen note */
.nb-honest{
  border:1px solid var(--line);border-inline-start:7px double var(--redpen);
  background:var(--sheet);border-radius:var(--radius);padding:28px;max-width:760px;
  box-shadow:0 1px 0 var(--line),0 10px 26px rgba(20,33,58,.05);
}
.nb-honest h2{color:var(--redpen)}
.nb-honest ul{margin-top:1em;margin-inline-start:1.2em}
.nb-honest li{margin-bottom:.5em}
.nb-honest strong{color:var(--ink-strong)}

/* FAQ */
.nb-faq{max-width:760px}
.nb-faq details{background:var(--sheet);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;padding:0;box-shadow:0 1px 0 var(--line)}
.nb-faq summary{font-weight:600;cursor:pointer;padding:16px 20px;color:var(--ink-strong)}
.nb-faq summary:hover{color:var(--cobalt)}
.nb-faq summary::marker{color:var(--cobalt)}
.nb-faq details[open] summary{color:var(--cobalt-dark);border-bottom:1px dashed var(--line)}
.nb-faq details p{margin:0;padding:12px 20px 16px;color:var(--muted);font-size:.95rem}

/* final CTA — a framed blackboard on the desk */
.nb-final{background:transparent;color:#fff;text-align:center}
.nb-final > .nb-wrap{background:var(--board);border-radius:16px;padding:48px 32px;box-shadow:0 14px 34px rgba(20,33,58,.18)}
.nb-final h2{color:#fff}
.nb-final p{color:#C4D0E6;max-width:38em;margin:0 auto 1.5em}
.nb-final .nb-btn-primary{background:#fff;color:var(--ink-strong)}
.nb-final .nb-btn-primary:hover{background:var(--hl-soft);color:var(--ink-strong)}
.nb-final a:not(.nb-btn){color:#AFC3E8}

/* footer */
.nb-foot{background:var(--board);color:#AFBEDA;font-size:.88rem;padding:44px 0 30px;border-top:4px solid var(--cobalt)}
.nb-foot .nb-wrap{display:grid;grid-template-columns:1.25fr repeat(4,1fr);gap:24px}
.nb-foot h4{color:#fff;font-family:var(--display);font-size:1rem;margin-bottom:.7em}
.nb-foot a{color:#AFBEDA;text-decoration:none;display:block;padding:.45em 0}
.nb-foot a:hover{color:#fff}
.nb-foot-legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);margin-top:20px;padding-top:20px;color:#93A5C4;font-size:.8rem}
.nb-foot-legal p{margin-bottom:.8em}

/* ---------- inner pages ---------- */
.nb-page-hero{padding:50px 0 6px}
.nb-page-hero h1{font-size:clamp(2rem,4vw,2.9rem);margin-bottom:.4em;text-wrap:balance}
.nb-page-hero h1::after{
  content:'';display:block;width:120px;height:9px;margin-top:.2em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 9'%3E%3Cpath d='M2 6 C 38 2, 75 8, 148 3' stroke='%23C7402D' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;background-size:120px 9px;
}
.nb-page-hero + section{padding-top:28px}
.nb-article{max-width:760px}
.nb-article h2{margin-top:1.6em}
.nb-article h3{margin-top:1.25em;font-size:1.22rem;margin-bottom:.35em}
.nb-article p{margin:.8em 0}
.nb-article ul,.nb-article ol{margin-block:.8em .9em;margin-inline-start:1.35em}
.nb-article li{margin-bottom:.45em}
.nb-answer{background:var(--sheet);border:1px solid var(--line);border-inline-start:4px solid var(--cobalt);border-radius:var(--radius);padding:18px 22px;margin:1.5em 0;box-shadow:0 1px 0 var(--line)}
.nb-answer::before{content:'In short';display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-strong);background:linear-gradient(101deg,transparent 1.5%,var(--hl) 1.5% 98.5%,transparent 98.5%);padding:.25em .8em;margin-bottom:.5em;transform:rotate(-.5deg)}
.nb-answer p{margin:.3em 0}
.nb-ctabox{background:var(--sheet);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;margin:2.2em 0 0;box-shadow:0 1px 0 var(--line);max-width:760px}
.nb-ctabox p{margin:.4em 0}
.nb-ctabox .nb-btn{margin-top:.8em}
.nb-wordgroup{margin-top:2.2em}
.nb-wordgroup h2{font-size:1.5rem}

/* forms & controls */
.nb-form{display:grid;gap:14px;max-width:560px}
.nb-form label,.nbc label{font-weight:600;font-size:.9rem;color:var(--ink-strong);display:block;margin-bottom:.3em}
.nb-input,.nb-select,.nb-textarea{width:100%;padding:.65em .8em;border:1.5px solid var(--line);border-radius:8px;font:inherit;color:var(--ink);background:#fff}
.nb-input:focus-visible,.nb-select:focus-visible,.nb-textarea:focus-visible{outline:3px solid var(--cobalt);outline-offset:1px;border-color:var(--cobalt)}
.nb-textarea{min-height:120px;resize:vertical}

/* practice calculator */
.nbc{background:var(--sheet);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:0 1px 0 var(--line),0 10px 26px rgba(20,33,58,.06);max-width:680px}
.nbc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.nbc-out{margin-top:18px;border-top:1px dashed var(--line);padding-top:14px}
.nbc-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:.5em 0;border-bottom:1px dotted var(--line);font-size:.98rem}
.nbc-row:last-child{border-bottom:none}
.nbc-val{font-weight:700;color:var(--cobalt-dark);font-variant-numeric:tabular-nums;text-align:end}
.nbc-val.nbc-hl{background:linear-gradient(101deg,transparent 2%,var(--hl) 2% 98%,transparent 98%);padding:.05em .45em;color:var(--ink-strong)}
.nbc-hint{font-size:.84rem;color:var(--muted);margin-top:.9em}

.nb-nav a[aria-current="page"]{border-bottom-color:var(--cobalt);color:var(--cobalt)}

@media(max-width:860px){
  .nbc-grid{grid-template-columns:1fr}
  main section:not(.nb-final) > .nb-wrap{padding-inline-start:34px}
  main section:not(.nb-final) > .nb-wrap::before{inset-inline-start:11px}
  .nb-hero .nb-wrap{grid-template-columns:1fr}
  .nb-cards,.nb-words,.nb-usps{grid-template-columns:repeat(2,1fr)}
  .nb-cards > .nb-card:last-child{grid-column:1/-1}
  .nb-head .nb-wrap{flex-wrap:wrap;gap:10px 16px}
  .nb-cta{margin-inline-start:auto}
  .nb-nav{order:3;flex-basis:100%;margin-inline-start:0;overflow-x:auto;gap:18px;white-space:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .nb-foot .nb-wrap{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .nb-cards,.nb-words,.nb-usps{grid-template-columns:1fr}
  section{padding:40px 0}
  .nb-hero{padding:44px 0 40px}
  .nb-hero .nb-wrap{gap:28px}
  .nb-foot a{padding:.6em 0}
}
a:focus-visible,.nb-btn:focus-visible,.nb-cta:focus-visible,summary:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px;border-radius:4px}
.nb-final a:focus-visible,.nb-foot a:focus-visible{outline-color:#fff}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ---------- footer: per-domain kept-pages row («Ещё на этом сайте») ---------- */
.nb-foot-more{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);margin-top:8px;padding-top:22px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));column-gap:32px;row-gap:2px;align-items:start}
.nb-foot-more h4{grid-column:1/-1;margin-bottom:.5em}
.nb-foot-more a{padding:.35em 0}