/* ============================================================
   Cyber Square — Product Manual & Docs
   Recreated from the Claude Design handoff ("Product Manual.html").
   Everything is scoped under `.pm` so it never collides with the
   global Bootstrap / style.css rules already loaded site-wide.

   Two type surfaces share one brand:
     • Marketing docs chrome → Poppins, web coral  #FB5850
     • Embedded LMS "screenshots" → Geist, app coral #E96358
   ============================================================ */

.pm {
  /* ===== brand / accent (docs chrome) ===== */
  --accent: #FB5850;          /* marketing coral */
  --accent-ink: #E44B43;
  --accent-tint: #FFF1F0;

  /* ===== app coral scale (embedded LMS mocks) ===== */
  --primary-50:  #FDEFEE;
  --primary-100: #FBDAD6;
  --primary-400: #FF725E;
  --primary-500: #E96358;
  --primary-600: #D9544A;
  --primary-700: #BA4F46;

  /* ===== ink (text) ===== */
  --ink-900:#000; --ink-850:#0D0D0D; --ink-800:#1A1A1A; --ink-700:#333;
  --ink-600:#4D4D4D; --ink-500:#666; --ink-400:#999;

  /* ===== surfaces / lines ===== */
  --bg:#fff; --surface-1:#F8F8F8; --surface-2:#F4F5F5; --surface-3:#F0F0F0;
  --line-200:#EBEBEB; --line-300:#E6E6E6; --line-400:#E0E0E0;
  --slate-900:#263238; --slate-700:#455A64;

  /* ===== semantic ===== */
  --success:#008000; --success-bg:#E6F4E6;
  --info:#407BFF;    --info-bg:#ECF1FF;
  --warning:#FFA000; --warning-bg:#FFF4E0;
  --danger:#E96358;  --danger-bg:#FDEFEE;
  --ai:#8A38F5; --ai-2:#9747FF; --ai-bg:#F3ECFE;

  /* ===== elevation / radius ===== */
  --shadow-xs:0 1px 2px rgba(0,0,0,.06);
  --shadow-sm:0 1px 3px rgba(0,0,0,.10);
  --shadow-md:0 6px 16px rgba(0,0,0,.10);
  --shadow-lg:0 12px 32px rgba(0,0,0,.14);

  /* ===== type ===== */
  --font-app:'Geist',system-ui,-apple-system,sans-serif;
  --font-web:'Poppins',system-ui,-apple-system,sans-serif;

  /* ===== docs knobs (baked defaults from the design) ===== */
  --doc-fs:16px;
  --content-max:980px; /* matches .pm-main's full content width (same edge as the pillar-card grid) */
  --sidebar-bg:#FBFBFC;

  font-family:var(--font-web);
  color:var(--ink-800);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.pm *, .pm *::before, .pm *::after { box-sizing:border-box; }
.pm a { color:inherit; text-decoration:none; }
.pm ::selection { background:var(--accent-tint); }
/* neutralize global Bootstrap "reboot" defaults that would otherwise leak in
   (component classes below each set their own margins, so this is just a floor) */
.pm h1,.pm h2,.pm h3,.pm h4,.pm p,.pm ol,.pm ul,.pm figure{ margin:0; }
.pm button{ font-family:inherit; line-height:normal; }
.pm img{ max-width:100%; }

/* ----- Material Symbols ----- */
.pm-ms{
  font-family:'Material Symbols Rounded'; font-weight:400; font-style:normal;
  line-height:1; letter-spacing:normal; text-transform:none; display:inline-block;
  white-space:nowrap; direction:ltr; -webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; user-select:none;
}
.pm-ms.fill{ font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24; }

/* thin scrollbars in docs panes */
.pm .scroll-thin::-webkit-scrollbar{ width:8px; height:8px; }
.pm .scroll-thin::-webkit-scrollbar-thumb{ background:var(--line-400); border-radius:99px; }
.pm .scroll-thin::-webkit-scrollbar-track{ background:transparent; }

/* anchored sections clear the (non-sticky) header with a small gap */
.pm [data-section]{ scroll-margin-top:24px; }

/* ===== keyframes ===== */
@keyframes pmPulseRing{ 0%{ transform:scale(.7); opacity:.9; } 70%{ transform:scale(1.9); opacity:0; } 100%{ opacity:0; } }
@keyframes pmFadeUp{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.pm-fade-up{ animation:pmFadeUp .5s cubic-bezier(.22,.61,.36,1) both; }

/* ============================================================
   Hero
   ============================================================ */
.pm-hero{ background:linear-gradient(180deg,#FFFBFB,#fff); border-bottom:1px solid var(--line-200); }
.pm-hero-inner{ max-width:920px; margin:0 auto; padding:36px 24px 0; text-align:center; }
.pm-badge{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  color:var(--accent-ink); background:var(--accent-tint); padding:5px 13px; border-radius:999px; margin-bottom:18px;
}
.pm-hero h1{
  font-family:var(--font-web); font-size:36px; font-weight:700; letter-spacing:-1px;
  color:var(--ink-800); margin:0; line-height:1.12;
}
.pm-hero h1 .accent{ color:var(--accent); }
.pm-hero p{ font-size:17.5px; line-height:1.6; color:var(--ink-600); max-width:620px; margin:10px auto 18px; }
.pm-searchbtn{
  display:flex; width:100%; justify-content:space-between; align-items:center; gap:8px; height:44px; padding:0 14px;
  background:#fff; border:1px solid var(--line-300); border-radius:11px; cursor:pointer;
  font-family:var(--font-web); color:var(--ink-500); box-shadow:var(--shadow-xs); transition:border-color .15s,box-shadow .15s;
}
.pm-searchbtn:hover{ border-color:var(--accent); box-shadow:var(--shadow-sm); }
.pm-searchbtn .label{ font-size:14px; }
.pm-kbd-hint{ font-size:11px; font-weight:600; color:var(--ink-500); background:var(--surface-1); border:1px solid var(--line-400); border-radius:5px; padding:1px 6px; }
.pm-hero-inner .pm-rolefilter{ margin-top:12px; }

/* ============================================================
   Hero cards wrapper — wider than .pm-hero-inner so 5 columns fit
   ============================================================ */
.pm-hero-cards{ max-width:1320px; margin:16px auto 0; padding:0 24px 44px; }
.pm-hero-cards .pm-catgrid{ grid-template-columns:repeat(5,1fr); gap:32px 24px; text-align:left; margin-bottom:0; }

/* ============================================================
   Layout: sticky scroll-spy sidebar + content
   ============================================================ */
.pm-layout{ max-width:1320px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:248px minmax(0,1fr); gap:44px; align-items:start; transition:grid-template-columns .28s ease; }
.pm-main{ padding-top:36px; min-width:0; }

/* ---- sidebar ---- */
.pm-sidebar{ position:sticky; top:24px; align-self:start; max-height:calc(100vh - 48px); overflow-y:auto; padding-right:12px; padding-bottom:40px; }
.pm-side-group{ margin-bottom:18px; }
.pm-side-head{ display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--ink-400); margin-bottom:8px; padding:0 10px; }
.pm-side-link{ display:block; position:relative; font-size:13.5px; font-weight:500; line-height:1.35; padding:7px 10px; border-radius:8px; margin-bottom:1px; color:var(--ink-600); transition:background .15s,color .15s; }
.pm-side-link:hover{ background:var(--surface-1); }
.pm-side-link.is-active{ font-weight:600; color:var(--accent-ink); background:var(--accent-tint); }
.pm-side-link.is-active::before{ content:""; position:absolute; left:-1px; top:8px; bottom:8px; width:3px; border-radius:99px; background:var(--accent); }

/* ---- sidebar collapse/expand ---- */
.pm-sidebar-toggle{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; margin:0 0 14px; padding:0;
  border:1px solid var(--line-300); border-radius:8px; background:#fff;
  color:var(--ink-500); cursor:pointer; transition:background .15s,color .15s,border-color .15s;
}
.pm-sidebar-toggle:hover{ background:var(--surface-1); border-color:var(--accent); color:var(--accent-ink); }
.pm-sidebar-toggle .pm-ms{ font-size:18px; }
.pm-sidebar-body{ opacity:1; transition:opacity .18s ease; }
.pm-layout.is-sidebar-collapsed{ grid-template-columns:44px minmax(0,1fr); }
.pm-layout.is-sidebar-collapsed .pm-sidebar{ overflow:hidden; padding-right:0; }
.pm-layout.is-sidebar-collapsed .pm-sidebar-toggle{ margin-left:auto; margin-right:auto; }
.pm-layout.is-sidebar-collapsed .pm-sidebar-body{ opacity:0; visibility:hidden; pointer-events:none; }

/* ============================================================
   Browse header + category cards
   ============================================================ */
.pm-browse{ margin-bottom:40px; }
.pm-browse-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.pm-browse-title{ font-family:var(--font-web); font-size:22px; font-weight:700; color:var(--ink-800); margin:0; }

.pm-rolefilter{ display:inline-flex; background:var(--surface-1); border:1px solid var(--line-300); border-radius:999px; padding:4px; gap:2px; }
.pm-rolefilter button{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; font-size:12.5px; font-weight:600;
  font-family:var(--font-web); border:none; border-radius:999px; cursor:pointer; color:var(--ink-600); background:transparent; transition:all .15s;
}
.pm-rolefilter button .pm-ms{ color:var(--ink-500); }
.pm-rolefilter button.is-active{ color:#fff; }
.pm-rolefilter button.is-active .pm-ms{ color:#fff; }

.pm-catgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:16px; margin-bottom:12px; }
.pm-catcard{ text-align:left; border:1px solid var(--line-300); border-radius:14px; padding:18px; background:#fff; cursor:pointer; font-family:var(--font-web); transition:all .15s; box-shadow:var(--shadow-xs); display:block; width:100%; }
.pm-catcard:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.pm-catcard-ic{ width:40px; height:40px; border-radius:11px; background:var(--accent-tint); display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.pm-catcard-title{ font-size:16px; font-weight:600; color:var(--ink-800); margin-bottom:8px; }
.pm-catcard-list{ display:flex; flex-direction:column; gap:4px; }
.pm-catcard-item{ font-size:13px; color:var(--ink-500); display:flex; align-items:center; gap:6px; }
.pm-catcard-more{ font-size:12.5px; color:var(--accent-ink); font-weight:600; margin-top:2px; }

/* ============================================================
   Section + content blocks
   ============================================================ */
.pm-section{ padding-top:8px; margin-bottom:72px; }
.pm-section-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.pm-section-head h2{ font-family:var(--font-web); font-size:30px; font-weight:700; letter-spacing:-.5px; color:var(--ink-800); margin:0; line-height:1.15; }
.pm-lede{ font-size:17.5px; line-height:1.6; color:var(--ink-600); margin:0 0 22px; max-width:var(--content-max); }

/* small AI badge appended inline after a heading's text (same sparkle used
   in the AI Lesson Planner mock UI) — purely decorative, doesn't affect
   the heading's own typography/size/color/spacing. */
.pm-heading-ai-badge{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--ai-2),var(--ai)); vertical-align:middle; margin-left:10px; flex:none; }
.pm-heading-ai-badge .pm-ms{ font-size:16px; color:#fff; }

.pm-rolebadges{ display:flex; gap:6px; flex-wrap:wrap; }
.pm-rolebadge{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 9px 3px 7px; border-radius:999px; }
.pm-rolebadge--switch{ border:none; font-family:inherit; cursor:pointer; }

.pm-h3{ font-family:var(--font-web); font-size:19px; font-weight:600; color:var(--ink-800); margin:16px 0 24px;; letter-spacing:-.2px; }
.pm-p{ font-size:var(--doc-fs); line-height:1.72; color:var(--ink-700); margin:0 0 16px; max-width:var(--content-max); }
.pm-p.muted{ color:var(--ink-500); }
.pm-b{ font-weight:600; color:var(--ink-800); }
.pm-kbd{ font-family:var(--font-app); font-size:12.5px; font-weight:600; color:var(--ink-700); background:var(--surface-1); border:1px solid var(--line-400); border-bottom-width:2px; border-radius:6px; padding:1px 7px; }
.pm-pill{ display:inline-flex; align-items:center; font-family:var(--font-app); font-size:12.5px; font-weight:600; color:var(--accent-ink); background:var(--accent-tint); border-radius:6px; padding:1px 8px; }
.pm-h3--platform {margin: 24px 0 !important; }
.pm-h3--lessonplan-create{ margin-top:32px !important; }
.pm-h3--lessonplan-review{ margin-top:32px !important; }
.pm-h3--questionpaper-create{ margin-top:32px !important; }
.pm-h3--questionpaper-upload{ margin-top:32px !important; }
.pm-h3--questionpaper-textbook{ margin-top:32px !important; }
.pm-h3--topicnotes-create{ margin-top:32px !important; }
.pm-h3--grouptasks-create{ margin-top:32px !important; }
.pm-h3--educationimage-examples{ margin-top:32px !important; }
.pm-h3--educationimage-create{ margin-top:32px !important; }
.pm-h3--eventposter-create{ margin-top:32px !important; }
.pm-h3--noaccount-trial{ margin-top:32px !important; }
#roles .pm-h3--platform {margin-bottom: 4px !important;}

/* Roles & access heading — matches .pm-section-head h2 ("Signing in") typography exactly,
   while keeping the same margin-top (16px, from base .pm-h3) and margin-bottom (4px) the
   #roles heading already has. */
.pm-h3--roles{ font-size:30px; font-weight:700; letter-spacing:-.5px; line-height:1.15; color:var(--ink-800); margin-bottom:4px !important; }

/* steps */
.pm-steps{ list-style:none; margin:4px 0 8px; padding:0; }
.pm-step{ position:relative; padding-left:46px; padding-bottom:20px; }
.pm-step:last-child{ padding-bottom:0; }
.pm-step:not(:last-child)::before{ content:""; position:absolute; left:15px; top:30px; bottom:0; width:2px; background:var(--line-300); }
.pm-step-num{ position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%; background:var(--accent-tint); color:var(--accent-ink); font-family:var(--font-app); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; }
.pm-step-body{ padding-top:4px; }
.pm-step-title{ font-size:15.5px; font-weight:600; color:var(--ink-800); margin-bottom:3px; }
.pm-step-desc{ font-size:14.5px; line-height:1.6; color:var(--ink-600); }
.pm-step-divider{ margin:6px 0; padding-left:46px; text-align:left; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--ink-400); }

/* callouts */
.pm-callout{ display:flex; gap:13px; border-radius:10px; padding:14px 16px; margin:0 0 20px; max-width:var(--content-max); border:1px solid; border-left-width:3px; }
.pm-callout-title{ font-size:13.5px; font-weight:700; margin-bottom:3px; }
.pm-callout-body{ font-size:14px; line-height:1.6; color:var(--ink-700); }
.pm-callout--note{ background:var(--info-bg); border-color:rgba(64,123,255,.2); border-left-color:var(--info); }
.pm-callout--note .pm-callout-title,.pm-callout--note > .pm-ms{ color:var(--info); }
.pm-callout--tip{ background:var(--success-bg); border-color:rgba(0,128,0,.2); border-left-color:var(--success); }
.pm-callout--tip .pm-callout-title,.pm-callout--tip > .pm-ms{ color:var(--success); }
.pm-callout--warning{ background:var(--warning-bg); border-color:rgba(255,160,0,.2); border-left-color:var(--warning); }
.pm-callout--warning .pm-callout-title,.pm-callout--warning > .pm-ms{ color:var(--warning); }
.pm-callout--ai{ background:var(--ai-bg); border-color:rgba(138,56,245,.2); border-left-color:var(--ai); }
.pm-callout--ai .pm-callout-title,.pm-callout--ai > .pm-ms{ color:var(--ai); }
.pm-callout > .pm-ms{ flex:none; margin-top:1px; }

/* feature grid */
.pm-features{ display:grid; gap:14px; margin:6px 0 22px; }
.pm-features.cols-2{ grid-template-columns:repeat(2,1fr); }
.pm-features.cols-3{ grid-template-columns:repeat(3,1fr); }
.pm-features.cols-4{ grid-template-columns:repeat(4,1fr); }
.pm-feature{ border:1px solid var(--line-300); border-radius:12px; padding:16px; background:#fff; }
.pm-feature-ic{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:11px; }
.pm-feature-title{ font-size:15px; font-weight:600; color:var(--ink-800); margin-bottom:4px; }
.pm-feature-desc{ font-size:13.5px; line-height:1.55; color:var(--ink-600); }

/* Compact variant for the CS Lab "4 feature cards" — same colors,
   icons and type, just tighter so height is content-driven, not padded out. */
.pm-features.cols-4 .pm-feature{ padding:12px 14px; }
.pm-features.cols-4 .pm-feature-ic{ margin-bottom:7px; }
.pm-features.cols-4 .pm-feature-title{ margin-bottom:2px; }
.pm-features.cols-4 .pm-feature-desc{ line-height:1.4; }

/* "How it works" panel — single pastel-lavender panel with an intro
   and a horizontal step strip (used by the CS Lab section). */
.pm-workflow{ display:flex; align-items:center; gap:22px; background:var(--ai-bg); border:1px solid rgba(138,56,245,.16); border-radius:16px; padding:22px 26px; margin:6px 0 22px; }
.pm-workflow-intro{ display:flex; align-items:flex-start; gap:14px; flex:1 1 230px; min-width:200px; }
.pm-workflow-ic{ width:46px; height:46px; border-radius:50%; background:rgba(138,56,245,.14); display:flex; align-items:center; justify-content:center; flex:none; }
.pm-workflow-title{ font-size:15.5px; font-weight:700; color:var(--ink-800); margin-bottom:4px; }
.pm-workflow-desc{ font-size:13px; line-height:1.55; color:var(--ink-600); }
.pm-workflow-steps{ display:flex; align-items:flex-start; gap:6px; flex:1 1 480px; padding-left:24px; border-left:1px solid rgba(138,56,245,.18); }
.pm-workflow-step{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; flex:1; min-width:0; }
.pm-workflow-step-ic{ width:32px; height:32px; border-radius:50%; background:rgba(138,56,245,.14); display:flex; align-items:center; justify-content:center; }
.pm-workflow-step-title{ font-size:12.5px; font-weight:700; color:var(--ink-800); }
.pm-workflow-step-desc{ font-size:11px; line-height:1.4; color:var(--ink-600); }
.pm-workflow-arrow{ margin-top:6px; flex:none; font-size:15px; color:var(--ai); opacity:.55; }

/* "Explore AI Cloud Lab" tool grid — a plain image gallery (no cards,
   no borders, no backgrounds): just each tool's icon and its name. */
.pm-toolgrid{ display:grid; grid-template-columns:repeat(3,1fr); column-gap:24px; row-gap:26px; margin:14px 0 22px; }
.pm-tool{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; }
.pm-tool-ic{ width:100%; display:flex; align-items:center; justify-content:center; }
.pm-tool-ic img{ width:100%; max-width:280px; height:170px; object-fit:contain; display:block; margin:0 auto; }
.pm-tool-name{ font-size:12.5px; font-weight:600; line-height:1.35; color:var(--ink-800); }

/* four pillars (Welcome section) */
.pm-h3--pillars{ margin:16px 0 24px !important; }
.pm-pillars{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin:24px 0 44px; }
.pm-pillarcard{ position:relative; overflow:hidden; border:1px solid var(--line-300); border-radius:16px; padding:26px; background:#fff; box-shadow:var(--shadow-xs); min-height:236px; display:flex; flex-direction:column; }
.pm-pillarcard-illus{ position:absolute; right:-14px; bottom:-18px; font-size:112px; line-height:1; opacity:.06; pointer-events:none; }
.pm-pillarcard-top{ position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; }
.pm-pillarcard-ic{ width:50px; height:50px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex:none; }
.pm-pillarcard-num{ position:relative; flex:none; display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; font-family:var(--font-app); font-weight:700; font-size:12px; }
.pm-pillarcard-title{ position:relative; z-index:1; font-family:var(--font-web); font-size:17.5px; font-weight:700; color:var(--ink-800); margin-bottom:4px; }
.pm-pillarcard-subtitle{ position:relative; z-index:1; font-family:var(--font-app); font-size:12.5px; font-weight:600; margin-bottom:12px; }
.pm-pillarcard-desc{ position:relative; z-index:1; font-size:14px; line-height:1.65; color:var(--ink-600); }

/* FAQ */
.pm-faq{ border:1px solid var(--line-300); border-radius:12px; overflow:hidden; max-width:var(--content-max); margin:6px 0 8px; }
.pm-faq-item + .pm-faq-item{ border-top:1px solid var(--line-200); }
.pm-faq-q{ width:100%; text-align:left; display:flex; align-items:center; gap:12px; padding:15px 18px; background:#fff; border:none; cursor:pointer; font-family:var(--font-web); }
.pm-faq-item.is-open .pm-faq-q{ background:var(--surface-1); }
.pm-faq-q span.q{ font-size:15px; font-weight:600; color:var(--ink-800); flex:1; }
.pm-faq-q .pm-ms{ color:var(--accent); }
.pm-faq-a{ display:none; padding:0 18px 16px; font-size:14.5px; line-height:1.65; color:var(--ink-600); }
.pm-faq-item.is-open .pm-faq-a{ display:block; }

/* ============================================================
   Static product screenshot (real image, not a recreated mock)
   ============================================================ */
.pm-shot{ margin:10px 0 26px; max-width:var(--content-max); border:1px solid var(--line-300); border-radius:16px; overflow:hidden; background:var(--surface-1); box-shadow:var(--shadow-sm); padding:12px; }
.pm-shot img{ display:block; width:100%; height:auto; border-radius:10px; }

/* Clean 3-column row of real (uncropped) example screenshots/images —
   each one styled like .pm-shot, just laid out side by side. */
.pm-shotgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:10px 0 26px; }
.pm-shotgrid .pm-shot{ margin:0; max-width:none; }

/* ============================================================
   Animated walkthrough
   ============================================================ */
.pm-wt{ margin:10px 0 26px; border:1px solid var(--line-300); border-radius:16px; overflow:hidden; background:#fff; box-shadow:var(--shadow-sm); }
.pm-wt--spaced{ margin-top:20px; }
.pm-wt--signup .pm-wt-screen{ height:auto !important; aspect-ratio:1916/902; }
.pm-wt--signup .pm-wt-url-text{ display:none; }
.pm-wt--signup .pm-wt-url .pm-ms{ display:none; }
.pm-wt--signin-teacher .pm-wt-screen{ height:auto !important; aspect-ratio:1780/836; }
.pm-wt--signin-student .pm-wt-screen{ height:auto !important; aspect-ratio:1836/862; }
.pm-wt--signin-admin .pm-wt-screen{ height:auto !important; aspect-ratio:1760/851; }
/* Approvals walkthrough — real mobile-app screenshots (portrait), so the
   box follows their native aspect-ratio same as every other walkthrough,
   just taller instead of wide, to avoid cropping them. At the full content
   width a 785:1600 box would be enormous, so the whole figure (bar, screen
   and caption together) is capped to a narrow, phone-frame-like width and
   centered — the screenshot still renders at its exact native ratio
   (nothing cropped or stretched), just scaled down proportionally to a
   height in line with the manual's other, smaller walkthroughs. Width is
   440px rather than narrower: the caption row needs enough room next to
   its fixed-size prev/play/next controls for the step description to wrap
   onto a readable number of lines instead of being squeezed too tight. */
.pm-wt--approvals{ max-width:440px; margin-left:auto; margin-right:auto; }
.pm-wt--approvals .pm-wt-screen{ height:auto !important; aspect-ratio:785/1600; }
/* Lab Questions walkthrough — default/initial ratio matches step 1
   (Lab1.png); JS swaps this per-step via each step's own 'ratio' so every
   screenshot (which differ in aspect ratio) renders uncropped. */
.pm-wt--labq .pm-wt-screen{ height:auto !important; aspect-ratio:1782/821; }
/* Lesson Plan walkthrough — default/initial ratio matches step 1
   (lessonplan1.png); JS swaps this per-step via each step's own 'ratio'. */
.pm-wt--lessonplan .pm-wt-screen{ height:auto !important; aspect-ratio:1833/858; }
/* Create Lesson Plan walkthrough — default/initial ratio matches the
   createlesson.png screenshot (single screen used across all its steps). */
.pm-wt--createlesson .pm-wt-screen{ height:auto !important; aspect-ratio:1867/901; }
/* Review, Customize & Manage walkthrough — default/initial ratio matches
   generate3.png; JS swaps this per-step via each step's own 'ratio' for the
   generate4.png / generate5.png screens used partway through. */
.pm-wt--generate .pm-wt-screen{ height:auto !important; aspect-ratio:1885/905; }
/* Question Paper walkthrough — default/initial ratio matches step 1
   (qp1.png); JS swaps this per-step via each step's own 'ratio' for the
   qp2.png screen used from Step 3 onward. */
.pm-wt--questionpaper .pm-wt-screen{ height:auto !important; aspect-ratio:1792/835; }
/* Upload-Based Creation walkthrough — default/initial ratio matches step 1
   (uqp1.png); JS swaps this per-step via each step's own 'ratio' for the
   uqp2-uqp6 screens used through the rest of the flow. */
.pm-wt--uploadqp .pm-wt-screen{ height:auto !important; aspect-ratio:1817/827; }
/* Textbook-Based Creation walkthrough — default/initial ratio matches step 1
   (tqp1.png); JS swaps this per-step via each step's own 'ratio' for the
   tqp2.png and reused Upload-Based Creation screens used through the flow. */
.pm-wt--textbookqp .pm-wt-screen{ height:auto !important; aspect-ratio:1772/830; }
/* Topic Notes walkthroughs — default/initial ratio matches each
   walkthrough's own first screenshot (single screen per walkthrough). */
.pm-wt--topicnotes-open .pm-wt-screen{ height:auto !important; aspect-ratio:1881/836; }
.pm-wt--topicnotes-create .pm-wt-screen{ height:auto !important; aspect-ratio:1382/852; }
/* Group Tasks walkthroughs — default/initial ratio matches each
   walkthrough's own first screenshot. */
.pm-wt--grouptasks-open .pm-wt-screen{ height:auto !important; aspect-ratio:1797/807; }
.pm-wt--grouptasks-create .pm-wt-screen{ height:auto !important; aspect-ratio:1022/867; }
/* Education Image walkthroughs — default/initial ratio matches each
   walkthrough's own first screenshot. */
.pm-wt--educationimage-open .pm-wt-screen{ height:auto !important; aspect-ratio:1881/836; }
.pm-wt--educationimage-create .pm-wt-screen{ height:auto !important; aspect-ratio:1077/632; }
/* Event Poster walkthroughs — default/initial ratio matches each
   walkthrough's own first screenshot. */
.pm-wt--eventposter-open .pm-wt-screen{ height:auto !important; aspect-ratio:1797/807; }
.pm-wt--eventposter-create .pm-wt-screen{ height:auto !important; aspect-ratio:1032/897; }
/* Guarantee the full screenshot is always visible for this walkthrough (never
   cropped on any edge) even if a step's aspect-ratio and the box briefly
   mismatch — contain letterboxes instead of cover cropping. */
.pm-wt--generate .pm-wt-screen img{ object-fit:contain !important; }
.pm-wt-bar{ display:flex; align-items:center; gap:10px; height:38px; padding:0 14px; background:var(--surface-1); border-bottom:1px solid var(--line-300); }
.pm-wt-traffic{ display:flex; gap:6px; }
.pm-wt-traffic i{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.pm-wt-url{ display:flex; align-items:center; gap:6px; margin:0 auto; font-family:var(--font-app); font-size:12px; color:var(--ink-500); font-weight:500; }
.pm-wt-tag{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--accent-ink); background:var(--accent-tint); padding:3px 9px; border-radius:999px; }
.pm-wt-screen{ position:relative; overflow:hidden; background:#fff; }
.pm-wt-overlay{ position:absolute; inset:0; pointer-events:none; }
.pm-wt-veil{ position:absolute; inset:0; background:rgba(15,23,30,.16); opacity:0; transition:opacity .4s; }
.pm-wt-spot{ position:absolute; inset:0; opacity:0; transition:background .6s cubic-bezier(.4,0,.2,1); mix-blend-mode:soft-light; }
.pm-wt-marker{ position:absolute; transform:translate(-50%,-50%); transition:left .55s cubic-bezier(.4,0,.2,1),top .55s cubic-bezier(.4,0,.2,1); opacity:0; }
.pm-wt.is-seen .pm-wt-veil,.pm-wt.is-seen .pm-wt-spot,.pm-wt.is-seen .pm-wt-marker{ opacity:1; }
.pm-wt-ring{ position:absolute; left:50%; top:50%; width:30px; height:30px; margin-left:-15px; margin-top:-15px; border-radius:50%; border:2px solid var(--accent); animation:pmPulseRing 1.8s ease-out infinite; }
.pm-wt-num{ position:relative; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; font-family:var(--font-app); font-weight:700; font-size:14px; box-shadow:0 4px 12px rgba(0,0,0,.3); }
.pm-wt-label{ position:absolute; top:-8px; left:40px; transform:translateY(-100%); }
.pm-wt-marker.on-left .pm-wt-label{ left:auto; right:40px; }
.pm-wt-label > div{ background:var(--ink-850); color:#fff; font-family:var(--font-web); font-size:12.5px; font-weight:600; padding:7px 11px; border-radius:8px; box-shadow:var(--shadow-md); width:210px; }
.pm-wt-cap{ border-top:1px solid var(--line-300); padding:13px 16px; background:#fff; }
.pm-wt-cap-row{ display:flex; align-items:center; gap:12px; }
.pm-wt-ctrls{ display:flex; align-items:center; gap:4px; }
.pm-ctrl{ width:34px; height:34px; border-radius:9px; border:1px solid var(--line-400); background:#fff; color:var(--ink-600); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.pm-ctrl.primary{ border:none; background:var(--accent); color:#fff; }
.pm-ctrl.primary .pm-ms{ color:#fff; }
.pm-wt-cap-text{ flex:1; min-width:0; font-size:13.5px; line-height:1.5; color:var(--ink-700); }
.pm-wt-cap-text b{ color:var(--ink-900); font-weight:700; }
.pm-wt-progress{ display:flex; gap:6px; margin-top:11px; }
.pm-wt-prog{ flex:1; height:4px; border-radius:99px; border:none; padding:0; cursor:pointer; background:var(--line-400); transition:background .3s; }
.pm-wt-prog.is-active{ background:var(--accent); }

/* ============================================================
   Pager
   ============================================================ */
.pm-pager{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0 8px; }
.pm-pager-btn{ border:1px solid var(--line-300); border-radius:12px; padding:14px 16px; background:#fff; cursor:pointer; font-family:var(--font-web); display:flex; flex-direction:column; gap:4px; }
.pm-pager-btn:hover{ border-color:var(--accent); }
.pm-pager-btn.next{ text-align:right; align-items:flex-end; }
.pm-pager-label{ font-size:12px; color:var(--ink-500); display:flex; align-items:center; gap:5px; }
.pm-pager-title{ font-size:15px; font-weight:600; color:var(--accent-ink); }
.pm-pager-empty{ }

/* ============================================================
   Command palette (search modal)
   ============================================================ */
.pm-search-overlay{ position:fixed; inset:0; z-index:100000; background:rgba(38,50,56,.42); backdrop-filter:blur(2px); display:flex; align-items:flex-start; justify-content:center; padding-top:11vh; }
.pm-search-overlay[hidden]{ display:none; }
.pm-search-box{ width:min(620px,92vw); background:#fff; border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden; font-family:var(--font-web); }
.pm-search-in-row{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line-200); }
.pm-search-in-row .pm-ms{ color:var(--accent); }
.pm-search-input{ flex:1; border:none; outline:none; font-family:var(--font-web); font-size:16px; color:var(--ink-800); background:transparent; }
.pm-search-esc{ font-size:11px; font-weight:600; color:var(--ink-500); border:1px solid var(--line-400); border-radius:5px; padding:2px 7px; }
.pm-search-results{ max-height:52vh; overflow-y:auto; padding:8px; }
.pm-search-none{ padding:28px 16px; text-align:center; font-size:14px; color:var(--ink-500); }
.pm-search-item{ width:100%; text-align:left; display:flex; align-items:center; gap:12px; padding:11px 12px; border:none; background:transparent; border-radius:10px; cursor:pointer; font-family:var(--font-web); }
.pm-search-item:hover{ background:var(--surface-1); }
.pm-search-item-ic{ width:34px; height:34px; border-radius:9px; background:var(--accent-tint); display:flex; align-items:center; justify-content:center; flex:none; }
.pm-search-item-ic .pm-ms{ color:var(--accent); }
.pm-search-item-main{ flex:1; min-width:0; }
.pm-search-item-title{ font-size:14.5px; font-weight:600; color:var(--ink-800); }
.pm-search-item-part{ font-size:12px; color:var(--ink-500); }
.pm-search-item-roles{ display:flex; gap:4px; }
.pm-role-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.pm-search-foot{ display:flex; align-items:center; gap:16px; padding:10px 18px; border-top:1px solid var(--line-200); background:var(--surface-1); font-size:12px; color:var(--ink-500); }
.pm-search-foot .legend{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.pm-search-foot .legend span{ display:flex; align-items:center; gap:4px; }

/* utility */
.pm [hidden]{ display:none !important; }

/* ============================================================
   Back-to-top button
   Vertically centered on the right edge of the viewport. Sits
   clear of the WhatsApp button (fixed at bottom:100px) and the
   Zoho chat bubble (bottom-right corner), which stay unaffected.
   ============================================================ */
.pm-totop{
  position:fixed; right:17px; top:50%; z-index:9998;
  width:46px; height:46px; border:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff; cursor:pointer;
  box-shadow:var(--shadow-md);
  opacity:0; transform:translateY(calc(-50% + 10px)); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, background .2s ease;
}
.pm-totop.is-visible{ opacity:1; transform:translateY(-50%); pointer-events:auto; }
.pm-totop:hover{ background:var(--accent-ink); }
.pm-totop:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:2px; }
.pm-totop .pm-ms{ font-size:24px; color:#fff; }

@media (max-width:600px){
  .pm-totop{ width:42px; height:42px; right:14px; }
  .pm-totop .pm-ms{ font-size:22px; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:980px){
  .pm-layout{ grid-template-columns:1fr; gap:0; }
  .pm-sidebar{ display:none; }
  .pm-hero h1{ font-size:34px; }
  .pm-features.cols-2,.pm-features.cols-3,.pm-features.cols-4{ grid-template-columns:1fr; }
  .pm-shotgrid{ grid-template-columns:1fr; }
  .pm-workflow{ flex-direction:column; align-items:stretch; }
  .pm-workflow-steps{ padding-left:0; border-left:none; padding-top:16px; border-top:1px solid rgba(138,56,245,.18); }
  .pm-toolgrid{ grid-template-columns:repeat(2,1fr); }
  .pm-section-head h2{ font-size:25px; }
  .pm-h3--roles{ font-size:25px; }
  .pm-hero-cards .pm-catgrid{ grid-template-columns:repeat(3,1fr); }
  .pm-pillars{ grid-template-columns:1fr; }
  .pm-pillarcard{ min-height:0; }
}
@media (max-width:600px){
  .pm-hero h1{ font-size:28px; letter-spacing:-.5px; }
  .pm-hero p{ font-size:16px; }
  .pm-pager{ grid-template-columns:1fr; }
  .pm-wt-label > div{ width:150px; font-size:11px; }
  .pm-hero-cards .pm-catgrid{ grid-template-columns:repeat(2,1fr); }
  .pm-workflow-steps{ flex-direction:column; align-items:stretch; }
  .pm-workflow-arrow{ transform:rotate(90deg); margin:0 auto; }
  .pm-toolgrid{ grid-template-columns:repeat(1,1fr); }
}

@media print{ .pm .no-print{ display:none !important; } }