/* =========================================================================
   ToucanPass marketing site
   Loaded ONLY by index, features, about, pricing and contact, each of which
   sets <body class="mk">. The app pages (dashboard, lesson, topic-reading,
   topic-quiz) never load this file, so nothing here can reach them.
   assets/styles.css is untouched and still provides the shared header,
   mobile menu behaviour and focus outlines underneath this.
   ========================================================================= */

body.mk{
  --ink:#0a2540;
  --body:#425466;
  --mute:#6b7c93;
  --soft:#f6f9fc;
  --line:#e3e8ee;
  --line-2:#cfd8e3;

  /* beak colours. The bright value only ever fills or tints; anything that
     must be read as text or a thin stroke uses the darker -ink partner. */
  --red:#ff3b6b;   --red-ink:#c0182a;
  --yel:#ffcf3d;   --yel-ink:#7a5a00;
  --grn:#20d68b;   --grn-ink:#00763a;
  --cyn:#27b8f5;   --cyn-ink:#0b6e8f;
  --pur:#7a73ff;   --pur-ink:#4b42d6;

  --shadow-1:0 1px 2px rgba(10,37,64,.06),0 4px 12px -2px rgba(10,37,64,.06);
  --shadow-3:0 50px 100px -20px rgba(50,50,93,.22),0 30px 60px -30px rgba(0,0,0,.28);

  margin:0;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;
  line-height:1.6;
  color:var(--body);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body.mk *,body.mk *::before,body.mk *::after{box-sizing:border-box}

/* styles.css caps header, main and footer at 1200px with 24px padding.
   This site manages its own widths, so lift that cap here. */
body.mk main,body.mk footer{max-width:none;margin:0;padding:0}

/* ---------- skip link (WCAG 2.4.1) ---------- */
.mk-skip{position:absolute;left:12px;top:-64px;z-index:200;background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:10px;font-weight:600;font-size:15px;text-decoration:none;transition:top .15s}
.mk-skip:focus{top:12px}

/* ---------- header ---------- */
body.mk .site-header{max-width:none;margin:0;padding:0;
  background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid rgba(10,37,64,.07)}
body.mk .site-header nav{max-width:1180px;margin:0 auto;padding:0 24px;height:68px}
body.mk .brand{font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
body.mk .brand .logo{height:30px;margin-right:9px}
body.mk .nav-links{gap:6px}
body.mk .nav-links a{font-size:15px;font-weight:500;color:var(--ink);padding:8px 12px;border-radius:999px;
  text-decoration:none;transition:background .15s,color .15s}
body.mk .nav-links a:hover{background:rgba(10,37,64,.05)}
body.mk .nav-links a[aria-current="page"]{background:rgba(10,37,64,.06);font-weight:600}
body.mk .nav-links a.btn{background:var(--ink);color:#fff;font-weight:600;font-size:14px;padding:9px 16px;
  margin-left:6px;box-shadow:none}
body.mk .nav-links a.btn:hover{background:#13355a;transform:none}
@media (max-width:860px){
  body.mk .nav-links{right:16px;top:64px;min-width:220px;padding:10px;gap:2px}
  body.mk .nav-links a{padding:11px 14px;border-radius:10px}
  body.mk .nav-links a.btn{margin:6px 0 0;text-align:center;justify-content:center}
}

/* ---------- layout ---------- */
.mk-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.mk-sec{padding:120px 0}
.mk-sec.tight{padding:88px 0}
.mk-sec.soft{background:var(--soft)}
.mk-sec-head{max-width:700px;margin-bottom:60px}


/* ---------- type ---------- */
.mk-eyebrow{display:inline-block;margin:0 0 16px;font-size:15px;font-weight:600;letter-spacing:-.005em;
  background:linear-gradient(90deg,var(--red-ink),var(--pur-ink) 60%,var(--cyn-ink));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.mk-display{margin:0 0 24px;font-size:clamp(40px,5.8vw,70px);line-height:1.03;letter-spacing:-.04em;
  font-weight:700;color:var(--ink);text-wrap:balance}
.mk-h2{margin:0 0 18px;font-size:clamp(32px,3.8vw,46px);line-height:1.08;letter-spacing:-.035em;
  font-weight:700;color:var(--ink);text-wrap:balance}
.mk-h3{margin:0 0 8px;font-size:21px;line-height:1.25;letter-spacing:-.02em;font-weight:600;color:var(--ink)}
.mk-lead{margin:0 0 36px;max-width:34em;font-size:clamp(18px,1.55vw,21px);line-height:1.55;color:var(--body);text-wrap:pretty}
.mk-p{margin:0 0 16px;text-wrap:pretty}
.mk-small{font-size:15px;color:var(--mute)}

/* ---------- buttons ---------- */
.mk-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.mk-btn{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 24px;border-radius:999px;
  font-size:16px;font-weight:600;letter-spacing:-.01em;text-decoration:none;cursor:pointer;border:0;
  transition:background .15s,box-shadow .15s,transform .15s}
.mk-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;
  stroke-linejoin:round;transition:transform .15s}
.mk-btn:hover svg{transform:translateX(3px)}
.mk-btn-dark{background:var(--ink);color:#fff;box-shadow:0 1px 2px rgba(10,37,64,.2),0 10px 24px -8px rgba(10,37,64,.55)}
.mk-btn-dark:hover{background:#13355a;transform:translateY(-1px)}
.mk-btn-plain{color:var(--ink);background:transparent;padding:0 18px}
.mk-btn-plain:hover{background:rgba(10,37,64,.05)}
.mk-btn-light{background:#fff;color:var(--ink)}
.mk-btn-light:hover{background:#eef3f9;transform:translateY(-1px)}

/* ---------- the signature: a moving, skewed gradient ----------------------
   One per page, at the top. A base ramp in the beak colours guarantees full
   coverage, and five blurred blobs drift over it on unrelated periods so the
   pattern never visibly repeats. Each blob moves by transform only, which
   composites on the GPU. The layer is skewed so its bottom edge rises to the
   right, and on the home page it is masked to fade out towards the copy so the
   headline always sits on near-white. Motion stops for reduced-motion users. */
.mk-hero{position:relative;overflow:hidden;isolation:isolate;padding:80px 0 140px}
.mk-hero-bg{position:absolute;z-index:-1;left:0;right:0;top:-40%;bottom:0;overflow:hidden;
  transform:skewY(-7deg);transform-origin:0 100%;
  background:linear-gradient(115deg,#ffcf3d 0%,#ff8a5b 20%,#ff3b6b 38%,#8b7bff 58%,#27b8f5 78%,#20d68b 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 22%,rgba(0,0,0,.32) 46%,#000 74%);
          mask-image:linear-gradient(90deg,transparent 22%,rgba(0,0,0,.32) 46%,#000 74%)}
.mk-blob{position:absolute;border-radius:50%;filter:blur(64px);opacity:.9;will-change:transform}
.mk-blob.b1{width:44vw;height:44vw;left:28vw;top:8%;background:#ff3b6b;animation:mkD1 26s ease-in-out infinite alternate}
.mk-blob.b2{width:40vw;height:40vw;left:54vw;top:30%;background:#27b8f5;animation:mkD2 31s ease-in-out infinite alternate}
.mk-blob.b3{width:34vw;height:34vw;left:72vw;top:-2%;background:#ffcf3d;animation:mkD3 29s ease-in-out infinite alternate}
.mk-blob.b4{width:38vw;height:38vw;left:42vw;top:46%;background:#8b7bff;animation:mkD4 35s ease-in-out infinite alternate}
.mk-blob.b5{width:30vw;height:30vw;left:82vw;top:44%;background:#20d68b;animation:mkD5 33s ease-in-out infinite alternate}
@keyframes mkD1{to{transform:translate3d(-9vw,7vw,0) scale(1.16)}}
@keyframes mkD2{to{transform:translate3d(8vw,-6vw,0) scale(.9)}}
@keyframes mkD3{to{transform:translate3d(-11vw,9vw,0) scale(1.2)}}
@keyframes mkD4{to{transform:translate3d(10vw,-8vw,0) scale(1.1)}}
@keyframes mkD5{to{transform:translate3d(-7vw,-5vw,0) scale(.88)}}
@media (prefers-reduced-motion:reduce){.mk-blob{animation:none}}

/* inner pages: centred copy, so the whole band is lifted to a light tint
   instead of being masked to one side */
.mk-hero.compact{padding:84px 0 132px;text-align:center}
.mk-hero.compact .mk-hero-bg{-webkit-mask-image:none;mask-image:none;opacity:.34}
.mk-hero.compact .mk-display{font-size:clamp(38px,5vw,60px);max-width:16ch;margin-left:auto;margin-right:auto}
.mk-hero.compact .mk-lead{margin:0 auto}
.mk-hero.compact .mk-actions{justify-content:center;margin-top:32px}

.mk-pill{display:inline-flex;align-items:center;gap:9px;margin:0 0 26px;padding:6px 14px 6px 8px;
  font-size:14px;font-weight:500;color:var(--ink);background:rgba(255,255,255,.75);
  border:1px solid rgba(10,37,64,.09);border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mk-pill b{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:12px;font-weight:600}

.mk-hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:64px;align-items:center}

@media (max-width:900px){
  .mk-hero{padding:56px 0 112px}
  .mk-hero-grid{grid-template-columns:1fr;gap:56px}
  .mk-hero-bg{-webkit-mask-image:none;mask-image:none;opacity:.38}
}

/* ---------- stats ---------- */
.mk-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.mk-stat{padding-left:18px;border-left:2px solid var(--c,var(--ink))}
.mk-stat b{display:block;font-size:clamp(30px,3.2vw,40px);line-height:1.1;font-weight:700;letter-spacing:-.035em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.mk-stat span{display:block;margin-top:6px;font-size:15px;color:var(--body)}
@media (max-width:900px){.mk-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}}

/* ---------- bento ---------- */
.mk-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.mk-tile{position:relative;display:flex;flex-direction:column;overflow:hidden;background:#fff;
  border:1px solid var(--line);border-radius:22px;padding:30px 30px 0;box-shadow:var(--shadow-1)}
.mk-tile.w4{grid-column:span 4}
.mk-tile.w3{grid-column:span 3}
.mk-tile.w2{grid-column:span 2}
.mk-tile .mk-art{flex:1;display:flex;align-items:flex-end;margin-top:28px}
.mk-tile .mk-art > *{width:100%}
@media (max-width:980px){.mk-tile.w4,.mk-tile.w3,.mk-tile.w2{grid-column:span 6}}

.mk-tag{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;font-size:14px;font-weight:600;color:var(--k)}
.mk-tag i{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--t)}
.mk-tag svg{width:16px;height:16px;fill:none;stroke:var(--k);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.q-read {--k:var(--grn-ink);--t:rgba(32,214,139,.16);--c:var(--grn)}
.q-video{--k:var(--cyn-ink);--t:rgba(39,184,245,.17);--c:var(--cyn)}
.q-cards{--k:var(--yel-ink);--t:rgba(255,207,61,.3); --c:var(--yel)}
.q-quiz {--k:var(--red-ink);--t:rgba(255,59,107,.14);--c:var(--red)}
.q-dia  {--k:var(--ink);    --t:rgba(10,37,64,.08); --c:var(--ink)}
.q-expl {--k:var(--pur-ink);--t:rgba(122,115,255,.16);--c:var(--pur)}

/* ---------- split rows ---------- */
.mk-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:88px;align-items:center}
.mk-split + .mk-split{margin-top:120px}
.mk-split.rev .mk-split-art{order:-1}
.mk-stage{position:relative;overflow:hidden;border-radius:26px;padding:44px;
  background:linear-gradient(160deg,#f7fafc 0%,#eef3f9 100%);border:1px solid var(--line)}
.mk-stage::before{content:"";position:absolute;width:70%;height:70%;right:-20%;top:-30%;border-radius:50%;
  background:var(--c,var(--pur));opacity:.16;filter:blur(60px)}
.mk-stage > *{position:relative}
@media (max-width:900px){
  .mk-split{grid-template-columns:1fr;gap:40px}
  .mk-split.rev .mk-split-art{order:0}
  .mk-split + .mk-split{margin-top:88px}
  .mk-stage{padding:24px}
}

.mk-ticks{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.mk-ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--ink)}
.mk-ticks svg{flex:0 0 22px;width:22px;height:22px;margin-top:2px;padding:4px;border-radius:50%;
  background:var(--t,rgba(32,214,139,.16));fill:none;stroke:var(--k,var(--grn-ink));stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}

/* =========================================================================
   MOCK INTERFACE
   The illustrations are real HTML built from the same ideas as the course,
   so they stay sharp at any size and cost no image weight. They are marked
   aria-hidden: each one sits beside copy that already says what it shows.
   ========================================================================= */
.mk-mock{font-size:14px;line-height:1.45;color:var(--body);-webkit-user-select:none;user-select:none;text-align:left}

/* app window */
.mk-window{background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-3);border:1px solid rgba(10,37,64,.06)}
.mk-winbar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fbfcfe;border-bottom:1px solid var(--line);
  font-size:13px;font-weight:600;color:var(--ink)}
.mk-winbar img{width:22px;height:auto}
.mk-winbar .meta{margin-left:auto;font-weight:500;color:var(--mute)}
.mk-meter{height:4px;background:#eef2f6}
/* beak colours at fixed positions along the whole track, as on the real quiz page:
   each bar sets background-size to 100 / its width, so the colours never slide */
.mk-meter i{display:block;height:100%;background:linear-gradient(90deg,#e5133d 0 34%,#12d4f2 34% 56%,#2fd866 56% 78%,#ffe94d 78% 100%) 0 0/100% 100% no-repeat}

/* quiz question */
.mk-q{padding:22px 22px 24px}
.mk-q-n{margin-bottom:6px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.mk-q-t{margin:0 0 16px;font-size:16.5px;font-weight:600;line-height:1.4;color:var(--ink)}
.mk-ch{display:flex;gap:11px;align-items:flex-start;margin-bottom:8px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:#fff}
.mk-ch > b{flex:0 0 22px;display:grid;place-items:center;height:22px;border-radius:6px;background:#eef2f6;
  color:var(--ink);font-size:12px;font-weight:700}
.mk-ch span{color:var(--ink);font-weight:500}
.mk-ch small{display:block;margin-top:5px;font-size:12.5px;line-height:1.45;color:var(--body);font-weight:400}
.mk-ch.right{border-color:#a3e0bf;background:#f1fbf5}
.mk-ch.right > b{background:var(--grn-ink);color:#fff}
.mk-ch.wrong{border-color:#f5b8c4;background:#fff5f7}
.mk-ch.wrong > b{background:var(--red-ink);color:#fff}

/* floating flashcard */
.mk-hero-art{position:relative}
.mk-float{position:absolute;left:-40px;bottom:-44px;width:236px;padding:16px 18px;background:#fff;border-radius:14px;
  border:1px solid rgba(10,37,64,.06);box-shadow:0 30px 60px -20px rgba(50,50,93,.32),0 18px 36px -18px rgba(0,0,0,.26)}
.mk-float .lbl{display:flex;justify-content:space-between;margin-bottom:8px;font-size:11.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--yel-ink)}
.mk-float strong{display:block;font-size:15px;line-height:1.35;color:var(--ink)}
.mk-float .hint{margin-top:10px;font-size:12px;color:var(--mute)}
@media (max-width:900px){.mk-float{left:auto;right:12px;bottom:-36px}}
@media (max-width:480px){.mk-float{display:none}}

/* reading page */
.mk-page{padding:22px 22px 26px;background:#fff;border:1px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0}
.mk-page-h{margin:0 0 12px;font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.mk-lines{display:grid;gap:8px;margin-bottom:16px}
.mk-lines i{display:block;height:8px;border-radius:4px;background:#edf1f5}
.mk-callout{margin-bottom:16px;padding:12px 14px;border-radius:10px;border-left:3px solid var(--grn-ink);
  background:rgba(32,214,139,.1);font-size:13px;color:var(--ink)}
.mk-callout b{color:var(--grn-ink)}
.mk-chain{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mk-chain span{padding:7px 10px;border-radius:8px;border:1px solid var(--line);background:#fbfcfe;
  font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--ink)}
.mk-chain span.hi{border-color:transparent;background:var(--ink);color:#fff}
.mk-chain em{font-style:normal;color:var(--line-2);font-weight:700}

/* video */
.mk-video{position:relative;aspect-ratio:16/10;border-radius:14px 14px 0 0;overflow:hidden;
  background:radial-gradient(120% 90% at 85% 0%,rgba(39,184,245,.45),transparent 55%),
             radial-gradient(90% 80% at 0% 100%,rgba(255,59,107,.35),transparent 60%),
             linear-gradient(140deg,#0a2540,#16365e)}
.mk-video .ttl{position:absolute;left:18px;top:16px;font-size:13px;font-weight:600;color:rgba(255,255,255,.92)}
.mk-video .play{position:absolute;left:50%;top:46%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.95);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.mk-video .play svg{width:20px;height:20px;margin-left:3px;fill:var(--ink)}
.mk-video .bar{position:absolute;left:18px;right:18px;bottom:30px;height:4px;border-radius:2px;background:rgba(255,255,255,.25)}
.mk-video .bar i{display:block;height:100%;width:37%;border-radius:2px;background:#fff}
.mk-video .time{position:absolute;left:18px;bottom:10px;font-size:11.5px;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums}

/* flashcard stack */
.mk-stack{position:relative;height:200px}
.mk-card{position:absolute;left:0;right:0;bottom:0;border-radius:14px 14px 0 0;border:1px solid var(--line);border-bottom:0;background:#fff}
.mk-card.back2{transform:translateY(-22px) scale(.9);background:#f6f8fb}
.mk-card.back1{transform:translateY(-11px) scale(.95);background:#fbfcfd}
.mk-card.front{padding:22px 22px 26px;height:170px;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#fffbea,#fff 60%);box-shadow:0 -6px 24px -14px rgba(10,37,64,.3)}
.mk-card .lbl{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--yel-ink)}
.mk-card strong{margin-top:10px;font-size:18px;line-height:1.3;color:var(--ink);letter-spacing:-.01em}
.mk-card .hint{margin-top:auto;font-size:12px;color:var(--mute)}
.mk-stack .back1,.mk-stack .back2{height:170px}

/* score band */
.mk-score{padding:24px 24px 28px;background:#fff;border:1px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0}
.mk-score .lbl{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.mk-score .num{display:flex;align-items:baseline;gap:8px;margin:6px 0 4px}
.mk-score .num b{font-size:44px;line-height:1;font-weight:700;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.mk-score .num span{font-size:17px;color:var(--mute)}
.mk-score .band{display:inline-block;margin-bottom:18px;padding:4px 10px;border-radius:999px;
  background:rgba(39,184,245,.14);color:var(--cyn-ink);font-size:12.5px;font-weight:600}
.mk-scale{position:relative;display:flex;gap:3px;height:10px}
.mk-scale i{border-radius:3px}
.mk-scale .s0{flex:21;background:#f3d4da}
.mk-scale .s1{flex:10;background:#fbe7b0}
.mk-scale .s2{flex:6;background:#bfe6f8}
.mk-scale .s3{flex:4;background:#b6ecd2}
.mk-scale .pin{position:absolute;top:-6px;left:85%;width:3px;height:22px;margin-left:-1px;border-radius:2px;background:var(--ink)}
.mk-scale-l{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}

/* decision diagram */
.mk-flow{display:flex;flex-direction:column;align-items:center;padding:28px 24px 30px;background:#fff;border-radius:16px;
  border:1px solid var(--line);box-shadow:var(--shadow-1)}
.mk-node{padding:12px 16px;border-radius:10px;border:1px solid var(--line-2);background:#fbfcfe;color:var(--ink);
  font-size:13px;font-weight:600;text-align:center;line-height:1.35;max-width:100%}
.mk-node.q{background:var(--ink);border-color:var(--ink);color:#fff}
.mk-node.ok{border-color:#a3e0bf;background:#f1fbf5}
.mk-vline{width:2px;height:18px;background:var(--line-2)}
.mk-fork{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px;width:100%;padding-top:20px}
.mk-fork::before{content:"";position:absolute;top:0;left:25%;right:25%;height:20px;
  border:2px solid var(--line-2);border-bottom:0;border-radius:12px 12px 0 0}
.mk-branch{display:flex;flex-direction:column;align-items:center;gap:0}
.mk-yn{margin-bottom:8px;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.05em}
.mk-yn.y{background:rgba(32,214,139,.16);color:var(--grn-ink)}
.mk-yn.n{background:rgba(255,59,107,.13);color:var(--red-ink)}

/* source checks */
.mk-sources{display:grid;gap:10px}
.mk-src{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-1)}
.mk-src .sec{flex:0 0 40px;height:40px;display:grid;place-items:center;border-radius:10px;
  background:rgba(10,37,64,.06);font-size:19px;font-weight:700;color:var(--ink)}
.mk-src strong{display:block;font-size:14.5px;color:var(--ink);line-height:1.3}
.mk-src small{display:block;margin-top:2px;font-size:12.5px;color:var(--mute)}
.mk-src .ok{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  background:rgba(32,214,139,.15);color:var(--grn-ink);font-size:12px;font-weight:600;white-space:nowrap}
.mk-src .ok svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mk-src-foot{margin-top:14px;font-size:12.5px;color:var(--mute);text-align:center}
@media (max-width:480px){.mk-src .ok{display:none}}

/* ---------- exam outline ---------- */
.mk-mods{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.mk-mods li{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(120px,280px) 56px;gap:20px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--line)}
.mk-mods .n{font-size:14px;font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums}
.mk-mods .t{font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.mk-mods .bar{height:8px;border-radius:4px;background:#edf1f5;overflow:hidden}
.mk-mods .bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--cyn),var(--pur))}
.mk-mods .pct{font-size:17px;font-weight:700;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .mk-mods li{grid-template-columns:32px minmax(0,1fr) 48px;row-gap:10px}
  .mk-mods .bar{grid-column:2 / 4;grid-row:2}
  .mk-mods .t{font-size:16px}
}

/* ---------- principles (no boxes) ---------- */
.mk-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 40px}
.mk-point .mk-tag{margin-bottom:16px}
.mk-point p{margin:0;font-size:16px}
@media (max-width:900px){.mk-points{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.mk-points{grid-template-columns:1fr;gap:36px}}

/* ---------- FAQ ---------- */
.mk-faq{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.mk-faq details{border-bottom:1px solid var(--line)}
.mk-faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;cursor:pointer;
  list-style:none;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.mk-faq summary::-webkit-details-marker{display:none}
.mk-faq summary::after{content:"";flex:0 0 14px;width:14px;height:14px;
  background:linear-gradient(var(--mute),var(--mute)) center/14px 2px no-repeat,
             linear-gradient(var(--mute),var(--mute)) center/2px 14px no-repeat;
  transition:transform .2s}
.mk-faq details[open] summary::after{transform:rotate(45deg)}
.mk-faq summary:focus-visible{outline:3px solid var(--pur);outline-offset:4px;border-radius:6px}
.mk-faq details p{margin:-8px 0 26px;max-width:64ch;font-size:16.5px}

/* ---------- closing band ---------- */
.mk-cta{position:relative;overflow:hidden;isolation:isolate;border-radius:30px;padding:88px 48px;text-align:center;
  background:var(--ink);color:#fff}
.mk-cta .mk-blob{opacity:.55;filter:blur(70px)}
.mk-cta .b1{left:-10%;top:-40%;width:46%;height:120%}
.mk-cta .b2{left:auto;right:-12%;top:-30%;width:44%;height:120%}
.mk-cta .b3{left:auto;right:20%;top:70%;width:30%;height:80%}
.mk-cta::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 75% at 50% 50%,rgba(10,37,64,.92),rgba(10,37,64,.55) 70%,rgba(10,37,64,.25))}
.mk-cta .mk-blob{z-index:-2}
.mk-cta h2{margin:0 0 16px;font-size:clamp(32px,4vw,50px);line-height:1.06;letter-spacing:-.035em;font-weight:700;color:#fff;text-wrap:balance}
.mk-cta p{margin:0 auto 34px;max-width:34em;font-size:19px;color:rgba(255,255,255,.82)}
@media (max-width:640px){.mk-cta{padding:64px 24px;border-radius:22px}}

/* ---------- pricing ---------- */
.mk-plan{max-width:620px;margin:0 auto;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow-3)}
.mk-plan-top{padding:40px 40px 34px;text-align:center;border-bottom:1px solid var(--line)}
.mk-plan-top .lbl{font-size:14px;font-weight:600;color:var(--grn-ink)}
.mk-price{margin:10px 0 6px;font-size:72px;line-height:1;font-weight:700;letter-spacing:-.05em;color:var(--ink)}
.mk-plan-body{padding:34px 40px 40px}
.mk-plan-body .mk-ticks{margin:0 0 32px}
.mk-plan-body .mk-btn{width:100%;justify-content:center}
.mk-plan-note{margin:16px 0 0;text-align:center;font-size:14px;color:var(--mute)}
@media (max-width:640px){.mk-plan-top,.mk-plan-body{padding-left:24px;padding-right:24px}.mk-price{font-size:56px}}

/* ---------- contact ---------- */
.mk-contact{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px;align-items:start}
.mk-form-card{padding:34px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-3)}
.mk-field{display:grid;gap:7px;margin-bottom:18px}
.mk-field label{font-size:14px;font-weight:600;color:var(--ink)}
.mk-field input,.mk-field textarea{width:100%;padding:13px 15px;font:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1px solid var(--line-2);border-radius:12px;transition:border-color .15s,box-shadow .15s}
.mk-field input:focus,.mk-field textarea:focus{outline:none;border-color:var(--pur);box-shadow:0 0 0 4px rgba(122,115,255,.2)}
.mk-field textarea{min-height:170px;resize:vertical}
.mk-form-card .mk-btn{width:100%;justify-content:center;margin-top:4px}
.mk-aside h2{margin:0 0 10px;font-size:20px;letter-spacing:-.02em;color:var(--ink)}
.mk-aside p{margin:0 0 30px;font-size:16px}
@media (max-width:900px){.mk-contact{grid-template-columns:1fr;gap:44px}.mk-form-card{padding:24px}}

/* ---------- about ---------- */
.mk-story{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:80px;align-items:start}
.mk-quote{margin:0 0 30px;font-size:clamp(24px,2.4vw,30px);line-height:1.3;letter-spacing:-.025em;font-weight:600;color:var(--ink);text-wrap:balance}
.mk-bird{position:relative;overflow:hidden;padding:44px 34px 36px;text-align:center;border-radius:26px;
  background:linear-gradient(160deg,#fbfcfe,#eef3f9);border:1px solid var(--line)}
.mk-bird::before{content:"";position:absolute;left:50%;top:22px;width:230px;height:230px;margin-left:-115px;border-radius:50%;
  background:conic-gradient(from 200deg,var(--red),var(--yel),var(--grn),var(--cyn),var(--red));opacity:.28;filter:blur(30px)}
.mk-bird img{position:relative;width:170px;height:auto;margin:0 auto 18px;display:block}
.mk-bird h2{position:relative;margin:0 0 8px;font-size:20px;letter-spacing:-.02em;color:var(--ink)}
.mk-bird p{position:relative;margin:0;font-size:15.5px}
.mk-swatches{position:relative;display:flex;justify-content:center;gap:8px;margin-top:22px}
.mk-swatches i{width:30px;height:8px;border-radius:4px}
@media (max-width:900px){.mk-story{grid-template-columns:1fr;gap:48px}}

/* ---------- footer ---------- */
.mk-footer{border-top:1px solid var(--line);background:#fff}
.mk-footer .mk-wrap{padding-top:64px;padding-bottom:40px}
.mk-foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px}
.mk-foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:18px;font-weight:700;
  letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.mk-foot-brand img{height:30px;width:auto}
.mk-foot-grid p{margin:0;max-width:30em;font-size:15px;color:var(--body)}
.mk-foot-grid h2{margin:4px 0 14px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.mk-foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mk-foot-grid a{font-size:15px;color:var(--ink);text-decoration:none}
.mk-foot-grid a:hover{color:var(--pur-ink)}
.mk-foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:56px;padding-top:24px;
  border-top:1px solid var(--line);font-size:13.5px;color:var(--mute)}
@media (max-width:900px){.mk-foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.mk-foot-grid > div:first-child{grid-column:1 / -1}}
@media (max-width:520px){.mk-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- small screens ---------- */
@media (max-width:640px){
  .mk-wrap{padding:0 20px}
  .mk-sec{padding:84px 0}
  .mk-sec.tight{padding:64px 0}
  .mk-sec-head{margin-bottom:40px}
  .mk-tile{padding:24px 22px 0;border-radius:18px}
}

/* ---------- mocks shown inside a staged panel ----------
   In a bento tile the mocks bleed off the bottom edge, so they are only
   rounded on top. Inside a stage they sit whole, so round every corner. */
.mk-stage .mk-page,.mk-stage .mk-score{border-bottom:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-1)}
.mk-stage .mk-video{border-radius:14px;box-shadow:var(--shadow-3)}
.mk-stage .mk-stack{height:214px}
.mk-stage .mk-card{border-bottom:1px solid var(--line);border-radius:14px}
.mk-stage .mk-card.front{box-shadow:var(--shadow-3)}
.mk-stage .mk-window{box-shadow:0 30px 60px -24px rgba(50,50,93,.28),0 18px 36px -18px rgba(0,0,0,.2)}

/* bigger icon marks where they stand alone, with no label beside them */
.mk-point .mk-tag,.mk-aside .mk-tag{margin-bottom:16px}
.mk-point .mk-tag i,.mk-aside .mk-tag i{width:42px;height:42px;border-radius:12px}
.mk-point .mk-tag svg,.mk-aside .mk-tag svg{width:21px;height:21px}

/* styles.css gives text inputs margin:6px 0 for the auth forms; the grid
   here already spaces fields, so take it back out */
.mk-field input,.mk-field textarea{margin:0}

/* Legal pages: Terms and Privacy */
.mk-legal{max-width:760px;margin:0 auto}
.mk-legal-sum{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:26px 30px;margin:0 0 56px}
.mk-legal-sum h2{margin-top:0 !important;font-size:17px !important}
.mk-legal-sum ul{margin-bottom:0}
.mk-legal h2{font-size:22px;line-height:1.3;letter-spacing:-.01em;color:var(--ink);font-weight:600;margin:52px 0 14px;scroll-margin-top:90px}
.mk-legal h3{font-size:17px;color:var(--ink);font-weight:600;margin:28px 0 8px}
.mk-legal p,.mk-legal li{color:var(--body);line-height:1.7}
.mk-legal p{margin:0 0 16px}
.mk-legal ul{padding-left:22px;margin:0 0 18px}
.mk-legal li{margin:8px 0}
.mk-legal strong{color:var(--ink);font-weight:600}
.mk-legal a{color:var(--pur-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.mk-updated{display:inline-block;font-size:14px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;margin-top:22px}
.mk-legal-table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px}
.mk-legal-table th,.mk-legal-table td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line);color:var(--body);line-height:1.55}
.mk-legal-table th{color:var(--ink);font-weight:600;background:var(--soft)}
@media (max-width:640px){
  .mk-legal-sum{padding:20px}
  .mk-legal-table,.mk-legal-table tbody,.mk-legal-table tr,.mk-legal-table td{display:block;width:100%}
  .mk-legal-table thead{display:none}
  .mk-legal-table tr{border-bottom:1px solid var(--line);padding:8px 0}
  .mk-legal-table td{border:0;padding:4px 0}
  .mk-legal-table td:first-child{color:var(--ink);font-weight:600}
}

/* decision diagram: title line and four-way fork (PETE on the home page) */
.mk-flow-t{align-self:stretch;margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);text-align:center}
.mk-fork.four{grid-template-columns:repeat(4,1fr);gap:10px}
.mk-fork.four::before{left:12.5%;right:12.5%}
.mk-fork.four .mk-node{padding:10px 8px;font-size:12px;width:100%;min-height:54px;display:flex;align-items:center;justify-content:center}
.mk-act{margin-bottom:8px;padding:4px 8px;border-radius:10px;font-size:10.5px;font-weight:700;letter-spacing:.05em;background:rgba(39,184,245,.14);color:var(--cyn-ink);line-height:1.3;text-align:center;min-height:3.5em;width:100%;display:flex;align-items:center;justify-content:center}
@media (max-width:520px){
  .mk-fork.four{grid-template-columns:1fr 1fr;row-gap:16px}
  .mk-fork.four::before{display:none}
  .mk-fork.four{padding-top:4px}
}

/* Bento tiles, 2026-10-11: every preview sits fully inside its card with even
   padding, instead of bleeding off the bottom edge. The video grows to fill its
   card so a short tile next to a tall one has no empty band. */
.mk-tile{padding:30px}
.mk-tile .mk-art{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;margin-top:28px}
.mk-tile .mk-page,.mk-tile .mk-score{border-bottom:1px solid var(--line);border-radius:14px}
.mk-tile .mk-card{border-bottom:1px solid var(--line);border-radius:14px}
.mk-tile .mk-video{flex:1;aspect-ratio:auto;min-height:190px;border-radius:14px}
@media (max-width:640px){.mk-tile{padding:24px 22px}}
.mk-callout.caution{border-left-color:var(--red-ink);background:rgba(255,59,107,.08)}
.mk-callout.caution b{color:var(--red-ink)}
/* section heads: was "center", which collided with the .center flex rule in styles.css */
.mk-sec-head.mk-center{margin-left:auto;margin-right:auto;text-align:center}
.mk-actions.mk-center{justify-content:center}

/* Inner-page hero edge, 2026-10-11. The skewed band rose 12.3% of the window
   width on the right (142px at 1156px, 236px at 1920px), so on wide screens it
   climbed into the subtitle. The inner pages now cut a FIXED 96px slope with
   clip-path instead, and leave 150px under the text, so the edge clears the
   copy at every width: at most 96px of rise against 150px of room. */
.mk-hero.compact{padding-bottom:150px}
.mk-hero.compact .mk-hero-bg{transform:none;clip-path:polygon(0 0,100% 0,100% calc(100% - 96px),0 100%)}

/* Pricing offer card, 2026-10-11: a navy price panel beside a grouped list of
   what the course includes. Replaces the single narrow tick list. */
.mk-offer{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);max-width:1040px;margin:0 auto;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-3)}
.mk-offer-side{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;padding:44px 40px;color:#fff;
  background:linear-gradient(160deg,#0a2540 0%,#14345a 100%)}
.mk-offer-side .mk-blob{opacity:.5;filter:blur(56px)}
.mk-offer-side .mk-blob.b1{width:300px;height:300px;left:-90px;top:-120px}
.mk-offer-side .mk-blob.b2{width:260px;height:260px;left:auto;right:-110px;top:auto;bottom:-120px}
.mk-offer-side > :not(.mk-blob){position:relative;z-index:1}
.mk-offer-badge{align-self:flex-start;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  font-size:13px;font-weight:600;letter-spacing:.01em}
.mk-offer-price{display:flex;align-items:baseline;gap:10px;margin:28px 0 8px}
.mk-offer-price b{font-size:76px;line-height:1;font-weight:700;letter-spacing:-.05em}
.mk-offer-price span{font-size:16px;color:rgba(255,255,255,.72)}
.mk-offer-side p{margin:0 0 36px;color:rgba(255,255,255,.82);line-height:1.6}
.mk-offer-side .mk-btn{margin-top:auto;justify-content:center;width:100%}
.mk-offer-fine{margin:14px 0 0 !important;font-size:14px;text-align:center;color:rgba(255,255,255,.66) !important}
.mk-offer-fine a{color:#fff;font-weight:600}
.mk-offer-main{padding:44px 44px 40px}
.mk-offer-main h2{margin:0 0 22px;font-size:20px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.mk-offer-main h3{margin:34px 0 16px;padding-top:28px;border-top:1px solid var(--line);font-size:13px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.mk-incl{display:grid;grid-template-columns:1fr 1fr;gap:22px 26px}
.mk-incl-item{display:flex;gap:14px;align-items:flex-start}
.mk-incl-item .mk-tag{margin:0}
.mk-incl-item .mk-tag i{width:38px;height:38px;border-radius:11px}
.mk-incl-item .mk-tag svg{width:19px;height:19px}
.mk-incl-item strong{display:block;font-size:15.5px;font-weight:600;color:var(--ink)}
.mk-incl-item p{margin:3px 0 0;font-size:14.5px;line-height:1.5;color:var(--body)}
.mk-offer-main .mk-ticks{margin:0;grid-template-columns:1fr 1fr;gap:12px 26px;font-size:15px}
@media (max-width:900px){
  .mk-offer{grid-template-columns:1fr}
  .mk-offer-side,.mk-offer-main{padding:34px 28px}
  .mk-offer-side .mk-btn{margin-top:0}
}
@media (max-width:600px){.mk-incl,.mk-offer-main .mk-ticks{grid-template-columns:1fr}.mk-offer-price b{font-size:64px}}

/* Label over the home page stats: the numbers are totals for the finished course */
.mk-stats-note{margin:0 0 22px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}

/* =========================================================================
   BEAK THEME, 2026-10-13
   The toucan's beak, close up: hard bands of red, cyan, green and yellow in
   the logo's order (tip to face, red widest), outlined in ink the way the
   logo is outlined in black. Replaces the soft pastel blobs.
   Readability rule: the bands only ever sit behind pictures or in empty
   space. Every word stays on white or on navy.
   Undo: restore backups/2026-10-13-before-beak/ (site.css and the pages).
   ========================================================================= */
body.mk{--bk-red:#e5133d;--bk-cyn:#12d4f2;--bk-grn:#2fd866;--bk-yel:#ffe94d}

.mk-beak,.mk-ribbon,.mk-beak-corner{display:flex;pointer-events:none}
.mk-beak i,.mk-ribbon i,.mk-beak-corner i{display:block;height:100%;flex:1 1 0}
.mk-beak i:nth-child(1),.mk-ribbon i:nth-child(1),.mk-beak-corner i:nth-child(1){background:var(--bk-red)}
.mk-beak i:nth-child(2),.mk-ribbon i:nth-child(2),.mk-beak-corner i:nth-child(2){background:var(--bk-cyn)}
.mk-beak i:nth-child(3),.mk-ribbon i:nth-child(3),.mk-beak-corner i:nth-child(3){background:var(--bk-grn)}
.mk-beak i:nth-child(4),.mk-ribbon i:nth-child(4),.mk-beak-corner i:nth-child(4){background:var(--bk-yel)}
.mk-ribbon i:nth-child(1),.mk-beak-corner i:nth-child(1){flex:1.8 1 0}

/* ---- home hero: the beak sweeps in behind the quiz card ---- */
.mk-hero:not(.compact){background:#fff;clip-path:polygon(0 0,100% 0,100% calc(100% - 120px),0 100%)}
.mk-hero-art > .mk-beak{position:absolute;z-index:-1;top:-260px;bottom:-320px;left:10%;right:-60vw;
  transform:skewX(-14deg);transform-origin:50% 100%;border-left:12px solid var(--ink)}
.mk-hero-art > .mk-beak i:nth-child(1){flex:0 0 clamp(150px,15vw,260px)}
.mk-hero-art > .mk-beak i:nth-child(2),
.mk-hero-art > .mk-beak i:nth-child(3){flex:0 0 clamp(90px,9vw,150px)}
.mk-hero-art > .mk-beak i:nth-child(4){flex:1 1 0}
/* a slow sheen across the beak, the one moving thing on the page */
.mk-hero-art > .mk-beak::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 0 42%,rgba(255,255,255,.26) 50%,transparent 58% 100%);
  background-size:260% 100%;animation:mkSheen 9s ease-in-out infinite}
@keyframes mkSheen{0%{background-position:130% 0}55%,100%{background-position:-30% 0}}
@media (prefers-reduced-motion:reduce){.mk-hero-art > .mk-beak::after{animation:none;display:none}}
@media (max-width:900px){
  .mk-hero:not(.compact){clip-path:polygon(0 0,100% 0,100% calc(100% - 56px),0 100%)}
  .mk-hero-art > .mk-beak{top:-36px;bottom:-220px;left:-24px;right:-24px;transform:skewX(-10deg);border-left-width:8px}
  .mk-hero-art > .mk-beak i:nth-child(1){flex:1.7 1 0}
  .mk-hero-art > .mk-beak i:nth-child(2),
  .mk-hero-art > .mk-beak i:nth-child(3),
  .mk-hero-art > .mk-beak i:nth-child(4){flex:1 1 0}
}

/* ---- inner pages: white top, ending in an outlined beak ribbon ----
   --s is how far the ribbon rises across the page, --t its thickness.
   The padding keeps the text above the ribbon at every width. */
.mk-hero.compact{background:#fff;padding-bottom:220px}
.mk-ribbon{--s:96px;--t:80px;position:absolute;z-index:-1;left:0;right:0;bottom:0;height:calc(var(--s) + var(--t));
  clip-path:polygon(0 calc(100% - var(--t)),100% 0,100% calc(100% - var(--s)),0 100%)}
.mk-ribbon::before,.mk-ribbon::after{content:"";position:absolute;inset:0;z-index:1;background:var(--ink)}
.mk-ribbon::before{clip-path:polygon(0 calc(100% - var(--t)),100% 0,100% 8px,0 calc(100% - var(--t) + 8px))}
.mk-ribbon::after{clip-path:polygon(0 calc(100% - 8px),100% calc(100% - var(--s) - 8px),100% calc(100% - var(--s)),0 100%)}
@media (max-width:640px){
  .mk-hero.compact{padding-bottom:170px}
  .mk-ribbon{--s:56px;--t:52px}
  .mk-ribbon::before{clip-path:polygon(0 calc(100% - var(--t)),100% 0,100% 6px,0 calc(100% - var(--t) + 6px))}
  .mk-ribbon::after{clip-path:polygon(0 calc(100% - 6px),100% calc(100% - var(--s) - 6px),100% calc(100% - var(--s)),0 100%)}
}

/* ---- navy panels: the beak against the toucan's dark body ---- */
.mk-cta::after{display:none}
.mk-cta h2{max-width:min(16em,64%);margin-left:auto;margin-right:auto}
.mk-cta p{max-width:min(34em,64%)}
.mk-beak-corner{position:absolute;z-index:-1}
.mk-cta .mk-beak-corner{top:0;right:0;bottom:0;width:24%;clip-path:polygon(45% 0,100% 0,100% 100%,78% 100%)}
.mk-offer-side .mk-beak-corner{position:absolute;z-index:0;top:0;right:0;width:44%;height:88px;clip-path:polygon(28% 0,100% 0,100% 100%,62% 100%)}
@media (max-width:640px){
  .mk-cta h2,.mk-cta p{max-width:none}
  .mk-cta .mk-beak-corner{top:auto;height:52px;width:48%;clip-path:polygon(30% 0,100% 0,100% 100%,0 100%)}
}

/* ---- section labels: solid ink text led by a small outlined beak ---- */
.mk-eyebrow{display:inline-flex;align-items:center;gap:11px;background:none;-webkit-background-clip:border-box;
  background-clip:border-box;color:var(--ink)}
.mk-eyebrow::before{content:"";flex:none;width:28px;height:11px;transform:skewX(-14deg);
  background:linear-gradient(90deg,var(--bk-red) 0 36%,var(--bk-cyn) 36% 57%,var(--bk-grn) 57% 78%,var(--bk-yel) 78%);
  box-shadow:0 0 0 2px var(--ink)}

/* ---- illustration stages: a crisp beak segment instead of a blurred glow ---- */
.mk-stage::before{left:auto;right:0;top:0;width:30%;height:62%;border-radius:0;filter:none;opacity:1;
  background:var(--c,var(--bk-red));clip-path:polygon(40% 0,100% 0,100% 100%,0 100%)}

/* ---- beak theme, round 2 (2026-10-13) ---- */

/* Sign-up band: the old corner was a diagonal cut that sliced away the red
   band and most of the cyan. It is now a slanted beak segment that keeps all
   four bands visible from top to bottom. The top touches the right edge and
   the bottom leans left, like the beak entering the card. */
.mk-cta .mk-beak-corner{top:0;bottom:0;right:0;left:auto;width:clamp(150px,15vw,170px);
  clip-path:none;transform:skewX(-12deg);transform-origin:100% 0}
.mk-cta .mk-beak-corner i:nth-child(1){flex:1.6 1 0}
.mk-cta h2{max-width:min(16em,60%)}
.mk-cta p{max-width:min(34em,56%)}
@media (max-width:1180px){
  .mk-cta h2,.mk-cta p{max-width:none}
  .mk-cta .mk-beak-corner{top:auto;height:52px;width:150px}
}

/* Pricing panel: the corner is gone. It sat right under the ribbon and the
   two read as one cluttered shape. */
.mk-offer-side .mk-beak-corner{display:none}

/* Beak-shaped cards. The logo's beak has a long sweeping curve on top, a
   sharp tip at the bottom-left and a squared end at the face. Cards and
   panels take that silhouette: a wide elliptical top-left corner, a nearly
   sharp bottom-left tip, ordinary corners on the right. Each radius was
   checked against the card's padding so the curve never clips the first
   thing inside it. */
.mk-tile{border-radius:110px 22px 22px 8px / 66px 22px 22px 8px}
.mk-stage{border-radius:140px 26px 26px 8px / 90px 26px 26px 8px}
.mk-cta{border-radius:220px 30px 30px 10px / 140px 30px 30px 10px}
.mk-offer{border-radius:140px 28px 28px 10px / 90px 28px 28px 10px}
.mk-form-card{border-radius:120px 22px 22px 8px / 76px 22px 22px 8px;overflow:hidden}
.mk-bird{border-radius:120px 26px 26px 8px / 76px 26px 26px 8px}
@media (max-width:900px){
  .mk-stage{border-radius:70px 22px 22px 8px / 48px 22px 22px 8px}
  .mk-offer{border-radius:90px 24px 24px 8px / 60px 24px 24px 8px}
  .mk-form-card{border-radius:80px 20px 20px 8px / 50px 20px 20px 8px}
}
@media (max-width:640px){
  .mk-tile{border-radius:80px 18px 18px 8px / 50px 18px 18px 8px}
  .mk-cta{border-radius:120px 22px 22px 8px / 80px 22px 22px 8px}
}


/* =========================================================================
   BEAK THEME, round 3 (2026-10-13): the real beak shape
   The skewed bands read as parallelograms. Every beak on the site is now the
   outline traced from img/Toucan.png: arched top, red tip curving down to a
   point, squared base at the face, bands in the logo's order. The shape is
   one path (BEAK_D), used by the page sprite (#m-beak) and by the two data
   URIs below. Rendered to PNG and compared with the logo before it was used,
   because the site cannot be opened from here.
   The heroes do NOT use it: the user preferred the round-2 heroes (diagonal
   bands behind the home quiz card, outlined ribbon on inner pages) and they
   were put back the same day. The traced beak stays in the sign-up band, on
   the section labels and in the illustration panels.
   ========================================================================= */

/* home hero: room under the quiz card so the flashcard sits below choice D
   instead of covering it */
.mk-hero:not(.compact){padding-bottom:190px}
.mk-float{bottom:-90px}
@media (max-width:900px){
  .mk-hero:not(.compact){padding-bottom:170px}
  .mk-float{left:auto;right:12px;bottom:-96px}
}

/* sign-up band: a beak entering from the right, base cut by the card edge */
.mk-cta-beak{position:absolute;z-index:-1;right:-64px;bottom:-28px;width:250px;height:auto;aspect-ratio:530/490}
@media (max-width:1180px){.mk-cta-beak{right:-44px;bottom:-24px;width:150px}}
@media (max-width:640px){.mk-cta-beak{display:none}}

/* section labels: a small beak instead of a parallelogram */
.mk-eyebrow::before{width:26px;height:24px;transform:none;box-shadow:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='16 72 530 490'%3E%3CclipPath id='c'%3E%3Cpath d='M525,100 C330,84 118,150 56,330 C36,392 30,470 38,546 C82,488 152,432 262,410 C342,396 442,404 525,410 Z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='236' height='620' fill='%23e5133d'/%3E%3Crect x='236' width='93' height='620' fill='%2312d4f2'/%3E%3Crect x='329' width='87' height='620' fill='%232fd866'/%3E%3Crect x='416' width='81' height='620' fill='%23ffe94d'/%3E%3Crect x='497' width='200' height='620' fill='%230a2540'/%3E%3C/g%3E%3Cpath d='M525,100 C330,84 118,150 56,330 C36,392 30,470 38,546 C82,488 152,432 262,410 C342,396 442,404 525,410 Z' fill='none' stroke='%230a2540' stroke-width='34' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* illustration panels: a beak silhouette in the panel's own colour */
.mk-stage::before{left:auto;right:-6%;top:-10%;width:40%;height:auto;aspect-ratio:530/490;clip-path:none;
  border-radius:0;filter:none;opacity:1;background:var(--c,var(--bk-red));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='16 72 530 490'%3E%3Cpath d='M525,100 C330,84 118,150 56,330 C36,392 30,470 38,546 C82,488 152,432 262,410 C342,396 442,404 525,410 Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='16 72 530 490'%3E%3Cpath d='M525,100 C330,84 118,150 56,330 C36,392 30,470 38,546 C82,488 152,432 262,410 C342,396 442,404 525,410 Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat}

/* Sample question cards: like the real quiz page, a verdict and one panel of
   explanations sit BELOW the choices instead of inside them. */
.mk-verdict{margin:14px 0 8px;font-size:13.5px;font-weight:700;color:var(--red-ink)}
.mk-expl{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#f8fafc}
.mk-expl-h{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.mk-ex{display:flex;gap:9px;align-items:flex-start;padding:7px 0 0}
.mk-ex > b{flex:0 0 18px;display:grid;place-items:center;height:18px;border-radius:5px;background:#eef2f6;color:var(--ink);font-size:10.5px;font-weight:700}
.mk-ex.right > b{background:var(--grn-ink);color:#fff}
.mk-ex.wrong > b{background:var(--red-ink);color:#fff}
.mk-ex p{margin:0;font-size:12.5px;line-height:1.45;color:var(--body)}