/* somalc public pages: teachers, guides, about (15 Oct 2026). Cream ground, the landing's marking kit. */
.pg{--ink:#16201C;--ink2:#4A665B;--cream:#F7F4EC;--paper:#FFFDF8;--pine:#1F4B3D;--pine-d:#173D31;--mint:#B9EBCF;--mint-l:#D6F2E1;--mint-u:#7FC3A0;--amber:#E2A62B;--hl:#F5D06A;--pen:#D9583C;--note:#FBEFD2;
 --px:clamp(20px,9.4vw,136px);background:var(--cream);color:var(--ink);font-family:Figtree,system-ui,sans-serif;overflow-x:clip}
.pg *{box-sizing:border-box}
.pg-hd .s-hd a[aria-current="page"]{font-weight:700;text-decoration:underline;text-decoration-color:#7FC3A0;text-decoration-thickness:3px;text-underline-offset:7px}
a.cd-lock{text-decoration:none;color:inherit}

/* ---------- type ---------- */
.pg-h1{margin:0 auto;font-size:clamp(42px,6.6vw,104px);font-weight:900;letter-spacing:-.05em;line-height:.95;max-width:14ch;text-wrap:balance}
.pg-h2{margin:0 0 16px;font-size:clamp(32px,4.2vw,58px);font-weight:900;letter-spacing:-.045em;line-height:1;max-width:16ch;text-wrap:balance}
.pg-p{margin:0;font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--ink2);max-width:44ch}
.pg-p+.pg-p{margin-top:12px}
.pg-sub{margin:22px auto 0;font-size:clamp(17px,1.4vw,21px);line-height:1.5;color:var(--ink2);max-width:46ch}
.hl{background:linear-gradient(var(--hl),var(--hl)) 0 86%/0% .42em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em;margin:0 -.06em}
.go .hl,.hl.go{animation:pgHl 1s .25s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes pgHl{to{background-size:100% .42em}}

/* ---------- red pen ---------- */
.pn{overflow:visible;pointer-events:none}
.pn path{fill:none;stroke:var(--pen);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.pn text{font:900 34px Figtree,sans-serif;fill:var(--pen);text-anchor:middle;opacity:0}
.pn-t path{stroke-width:7}.pn-c path,.pn-r path{stroke-width:4}.pn-u path{stroke-width:5}
.go .pn path{animation:pgPen .55s var(--pd,.6s) ease-in-out forwards}
.go .pn text{animation:pgIn .3s calc(var(--pd,.6s) + .35s) forwards}
@keyframes pgPen{to{stroke-dashoffset:0}}@keyframes pgIn{to{opacity:1}}

/* ---------- buttons ---------- */
.pb{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;min-width:200px;padding:0 28px;border-radius:999px;font:700 18px/1 Figtree,sans-serif;text-decoration:none;border:0;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.pb-p{background:var(--amber);color:var(--ink);box-shadow:0 2px 0 #B47E12}
.pb-s{background:transparent;color:var(--pine);box-shadow:inset 0 0 0 1.5px var(--pine)}
.pb-w{background:var(--paper);color:var(--pine)}
.pb:hover{transform:translateY(-1px)}.pb:active{transform:translateY(1px)}
.pb:focus-visible,.pg a:focus-visible,.pg button:focus-visible{outline:3px solid var(--pine);outline-offset:3px}
.pg-btns{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.pg-said{display:block;min-height:1.4em;margin-top:10px;font-size:14px;font-weight:600;color:var(--pine)}

/* ---------- layout ---------- */
.pg-top{position:relative;padding:clamp(56px,9vh,110px) var(--px) clamp(40px,6vh,72px);text-align:center}
.pg-sec{padding:clamp(72px,9vw,128px) var(--px)}
.pg-sec.alt{background:var(--paper)}
.pg-two{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:center;max-width:1400px;margin:0 auto}
.pg-two.rev>:first-child{order:2}
.pg-card{background:var(--paper);border-radius:24px;box-shadow:0 2px 0 rgba(22,32,28,.04),0 30px 60px -30px rgba(22,32,28,.32);color:var(--ink)}
.pg-band{background:var(--pine);color:var(--cream);text-align:center;padding:clamp(80px,10vw,140px) var(--px)}
.pg-band .pg-h2{margin:0 auto 18px;max-width:20ch}.pg-band .pg-p{color:#DCE8E2;margin:0 auto}
.pg-end{text-align:center}.pg-end .pg-h2{margin:0 auto 16px}.pg-end .pg-p{margin:0 auto}
@media (max-width:900px){.pg-two,.pg-two.rev{grid-template-columns:1fr}.pg-two.rev>:first-child{order:0}}
@media (max-width:760px){.pg-btns{flex-direction:column;align-items:stretch;max-width:380px;margin-left:auto;margin-right:auto}.pb{width:100%}}

/* =================== TEACHERS =================== */
.tg{position:relative;max-width:1240px;margin:clamp(40px,6vh,64px) auto 0;padding:clamp(18px,2vw,28px);text-align:left}
.tg-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:18px}
.tg-cls{font-weight:900;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.02em}
.tg-q{font-size:15px;color:var(--ink2);flex:1;min-width:240px}
.tg-in{font-size:15px;font-weight:700;color:var(--pine);background:var(--mint-l);border-radius:999px;padding:6px 12px}
.tg-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px}
.tg-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.tg-t{opacity:0;transform:translateY(10px) scale(.96);transition:opacity .4s ease,transform .5s cubic-bezier(.3,1.4,.5,1);transition-delay:calc(var(--i) * 45ms)}
.go .tg-t{opacity:1;transform:none}
.tg-b{width:100%;height:100%;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:6px 8px;align-items:center;text-align:left;background:var(--cream);border:0;border-radius:16px;padding:10px;font:inherit;color:inherit;cursor:pointer;transition:background .2s,box-shadow .2s}
.tg-b:hover{background:var(--mint-l)}
.tg-b[aria-expanded="true"]{box-shadow:0 0 0 2.5px var(--pine);background:#fff}
.tg-b .tk{grid-row:1/3}
.tg-n{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-m{font-size:13px;color:var(--ink2);display:flex;align-items:center;gap:6px}
.tg-m b{font-size:17px;font-weight:900;color:var(--ink);letter-spacing:-.02em}
.tg-d{display:flex;gap:3px}.tg-d i{width:7px;height:7px;border-radius:2px;background:var(--mint-u)}.tg-d i.n{background:var(--pen)}
.tg-t.out .tg-b{background:transparent;box-shadow:inset 0 0 0 1.5px #E2DDD0;cursor:default}
.tg-t.out .tg-m{font-style:normal}
.tg-side{background:var(--cream);border-radius:18px;padding:18px;align-self:start;display:grid;gap:12px}
.tg-sh{margin:0;font-weight:900;font-size:17px;letter-spacing:-.01em}
.tg-f{position:relative;margin:0;display:grid;gap:6px}
.tg-f span{font-size:14.5px;font-weight:600;line-height:1.35}
.tg-f small{font-size:13px;color:var(--ink2)}
.tg-bar{height:8px;border-radius:4px;background:#E7E2D5;overflow:hidden}.tg-bar i{display:block;height:100%;width:0;background:var(--pine);border-radius:4px;transition:width .9s cubic-bezier(.3,.7,.2,1) 1.4s}
.go .tg-bar i{width:var(--w)}
.tg-f .pn-r{position:absolute;left:-20px;top:-20px;width:calc(100% + 40px);height:calc(100% + 40px);--pd:2.2s}
.tg-tip{margin:0;font-size:13px;color:var(--ink2)}
/* the open answer */
.tg-pop{position:absolute;left:clamp(18px,2vw,28px);right:clamp(18px,2vw,28px);top:72px;z-index:5;background:#fff;border-radius:20px;box-shadow:0 40px 80px -30px rgba(22,32,28,.45),0 0 0 1px rgba(22,32,28,.06);padding:clamp(18px,2vw,28px);display:none;overflow:auto}
.tg-pop.on{display:block;animation:pgUp .35s cubic-bezier(.2,.7,.2,1)}
@keyframes pgUp{from{opacity:0;transform:translateY(12px)}}
.tg-ph{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.tg-ph b{font-size:20px;font-weight:900;letter-spacing:-.02em}
.tg-ph .tg-sc{margin-left:auto;font-size:15px;color:var(--ink2)}.tg-sc b{font-size:34px}
.tg-x{appearance:none;border:0;background:var(--cream);border-radius:999px;width:40px;height:40px;font:700 20px/1 Figtree;cursor:pointer;color:var(--ink)}
.tg-pq{margin:0 0 14px;font-weight:800;font-size:17px;line-height:1.3;max-width:50ch}
.tg-ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tg-ol li{display:grid;grid-template-columns:1.4em minmax(0,1fr) auto;gap:10px;align-items:start;padding:8px 10px;border-radius:12px;font-size:16px;line-height:1.45}
.tg-ol li.n{background:var(--note)}
.tg-ol .k{font-size:13px;color:var(--ink2);padding-top:2px}
.tg-ol em{font-style:normal;font-weight:800;font-size:13px;border-radius:999px;padding:4px 10px;white-space:nowrap;background:var(--mint);color:#0F2E25}
.tg-ol li.n em{background:transparent;color:var(--ink);white-space:normal;padding:0;font-weight:700;max-width:22ch}
.tg-pf{margin:14px 0 0;font-size:14px;color:var(--ink2)}
@media (max-width:1180px){.tg-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){.tg-body{grid-template-columns:1fr}.tg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.tg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tg-ol li{grid-template-columns:1.2em minmax(0,1fr)}.tg-ol em{grid-column:2;justify-self:start}.tg-pop{top:56px}}

/* plan by ticking */
.tp-card{padding:clamp(18px,2vw,26px);display:grid;gap:14px}
.tp-hd b{display:block;font-weight:900;font-size:20px;letter-spacing:-.02em}.tp-hd span{font-size:14px;color:var(--ink2)}
.tp-l{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tp-l label{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;background:var(--cream);border-radius:14px;padding:12px;cursor:pointer;transition:background .2s}
.tp-l input{position:absolute;opacity:0;pointer-events:none}
.tp-bx{width:26px;height:26px;border-radius:8px;box-shadow:inset 0 0 0 2.5px var(--ink);display:grid;place-items:center;background:#fff;transition:background .15s}
.tp-bx svg{width:16px;height:16px;opacity:0}
.tp-l input:checked+.tp-bx{background:var(--pine);box-shadow:none}.tp-l input:checked+.tp-bx svg{opacity:1}
.tp-l label:has(input:checked){background:var(--mint-l)}
.tp-l input:focus-visible+.tp-bx{outline:3px solid var(--pine);outline-offset:2px}
.tp-t{font-size:16px;font-weight:700;line-height:1.35}.tp-t small{display:block;margin-top:3px;font-size:13px;font-weight:600;color:var(--ink2)}
.tp-out{border-radius:16px;background:var(--cream);padding:16px;display:grid;gap:10px}
.tp-oh{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;color:var(--ink2)}
.tp-oh b{color:var(--ink)}
.tp-pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tp-pg{background:#fff;border-radius:10px;padding:12px;display:grid;gap:7px;animation:pgUp .3s ease}
.tp-pg b{font-size:13px;line-height:1.3}
.tp-pg i{display:block;height:6px;border-radius:3px;background:#E7E2D5}.tp-pg i.f{background:var(--mint)}.tp-pg i.a{background:#F3C9BC}
.tp-pg i:nth-child(3){width:85%}.tp-pg i:nth-child(5){width:70%}
.tp-empty{font-size:14px;color:var(--ink2);margin:0}
.tp-btn{justify-self:start;min-height:44px;min-width:0;font-size:15px;padding:0 18px}
.tp-btn[disabled]{opacity:.45;cursor:default;transform:none}

/* free band */
.pg-band .pn-u{display:block;width:min(420px,70%);height:22px;margin:-6px auto 18px;--pd:.3s}

/* school view */
.sv{padding:clamp(18px,2vw,26px)}
.sv-hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}.sv-hd b{font-weight:900;font-size:19px}.sv-hd span{font-size:14px;color:var(--ink2)}
.sv table{width:100%;border-collapse:collapse;font-size:15.5px}
.sv th{text-align:left;font-size:13px;font-weight:700;color:var(--ink2);padding:0 10px 8px}
.sv td{padding:13px 10px;border-top:1px solid #ECE7DA}
.sv td:last-child{text-align:right}
.sv .ok{font-weight:800;color:var(--pine)}.sv .wt{font-weight:800;color:#8A5A00}
.sv-no{margin:14px 0 0;display:flex;gap:10px;align-items:center;font-size:14px;color:var(--ink2)}
.sv-no svg{flex:none;width:22px;height:22px}

/* =================== GUIDES =================== */
.mt{position:relative;max-width:1100px;margin:clamp(40px,6vh,64px) auto 0;padding:clamp(20px,2.4vw,36px);text-align:left;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,3vw,48px)}
.mt-k{margin:0;font-size:15px;color:var(--ink2)}
.mt-t{margin:4px 0 18px;font-weight:900;font-size:clamp(22px,2vw,28px);letter-spacing:-.02em}
.mt-bar{position:relative;display:grid;grid-template-columns:60fr 40fr;gap:6px;height:clamp(120px,14vw,170px)}
.mt-bar>div{border-radius:16px;padding:16px;display:flex;flex-direction:column;justify-content:space-between}
.mt-cm{background:var(--pine);color:var(--cream)}.mt-oe{background:var(--mint);color:#0F2E25}
.mt-bar b{font-size:clamp(40px,4.6vw,64px);font-weight:900;letter-spacing:-.05em;line-height:.9}
.mt-bar span{font-size:14.5px;font-weight:700;line-height:1.25}
.mt-cm{transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.3,.7,.2,1) .2s}.mt-oe{transform-origin:left;transform:scaleX(0);transition:transform .7s cubic-bezier(.3,.7,.2,1) .7s}
.go .mt-cm,.go .mt-oe{transform:none}
.mt-bar .mt-ring{position:absolute;left:-1.5%;top:-6%;width:26%;height:66%;--pd:1.5s}.mt-ring path{stroke-width:3.2}
.mt-note{margin:16px 0 0;font-size:15px;line-height:1.5;color:var(--ink2);max-width:46ch}
.mt-tb{width:100%;border-collapse:collapse;font-size:16px}
.mt-tb caption{text-align:left;font-weight:800;font-size:15px;padding-bottom:10px}
.mt-tb td{padding:12px 4px;border-top:1px solid #ECE7DA}
.mt-tb td:last-child{text-align:right;font-weight:900;font-size:19px;letter-spacing:-.02em}
.mt-tb tr:first-child td{position:relative}
.mt-tb .pn-t{position:absolute;left:-34px;top:8px;width:26px;--pd:2.1s}
.mt-x{position:relative;margin:14px 0 0;padding:12px 14px;border-radius:12px;background:var(--note);font-size:15px;font-weight:700}
.mt-src{grid-column:1/-1;margin:0;font-size:13px;color:var(--ink2)}
.mt-src a{color:var(--pine)}
@media (max-width:900px){.mt{grid-template-columns:1fr}.mt-tb .pn-t{left:auto;right:64px}}
.gl{max-width:1100px;margin:0 auto;list-style:none;padding:0}
.gl li+li{border-top:1px solid #E2DDD0}
.gl a{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:8px 28px;align-items:center;padding:26px 6px;text-decoration:none;color:inherit;border-radius:12px;transition:background .2s}
.gl a:hover{background:var(--paper)}
.gl-s{justify-self:start;font-size:13px;font-weight:800;border-radius:999px;padding:5px 10px}
.gl-s.e{background:#F6D3C6;color:#6B2410}.gl-s.h{background:var(--mint);color:#0F2E25}.gl-s.b{background:#F6E2B3;color:#5C3D00}
.gl h3{margin:0 0 6px;font-size:clamp(20px,1.8vw,25px);font-weight:900;letter-spacing:-.02em}
.gl p{margin:0;font-size:16px;line-height:1.5;color:var(--ink2);max-width:62ch}
.gl-m{font-size:14px;color:var(--ink2);white-space:nowrap;display:flex;align-items:center;gap:10px}
.gl-m i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--pine);color:var(--cream);font-style:normal;transition:transform .2s}
.gl a:hover .gl-m i{transform:translateX(3px)}
@media (max-width:760px){.gl a{grid-template-columns:1fr auto}.gl-s{grid-column:1/-1}.gl-m span{display:none}}
.hm{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:start}
.hm .pn-t{width:46px;--pd:.2s}
/* a guide page */
.gd{max-width:760px;margin:0 auto;padding:clamp(40px,6vh,72px) 20px clamp(64px,8vw,110px)}
.gd-back{display:inline-flex;gap:8px;align-items:center;font-size:15px;font-weight:700;color:var(--pine);text-decoration:none;margin-bottom:28px}
.gd h1{margin:14px 0 18px;font-size:clamp(36px,5vw,62px);font-weight:900;letter-spacing:-.045em;line-height:1;text-wrap:balance}
.gd-lede{margin:0;font-size:clamp(19px,1.7vw,23px);line-height:1.5;font-weight:500}
.gd-meta{margin:16px 0 0;font-size:14px;color:var(--ink2)}
.gd-body{margin-top:36px;font-size:18px;line-height:1.65}
.gd-body h2{margin:44px 0 12px;font-size:clamp(24px,2.4vw,32px);font-weight:900;letter-spacing:-.03em;line-height:1.1}
.gd-body p{margin:0 0 14px}
.gd-body ul{margin:0 0 14px;padding-left:1.2em}.gd-body li{margin-bottom:8px}
.gd-body .gt{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:16px;background:var(--paper);border-radius:16px;overflow:hidden}
.gd-body .gt th{text-align:left;font-size:13px;color:var(--ink2);font-weight:700;padding:12px 14px 8px}
.gd-body .gt td{padding:11px 14px;border-top:1px solid #ECE7DA;vertical-align:top}
.gd-tab{overflow-x:auto}
.gd-im{margin:36px 0 0;border-radius:18px;background:var(--mint-l);padding:18px 20px;font-size:17px;line-height:1.5}
.gd-im b{display:block;margin-bottom:4px}
.gd-src{margin:28px 0 0;font-size:15px;color:var(--ink2)}.gd-src a{color:var(--pine)}
.gd-src ul{padding-left:1.1em}
.gd-next{margin-top:40px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.gd-next a{flex:1;min-width:220px;background:var(--paper);border-radius:16px;padding:16px 18px;text-decoration:none;color:inherit}
.gd-next small{display:block;font-size:13px;color:var(--ink2);margin-bottom:4px}.gd-next b{font-size:17px}

/* =================== ABOUT =================== */
.ab-cast{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:clamp(4px,1vw,16px);margin:clamp(36px,6vh,64px) calc(var(--px) * -1) 0;padding:0 8px;min-height:clamp(120px,15vw,210px)}
.ab-cast .tk{flex:none;filter:drop-shadow(0 18px 22px rgba(22,32,28,.18));transform-origin:50% 100%;cursor:pointer;opacity:0;transform:translateY(30px)}
.go .ab-cast .tk{animation:abIn .7s cubic-bezier(.3,1.5,.5,1) forwards;animation-delay:calc(var(--i) * 70ms + .3s)}
@keyframes abIn{to{opacity:1;transform:none}}
.ab-cast .tk.hop{animation:abHop .6s cubic-bezier(.3,.6,.4,1)!important;opacity:1}
@keyframes abHop{0%{transform:none}40%{transform:translateY(-22%) rotate(-4deg)}100%{transform:none}}
.ab-cast .tk svg ellipse{transition:transform .12s linear}
.ab-floor{height:18px;margin:0 calc(var(--px) * -1);background:linear-gradient(rgba(22,32,28,.06),transparent)}
.ab-q{margin:0;font-size:clamp(30px,3.6vw,52px);font-weight:900;letter-spacing:-.04em;line-height:1.05;max-width:18ch;text-wrap:balance}
.ab-q .hl{background-size:100% .42em}
.ab-by{display:flex;align-items:center;gap:12px;margin-top:20px;font-size:15px;color:var(--ink2)}.ab-by b{color:var(--ink)}
.ab-rows{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ab-rows li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:20px 0}
.ab-rows li+li{border-top:1px solid #E2DDD0}
.ab-rows b{display:block;font-size:19px;font-weight:800;letter-spacing:-.01em;margin-bottom:4px}
.ab-rows span{font-size:16px;line-height:1.5;color:var(--ink2)}
.ab-rows .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--mint-l);font-weight:900;color:var(--pine)}
.ab-rows .ic.no{background:#F6D3C6;color:#6B2410}
.ab-won{margin-top:28px}
.ab-won h3{margin:0 0 4px;font-size:15px;font-weight:800;color:var(--ink2)}
.ab3{max-width:1240px;margin:clamp(28px,4vw,48px) auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.ab3>div{background:var(--paper);border-radius:24px;padding:clamp(20px,2.4vw,32px);display:grid;gap:10px;align-content:start;box-shadow:0 30px 60px -36px rgba(22,32,28,.3)}
.ab3 .tk{margin-bottom:8px}
.ab3 b{font-size:clamp(21px,1.9vw,26px);font-weight:900;letter-spacing:-.025em;line-height:1.1}
.ab3 p{margin:0;font-size:16px;line-height:1.5;color:var(--ink2)}
@media (max-width:900px){.ab3{grid-template-columns:1fr}}
.ab-labs{background:#0A0D0C;color:#F4F4F0;padding:clamp(72px,9vw,120px) var(--px)}
.ab-labs .pg-two{align-items:start}
.ab-labs .pg-h2{color:#fff}.ab-labs .pg-p{color:#B9C2BC}
.ab-labs a.pb{background:#F4F4F0;color:#0A0D0C}
.ab-lm{display:block;width:min(100%,460px);height:auto;margin-top:8px}
.ab-lm svg{width:44px;height:44px}
.ab-data{max-width:1100px;margin:0 auto}
.ab-name{margin:40px 0 0;font-size:16px;color:var(--ink2)}
.ab-name b{color:var(--ink)}
@media (prefers-reduced-motion:reduce){
 .hl{background-size:100% .42em;animation:none!important}.pn path{stroke-dashoffset:0;animation:none!important}.pn text{opacity:1;animation:none!important}
 .tg-t,.ab-cast .tk{opacity:1;transform:none;transition:none;animation:none!important}.tg-bar i{width:var(--w);transition:none}.mt-cm,.mt-oe{transform:none;transition:none}
}
/* phone sheet (menu) */
.pg-sheet{position:fixed;inset:0;z-index:200;background:rgba(15,46,37,.5);display:none}
.pg-sheet.on{display:block}
.pg-sheet nav{position:absolute;top:0;left:0;right:0;background:#F7F4EC;border-radius:0 0 24px 24px;padding:20px 20px 28px;display:grid;gap:4px;font-family:Figtree,sans-serif;animation:pgDown .25s ease}
@keyframes pgDown{from{transform:translateY(-20px);opacity:0}}
.pg-sheet a{display:block;padding:14px 8px;font-size:22px;font-weight:800;letter-spacing:-.02em;color:#16201C;text-decoration:none;border-radius:12px}
.pg-sheet a[aria-current="page"]{background:#D6F2E1}
.pg-sheet .pb{margin-top:12px;font-size:18px}
.pg-sheet button{justify-self:end;appearance:none;border:0;background:#E9E4D6;width:44px;height:44px;border-radius:999px;font:700 22px/1 Figtree;cursor:pointer}
@media (max-width:760px){
 .ab-cast{gap:2px;margin-left:-20px;margin-right:-20px}
 .ab-cast .tk{--s:44px!important}.ab-cast .tk:nth-child(3n+2){--s:54px!important}
 .ab-cast .tk:nth-child(n+9){display:none}
 .mt-bar span{font-size:12.5px}.mt-bar>div{padding:12px}
}
@media (max-width:560px){.sv td,.sv th{padding:10px 5px;font-size:14px}.sv{padding:16px 12px}}

.pg-sheet a.pb{display:flex}
/* =================== SIGN IN =================== */
.si{min-height:calc(100dvh - 84px);display:grid;place-items:center;padding:clamp(40px,8vh,96px) 20px}
.si-wrap{position:relative;width:min(100%,440px)}
.si-card{position:relative;z-index:2;padding:clamp(26px,4vw,40px)}
.si-wrap>.tk{position:absolute;z-index:1;filter:drop-shadow(0 20px 26px rgba(22,32,28,.18));opacity:0;transition:opacity .5s ease,transform .7s cubic-bezier(.3,1.4,.5,1)}
.si-b1{left:-118px;top:40px;transform:translateX(30px) rotate(8deg)}
.si-b2{right:-58px;top:-52px;transform:translateY(30px) rotate(14deg)}
.si-b3{right:-82px;bottom:70px;transform:translateX(-30px) rotate(-10deg)}
.go .si-wrap>.tk{opacity:1}.go .si-b1{transform:rotate(8deg)}.go .si-b2{transform:rotate(14deg)}.go .si-b3{transform:rotate(-10deg)}
.si-h{margin:0;font-size:clamp(34px,4vw,46px);font-weight:900;letter-spacing:-.045em;line-height:1}
.si-sub{margin:10px 0 24px;font-size:17px;color:var(--ink2)}
.si-g{display:flex;align-items:center;justify-content:center;gap:12px;min-height:54px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px #C9D3CD;color:var(--ink);font-weight:700;font-size:17px;text-decoration:none;transition:box-shadow .15s}
.si-g:hover{box-shadow:inset 0 0 0 1.5px var(--pine)}
.si-g svg{width:22px;height:22px}
.si-or{display:flex;align-items:center;gap:12px;margin:22px 0 18px;font-size:14px;color:var(--ink2)}
.si-or::before,.si-or::after{content:"";flex:1;height:1px;background:#E2DDD0}
.si-f{display:grid;gap:8px}
.si-l{font-size:15px;font-weight:700}
.si-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px}
.si-fg{font-size:14px;font-weight:600;color:var(--pine)}
.si-i{width:100%;min-height:52px;border-radius:14px;border:0;box-shadow:inset 0 0 0 1.5px #C9D3CD;background:#fff;padding:0 16px;font:500 17px Figtree,sans-serif;color:var(--ink)}
.si-i:focus{outline:none;box-shadow:inset 0 0 0 2.5px var(--pine)}
.si-i[aria-invalid="true"]{box-shadow:inset 0 0 0 2.5px #B3261E}
.si-pw{position:relative}.si-pw .si-i{padding-right:80px}
.si-show{position:absolute;right:8px;top:50%;transform:translateY(-50%);appearance:none;border:0;background:var(--cream);border-radius:999px;padding:8px 12px;font:700 14px Figtree;color:var(--pine);cursor:pointer}
.si-err{margin:0;font-size:14px;font-weight:600;color:#B3261E}
.si-go{margin-top:16px;width:100%}
.si-st{margin:4px 0 0;min-height:1.3em;font-size:14px;color:var(--ink2);text-align:center}
.si-new{margin:22px 0 0;text-align:center;font-size:16px;color:var(--ink2)}.si-new a{color:var(--pine);font-weight:800}
.si-t{margin:6px 0 0;text-align:center;font-size:14px;color:var(--ink2)}
@media (max-width:640px){.si-b1{left:-60px;top:-30px;--s:90px!important}.si-b3{display:none}.si-b2{right:-24px;top:-40px;--s:70px!important}}
/* phones: the class grid as a compact 3-across roll */
@media (max-width:560px){
 .tg{padding:14px}.tg-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .tg-b{grid-template-columns:1fr;grid-template-rows:auto;justify-items:center;text-align:center;gap:3px;padding:10px 4px;border-radius:14px}
 .tg-b .tk{grid-row:auto}
 .tg-n{font-size:13px;max-width:100%}
 .tg-m{justify-content:center;font-size:12px}.tg-m b{font-size:16px}.tg-d{display:none}
 .tg-hd{gap:4px 10px}.tg-q{min-width:0;font-size:14px}
 .tg-pop{left:8px;right:8px;top:48px;padding:16px}
}

/* QA 16 Oct */
.tg-fl{position:relative;justify-self:start;font-size:14.5px;font-weight:700;line-height:1.35}
.tg-fl .pn-u{position:absolute;left:-3px;bottom:-8px;width:calc(100% + 6px);height:10px;--pd:2.2s}
.tg-f.top .tg-bar i{background:var(--pen)}
@media (max-width:560px){.sv th:nth-child(3),.sv td:nth-child(3){display:none}}
.tg-m{flex-wrap:wrap;row-gap:5px}.tg-d{flex-basis:100%}
/* planned-feature notice */
.pg-soon{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;margin:0 auto 26px;padding:10px 16px;border-radius:16px;background:#FBEFD2;color:#16201C;font-size:15px;line-height:1.4;max-width:min(100%,640px)}
.pg-soon b{background:#16201C;color:#FBEFD2;border-radius:999px;padding:4px 10px;font-size:13px;font-weight:800}
/* sign-up forms (mockup and live) */
.tf{max-width:520px;margin:28px auto 0;text-align:left;display:grid;gap:8px}
.tf-row{display:flex;gap:10px}.tf-row .si-i{flex:1}.tf-row .pb{min-width:0;flex:none}
@media (max-width:560px){.tf-row{flex-direction:column}}
.si-st.err,[data-status].err{color:#B3261E;font-weight:600}
/* skip link */
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:#16201C;color:#F7F4EC;padding:10px 16px;border-radius:999px;font:700 15px Figtree,sans-serif;text-decoration:none}
.skip:focus{top:12px}
/* FAQ */
.fq-w{max-width:880px;margin:0 auto}
.fq-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.fq-c{appearance:none;border:0;border-radius:999px;padding:10px 16px;background:#fff;box-shadow:inset 0 0 0 1.5px #C9D3CD;font:700 15px Figtree,sans-serif;color:var(--ink);cursor:pointer}
.fq-c[aria-pressed="true"]{background:var(--pine);color:var(--cream);box-shadow:none}
.fq-l{display:grid}
.fq{border-top:1px solid #E2DDD0}.fq:last-child{border-bottom:1px solid #E2DDD0}
.fq[hidden]{display:none}
.fq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 4px;cursor:pointer;font-size:clamp(18px,1.6vw,21px);font-weight:800;letter-spacing:-.01em}
.fq summary::-webkit-details-marker{display:none}
.fq summary i{flex:none;width:32px;height:32px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.5px #C9D3CD;position:relative;transition:transform .2s}
.fq summary i::before,.fq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--ink);border-radius:1px}
.fq summary i::after{transform:rotate(90deg);transition:transform .2s}
.fq[open] summary i::after{transform:rotate(0)}
.fq p{margin:0 0 22px;padding:0 4px;font-size:17px;line-height:1.6;color:var(--ink2);max-width:66ch}
.fq a,.fq-more a,.doc a{color:var(--pine);font-weight:700}
.fq-more{margin-top:28px;font-size:17px;color:var(--ink2)}
/* doc pages */
.doc h1{margin-top:0}
.doc .gd-body h2{font-size:clamp(22px,2.2vw,28px)}
/* error pages */
.er{min-height:calc(100dvh - 84px);display:flex;flex-direction:column;align-items:center;justify-content:center}
.er-crew{display:flex;align-items:flex-end;gap:10px;margin-bottom:22px}
.er-crew .tk{filter:drop-shadow(0 14px 18px rgba(22,32,28,.18))}
.er-1{rotate:-8deg}.er-3{rotate:10deg}
.go .er-crew .tk{animation:erLook 2.8s ease-in-out .4s infinite}
.go .er-crew .er-2{animation-delay:.6s}.go .er-crew .er-3{animation-delay:.8s}
@keyframes erLook{0%,100%{transform:none}30%{transform:translateY(-8px) rotate(-6deg)}60%{transform:translateY(0) rotate(5deg)}}
.er-code{margin:0 0 10px;font-weight:800;font-size:15px;color:var(--pen);letter-spacing:.02em}
@media (prefers-reduced-motion:reduce){.er-crew .tk{animation:none!important}}

/* live forms */
.tf{max-width:520px;margin:28px auto 0;text-align:left;display:grid;gap:8px}
.tf-row{display:flex;gap:10px}.tf-row .si-i{flex:1}.tf-row .pb{min-width:0;flex:none}
@media (max-width:560px){.tf-row{flex-direction:column}}
.si-st.err,[data-status].err{color:#B3261E;font-weight:600}
.si-who{border:0;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.si-who legend{margin-bottom:8px}
.si-who label{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px #C9D3CD;font-size:15px;font-weight:600;cursor:pointer}
.si-who label:has(input:checked){background:#D6F2E1;box-shadow:inset 0 0 0 2px #1F4B3D}
.si-who input{accent-color:#1F4B3D;margin:0}
.si-sub b{color:#16201C}