/* SIMS product site (schoolims.online). Theme: the school register — ruled paper, blue-black ink, a red margin line, a highlighter. */
@font-face{font-family:'Bricolage Grotesque';src:url(../fonts/bricolage-grotesque-latin-wght-normal.woff2) format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'Newsreader';src:url(../fonts/newsreader-latin-wght-normal.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url(../fonts/newsreader-latin-wght-italic.woff2) format('woff2');font-weight:200 800;font-style:italic;font-display:swap}
:root{--paper:#f6f8fb;--sheet:#fff;--rule:#d3e1f1;--margin:#d8453e;--ink:#13233d;--ink2:#46566e;--hi:#ffe45c;--tick:#1b7f3b;--line:#d6e0ec;--ui:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;--read:'Newsreader',Georgia,serif;--w:1080px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:1.1rem/1.65 var(--read)}
a{color:inherit}.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:8px;background:var(--ink);color:#fff;padding:6px 10px;z-index:9}
:focus-visible{outline:3px solid #2b6fd6;outline-offset:2px}
.pn{background:var(--sheet);border-bottom:1px solid var(--line)}
.pn-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap;min-height:62px;padding-top:6px;padding-bottom:6px}
.pn-brand{font:800 1.5rem/1 var(--ui);letter-spacing:.04em;text-decoration:none;display:flex;align-items:center;gap:9px}
.pn-brand i{width:12px;height:26px;background:var(--margin);border-radius:2px;display:block}
.pn nav{display:flex;flex-wrap:wrap;gap:4px 20px;margin-left:auto;font:500 .98rem var(--ui);align-items:center}
.pn nav a{text-decoration:none;padding:6px 2px;border-bottom:2px solid transparent}
.pn nav a:hover,.pn nav a[aria-current]{border-color:var(--ink)}
.pn nav a.go{background:var(--ink);color:#fff;padding:7px 14px;border-radius:7px;border:0}
.pn nav a.go:hover{background:#243b5e}
.ruled{background:repeating-linear-gradient(to bottom,transparent 0,transparent 33px,var(--rule) 33px,var(--rule) 34px);position:relative}
.ruled::before{content:"";position:absolute;top:0;bottom:0;left:max(24px,calc((100% - var(--w))/2 - 18px));width:2px;background:var(--margin);opacity:.55}
.hero{padding:64px 0 72px}
.hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
h1,h2,h3{font-family:var(--ui);line-height:1.12;margin:0}
h1{font-size:clamp(2.1rem,4.6vw,3.5rem);font-weight:800;letter-spacing:-.02em}
mark{background:linear-gradient(transparent 55%,var(--hi) 55%);color:inherit;padding:0 2px}
.lead{font-size:1.28rem;color:var(--ink2);max-width:36em;margin:18px 0 26px}
.btn{display:inline-block;font:600 1rem var(--ui);padding:12px 22px;border-radius:8px;text-decoration:none;border:2px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer}
.btn:hover{background:#243b5e}.btn.ghost{background:transparent;color:var(--ink)}.btn.ghost:hover{background:#fff}
.acts{display:flex;gap:12px;flex-wrap:wrap}
.reg{background:var(--sheet);border:1px solid var(--line);border-radius:6px;padding:20px 22px 14px;box-shadow:0 1px 0 var(--line),0 14px 30px -18px #13233d55;font-family:var(--ui)}
.reg h3{font-size:1rem;font-weight:700;display:flex;justify-content:space-between;gap:8px;margin-bottom:10px}.reg h3 small{font-weight:500;color:var(--ink2)}
.reg ol{list-style:none;margin:0;padding:0}.reg li{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--rule);font-size:.95rem}
.reg .p{color:var(--tick);font-weight:700}.reg .a{color:var(--margin);font-weight:700}
.reg p{margin:12px 0 4px;font-size:.88rem;color:var(--ink2)}
section.sec{padding:64px 0}section.sec h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;margin-bottom:18px}
.alt{background:var(--sheet);border-block:1px solid var(--line)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px 48px}.prose{max-width:38em}.prose p{margin:0 0 1em}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin:0;padding:0;list-style:none}
.feat li{padding:14px 0;border-top:1px solid var(--line)}.feat strong{font:700 1.02rem var(--ui);display:block}.feat span{color:var(--ink2);font-size:1rem}
.steps{list-style:none;counter-reset:s;margin:0;padding:0;max-width:44em}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;padding:12px 0;border-top:1px solid var(--line)}
.steps li::before{content:counter(s);font:800 1.4rem var(--ui);color:var(--margin)}
.steps b{font-family:var(--ui)}
table.price{border-collapse:collapse;width:100%;max-width:560px;font-family:var(--ui);font-size:1rem;background:var(--sheet)}
table.price th,table.price td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
table.price th{font-weight:600;color:var(--ink2);font-size:.9rem;background:#eef3f9}table.price td.n,table.price th.n{text-align:right}
.note{color:var(--ink2);font-size:1rem;max-width:40em}
.page{padding:48px 0 72px}.page h1{font-size:clamp(1.9rem,3.6vw,2.6rem);margin-bottom:12px}
form.card{background:var(--sheet);border:1px solid var(--line);border-radius:8px;padding:24px;max-width:640px;font-family:var(--ui)}
label{display:block;font-weight:600;font-size:.92rem;margin:14px 0 4px}label small{font-weight:400;color:var(--ink2)}
input,select,textarea{width:100%;font:inherit;font-size:1rem;border:1px solid #b9c7d8;border-radius:7px;padding:10px 12px;background:#fff;color:var(--ink)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.err{background:#fdecec;color:#9b1c1c;border-radius:7px;padding:10px 12px;margin-bottom:6px;font-family:var(--ui)}
.hp{position:absolute;left:-5000px;height:0;overflow:hidden}
.fine{color:var(--ink2);font-size:.9rem;font-family:var(--ui)}
.ref{font:800 1.6rem var(--ui);letter-spacing:.06em;background:#fff6c4;border-radius:6px;padding:8px 16px;display:inline-block;margin:6px 0}
.est{font:500 .95rem var(--ui);margin-top:6px;color:var(--ink2);min-height:1.4em}.est b{color:var(--ink)}
.pf{background:#0f1c33;color:#c9d6ea;padding:40px 0 28px;font:.95rem/1.7 var(--ui)}
.pf-in{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px}.pf a{display:block;text-decoration:none;color:#fff}.pf a:hover{text-decoration:underline}
.pf strong{color:#fff;font-size:1.05rem}.pf small{display:block;margin-top:24px;color:#8da0bd}
@media(max-width:800px){.hero-in,.two,.feat,.pf-in,.row2{grid-template-columns:1fr}.hero{padding:40px 0 48px}.ruled::before{left:10px}.pn nav{margin-left:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* View Demo: the tutorial series */
.vt{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:28px 24px;margin-top:28px}
.vt-item{border-top:3px solid var(--ink);padding-top:12px}
.vt-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:10px}
.vt-no{font:800 1.5rem var(--ui);color:var(--red,#d8453e);min-width:2.6em;line-height:1.1}
.vt-head h2,.vt-head h3{font-size:1.15rem;margin-bottom:3px}.vt-head p{margin:0;color:var(--ink2);font-size:.92rem}
.vt-item video{width:100%;aspect-ratio:16/9;background:#13233d;border-radius:6px;display:block}
.vt-soon{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;border:2px dashed var(--ink2);border-radius:6px;color:var(--ink2);font-family:var(--ui)}

.acct{border:2px solid var(--ink);border-radius:8px;padding:12px 16px 6px;margin:18px 0 0}.acct legend{font:700 1rem var(--ui);padding:0 8px;width:auto;float:none;margin:0}

.types{border:0;padding:0;margin:18px 0 4px}.types legend{font:600 .95rem var(--ui);padding:0;margin-bottom:6px;float:none;width:auto}.types legend small{font-weight:400;color:var(--mute,#5b6470)}
.types .chk{display:inline-flex;align-items:center;gap:8px;margin:0 18px 8px 0;font:500 .95rem var(--ui);cursor:pointer}.types .chk input{width:18px;height:18px;margin:0}
.hint{display:block;margin-top:4px;font-size:.82rem;color:var(--mute,#5b6470);line-height:1.35}