/*
 * ProAladdin Edu - academy stylesheet.
 *
 * Shared by the academy page and every single-course page, which is why it
 * is a real file rather than a <style> block inside one template: the course
 * page renders the same components (cards, accordions, the video carousel)
 * and previously had no way to reach their rules.
 *
 * Colours come from pa_edu_print_palette(), printed inline by each template
 * so an admin's palette choice does not need this file to be re-cached.
 *
 * Everything is scoped under .pa-edu so none of it leaks into the theme.
 * Component rules are written as `.pa-edu .pa-thing` rather than `.pa-thing`
 * wherever the component sits on a <button> or an <a>: the element resets
 * near the top score 0-1-1, and a bare class at 0-1-0 loses to them.
 */

/* ==================================================================
   PART A — CSS
   ------------------------------------------------------------------
   Everything is scoped under .pa-edu so none of it can leak into the
   theme, and so the theme cannot easily leak in either.

   The design idea: the three age groups are not just a filter, they
   are a REGISTER. Choosing one retunes the page's accent colour,
   corner radius and type scale through the custom properties in the
   [data-age] blocks below - so every chip, price, button and focus
   ring lands in the right register without any JavaScript touching
   them one by one. 6-9 gets rounder and chunkier; 14-18 gets tighter
   and sharper. One layout, three tempers.
   ================================================================== */

.pa-edu{
  /* ---- Palette. The seven values here are overridden by the
     Academy Settings screen; see pa_edu_print_palette(). ---- */
  --pa-paper:#F0F4FB;
  --pa-ink:#141B3D;
  --pa-primary:#2B1C8C;
  --pa-accent:#FFC93C;
  --pa-age-junior:#FF4D8D;
  --pa-age-explorer:#12B886;
  --pa-age-builder:#4C5FEF;

  --pa-ink-60:color-mix(in oklab, var(--pa-ink) 62%, var(--pa-paper));
  --pa-ink-40:color-mix(in oklab, var(--pa-ink) 42%, var(--pa-paper));
  --pa-rule:color-mix(in oklab, var(--pa-ink) 14%, var(--pa-paper));
  --pa-surface:#FFFFFF;

  /* ---- Current age register. Before a choice is made the page runs
     on the brand colour, so nothing is pretending to be an age. ---- */
  --pa-age:var(--pa-primary);
  --pa-age-text:color-mix(in oklab, var(--pa-age) 74%, var(--pa-ink));
  --pa-age-wash:color-mix(in oklab, var(--pa-age) 10%, var(--pa-paper));

  --pa-radius:18px;
  --pa-radius-sm:10px;
  --pa-radius-pill:999px;
  --pa-step:1;              /* type scale multiplier, retuned per age */

  /* Hard offset shadow rather than a soft grey blur: riso print,
     sticker sheet. It is the single device that keeps these cards
     from reading as the usual SaaS card kit. */
  --pa-shadow:4px 4px 0 0 color-mix(in oklab, var(--pa-age) 32%, var(--pa-paper));
  --pa-shadow-lift:7px 7px 0 0 var(--pa-age);

  --pa-ease:cubic-bezier(.22,.68,.26,1);
  --pa-ease-out:cubic-bezier(.16,.84,.34,1);

  --pa-font-display:'Fraunces','Cairo',Georgia,serif;
  --pa-font-ui:'Hanken Grotesk','Cairo',system-ui,-apple-system,'Segoe UI',sans-serif;

  --pa-maxw:1180px;
  --pa-gutter:clamp(18px,4vw,40px);

  /* ---- Cover gradients, one per card-colour key. Picked by an ASCII
     key, never by the category's display name - a translated name
     falls through to one flat gradient for every card. ---- */
  --pa-cover-coding:linear-gradient(145deg,#6D4BFF,#B14BFF);
  --pa-cover-robotics:linear-gradient(145deg,#0E9488,#35D0A5);
  --pa-cover-ai:linear-gradient(145deg,#3B37C9,#6E7BFF);
  --pa-cover-design:linear-gradient(145deg,#E6368B,#FF7AB8);
  --pa-cover-science:linear-gradient(145deg,#1C8F4D,#64C96B);
  --pa-cover-communication:linear-gradient(145deg,#C96A0E,#FFBA4A);
  --pa-cover-default:linear-gradient(145deg,#3A3480,#6A63C8);

  font-family:var(--pa-font-ui);
  color:var(--pa-ink);
  background:var(--pa-paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}

/* ---- The three registers ---- */
.pa-edu[data-age="6-9"]{   --pa-age:var(--pa-age-junior);   --pa-radius:26px; --pa-radius-sm:16px; --pa-step:1.06; }
.pa-edu[data-age="10-13"]{ --pa-age:var(--pa-age-explorer); --pa-radius:18px; --pa-radius-sm:11px; --pa-step:1;    }
.pa-edu[data-age="14-18"]{ --pa-age:var(--pa-age-builder);  --pa-radius:10px; --pa-radius-sm:7px;  --pa-step:.97;  }

.pa-edu *,.pa-edu *::before,.pa-edu *::after{box-sizing:border-box}
/* Element resets, written with :where() so they score exactly 0-1-0 - the
   same as a single component class. Every component rule comes later in this
   file, so on a tie the component wins and its own spacing applies.

   Written the obvious way (.pa-edu p, .pa-edu h1 ...) they score 0-1-1 and
   silently beat every component margin set on a <p>, <h2> or <ul>: the
   hero subtitle sat flush under the headline, footer headings touched their
   links, and the footer's badge row lost its gap above. They still score
   above a theme's bare element selectors (0-0-1), so the theme cannot leak
   its own heading and paragraph margins in either. */
.pa-edu :where(p,h1,h2,h3,h4,ul,ol,figure,blockquote,dl,dd){margin:0}
.pa-edu :where(ul,ol){padding:0;list-style:none}
.pa-edu :where(img){max-width:100%;display:block}
.pa-edu button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
.pa-edu a{color:inherit}

/* A visible, high-contrast focus ring everywhere. The default browser
   outline disappears against several of the fills used below. */
.pa-edu :focus-visible{outline:3px solid var(--pa-age-text);outline-offset:3px;border-radius:4px}

.pa-edu-wrap{max-width:var(--pa-maxw);margin-inline:auto;padding-inline:var(--pa-gutter)}

/* The header is sticky, so anything scrolled to by an in-page link or by
   the age transition needs to clear it - otherwise the thing just
   scrolled to sits underneath the header and looks like nothing moved. */
.pa-edu [id],.pa-edu .pa-chosen,.pa-edu #paChooserHead{scroll-margin-top:92px}

.pa-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Skip link - the age chooser sits between the top of the page and the
   courses, so a keyboard or screen-reader user who already knows what
   they want should not have to walk through it. */
.pa-edu .pa-skip{position:absolute;inset-inline-start:var(--pa-gutter);top:-100px;z-index:60;background:var(--pa-ink);color:#fff;
  padding:10px 16px;border-radius:var(--pa-radius-sm);font-weight:600;transition:top .18s var(--pa-ease);text-decoration:none}
.pa-edu .pa-skip:focus{top:12px}

/* ---- Type scale ---- */
.pa-display{font-family:var(--pa-font-display);font-weight:800;
  font-variation-settings:'SOFT' 60,'WONK' 1;letter-spacing:-.022em;line-height:1.02}
.pa-h1{font-size:calc(clamp(2.5rem,6.4vw,4.6rem) * var(--pa-step))}
.pa-h2{font-size:calc(clamp(1.75rem,3.6vw,2.7rem) * var(--pa-step));line-height:1.08}
.pa-h3{font-size:calc(clamp(1.15rem,1.9vw,1.4rem) * var(--pa-step));line-height:1.22;
  font-family:var(--pa-font-display);font-weight:700;font-variation-settings:'SOFT' 50,'WONK' 0;letter-spacing:-.012em}
.pa-lede{font-size:calc(clamp(1.02rem,1.5vw,1.2rem) * var(--pa-step));color:var(--pa-ink-60);max-width:58ch;text-wrap:pretty}
.pa-meta{font-size:.875rem;color:var(--pa-ink-40)}

/* ------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */
.pa-edu .pa-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:var(--pa-radius-pill);font-weight:650;font-size:1rem;
  text-decoration:none;white-space:nowrap;
  transition:transform .16s var(--pa-ease),box-shadow .16s var(--pa-ease),background-color .16s var(--pa-ease)}
.pa-edu .pa-btn-primary{background:var(--pa-age);color:#fff;box-shadow:0 2px 0 0 color-mix(in oklab,var(--pa-age) 55%,var(--pa-ink))}
.pa-edu .pa-btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 0 0 color-mix(in oklab,var(--pa-age) 55%,var(--pa-ink))}
.pa-edu .pa-btn-primary:active{transform:translateY(1px);box-shadow:0 1px 0 0 color-mix(in oklab,var(--pa-age) 55%,var(--pa-ink))}
.pa-edu .pa-btn-ghost{background:transparent;color:var(--pa-ink);border:2px solid var(--pa-rule)}
.pa-edu .pa-btn-ghost:hover{border-color:var(--pa-age);color:var(--pa-age-text)}
.pa-edu .pa-btn-block{width:100%}

/* ------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */
.pa-head{position:sticky;top:0;z-index:40;background:color-mix(in oklab,var(--pa-paper) 86%,transparent);
  backdrop-filter:blur(10px);border-block-end:1px solid var(--pa-rule)}
.pa-head-in{display:flex;align-items:center;gap:20px;min-height:68px}
.pa-edu .pa-brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:var(--pa-font-display);
  font-weight:800;font-size:1.22rem;letter-spacing:-.02em;font-variation-settings:'SOFT' 60,'WONK' 1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pa-brand-mark{width:36px;height:36px;border-radius:11px;background:var(--pa-age);display:grid;place-items:center;color:#fff;flex:none}
.pa-head-nav{display:none;gap:4px;margin-inline-start:auto}
.pa-head-nav a{padding:9px 13px;border-radius:var(--pa-radius-sm);font-size:.94rem;font-weight:550;
  color:var(--pa-ink-60);text-decoration:none;transition:color .15s,background-color .15s}
.pa-head-nav a:hover{color:var(--pa-ink);background:var(--pa-age-wash)}
.pa-head-act{display:flex;align-items:center;gap:10px;margin-inline-start:auto}
.pa-head-nav+.pa-head-act{margin-inline-start:0}
.pa-head-act .pa-btn{padding:10px 18px;font-size:.93rem}
@media (min-width:900px){ .pa-head-nav{display:flex} }
@media (max-width:560px){
  .pa-edu .pa-brand{font-size:1.02rem}
  .pa-edu .pa-brand-mark{width:32px;height:32px;border-radius:10px}
  .pa-edu .pa-head-act .pa-btn{padding:9px 14px;font-size:.85rem}
}

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------
   The graph-paper rule behind the hero and the chooser is the page's
   only background texture. It is here because the subject is building
   things, and because it does the job a gradient wash would otherwise
   be doing - without being a gradient wash.
   ------------------------------------------------------------------ */
.pa-hero{position:relative;padding-block:clamp(48px,8vw,96px) clamp(30px,4vw,48px);overflow:hidden}
.pa-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,color-mix(in oklab,var(--pa-ink) 7%,transparent) 1px,transparent 1px),
    linear-gradient(to bottom,color-mix(in oklab,var(--pa-ink) 7%,transparent) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(130% 100% at 50% 0%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(130% 100% at 50% 0%,#000 25%,transparent 78%)}
.pa-hero-in{position:relative;z-index:1;display:grid;gap:clamp(32px,5vw,60px);align-items:center}
.pa-hero.has-image .pa-hero-in{grid-template-columns:1fr}
@media (min-width:1000px){ .pa-hero.has-image .pa-hero-in{grid-template-columns:1.08fr .92fr} }

.pa-hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.94rem;font-weight:600;color:var(--pa-age-text)}
.pa-hero-eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--pa-age)}
.pa-hero-title{margin-block:16px 18px;max-width:20ch;text-wrap:balance}
.pa-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:28px}
.pa-hero-figure{border-radius:var(--pa-radius);overflow:hidden;box-shadow:var(--pa-shadow)}

/* Proof strip. Separated by thin vertical rules rather than middle
   dots: the rules survive wrapping onto two lines, which a row of
   dots does not. */
.pa-proof{display:flex;flex-wrap:wrap;gap:0;margin-block-start:36px;border-block-start:1px solid var(--pa-rule);padding-block-start:22px}
.pa-proof-item{padding-inline:22px;border-inline-start:1px solid var(--pa-rule)}
.pa-proof-item:first-child{padding-inline-start:0;border-inline-start:0}
.pa-proof-value{font-family:var(--pa-font-display);font-weight:800;font-size:1.5rem;line-height:1.1;font-variation-settings:'SOFT' 60,'WONK' 1}
.pa-proof-label{font-size:.85rem;color:var(--pa-ink-40)}

/* ------------------------------------------------------------------
   The age chooser — the one bold thing on the page
   ------------------------------------------------------------------ */
.pa-chooser{position:relative;padding-block:clamp(12px,2vw,24px) clamp(44px,6vw,76px)}
.pa-chooser-head{max-width:52ch;margin-block-end:clamp(26px,3.4vw,40px)}
.pa-chooser-head .pa-lede{margin-block-start:12px}

.pa-ages{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:1fr}
@media (min-width:660px){ .pa-ages{grid-template-columns:repeat(3,1fr)} }

.pa-edu .pa-age-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  /* Extra bottom padding clears the coloured edge drawn by ::after, which
     is positioned against the card's border box and would otherwise sit
     on top of the course count. */
  padding:clamp(22px,2.6vw,30px);padding-block-end:calc(clamp(22px,2.6vw,30px) + 10px);text-align:start;
  background:var(--pa-surface);border:2px solid var(--pa-rule);border-radius:var(--pa-radius);
  overflow:hidden;isolation:isolate;
  transition:transform .22s var(--pa-ease),border-color .22s var(--pa-ease),box-shadow .22s var(--pa-ease),opacity .26s var(--pa-ease)}
.pa-edu .pa-age-card::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;height:7px;background:var(--pa-card-age);
  transition:height .22s var(--pa-ease)}
.pa-edu .pa-age-card[data-age-key="6-9"]{   --pa-card-age:var(--pa-age-junior) }
.pa-edu .pa-age-card[data-age-key="10-13"]{ --pa-card-age:var(--pa-age-explorer) }
.pa-edu .pa-age-card[data-age-key="14-18"]{ --pa-card-age:var(--pa-age-builder) }
.pa-edu .pa-age-card:hover,.pa-edu .pa-age-card:focus-visible{transform:translateY(-4px);border-color:var(--pa-card-age);
  box-shadow:6px 6px 0 0 color-mix(in oklab,var(--pa-card-age) 26%,var(--pa-paper))}
.pa-edu .pa-age-card:hover::after,.pa-edu .pa-age-card:focus-visible::after{height:11px}

.pa-age-num{font-family:var(--pa-font-display);font-weight:900;font-variation-settings:'SOFT' 70,'WONK' 1;
  font-size:clamp(3.1rem,6vw,4.3rem);line-height:.92;letter-spacing:-.04em;
  color:color-mix(in oklab,var(--pa-card-age) 76%,var(--pa-ink));
  transition:transform .22s var(--pa-ease)}
.pa-edu .pa-age-card:hover .pa-age-num{transform:scale(1.04)}
.pa-age-label{font-size:.92rem;font-weight:600;color:var(--pa-ink-60)}
.pa-age-tag{font-size:1.02rem;font-weight:550;color:var(--pa-ink);max-width:18ch}
.pa-age-count{margin-block-start:auto;padding-block-start:14px;font-size:.86rem;color:var(--pa-ink-40)}
.pa-edu .pa-age-card.is-empty{opacity:.55}
.pa-edu .pa-age-card.is-empty .pa-age-count{color:var(--pa-age-text);font-weight:600}

/* Exit choreography for the two cards not chosen. */
.pa-ages.is-resolving .pa-age-card{pointer-events:none}
.pa-edu .pa-age-card.is-leaving{opacity:0;transform:scale(.92) translateY(6px)}
.pa-edu .pa-age-card.is-chosen{transform:scale(1.03);border-color:var(--pa-card-age);
  box-shadow:7px 7px 0 0 var(--pa-card-age)}

/* The compact bar the chooser becomes. Not a FLIP animation: a
   crossfade between two states in the same container survives any
   theme's layout, which a measured transform does not. */
.pa-chosen{display:none;align-items:center;flex-wrap:wrap;gap:16px;
  padding:18px clamp(18px,2.2vw,26px);background:var(--pa-surface);
  border:2px solid var(--pa-age);border-radius:var(--pa-radius);box-shadow:var(--pa-shadow);
  opacity:0;transform:translateY(-8px);transition:opacity .3s var(--pa-ease-out),transform .3s var(--pa-ease-out)}
.pa-chosen.is-on{display:flex;opacity:1;transform:none}
.pa-chosen-num{font-family:var(--pa-font-display);font-weight:900;font-variation-settings:'SOFT' 70,'WONK' 1;
  font-size:2.1rem;line-height:1;letter-spacing:-.04em;color:var(--pa-age-text)}
.pa-chosen-text{font-weight:600}
.pa-chosen-text span{display:block;font-size:.85rem;font-weight:450;color:var(--pa-ink-40)}
.pa-edu .pa-chosen-change{margin-inline-start:auto;display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:var(--pa-radius-pill);border:2px solid var(--pa-rule);
  font-size:.92rem;font-weight:600;transition:border-color .15s,background-color .15s}
.pa-edu .pa-chosen-change:hover{border-color:var(--pa-age);background:var(--pa-age-wash)}

/* ------------------------------------------------------------------
   Courses
   ------------------------------------------------------------------ */
.pa-courses{padding-block:clamp(10px,2vw,20px) clamp(56px,7vw,92px);
  opacity:0;max-height:0;overflow:hidden;pointer-events:none;
  transition:opacity .34s var(--pa-ease-out)}
.pa-courses.is-on{opacity:1;max-height:none;overflow:visible;pointer-events:auto}

.pa-section-head{max-width:54ch;margin-block-end:clamp(22px,3vw,34px)}
.pa-section-head .pa-lede{margin-block-start:10px}

/* min-width:0 on every link in this chain, and again on the flex items
   inside it. A grid item and a flex item both default to a minimum size
   of their CONTENT, so one long row of category chips sizes the whole
   control block wider than the page and takes the search field with it.
   This was only visible after an age had been chosen, because until then
   the whole section is collapsed to zero height. */
.pa-controls{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-block-end:22px;min-width:0}
.pa-controls>*{min-width:0}
.pa-search{position:relative;display:flex;align-items:center}
.pa-search svg{position:absolute;inset-inline-start:16px;color:var(--pa-ink-40);pointer-events:none}
.pa-search input{width:100%;min-width:0;padding:14px 18px 14px 46px;border:2px solid var(--pa-rule);
  border-radius:var(--pa-radius-pill);background:var(--pa-surface);font:inherit;color:var(--pa-ink);
  transition:border-color .16s var(--pa-ease)}
.pa-edu[dir="rtl"] .pa-search input{padding:14px 46px 14px 18px}
.pa-search input::placeholder{color:var(--pa-ink-40)}
.pa-search input:focus{border-color:var(--pa-age);outline:none}

.pa-controls-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-width:0}
.pa-chips{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;padding-block:4px;
  flex:1 1 220px;min-width:0;scroll-snap-type:x proximity}
.pa-chips::-webkit-scrollbar{display:none}
.pa-edu .pa-chip{flex:none;scroll-snap-align:start;padding:9px 17px;border-radius:var(--pa-radius-pill);
  border:2px solid var(--pa-rule);background:var(--pa-surface);font-size:.9rem;font-weight:600;
  color:var(--pa-ink-60);white-space:nowrap;transition:all .15s var(--pa-ease)}
.pa-edu .pa-chip:hover{border-color:var(--pa-age);color:var(--pa-age-text)}
.pa-edu .pa-chip[aria-pressed="true"]{background:var(--pa-age);border-color:var(--pa-age);color:#fff}
.pa-select-wrap{position:relative;display:flex;align-items:center}
.pa-select-wrap svg{position:absolute;inset-inline-end:14px;pointer-events:none;color:var(--pa-ink-40)}
.pa-edu .pa-select{appearance:none;-webkit-appearance:none;padding:11px 40px 11px 16px;border:2px solid var(--pa-rule);
  border-radius:var(--pa-radius-pill);background:var(--pa-surface);font:inherit;font-size:.9rem;font-weight:600;
  color:var(--pa-ink);cursor:pointer}
.pa-edu[dir="rtl"] .pa-select{padding:11px 16px 11px 40px}
.pa-edu .pa-select:focus{border-color:var(--pa-age);outline:none}

.pa-result-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-block-end:20px;padding-block-end:14px;border-block-end:1px solid var(--pa-rule)}
.pa-edu .pa-clear{font-size:.9rem;font-weight:600;color:var(--pa-age-text);text-decoration:underline;text-underline-offset:3px}

.pa-grid{display:grid;gap:clamp(16px,2.2vw,26px);grid-template-columns:1fr}
@media (min-width:600px){ .pa-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .pa-grid{grid-template-columns:repeat(3,1fr)} }

.pa-edu .pa-card{display:flex;flex-direction:column;background:var(--pa-surface);
  border:2px solid var(--pa-rule);border-radius:var(--pa-radius);overflow:hidden;text-align:start;
  transition:transform .2s var(--pa-ease),box-shadow .2s var(--pa-ease),border-color .2s var(--pa-ease)}
.pa-edu .pa-card:hover,.pa-edu .pa-card:focus-visible{transform:translateY(-5px);border-color:var(--pa-age);box-shadow:var(--pa-shadow-lift)}

/* The notched cover corner. A small, cheap, specific device - it is
   what stops these from being identical rounded rectangles. */
.pa-card-cover{position:relative;aspect-ratio:16/10;background:var(--pa-cover-default);overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 78%,calc(100% - 34px) 100%,0 100%)}
.pa-card-cover img{width:100%;height:100%;object-fit:cover}
.pa-card-badges{position:absolute;inset-block-start:12px;inset-inline-start:12px;display:flex;gap:7px;flex-wrap:wrap}
.pa-badge{padding:5px 11px;border-radius:var(--pa-radius-pill);font-size:.76rem;font-weight:700;background:#fff;color:var(--pa-ink)}
.pa-badge-feat{background:var(--pa-accent);color:#2A1C04}
.pa-badge-age{position:absolute;inset-block-end:12px;inset-inline-start:12px;
  padding:5px 12px;border-radius:var(--pa-radius-pill);background:rgba(255,255,255,.93);
  font-size:.78rem;font-weight:700;color:var(--pa-ink)}
.pa-card-body{display:flex;flex-direction:column;gap:9px;padding:clamp(17px,2vw,22px);flex:1}
.pa-card-cat{font-size:.82rem;font-weight:650;color:var(--pa-age-text)}
.pa-card-desc{font-size:.94rem;color:var(--pa-ink-60);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Facts sit on ONE line, never wrapping. A wrapped row would put a
   leading divider at the start of the second line, and no CSS selector
   can find "the first item on a wrapped line" to suppress it. The card
   therefore shows two facts; the rest are in the detail view. */
.pa-card-facts{display:flex;flex-wrap:nowrap;gap:0;margin-block-start:4px;min-width:0}
.pa-card-fact{font-size:.82rem;color:var(--pa-ink-40);padding-inline:11px;
  border-inline-start:1px solid var(--pa-rule);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-card-fact:first-child{padding-inline-start:0;border-inline-start:0}
.pa-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-block-start:auto;padding-block-start:15px;border-block-start:1px solid var(--pa-rule)}
.pa-card-price{font-family:var(--pa-font-display);font-weight:800;font-size:1.22rem;font-variation-settings:'SOFT' 50,'WONK' 0}
.pa-card-price.is-free{color:var(--pa-age-text)}
.pa-card-go{font-size:.9rem;font-weight:650;color:var(--pa-age-text)}
.pa-card-ask{font-size:.88rem;font-weight:650;color:var(--pa-age-text);text-decoration:underline;text-underline-offset:3px}

.pa-empty{padding:clamp(40px,6vw,72px) 24px;text-align:center;border:2px dashed var(--pa-rule);border-radius:var(--pa-radius)}
.pa-empty .pa-lede{margin:12px auto 22px;max-width:40ch}

/* ------------------------------------------------------------------
   Video testimonials
   ------------------------------------------------------------------ */
.pa-videos{padding-block:clamp(50px,7vw,88px);background:var(--pa-surface);border-block:1px solid var(--pa-rule)}
/* ---- The carousel ----
   A real overflow-x scroller with snap points, not a transform slider.
   Touch swipe, trackpad, shift-scroll and keyboard all work with no
   JavaScript, so a script that fails to load leaves a scrollable row
   rather than one frozen card. The buttons and progress bar are printed
   hidden and revealed by the script only when there is more to see. */
.pa-vwall{position:relative;--pa-vgap:clamp(16px,2.2vw,24px);--pa-vper:1}
@media (min-width:620px){  .pa-vwall{--pa-vper:2} }
@media (min-width:1000px){ .pa-vwall{--pa-vper:3} }

.pa-vwall-track{
  display:flex;gap:var(--pa-vgap);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  /* Vertical room for the cards' hover lift and offset shadow, which
     would otherwise be clipped by the scroll container. */
  padding-block:6px 12px;
  margin-block:-6px -12px;
}
.pa-vwall-track::-webkit-scrollbar{display:none}
.pa-vwall-track:focus-visible{outline:3px solid var(--pa-age-text);outline-offset:4px;border-radius:var(--pa-radius)}

.pa-vwall-item{
  flex:0 0 auto;display:flex;scroll-snap-align:start;
  width:calc((100% - (var(--pa-vper) - 1) * var(--pa-vgap)) / var(--pa-vper));
}
/* On a phone the card stops short of the full width, so the next one peeks
   in and the row reads as scrollable without needing the controls. */
@media (max-width:619px){ .pa-vwall-item{width:84%} }
.pa-vwall-item>.pa-vcard{flex:1}

.pa-vwall-nav{display:flex;align-items:center;gap:10px;margin-block-start:18px}
.pa-vwall-nav[hidden]{display:none}
.pa-edu .pa-vnav{width:42px;height:42px;flex:none;border-radius:50%;
  border:2px solid var(--pa-rule);background:var(--pa-surface);color:var(--pa-ink);
  display:grid;place-items:center;
  transition:border-color .15s var(--pa-ease),color .15s var(--pa-ease),opacity .15s var(--pa-ease)}
.pa-edu .pa-vnav:hover:not(:disabled){border-color:var(--pa-age);color:var(--pa-age-text)}
.pa-edu .pa-vnav:disabled{opacity:.34;cursor:default}

.pa-vbar{position:relative;flex:1;min-width:0;height:4px;border-radius:99px;
  background:var(--pa-rule);margin-inline:6px}
.pa-vbar i{position:absolute;inset-block:0;inset-inline-start:0;display:block;
  width:30%;border-radius:99px;background:var(--pa-age)}
.pa-vcount{flex:none;font-size:.84rem;font-weight:650;color:var(--pa-ink-40);
  font-variant-numeric:tabular-nums}

.pa-vcard{display:flex;flex-direction:column;background:var(--pa-paper);border:2px solid var(--pa-rule);
  border-radius:var(--pa-radius);overflow:hidden;height:100%;
  transition:transform .2s var(--pa-ease),box-shadow .2s var(--pa-ease),border-color .2s var(--pa-ease)}
.pa-vcard:hover{transform:translateY(-4px);border-color:var(--pa-age);box-shadow:var(--pa-shadow)}
.pa-edu .pa-vcard-play{display:block;width:100%}
.pa-vcard-media{position:relative;display:block;aspect-ratio:16/9;background:var(--pa-cover-default);overflow:hidden}
.pa-vcard-media.is-blank{background:var(--pa-cover-ai)}
.pa-vcard-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--pa-ease)}
.pa-edu .pa-vcard-play:hover .pa-vcard-media img{transform:scale(1.045)}
.pa-vcard-icon{position:absolute;inset:0;margin:auto;width:58px;height:58px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--pa-ink);display:grid;place-items:center;
  padding-inline-start:4px;transition:transform .2s var(--pa-ease),background-color .2s var(--pa-ease)}
.pa-edu .pa-vcard-play:hover .pa-vcard-icon{transform:scale(1.1);background:#fff}
.pa-vcard-time{position:absolute;inset-block-end:10px;inset-inline-end:10px;padding:3px 9px;border-radius:6px;
  background:rgba(12,14,34,.82);color:#fff;font-size:.76rem;font-weight:650}
.pa-vcard-body{padding:18px;display:flex;flex-direction:column;gap:11px;flex:1}
.pa-vcard-quote{font-family:var(--pa-font-display);font-weight:600;font-size:1.04rem;line-height:1.38;
  font-variation-settings:'SOFT' 50,'WONK' 0}
.pa-vcard-person{margin-block-start:auto;font-size:.88rem}
.pa-vcard-name{display:block;font-weight:700}
.pa-vcard-role{display:block;color:var(--pa-ink-40)}

/* ------------------------------------------------------------------
   CTA
   ------------------------------------------------------------------ */
.pa-cta{padding-block:clamp(54px,7vw,90px)}
.pa-cta-in{position:relative;overflow:hidden;padding:clamp(32px,5vw,60px);border-radius:var(--pa-radius);
  background:var(--pa-ink);color:#fff;text-align:center}
.pa-cta-in::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:radial-gradient(90% 120% at 100% 0%,color-mix(in oklab,var(--pa-age) 72%,transparent),transparent 62%)}
.pa-cta-body{position:relative;z-index:1}
.pa-cta .pa-lede{color:rgba(255,255,255,.76);margin:14px auto 28px;max-width:46ch}
.pa-cta .pa-btn-primary{background:#fff;color:var(--pa-ink);box-shadow:0 2px 0 0 rgba(0,0,0,.35)}
.pa-cta .pa-btn-primary:hover{box-shadow:0 4px 0 0 rgba(0,0,0,.35)}

/* ------------------------------------------------------------------
   WhatsApp float
   ------------------------------------------------------------------ */
.pa-edu .pa-wa{position:fixed;inset-block-end:20px;inset-inline-end:20px;z-index:45;
  display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border-radius:var(--pa-radius-pill);
  background:#1EA952;color:#fff;font-weight:650;font-size:.94rem;text-decoration:none;
  box-shadow:0 6px 22px rgba(12,14,34,.22);transition:transform .18s var(--pa-ease)}
.pa-edu .pa-wa:hover{transform:translateY(-3px)}
.pa-edu .pa-wa span{display:none}
@media (min-width:600px){ .pa-wa span{display:inline} }

/* ------------------------------------------------------------------
   Modals
   ------------------------------------------------------------------ */
.pa-overlay{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:clamp(12px,3vw,32px);
  background:rgba(14,18,44,.62);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .22s var(--pa-ease)}
.pa-overlay.is-on{opacity:1}
.pa-overlay[hidden]{display:none}
.pa-modal{width:min(820px,100%);max-height:min(88vh,980px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--pa-paper);border-radius:var(--pa-radius);position:relative;
  transform:translateY(14px) scale(.985);transition:transform .26s var(--pa-ease-out)}
.pa-overlay.is-on .pa-modal{transform:none}
.pa-edu .pa-modal-close{position:sticky;top:0;float:inline-end;margin:12px;z-index:3;
  width:40px;height:40px;border-radius:50%;background:var(--pa-surface);display:grid;place-items:center;
  box-shadow:0 2px 10px rgba(14,18,44,.16);transition:background-color .15s}
.pa-edu .pa-modal-close:hover{background:var(--pa-age);color:#fff}
.pa-modal-pad{padding:clamp(20px,3.4vw,38px)}

.pa-detail-cover{aspect-ratio:16/9;background:var(--pa-cover-default);position:relative;overflow:hidden}
.pa-detail-cover img,.pa-detail-cover iframe,.pa-detail-cover video{width:100%;height:100%;object-fit:cover;border:0;display:block}
.pa-detail-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-block-end:14px}
.pa-detail-title{margin-block-end:12px}
.pa-detail-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:14px;
  margin-block:24px;padding-block:20px;border-block:1px solid var(--pa-rule)}
.pa-detail-fact dt{font-size:.8rem;color:var(--pa-ink-40);margin-block-end:3px}
.pa-detail-fact dd{margin:0;font-weight:650}
.pa-section{margin-block-start:30px}
.pa-section>h3{margin-block-end:14px}
.pa-ticks{display:grid;gap:10px}
@media (min-width:620px){ .pa-ticks{grid-template-columns:repeat(2,1fr)} }
.pa-tick{display:flex;gap:10px;font-size:.96rem}
.pa-tick svg{flex:none;margin-block-start:3px;color:var(--pa-age-text)}
.pa-plain{display:grid;gap:8px}
.pa-plain li{display:flex;gap:10px;font-size:.96rem;color:var(--pa-ink-60)}
.pa-plain li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--pa-age);margin-block-start:9px}

.pa-acc{display:grid;gap:9px}
.pa-acc-item{background:var(--pa-surface);border:1px solid var(--pa-rule);border-radius:var(--pa-radius-sm);overflow:hidden}
.pa-edu .pa-acc-btn{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  padding:15px 18px;text-align:start;font-weight:650;font-size:.98rem}
.pa-edu .pa-acc-btn svg{flex:none;transition:transform .22s var(--pa-ease);color:var(--pa-ink-40)}
.pa-acc-item.is-open .pa-acc-btn svg{transform:rotate(180deg)}
.pa-acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s var(--pa-ease)}
.pa-acc-item.is-open .pa-acc-panel{grid-template-rows:1fr}
.pa-acc-inner{overflow:hidden}
.pa-acc-body{padding:0 18px 17px;color:var(--pa-ink-60);font-size:.95rem}
.pa-acc-body li{display:flex;gap:10px;padding-block:5px}
.pa-acc-body li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--pa-age);margin-block-start:9px}
.pa-acc-count{font-size:.82rem;font-weight:500;color:var(--pa-ink-40)}

.pa-quotes{display:grid;gap:14px}
@media (min-width:620px){ .pa-quotes{grid-template-columns:repeat(2,1fr)} }
.pa-quote{padding:20px;background:var(--pa-surface);border:1px solid var(--pa-rule);border-radius:var(--pa-radius-sm)}
.pa-quote blockquote{font-family:var(--pa-font-display);font-weight:600;font-size:1rem;line-height:1.42;margin-block-end:12px}
.pa-quote-name{font-size:.88rem;font-weight:700}
.pa-quote-role{font-size:.84rem;color:var(--pa-ink-40)}

.pa-teacher{display:flex;gap:16px;align-items:flex-start;padding:20px;background:var(--pa-surface);
  border:1px solid var(--pa-rule);border-radius:var(--pa-radius-sm)}
.pa-teacher-av{flex:none;width:52px;height:52px;border-radius:50%;background:var(--pa-age);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:1.05rem}
.pa-teacher-name{font-weight:700}
.pa-teacher-title{font-size:.88rem;color:var(--pa-age-text);margin-block-end:8px}
.pa-teacher-bio{font-size:.94rem;color:var(--pa-ink-60)}

.pa-detail-cta{position:sticky;inset-block-end:0;margin-block-start:32px;
  padding:18px clamp(20px,3.4vw,38px);background:color-mix(in oklab,var(--pa-paper) 92%,transparent);
  backdrop-filter:blur(8px);border-block-start:1px solid var(--pa-rule);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.pa-detail-cta .pa-card-price{font-size:1.4rem}
.pa-detail-cta .pa-btn{margin-inline-start:auto}

/* ---- Enrollment form ---- */
.pa-form{display:grid;gap:16px}
.pa-form-row{display:grid;gap:16px}
@media (min-width:600px){ .pa-form-row{grid-template-columns:repeat(2,1fr)} }
.pa-field label{display:block;font-size:.9rem;font-weight:650;margin-block-end:6px}
.pa-field .pa-req{color:var(--pa-age-text)}
.pa-edu .pa-input{width:100%;padding:12px 15px;border:2px solid var(--pa-rule);border-radius:var(--pa-radius-sm);
  background:var(--pa-surface);font:inherit;color:var(--pa-ink);transition:border-color .16s var(--pa-ease)}
.pa-edu .pa-input:focus{border-color:var(--pa-age);outline:none}
textarea.pa-input{resize:vertical;min-height:92px}
.pa-field-hint{font-size:.82rem;color:var(--pa-ink-40);margin-block-start:5px}
.pa-field-err{font-size:.84rem;font-weight:600;color:#C32B4B;margin-block-start:5px}
.pa-field.is-bad .pa-input{border-color:#C32B4B}
.pa-form-note{padding:14px 16px;background:var(--pa-age-wash);border-radius:var(--pa-radius-sm);font-size:.9rem}
.pa-form-error{padding:13px 16px;border-radius:var(--pa-radius-sm);background:#FDECEF;color:#8E1F38;font-size:.92rem;font-weight:600}
.pa-honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.pa-done{text-align:center;padding-block:20px}
.pa-done-mark{width:68px;height:68px;margin:0 auto 20px;border-radius:50%;background:var(--pa-age);color:#fff;display:grid;place-items:center}

/* ---- Video lightbox ---- */
.pa-vmodal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:clamp(14px,4vw,48px)}
.pa-vmodal[hidden]{display:none}
.pa-vmodal-backdrop{position:absolute;inset:0;background:rgba(10,12,30,.86);backdrop-filter:blur(4px)}
.pa-vmodal-inner{position:relative;width:min(960px,100%)}
.pa-vmodal-frame{aspect-ratio:16/9;background:#000;border-radius:var(--pa-radius);overflow:hidden}
.pa-vmodal-frame iframe,.pa-vmodal-frame video{width:100%;height:100%;border:0;display:block}
.pa-edu .pa-vmodal-close{position:absolute;inset-block-start:-52px;inset-inline-end:0;width:40px;height:40px;
  border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center}
.pa-edu .pa-vmodal-close:hover{background:rgba(255,255,255,.26)}

/* ------------------------------------------------------------------
   Reveal on scroll
   ------------------------------------------------------------------
   Deliberately dull: a short fade, once, never repeated. The age
   transition is the only thing on this page allowed to perform.
   ------------------------------------------------------------------ */
.pa-reveal{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--pa-ease-out),transform .5s var(--pa-ease-out);
  transition-delay:calc(var(--pa-reveal-i,0) * 55ms)}
.pa-reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .pa-edu *,.pa-edu *::before,.pa-edu *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .pa-reveal{opacity:1;transform:none}
}


/* ==================================================================
   SINGLE COURSE PAGE
   ================================================================== */

/* Only what the academy stylesheet does not already cover. Everything
   else - tokens, buttons, accordions, cards, the video wall - is shared,
   which is why this block is short. */
.pa-edu-single{padding-block:clamp(26px,4vw,48px) clamp(56px,7vw,92px)}
.pa-edu .pa-crumb{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;font-weight:600;
  color:var(--pa-ink-40);text-decoration:none;margin-block-end:22px;transition:color .15s}
.pa-edu .pa-crumb:hover{color:var(--pa-age-text)}
.pa-single-top{display:grid;gap:clamp(26px,4vw,44px);align-items:start}
@media (min-width:1000px){ .pa-single-top{grid-template-columns:1.25fr .75fr} }
.pa-single-title{margin-block:14px 16px;max-width:26ch;text-wrap:balance}
.pa-single-badges{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.pa-single-media{border-radius:var(--pa-radius);overflow:hidden;background:var(--pa-cover-default);
  aspect-ratio:16/9;position:relative}
.pa-single-media img,.pa-single-media iframe,.pa-single-media video{width:100%;height:100%;object-fit:cover;border:0;display:block}

/* The buy panel sticks on wide screens: on a long course page the price
   and the request button are the two things a parent scrolls back up
   for, so they stay in reach instead. */
.pa-buy{background:var(--pa-surface);border:2px solid var(--pa-rule);border-radius:var(--pa-radius);
  padding:clamp(20px,2.4vw,26px);box-shadow:var(--pa-shadow)}
@media (min-width:1000px){ .pa-buy{position:sticky;top:92px} }
.pa-buy-price{font-family:var(--pa-font-display);font-weight:800;font-size:2.2rem;line-height:1;
  font-variation-settings:'SOFT' 50,'WONK' 0;margin-block-end:4px}
.pa-buy-price.is-free{color:var(--pa-age-text)}
.pa-buy-note{font-size:.86rem;color:var(--pa-ink-40);margin-block-end:18px}
.pa-buy-facts{display:grid;gap:11px;margin-block:18px;padding-block:18px;border-block:1px solid var(--pa-rule)}
.pa-buy-fact{display:flex;justify-content:space-between;gap:14px;font-size:.92rem}
.pa-buy-fact dt{color:var(--pa-ink-40)}
.pa-buy-fact dd{margin:0;font-weight:650;text-align:end}
.pa-single-body{max-width:68ch;margin-block-start:clamp(34px,5vw,56px)}
.pa-single-body>.pa-section:first-child{margin-block-start:0}
.pa-prose{color:var(--pa-ink-60);font-size:1.02rem}
.pa-prose p{margin-block-end:14px}

/* ==================================================================
   LANGUAGE SWITCH (header)
   ================================================================== */
.pa-edu .pa-langsw{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;
  border-radius:var(--pa-radius-pill);border:2px solid var(--pa-rule);
  font-size:.9rem;font-weight:650;color:var(--pa-ink-60);text-decoration:none;
  transition:border-color .15s var(--pa-ease),color .15s var(--pa-ease)}
.pa-edu .pa-langsw:hover{border-color:var(--pa-age);color:var(--pa-age-text)}
@media (max-width:560px){ .pa-edu .pa-langsw span{display:none} .pa-edu .pa-langsw{padding:9px 11px} }

/* ==================================================================
   HERO — BACKGROUND IMAGE
   ------------------------------------------------------------------
   The photo covers the whole hero, edge to edge, with the text on top.
   A dark gradient sits between them so white text is readable over any
   photo; its strength is the Overlay darkness setting. The graph-paper
   grid is dropped here - two textures behind one headline is one too
   many.
   ================================================================== */
.pa-hero.is-bg{color:#fff;min-height:clamp(480px,74vh,760px);display:flex;align-items:center;
  padding-block:clamp(72px,10vw,128px) clamp(56px,7vw,96px)}
.pa-hero.is-bg::before{display:none}
.pa-hero.is-bg>.pa-edu-wrap{width:100%}
.pa-hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  transform:scale(1.04);animation:pa-hero-settle 1.6s var(--pa-ease-out) forwards}
@keyframes pa-hero-settle{to{transform:scale(1)}}
.pa-hero.is-bg::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
.pa-hero.is-overlay-light::after{background:linear-gradient(180deg,rgba(10,14,34,.18),rgba(10,14,34,.5))}
.pa-hero.is-overlay-medium::after{background:linear-gradient(180deg,rgba(10,14,34,.38),rgba(10,14,34,.7))}
.pa-hero.is-overlay-strong::after{background:linear-gradient(180deg,rgba(10,14,34,.6),rgba(10,14,34,.86))}
.pa-hero.is-bg .pa-hero-in{position:relative;z-index:1}
.pa-hero.is-bg .pa-hero-title{text-shadow:0 2px 24px rgba(0,0,0,.25)}
.pa-hero.is-bg .pa-hero-eyebrow{color:#fff}
.pa-hero.is-bg .pa-hero-eyebrow::before{background:#fff}
.pa-hero.is-bg .pa-lede{color:rgba(255,255,255,.9)}
.pa-hero.is-bg .pa-btn-ghost{border-color:rgba(255,255,255,.6);color:#fff}
.pa-hero.is-bg .pa-btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff}
.pa-hero.is-bg .pa-proof{border-block-start-color:rgba(255,255,255,.28)}
.pa-hero.is-bg .pa-proof-item{border-inline-start-color:rgba(255,255,255,.28)}
.pa-hero.is-bg .pa-proof-item:first-child{border-inline-start:0}
.pa-hero.is-bg .pa-proof-label{color:rgba(255,255,255,.78)}

/* Fallback for when Full-width pages is OFF and the academy sits inside the
   theme's content column: the hero alone breaks out to the screen edges.
   --pa-sbw (set by a tiny script) removes the scrollbar from 100vw so the
   page does not scroll sideways on Windows. */
.pa-edu--boxed .pa-hero{margin-inline:calc(50% - 50vw + var(--pa-sbw,0px) / 2)}

/* ==================================================================
   STATS — rise in one after another, counting as they land
   ================================================================== */
.pa-proof.is-pending .pa-proof-item{opacity:0;transform:translateY(12px)}
.pa-proof.is-in .pa-proof-item{opacity:1;transform:none;
  transition:opacity .55s var(--pa-ease-out),transform .55s var(--pa-ease-out);
  transition-delay:calc(var(--pa-reveal-i,0) * 140ms)}
.pa-proof-value{font-variant-numeric:tabular-nums}

/* ==================================================================
   PACKAGES
   ================================================================== */
.pa-packages{padding-block:clamp(10px,2vw,22px) clamp(48px,6vw,80px)}
.pa-packages[hidden]{display:none}
.pa-pkg-grid{display:grid;gap:clamp(18px,2.4vw,28px);grid-template-columns:1fr;align-items:stretch;margin-block-start:8px}
@media (min-width:720px){
  .pa-pkg-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px;margin-inline:auto}
  .pa-pkg-grid[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pa-pkg-grid[data-count="many"]{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
  .pa-pkg-grid[data-count="1"]{max-width:440px;margin-inline:auto}
}

.pa-pkg-card{position:relative;display:flex;flex-direction:column;gap:14px;
  padding:clamp(26px,3vw,36px) clamp(22px,2.6vw,30px) clamp(22px,2.6vw,28px);
  background:var(--pa-surface);border:2px solid var(--pa-rule);border-radius:var(--pa-radius);
  transition:transform .2s var(--pa-ease),box-shadow .2s var(--pa-ease),border-color .2s var(--pa-ease)}
.pa-pkg-card.is-featured{border-color:var(--pa-age);box-shadow:var(--pa-shadow-lift)}
.pa-pkg-card:hover{transform:translateY(-4px);border-color:var(--pa-age);box-shadow:var(--pa-shadow-lift)}

.pa-pkg-badge{position:absolute;inset-block-start:-14px;inset-inline-start:50%;transform:translateX(-50%);
  white-space:nowrap;padding:6px 16px;border-radius:var(--pa-radius-pill);
  background:var(--pa-age);color:#fff;font-size:.8rem;font-weight:700;
  box-shadow:0 2px 0 0 color-mix(in oklab,var(--pa-age) 55%,var(--pa-ink))}
.pa-edu[dir="rtl"] .pa-pkg-badge{transform:translateX(50%)}

.pa-pkg-title{font-size:clamp(1.3rem,2vw,1.6rem);text-align:center;margin-block-start:4px}
.pa-pkg-sub{text-align:center;color:var(--pa-ink-60);font-size:.95rem;margin-block-start:-6px}

.pa-pkg-price{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:8px;
  padding-block:6px;text-align:center}
.pa-pkg-was{color:var(--pa-ink-40);text-decoration:line-through;font-size:1.1rem;font-weight:600}
.pa-pkg-now{font-family:var(--pa-font-display);font-weight:800;font-size:clamp(2.1rem,4vw,2.9rem);
  line-height:1;color:var(--pa-age-text);font-variation-settings:'SOFT' 50,'WONK' 0}
.pa-pkg-cur{font-weight:700;color:var(--pa-ink-60);font-size:1rem}
.pa-pkg-period{flex-basis:100%;color:var(--pa-ink-40);font-size:.86rem}

.pa-pkg-feats{display:grid;gap:11px;padding-block:6px;border-block-start:1px solid var(--pa-rule);margin-block-start:4px}
.pa-pkg-feat{display:flex;gap:10px;align-items:flex-start;font-size:.95rem}
.pa-pkg-feat svg{flex:none;margin-block-start:2px;color:var(--pa-age-text)}
.pa-pkg-card .pa-btn-block{margin-block-start:auto}

/* ==================================================================
   FOOTER
   ------------------------------------------------------------------
   A light footer on the surface colour rather than a dark slab, so
   admin-uploaded badge and payment logos - which are almost always
   dark marks on transparent - stay readable without a plate behind
   each one.
   ================================================================== */
.pa-foot{background:var(--pa-surface);border-block-start:1px solid var(--pa-rule);
  padding-block:clamp(40px,5vw,64px) clamp(24px,3vw,32px);margin-block-start:clamp(10px,2vw,20px)}
/* A wrapping flex row, not a fixed grid. Every column is optional, and with
   a fixed four-track grid an empty column left the brand block stranded in
   the second track - in the middle of the footer - instead of at the far
   edge. margin-inline-start:auto on the brand pushes it to the end however
   many columns come before it, in either direction. */
.pa-foot-top{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,56px);align-items:flex-start}
.pa-foot-col{flex:0 0 auto;min-width:0}

.pa-foot-h{font-size:.82rem;font-weight:750;letter-spacing:.04em;text-transform:uppercase;
  color:var(--pa-ink-40);margin-block-end:14px}
.pa-foot-list{display:grid;gap:9px}
.pa-foot-list a{color:var(--pa-ink-60);text-decoration:none;font-size:.95rem;transition:color .15s}
.pa-foot-list a:hover{color:var(--pa-age-text)}

.pa-foot-social{display:flex;flex-wrap:wrap;gap:10px}
.pa-foot-social a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--pa-age-wash);color:var(--pa-age-text);
  transition:transform .15s var(--pa-ease),background-color .15s var(--pa-ease),color .15s var(--pa-ease)}
.pa-foot-social a:hover{transform:translateY(-3px);background:var(--pa-age);color:#fff}

.pa-foot-brand{text-align:start;flex:1 1 260px;min-width:0}
@media (min-width:720px){ .pa-foot-brand{text-align:end;margin-inline-start:auto;flex:0 1 auto} }
.pa-foot-logo{max-height:52px;width:auto;display:inline-block}
.pa-foot-logo-text{font-size:1.5rem;font-weight:800}
.pa-foot-tagline{color:var(--pa-ink-60);font-size:.95rem;margin-block-start:10px;max-width:34ch}
@media (min-width:720px){ .pa-foot-brand .pa-foot-tagline{margin-inline-start:auto} }

.pa-foot-badges{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.4vw,30px);
  justify-content:center;margin-block-start:clamp(28px,4vw,44px);
  padding-block-start:clamp(24px,3vw,32px);border-block-start:1px solid var(--pa-rule)}
.pa-foot-badges img{max-height:54px;width:auto;opacity:.95}

.pa-foot-pay{display:flex;flex-direction:column;align-items:center;gap:10px;margin-block-start:26px}
.pa-foot-pay-icons{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px}
.pa-foot-pay-icons img{max-height:28px;width:auto}
.pa-foot-pay-note{font-size:.82rem;color:var(--pa-ink-40);letter-spacing:.02em}

.pa-foot-copy{text-align:center;color:var(--pa-ink-40);font-size:.86rem;
  margin-block-start:clamp(24px,3vw,32px);padding-block-start:20px;border-block-start:1px solid var(--pa-rule)}


/* ==================================================================
   HEADER — order, WhatsApp link, mobile menu
   ------------------------------------------------------------------
   Logo · Courses · Contact us · Request a place · language. Below
   900px the two text links fold behind a menu button and open as a
   panel under the header.
   ================================================================== */
.pa-edu .pa-brand-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-edu .pa-head-nav a{display:inline-flex;align-items:center;gap:7px}
.pa-edu .pa-head-wa{color:#1EA952}
.pa-edu .pa-head-act{flex:none}

.pa-edu .pa-burger{display:inline-grid;place-content:center;gap:4px;width:42px;height:42px;flex:none;
  border-radius:12px;border:2px solid var(--pa-rule);background:var(--pa-surface)}
.pa-edu .pa-burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--pa-ink);
  transition:transform .2s var(--pa-ease),opacity .2s var(--pa-ease)}
.pa-head.is-menu-open .pa-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.pa-head.is-menu-open .pa-burger span:nth-child(2){opacity:0}
.pa-head.is-menu-open .pa-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:899px){
  .pa-head{position:sticky}
  .pa-head-in{position:relative}
  .pa-edu .pa-head-nav{display:flex;flex-direction:column;gap:2px;
    position:absolute;inset-inline:0;top:100%;margin:0;padding:10px var(--pa-gutter) 16px;
    background:var(--pa-paper);border-block-end:1px solid var(--pa-rule);
    box-shadow:0 14px 24px -18px rgba(14,18,44,.4);
    opacity:0;transform:translateY(-6px);pointer-events:none;visibility:hidden;
    transition:opacity .2s var(--pa-ease),transform .2s var(--pa-ease),visibility 0s linear .2s}
  .pa-head.is-menu-open .pa-head-nav{opacity:1;transform:none;pointer-events:auto;visibility:visible;
    transition:opacity .2s var(--pa-ease),transform .2s var(--pa-ease)}
  .pa-edu .pa-head-nav a{padding:13px 4px;font-size:1rem;color:var(--pa-ink);border-radius:0;
    border-block-end:1px solid var(--pa-rule)}
  .pa-edu .pa-head-nav a:last-child{border-block-end:0}
  .pa-edu .pa-head-act{margin-inline-start:auto;gap:8px}
}
@media (min-width:900px){
  .pa-edu .pa-burger{display:none}
}

/* ==================================================================
   FULL-WIDTH CANVAS
   ================================================================== */
body.pa-edu-canvas{margin:0}
body.pa-edu-canvas .pa-edu{min-height:100vh;display:flex;flex-direction:column}
body.pa-edu-canvas .pa-foot{margin-block-start:auto}

/* WordPress's admin bar is fixed above the page for logged-in users; the
   sticky header has to sit below it rather than under it. */
.admin-bar .pa-head{top:32px}
@media (max-width:782px){ .admin-bar .pa-head{top:46px} }
@media (max-width:600px){ .admin-bar .pa-head{top:0} }

/* Stats on a phone: a two-column grid instead of a divided row. A divided
   row that wraps puts a stray rule at the start of its second line, and
   nothing in CSS can find "the first item on a wrapped line" to remove it. */
@media (max-width:600px){
  .pa-proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}
  .pa-proof-item,.pa-proof-item:first-child{padding-inline:0;border-inline-start:0}
}

/* On the narrowest phones the logo mark stands alone: a wordmark cut down
   to "Aladd…" reads as broken, the mark on its own does not. */
@media (max-width:430px){
  .pa-edu .pa-brand-name{display:none}
}



/* ==================================================================
   CONTENT PAGES (Privacy, Terms, any page given the academy layout)
   ------------------------------------------------------------------
   A single readable column. The element resets at the top of this file
   strip list bullets and margins for the app-like parts of the site;
   ordinary prose needs them back.
   ================================================================== */
.pa-legal{padding-block:clamp(40px,6vw,80px) clamp(56px,7vw,96px)}
.pa-legal-title{max-width:28ch;margin-block-end:clamp(20px,3vw,32px)}
.pa-legal-body{max-width:72ch;font-size:1.02rem;line-height:1.75;color:var(--pa-ink-60)}
.pa-legal-body h2{font-family:var(--pa-font-display);font-weight:700;font-size:1.3rem;line-height:1.3;
  color:var(--pa-ink);margin-block:2.1em .6em;letter-spacing:-.01em}
.pa-legal-body h3{font-weight:700;font-size:1.08rem;color:var(--pa-ink);margin-block:1.6em .5em}
.pa-legal-body p{margin-block:0 1em}
.pa-legal-body ul,.pa-legal-body ol{margin-block:0 1.1em;padding-inline-start:1.4em;list-style:disc}
.pa-legal-body ol{list-style:decimal}
.pa-legal-body li{margin-block:.35em}
.pa-legal-body a{color:var(--pa-age-text);text-underline-offset:3px}
.pa-legal-body > :first-child{margin-block-start:0;color:var(--pa-ink-40);font-size:.92rem}

/* ==================================================================
   ARABIC
   ------------------------------------------------------------------
   Arabic letters join to their neighbours. The negative tracking used
   on the Latin display type pulls those joins apart, and the tight
   line-height that suits Fraunces leaves Arabic's taller ascenders and
   dots colliding with the next line - which is what pushed the hero
   subtitle into the headline. On right-to-left pages tracking is reset
   to zero everywhere and display line-heights are opened up.

   Placed last on purpose: `.pa-edu[dir="rtl"] *` scores 0-2-0, which
   ties with the `.pa-edu .component` rules and wins only by coming
   after them.
   ================================================================== */
.pa-edu[dir="rtl"],.pa-edu[dir="rtl"] *{letter-spacing:0}
.pa-edu[dir="rtl"] .pa-foot-h{text-transform:none;font-size:.9rem}
.pa-edu[dir="rtl"] .pa-display{line-height:1.3}
.pa-edu[dir="rtl"] .pa-h1{line-height:1.25}
.pa-edu[dir="rtl"] .pa-hero-title{margin-block:18px 22px}
.pa-edu[dir="rtl"] .pa-lede{line-height:1.75}
.pa-edu[dir="rtl"] .pa-age-num,.pa-edu[dir="rtl"] .pa-chosen-num,
.pa-edu[dir="rtl"] .pa-proof-value,.pa-edu[dir="rtl"] .pa-pkg-now{line-height:1.1}
.pa-edu[dir="rtl"] .pa-legal-body{line-height:1.95}
/* The headline's width cap is in ch - the width of a "0" - which in the
   Arabic face is far narrower than a Latin one, so the same 20ch broke the
   Arabic headline onto three lines. An em cap gives it the same shape. */
.pa-edu[dir="rtl"] .pa-hero-title{max-width:13em}