/* =========================================================
   ASPIRA DESIGN SYSTEM — COMPONENTS  v1.0
   Requires tokens.css. Class prefix: none for primitives that the
   landing page already uses (.btn, .container…), "ads-" for the rest.
   ========================================================= */

/* ---------- 1. Base / reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ads-font-sans);
  font-variation-settings: var(--ads-font-variation);
  font-size: var(--ads-text-body-sm);
  line-height: 1.4;
  color: var(--ads-color-text);
  background: var(--ads-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid var(--ads-color-focus); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--ads-yellow-500); color: var(--ads-ink-900); }

/* ---------- 2. Typography ---------- */
h1, .ads-h1 { font-size: var(--ads-text-h1); line-height: var(--ads-leading-h1); font-weight: var(--ads-weight-bold); }
h2, .ads-h2 { font-size: var(--ads-text-h2); line-height: var(--ads-leading-h2); font-weight: var(--ads-weight-bold); }
h3, .ads-h3 { font-size: var(--ads-text-h3); line-height: var(--ads-leading-h3); font-weight: var(--ads-weight-bold); }
h4, .ads-h4 { font-size: var(--ads-text-h4); line-height: var(--ads-leading-h4); font-weight: var(--ads-weight-bold); }
h5, .ads-h5 { font-size: var(--ads-text-h5); line-height: var(--ads-leading-h5); font-weight: var(--ads-weight-semibold); }
h6, .ads-h6 { font-size: var(--ads-text-h6); line-height: var(--ads-leading-h6); font-weight: var(--ads-weight-semibold); }
h1, h2, h3, h4, .ads-h1, .ads-h2, .ads-h3, .ads-h4, .ads-display { font-variation-settings: var(--ads-font-variation-display); }

.ads-subtitle { font-size: var(--ads-text-subtitle); line-height: var(--ads-leading-subtitle); font-weight: var(--ads-weight-medium); color: var(--ads-ink-700); }
.ads-lead     { font-size: var(--ads-text-lead); line-height: var(--ads-leading-lead); color: var(--ads-color-text-lead); }
.ads-body, p  { font-size: var(--ads-text-body); line-height: var(--ads-leading-body); }
.ads-body     { color: var(--ads-color-text-body); }
.ads-body-muted { font-size: var(--ads-text-body); line-height: var(--ads-leading-body); color: var(--ads-color-text-muted); }
.ads-body-sm  { font-size: var(--ads-text-body-sm); line-height: var(--ads-leading-body-sm); color: var(--ads-color-text-body); }
.ads-caption  { font-size: var(--ads-text-caption); line-height: var(--ads-leading-caption); color: var(--ads-color-text-muted); }
.ads-overline { font-size: var(--ads-text-overline); line-height: var(--ads-leading-overline); font-weight: var(--ads-weight-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--ads-color-text-muted); }
.ads-fine     { font-size: var(--ads-text-fine); line-height: var(--ads-leading-fine); color: var(--ads-color-text-muted); }
.ads-kicker   { font-size: var(--ads-text-h5); line-height: var(--ads-leading-h5); font-weight: var(--ads-weight-medium); letter-spacing: 1.2px; }
.ads-display-tight { letter-spacing: -0.05em; font-weight: var(--ads-weight-semibold); }

.ads-text-center { text-align: center; }
.ads-text-inverse { color: var(--ads-color-text-inverse); }
.ads-text-inverse-muted { color: var(--ads-color-text-inverse-muted); }
.ads-text-muted { color: var(--ads-color-text-muted); }
.ads-weight-medium { font-weight: var(--ads-weight-medium); }
.ads-weight-semibold { font-weight: var(--ads-weight-semibold); }
.ads-measure { max-width: 550px; }
strong, b { font-weight: var(--ads-weight-semibold); }

/* Section heading group: title → subtitle (10) → intro (20) */
.ads-heading-group > * + .ads-subtitle { margin-top: var(--ads-space-3); }
.ads-heading-group > * + .ads-body-muted, .ads-heading-group > * + .ads-body { margin-top: var(--ads-space-6); }
.ads-heading-group.ads-text-center .ads-body-muted, .ads-heading-group.ads-text-center .ads-body { margin-inline: auto; max-width: 550px; }

/* ---------- 3. Links ---------- */
.ads-link { color: var(--ads-color-link); text-decoration: underline; text-underline-offset: 3px; font-weight: var(--ads-weight-medium); transition: color var(--ads-duration-fast); }
.ads-link:hover { color: var(--ads-ink-700); text-decoration: none; }
.ads-link-inverse { color: var(--ads-color-link-inverse); text-decoration: underline; text-underline-offset: 3px; font-size: var(--ads-text-button-lg); font-weight: var(--ads-weight-medium); transition: color var(--ads-duration-fast); }
.ads-link-inverse:hover, .ads-link-inverse:focus-visible { color: var(--ads-ink-100); text-decoration: none; }
.ads-link-footer { color: var(--ads-white); transition: color var(--ads-duration-fast); }
.ads-link-footer:hover { color: var(--ads-yellow-500); }

/* ---------- 4. Layout ---------- */
.container { width: min(var(--ads-container), 100% - (var(--ads-gutter) * 2)); margin-inline: auto; }
.ads-stack > * + * { margin-top: var(--ads-stack-gap, var(--ads-space-6)); }
.ads-row { display: flex; flex-wrap: wrap; gap: var(--ads-row-gap, var(--ads-space-6)); align-items: center; }
.ads-grid { display: grid; gap: var(--ads-grid-gap); }
.ads-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ads-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ads-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ads-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); justify-content: space-between; align-items: center; gap: var(--ads-space-9); }

/* Section bands (rounded, separated by 10px) */
.ads-section { padding-block: var(--ads-section-y); }
.ads-band { border-radius: var(--ads-radius-xl); margin-top: var(--ads-section-gap); }
.ads-band-white { background: var(--ads-white); }
.ads-band-soft { background: var(--ads-ink-100); }
.ads-band-dark { background: var(--ads-ink-900); color: var(--ads-white); }
.ads-band-yellow { background: var(--ads-yellow-500); }
.ads-band-bottom { border-radius: 0 0 var(--ads-radius-xl) var(--ads-radius-xl); }
.ads-band-top { border-radius: var(--ads-radius-xl) var(--ads-radius-xl) 0 0; }

/* ---------- 5. Buttons ---------- */
.btn {
  --btn-bg: var(--ads-ink-900);
  --btn-fg: #F9FAFB;
  --btn-border: var(--ads-ink-900);
  --btn-hover-bg: var(--ads-yellow-500);
  --btn-hover-fg: var(--ads-ink-900);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ads-space-4);
  min-height: 44px;
  padding: 12px 26px;
  border: var(--ads-border-2) solid var(--btn-border);
  border-radius: var(--ads-radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--ads-font-sans);
  font-size: var(--ads-text-button-lg);
  font-weight: var(--ads-weight-semibold);
  line-height: 1.26;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--ads-duration-fast) var(--ads-ease), color var(--ads-duration-fast) var(--ads-ease), border-color var(--ads-duration-fast) var(--ads-ease), transform var(--ads-duration-fast) var(--ads-ease);
}
.btn svg { width: 20px; height: 20px; flex: none; }
/* Standard hover: solid yellow, no outline */
.btn:hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-bg); color: var(--btn-hover-fg); outline: none; }
.btn:focus-visible { background: var(--btn-hover-bg); border-color: var(--btn-hover-bg); color: var(--btn-hover-fg); outline: 3px solid var(--ads-ink-900); outline-offset: 3px; }
.btn:focus:not(:focus-visible) { outline: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-color: var(--btn-fg) transparent var(--btn-fg) transparent; animation: ads-spin .8s linear infinite; }
@keyframes ads-spin { to { transform: rotate(360deg); } }

/* Variants */
.btn-primary, .btn-dark { /* default */ }
.btn-secondary, .btn-outline { --btn-bg: transparent; --btn-fg: var(--ads-ink-900); --btn-border: var(--ads-ink-900); padding-block: 13px; padding-inline: 28px; }
.btn-accent { --btn-bg: var(--ads-yellow-500); --btn-fg: var(--ads-ink-900); --btn-border: var(--ads-yellow-500); --btn-hover-bg: var(--ads-ink-900); --btn-hover-fg: var(--ads-white); }
.btn-light { --btn-bg: var(--ads-white); --btn-fg: var(--ads-ink-900); --btn-border: var(--ads-white); }
.btn-outline-light { --btn-bg: transparent; --btn-fg: var(--ads-white); --btn-border: var(--ads-white); }
.btn-whatsapp { --btn-bg: var(--ads-whatsapp); --btn-fg: var(--ads-white); --btn-border: var(--ads-whatsapp); }
/* On a yellow surface the hover turns white */
.ads-on-yellow .btn, .ads-band-yellow .btn { --btn-hover-bg: var(--ads-white); --btn-hover-fg: var(--ads-ink-900); }

/* Sizes */
.btn-xs { min-height: 34px; padding: 7px 14px; font-size: var(--ads-text-button-sm); gap: 6px; }
.btn-sm { min-height: 44px; padding: 10px 20px; font-size: var(--ads-text-button-md); }
.btn-secondary.btn-sm, .btn-outline.btn-sm { padding: 10px 20px; }
.btn-md { min-height: 47px; padding: 10px 28px; font-size: var(--ads-text-button-lg); font-weight: var(--ads-weight-medium); }
.btn-lg { min-height: 51px; }
.btn-block { display: flex; width: 100%; }
.btn-icon { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
.btn-icon.btn-xs { width: 36px; min-height: 36px; }

/* Circular arrow control (carousels) */
.ads-arrow { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--ads-ink-900); transition: background-color var(--ads-duration-fast); }
.ads-arrow svg { width: 48px; height: 48px; }
.ads-arrow:hover { background: var(--ads-yellow-500); }
.ads-arrow:disabled { opacity: .4; cursor: default; background: none; }

/* ---------- 6. Badges, pills, tags ---------- */
.ads-badge { display: inline-grid; place-items: center; min-width: 80px; height: 24px; padding: 0 10px; border-radius: var(--ads-radius-sm); background: var(--ads-ink-100); font-size: var(--ads-text-caption); font-weight: var(--ads-weight-medium); text-transform: uppercase; color: var(--ads-ink-700); }
.ads-badge-yellow { background: var(--ads-yellow-400); }
.ads-badge-dark { background: var(--ads-ink-900); color: var(--ads-white); }
.ads-badge-sky { background: var(--ads-tint-sky); }
.ads-pill { display: inline-flex; align-items: center; justify-content: center; gap: var(--ads-space-2); height: 40px; padding: 0 24px; border-radius: 29px; background: var(--ads-yellow-400); font-size: var(--ads-text-button-lg); font-weight: var(--ads-weight-medium); color: var(--ads-ink-700); }
.ads-pill-white { background: var(--ads-white); }
.ads-rating { display: inline-flex; align-items: center; height: 52px; padding: 0 21px; border-radius: 29px; background: var(--ads-white); font-family: var(--ads-font-alt); font-size: var(--ads-text-button-lg); font-weight: var(--ads-weight-medium); color: var(--ads-ink-700); }
.ads-rating img, .ads-rating svg { width: 28px; height: 28px; }
.ads-rating .ads-rating-num { margin-left: 4px; }
.ads-rating .ads-rating-star { width: 22px; height: 22px; }
.ads-rating .ads-rating-label { margin-left: 2px; }

/* ---------- 7. Icon tiles & chips ---------- */
.ads-icon-tile { display: grid; place-items: center; flex: none; width: 57px; height: 57px; border-radius: 17px; background: var(--ads-pink-200); color: var(--ads-white); }
.ads-icon-tile svg { width: 43px; height: 43px; }
.ads-icon-tile-yellow { background: var(--ads-yellow-500); }
.ads-chip { display: inline-flex; align-items: center; gap: 18px; min-width: 198px; height: 79px; padding: 0 20px 0 11px; border-radius: 17px; background: var(--ads-ink-100); font-size: 18px; line-height: 22.4px; font-weight: var(--ads-weight-medium); }
.ads-name-tag { display: inline-block; padding: 12px 16px; border-radius: 17px; background: var(--ads-white); font-family: var(--ads-font-alt); color: var(--ads-ink-700); box-shadow: var(--ads-shadow-1); }
.ads-name-tag strong { display: block; font-size: 20px; line-height: 25px; font-weight: 600; }
.ads-name-tag span { display: block; font-size: 16px; line-height: 20px; font-weight: 500; }

/* Number circle (steps) */
.ads-step-num { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--ads-step-color, var(--ads-tint-cream)); font-size: 28px; line-height: 22px; font-weight: var(--ads-weight-bold); color: var(--ads-black); }

/* ---------- 8. Cards ---------- */
.ads-card { padding: var(--ads-space-8); border-radius: var(--ads-radius-lg); background: var(--ads-white); }
.ads-card-soft { background: var(--ads-ink-100); }
.ads-card-dark { background: var(--ads-ink-900); color: var(--ads-white); }
.ads-card-sky { background: var(--ads-sky-400); }
.ads-card-xl { border-radius: var(--ads-radius-xl); padding: 37px 41px 48px; }
.ads-card-sm { padding: var(--ads-space-6); border-radius: var(--ads-radius-md); }
.ads-card-elevated { box-shadow: var(--ads-shadow-3); }

/* Feature card (Skills for the AI era) */
.ads-feature-card { display: flex; flex-direction: column; width: 368px; max-width: 100%; min-height: 406px; padding: var(--ads-space-8); border-radius: var(--ads-radius-lg); background: var(--ads-ink-100); }
.ads-feature-card h5, .ads-feature-card .ads-h5 { margin: 0; }
.ads-feature-card p { margin-top: 10px; font-size: var(--ads-text-body); line-height: var(--ads-leading-body); color: var(--ads-ink-700); }
.ads-feature-card img { margin-top: auto; width: 100%; aspect-ratio: 308 / 198; object-fit: cover; border-radius: var(--ads-radius-lg); padding-top: var(--ads-space-5); }

/* Media card with hover overlay (Student projects) */
.ads-media-card { position: relative; overflow: hidden; border-radius: var(--ads-radius-xl); aspect-ratio: 495 / 340; background: var(--ads-ink-800); }
.ads-media-card img { width: 100%; height: 100%; object-fit: cover; }
.ads-media-card-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 68px; background: var(--ads-overlay-card); color: var(--ads-white); opacity: 0; transition: opacity var(--ads-duration-base) var(--ads-ease); }
.ads-media-card-overlay h5 { max-width: 360px; }
.ads-media-card-overlay p { max-width: 360px; margin-top: var(--ads-space-6); font-size: var(--ads-text-body); line-height: 23px; font-weight: var(--ads-weight-medium); color: var(--ads-ink-100); }
.ads-media-card:hover .ads-media-card-overlay, .ads-media-card:focus-within .ads-media-card-overlay, .ads-media-card.is-open .ads-media-card-overlay { opacity: 1; }

/* Photo card with bottom gradient + caption */
.ads-photo-card { position: relative; overflow: hidden; border-radius: var(--ads-radius-2xl); background: var(--ads-black); color: var(--ads-white); }
.ads-photo-card img { width: 100%; height: 100%; object-fit: cover; }
.ads-photo-card::after { content: ''; position: absolute; inset: 0; background: var(--ads-gradient-photo); pointer-events: none; }
.ads-photo-card-caption { position: absolute; left: var(--ads-space-11); right: var(--ads-space-11); bottom: var(--ads-space-11); z-index: 1; }

/* Short video tile — four shapes */
.ads-short { --w: 272px; position: relative; flex: none; width: var(--w); aspect-ratio: 272 / 408; overflow: hidden; background: #D9D9D9; border-radius: calc(var(--w) * 40 / 272); }
.ads-short-r90 { border-radius: calc(var(--w) * 90 / 272); }
.ads-short-r140 { border-radius: calc(var(--w) * 140 / 272); }
.ads-short img { width: 100%; height: 100%; object-fit: cover; }
.ads-short::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.35) 100%); }
.ads-play { position: absolute; left: 50%; bottom: 28px; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; margin-left: -26px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ads-ink-900); box-shadow: 0 6px 20px rgba(0,0,0,.2); transition: transform var(--ads-duration-fast), background-color var(--ads-duration-fast); }
.ads-short:hover .ads-play { background: var(--ads-yellow-500); transform: scale(1.08); }

/* Price */
.ads-price { font-size: var(--ads-text-price); line-height: var(--ads-leading-price); font-weight: var(--ads-weight-bold); letter-spacing: 2.73px; font-variation-settings: var(--ads-font-variation-display); }
.ads-price-currency { font-size: 36px; font-weight: var(--ads-weight-regular); }

/* ---------- 9. Lists ---------- */
.ads-list-bullet li { position: relative; padding-left: 30px; font-size: var(--ads-text-lead); line-height: 30px; }
.ads-list-bullet li::before { content: ''; position: absolute; left: 11px; top: 14px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.ads-list-check { display: flex; flex-direction: column; gap: 17px; }
.ads-list-check li { position: relative; padding-left: 30px; font-size: var(--ads-text-body-sm); line-height: 18px; color: var(--ads-ink-700); }
.ads-list-check li::before { content: ''; position: absolute; left: 0; top: -3px; width: 24px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath d='M15.142 9.98299L10.875 14.25L9.42049 12.7955M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z' stroke='%2300ADEF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat; }
.ads-steps { display: flex; flex-direction: column; gap: var(--ads-space-9); }
.ads-steps li { display: flex; gap: 29px; }
.ads-steps h5 { margin: 0; }
.ads-steps p { margin-top: var(--ads-space-3); font-size: var(--ads-text-body-sm); line-height: var(--ads-leading-body-sm); color: var(--ads-ink-700); }
.ads-feature-list > * + * { margin-top: var(--ads-space-6); }
.ads-feature-list p { margin-top: var(--ads-space-3); font-size: var(--ads-text-body-sm); line-height: var(--ads-leading-body-sm); color: var(--ads-ink-700); }

/* ---------- 10. Accordion ---------- */
.ads-accordion { display: flex; flex-direction: column; gap: var(--ads-space-5); }
.ads-acc-item { background: rgba(230, 232, 234, .2); border: var(--ads-border-3) solid var(--ads-ink-900); border-radius: var(--ads-radius-md); }
.ads-acc-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--ads-space-6); width: 100%; min-height: 82px; padding: 16px 16px 16px 33px; text-align: left; border-radius: 17px; }
.ads-acc-btn > span:first-child { max-width: 360px; font-size: var(--ads-text-h6); line-height: var(--ads-leading-h6); font-weight: var(--ads-weight-semibold); color: var(--ads-ink-900); }
.ads-acc-icon { flex: none; width: 24px; height: 24px; color: var(--ads-ink-700); }
.ads-acc-icon .v { transform-origin: 12px 12px; transition: transform var(--ads-duration-base) var(--ads-ease), opacity var(--ads-duration-base); }
[aria-expanded="true"] .ads-acc-icon .v { transform: rotate(90deg); opacity: 0; }
.ads-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--ads-duration-slow) var(--ads-ease); }
.ads-acc-panel > div { overflow: hidden; }
.is-open > .ads-acc-panel { grid-template-rows: 1fr; }
.ads-acc-item .ads-acc-panel p { max-width: 400px; padding: 0 33px 16px; font-size: var(--ads-text-body-sm); line-height: var(--ads-leading-body-sm); color: var(--ads-ink-900); }
.ads-acc-item.is-open .ads-acc-btn { min-height: 0; padding-bottom: 10px; }
/* Card variant (curriculum weeks) */
.ads-accordion-cards { gap: var(--ads-space-3); }
.ads-accordion-cards .ads-acc-item { background: var(--ads-white); border: 0; }
.ads-accordion-cards .ads-acc-btn { display: grid; grid-template-columns: 1fr 24px; grid-template-areas: "tag icon" "title title"; row-gap: 10px; min-height: 0; padding: 20px; border-radius: var(--ads-radius-md); }
.ads-accordion-cards .ads-badge { grid-area: tag; justify-self: start; }
.ads-accordion-cards .ads-acc-icon { grid-area: icon; }
.ads-accordion-cards .ads-acc-btn > span.ads-acc-title { grid-area: title; max-width: none; font-size: var(--ads-text-h6); line-height: var(--ads-leading-h6); font-weight: var(--ads-weight-semibold); }
.ads-accordion-cards .ads-acc-panel p { max-width: none; padding: 0 20px 20px; color: var(--ads-ink-700); }
.ads-accordion-cards .ads-acc-item.is-open .ads-acc-btn { padding-bottom: 10px; }

/* ---------- 11. Forms ---------- */
.ads-form { display: flex; flex-direction: column; gap: var(--ads-space-3); }
.ads-field { display: block; }
.ads-label { display: block; padding-bottom: 3px; font-size: var(--ads-text-body-sm); line-height: 20px; font-weight: var(--ads-weight-medium); color: var(--ads-ink-900); }
.ads-label .ads-req { color: var(--ads-error-600); margin-left: 2px; }
.ads-control { position: relative; display: flex; align-items: center; min-height: 48px; background: var(--ads-ink-50); border: var(--ads-border-2) solid var(--ads-ink-200); border-radius: var(--ads-radius-xs); transition: border-color var(--ads-duration-fast), box-shadow var(--ads-duration-fast); }
.ads-control:focus-within { border-color: var(--ads-ink-900); box-shadow: var(--ads-shadow-focus); }
.ads-control input, .ads-control select, .ads-control textarea { flex: 1; min-width: 0; width: 100%; min-height: 44px; padding: 0 14px; border: 0; outline: none; background: transparent; font: 500 16px/20px var(--ads-font-sans); color: var(--ads-ink-900); }
.ads-control textarea { min-height: 112px; padding: 12px 14px; resize: vertical; line-height: 22px; }
.ads-control ::placeholder { color: #9AA1A7; font-weight: 400; }
.ads-control-prefix { flex: none; padding-left: 12px; font-size: 16px; font-weight: 500; color: var(--ads-ink-900); }
.ads-control-prefix + input { padding-left: 8px; }
.ads-control-select::after { content: ''; position: absolute; right: 16px; top: 50%; margin-top: -2px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--ads-ink-500); pointer-events: none; }
.ads-control-select select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.ads-control-select select:invalid { color: #8A9197; }
.ads-help { margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--ads-ink-500); }
.ads-error-text { display: none; margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--ads-error-600); }
.ads-field.is-invalid .ads-control { border-color: var(--ads-error-500); box-shadow: var(--ads-shadow-error); }
.ads-field.is-invalid .ads-error-text { display: block; }
.ads-field.is-invalid .ads-help { display: none; }
.ads-field.is-valid .ads-control { border-color: var(--ads-success-200); }
.ads-field.is-disabled .ads-control { opacity: .55; background: var(--ads-ink-100); }
.ads-field.is-disabled input { cursor: not-allowed; }
.ads-form .btn { margin-top: var(--ads-space-6); }
.ads-form-note { margin-top: var(--ads-space-4); text-align: center; font-size: var(--ads-text-body-sm); line-height: 20px; font-weight: var(--ads-weight-medium); }

/* Checkbox / radio */
.ads-check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--ads-text-body-sm); line-height: 22px; color: var(--ads-ink-700); }
.ads-check input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 2px solid var(--ads-ink-200); border-radius: 6px; background: var(--ads-ink-50); display: grid; place-items: center; cursor: pointer; transition: background-color var(--ads-duration-fast), border-color var(--ads-duration-fast); }
.ads-check input[type="radio"] { border-radius: 50%; }
.ads-check input:checked { background: var(--ads-ink-900); border-color: var(--ads-ink-900); }
.ads-check input[type="checkbox"]:checked::after { content: ''; width: 10px; height: 6px; border: 2px solid var(--ads-yellow-500); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.ads-check input[type="radio"]:checked::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ads-yellow-500); }
.ads-check input:focus-visible { outline: 3px solid var(--ads-ink-900); outline-offset: 2px; }

/* Alert */
.ads-alert { padding: 10px 14px; border-radius: var(--ads-radius-xs); font-size: var(--ads-text-caption); line-height: 20px; }
.ads-alert-error { background: var(--ads-error-50); color: #B42318; }
.ads-alert-success { background: var(--ads-success-50); color: var(--ads-success-600); }
.ads-alert-info { background: var(--ads-yellow-50); color: var(--ads-ink-900); border-left: 3px solid var(--ads-yellow-500); }

/* ---------- 12. Avatar & mentor chip ---------- */
.ads-avatar { width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover; background: var(--ads-ink-150); }
.ads-avatar-sm { width: 40px; height: 40px; }
.ads-mentor { display: flex; align-items: flex-start; gap: 16px; width: 284px; max-width: 100%; min-height: 96px; padding: 16px; border-radius: var(--ads-radius-md); background: var(--ads-ink-100); }
.ads-mentor strong { display: block; margin-top: -1px; font-size: var(--ads-text-h6); line-height: 25px; font-weight: var(--ads-weight-semibold); }
.ads-mentor span { display: block; font-size: var(--ads-text-body-sm); line-height: 20px; color: var(--ads-ink-500); }

/* ---------- 13. Carousel controls ---------- */
.ads-dots { display: inline-flex; align-items: center; gap: 17px; height: 48px; padding: 0 30px 0 28px; border-radius: 24px; background: var(--ads-ink-800); }
.ads-dots button { width: 12px; height: 12px; border-radius: 6px; background: var(--ads-ink-700); transition: width var(--ads-duration-base) var(--ads-ease), background-color var(--ads-duration-base); }
.ads-dots button[aria-selected="true"] { width: 64px; background: var(--ads-ink-150); }
.ads-dots button:hover { background: var(--ads-ink-400); }
.ads-dots-light { background: var(--ads-ink-150); }
.ads-dots-light button { background: var(--ads-ink-300); }
.ads-dots-light button[aria-selected="true"] { background: var(--ads-ink-900); }
.ads-scroller { display: flex; gap: var(--ads-space-6); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.ads-scroller::-webkit-scrollbar { display: none; }
.ads-scroller > * { flex: none; scroll-snap-align: start; }

/* ---------- 14. Modal ---------- */
.ads-modal { position: fixed; inset: 0; z-index: var(--ads-z-modal); display: grid; place-items: center; padding: 28px 16px; }
.ads-modal[hidden] { display: none; }
.ads-modal-backdrop { position: absolute; inset: 0; background: var(--ads-overlay-modal); animation: ads-fade var(--ads-duration-fast) ease; }
.ads-modal-panel { position: relative; width: min(602px, 100%); max-height: min(705px, calc(100dvh - 56px)); overflow-y: auto; overscroll-behavior: contain; padding: 32px 20px 20px; background: var(--ads-ink-100); border-radius: var(--ads-radius-lg); animation: ads-pop var(--ads-duration-base) var(--ads-ease); }
.ads-modal-close { position: sticky; top: 0; float: right; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; margin: -8px -4px -32px 0; border-radius: 50%; background: var(--ads-ink-100); transition: background-color var(--ads-duration-fast); }
.ads-modal-close:hover { background: var(--ads-yellow-500); }
@keyframes ads-fade { from { opacity: 0; } }
@keyframes ads-pop { from { opacity: 0; transform: translateY(16px) scale(.98); } }
body.ads-modal-open { overflow: hidden; }

/* ---------- 15. Header, bottom nav, floating button, footer ---------- */
.ads-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ads-space-5); }
.ads-header-logo img { width: 168px; height: 48px; }
.ads-header-actions { display: flex; gap: var(--ads-space-6); }
.ads-bottom-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px var(--ads-gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--ads-white); border-radius: 20px 20px 0 0; box-shadow: 0 -6px 24px rgba(22,26,29,.12); }
.ads-bottom-nav img { width: 92px; }
.ads-bottom-nav-actions { display: flex; gap: var(--ads-space-2); }
.ads-fab { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--ads-whatsapp); color: var(--ads-white); box-shadow: var(--ads-shadow-float); transition: transform var(--ads-duration-fast) var(--ads-ease); }
.ads-fab:hover { transform: scale(1.07); }
.ads-fab svg { width: 30px; height: 30px; }
.ads-fab-fixed { position: fixed; right: 24px; bottom: 24px; z-index: var(--ads-z-float); }
.ads-footer { position: relative; overflow: hidden; padding-top: 72px; background: var(--ads-ink-900); color: var(--ads-white); border-radius: var(--ads-radius-xl) var(--ads-radius-xl) 0 0; }
.ads-footer-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: var(--ads-space-7); font-size: var(--ads-text-caption); line-height: var(--ads-leading-caption); }
.ads-footer-cols ul { display: flex; flex-direction: column; gap: 4px; }
.ads-footer-word { display: block; height: .86em; overflow: hidden; margin-top: 40px; text-align: center; font-size: clamp(90px, 25vw, 340px); line-height: 1; font-weight: var(--ads-weight-bold); letter-spacing: .13em; text-indent: .13em; color: #434341; opacity: .5; user-select: none; font-variation-settings: var(--ads-font-variation-display); -webkit-mask-image: linear-gradient(180deg, #000 55%, rgba(0,0,0,.3) 100%); mask-image: linear-gradient(180deg, #000 55%, rgba(0,0,0,.3) 100%); }

/* ---------- 16. Utilities ---------- */
.ads-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ads-mt-0 { margin-top: 0 !important; } .ads-mt-3 { margin-top: var(--ads-space-3) !important; } .ads-mt-6 { margin-top: var(--ads-space-6) !important; } .ads-mt-8 { margin-top: var(--ads-space-8) !important; } .ads-mt-9 { margin-top: var(--ads-space-9) !important; } .ads-mt-11 { margin-top: var(--ads-space-11) !important; }
.ads-hide-mobile { } .ads-show-mobile { display: none !important; }

/* ---------- 17. Responsive ---------- */
@media (max-width: 1024px) {
  .ads-split, .ads-grid-3, .ads-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ads-split { grid-template-columns: 1fr; }
  .ads-footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .ads-grid-2, .ads-grid-3, .ads-grid-4 { grid-template-columns: 1fr; }
  .btn-lg { min-height: 48px; padding: 12px 22px; }
  .btn-secondary.btn-lg, .btn-outline.btn-lg { padding: 12px 22px; }
  .ads-row-stack-mobile { flex-direction: column; align-items: stretch; }
  .ads-row-stack-mobile .btn { width: 100%; }
  .ads-feature-card { width: 270px; min-height: 340px; padding: 20px; border-radius: 24px; }
  .ads-feature-card p { font-size: 15px; line-height: 22px; }
  .ads-media-card { border-radius: 24px; }
  .ads-media-card-overlay { padding: 0 22px; }
  .ads-media-card-overlay h5 { font-size: 18px; line-height: 23px; }
  .ads-media-card-overlay p { margin-top: 8px; font-size: 14px; line-height: 19px; }
  .ads-short { --w: 180px; }
  .ads-play { width: 44px; height: 44px; margin-left: -22px; bottom: 18px; }
  .ads-step-num { width: 48px; height: 48px; font-size: 22px; }
  .ads-steps { gap: var(--ads-space-7); }
  .ads-steps li { gap: 16px; }
  .ads-acc-item { border-width: 2px; border-radius: 18px; }
  .ads-acc-btn { min-height: 68px; padding: 14px 14px 14px 18px; gap: 12px; }
  .ads-acc-item .ads-acc-panel p { max-width: none; padding: 0 18px 16px; font-size: 15px; line-height: 21px; }
  .ads-card { padding: 24px 20px; }
  .ads-card-xl { padding: 28px 24px; }
  .ads-list-bullet li { padding-left: 22px; font-size: 16px; line-height: 26px; }
  .ads-list-bullet li::before { left: 6px; top: 11px; }
  .ads-photo-card-caption { left: 24px; right: 24px; bottom: 24px; }
  .ads-mentor { padding: 12px; gap: 12px; border-radius: 16px; }
  .ads-mentor .ads-avatar { width: 52px; height: 52px; }
  .ads-mentor strong { font-size: 17px; line-height: 22px; }
  .ads-mentor span { font-size: 14px; line-height: 18px; }
  .ads-dots { height: 40px; gap: 12px; padding: 0 20px; }
  .ads-dots button { width: 10px; height: 10px; }
  .ads-dots button[aria-selected="true"] { width: 44px; }
  .ads-header-logo img { width: 105px; height: 30px; }
  .ads-header-actions { gap: var(--ads-space-2); }
  .ads-fab { width: 54px; height: 54px; }
  .ads-fab svg { width: 28px; height: 28px; }
  .ads-fab-fixed { right: 16px; bottom: 20px; }
  .ads-footer { padding-top: 40px; }
  .ads-hide-mobile { display: none !important; }
  .ads-show-mobile { display: revert !important; }
  .ads-modal { padding: 12px; align-items: end; }
  .ads-modal-panel { max-height: calc(100dvh - 24px); padding: 24px 14px 16px; border-radius: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}