/* =============================================================================
   Ibrahim Hassan Academy — public-site visual system (Prompt 23, retoned Prompt 26)
   One shared stylesheet for every public-facing page (landing-page.html,
   teacher-profile.html, course.html) so the academy has a single, consistent
   identity instead of three independently hand-copied token sets. Logged-in
   dashboard pages keep using css/app-shell.css — this file is public-only.

   Identity: a modern private Arabic-language academy — warm parchment paper,
   deep editorial teal as the primary interactive color, and a muted gold used
   sparingly as a secondary accent (badges, footer, grade picker) — not a
   generic blue SaaS dashboard palette, and not religious/Islamic framing.
   ============================================================================= */

:root{
  /* ---- surface & ink (paper/manuscript, not screen-blue) ---- */
  --paper:#FAF7F2;           /* page background — warm off-white, not clinical white */
  --paper-deep:#F3EDE2;      /* alternating section background */
  --paper-line:#E8DFD1;      /* hairlines/borders on paper */
  --surface:#FFFFFF;         /* cards */
  --ink:#131A26;             /* primary text */
  --ink-soft:#4A5568;        /* secondary text */
  --ink-faint:#718096;       /* tertiary/meta text */

  /* ---- primary: deep editorial teal — the academy's main interactive color ---- */
  --teal:#0F4C42;
  --teal-light:#18685A;      /* hover shade */
  --teal-tint:#EAF4F2;

  /* ---- accent: muted gold, used sparingly (badges, footer, grade picker) ---- */
  --gold:#C5A059;
  --gold-deep:#9E7B32;
  --gold-tint:#F8F3E6;

  /* ---- section-identity colors (academic sections + status), kept muted ---- */
  --maroon:#7C3B3B;
  --maroon-tint:#F1E3E1;
  --success:#3E7C55;
  --success-tint:#E6EFE7;
  --danger:#B34A3E;
  --danger-tint:#F5E7E4;

  --radius-lg:20px; --radius-md:14px; --radius-sm:10px;
  --shadow-sm:0 4px 12px rgba(19,26,38,.04);
  --shadow-md:0 12px 28px -10px rgba(19,26,38,.14);
  --shadow-lg:0 22px 48px -16px rgba(19,26,38,.2);

  --container:1180px;
}

/* ---------------------------------------------------------------- reset */
.pub{ --x:0; } /* scope marker, harmless */
.pub *{ box-sizing:border-box; }
.pub{
  background:var(--paper); color:var(--ink);
  font-family:'Tajawal', system-ui, sans-serif;
  font-weight:500; /* Tajawal's 400 read as visually thin for body copy — 500
    (Medium) is the "sensible weight for body text" fix from Prompt 24
    without swapping the typeface or touching the identity. */
  -webkit-font-smoothing:antialiased;
  line-height:1.75;
}
html[lang="en"] .pub{ font-family:'Cairo', system-ui, sans-serif; } /* Cairo 500 (inherited above) is the loaded weight closest to "regular" for this family */
.pub h1, .pub h2, .pub h3, .pub h4, .pub .display{
  font-family:'Cairo', system-ui, sans-serif;
  font-weight:800;
  line-height:1.35;
  text-wrap:balance;
}
.pub .accent-face{ font-family:'Reem Kufi', 'Cairo', system-ui, sans-serif; }
.pub img{ max-width:100%; display:block; }
.pub a{ color:inherit; text-decoration:none; }
.pub button{ font-family:inherit; cursor:pointer; border:none; background:none; }
.pub ul{ list-style:none; margin:0; padding:0; }
.pub :focus-visible{ outline:2.5px solid var(--teal); outline-offset:3px; }

.pub .container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.pub .eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:'Reem Kufi','Cairo',sans-serif;
  font-size:14px; font-weight:600; color:var(--gold-deep); letter-spacing:.2px;
}
.pub .eyebrow::before{ content:''; width:22px; height:1.5px; background:var(--gold); display:inline-block; }
.pub .section-head{ max-width:640px; margin-bottom:38px; }
.pub .section-head h2{ font-size:clamp(24px,3vw,34px); font-weight:800; margin-top:10px; }
.pub .section-head p{ color:var(--ink-soft); font-size:15.5px; margin-top:10px; }
.pub .section-head.center{ margin-inline:auto; text-align:center; }
.pub section{ padding:74px 0; position:relative; }
.pub section.alt{ background:var(--paper-deep); }
.pub section.ink{ background:var(--ink); color:#F2ECDC; }
.pub section.ink .ink-soft-text{ color:#B9C0D4; }

/* ---------------------------------------------------------------- buttons */
.pub .btn{
  padding:14px 26px; border-radius:100px; font-weight:600; font-size:15px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  transition:.18s ease; white-space:nowrap;
}
.pub .btn:active{ transform:translateY(1px) scale(.98); }
.pub .btn-primary{ background:var(--teal); color:#fff; box-shadow:0 10px 24px -8px color-mix(in srgb, var(--teal) 40%, transparent); border:1px solid var(--teal); }
.pub .btn-primary:hover{ background:var(--teal-light); transform:translateY(-3px) scale(1.02); box-shadow:0 16px 32px -8px color-mix(in srgb, var(--teal) 50%, transparent); }
.pub .btn-gold{ background:var(--gold-deep); color:#fff; box-shadow:0 6px 18px rgba(158,123,50,.35); border:1px solid var(--gold); }
.pub .btn-gold:hover{ background:#876728; transform:translateY(-2px) scale(1.02); box-shadow:0 10px 24px rgba(158,123,50,.45); }
.pub .btn-outline{ background:rgba(255,255,255,.6); color:var(--teal); border:1.8px solid var(--teal); font-weight:700; }
.pub .btn-outline:hover{ background:var(--teal); color:#fff; transform:translateY(-2px) scale(1.02); }
.pub .btn-ghost-light{ background:transparent; color:var(--paper); border:1.5px solid rgba(242,236,220,.4); }
.pub .btn-ghost-light:hover{ background:rgba(242,236,220,.12); }
.pub .btn-sm{ padding:9px 16px; font-size:13px; }
.pub .btn-block{ width:100%; }

/* ---------------------------------------------------------------- nav */
.pub-nav{ position:sticky; top:0; z-index:80; background:rgba(250,247,242,.94); backdrop-filter:blur(12px); border-bottom:1px solid var(--paper-line); overflow:hidden; }
.pub-nav-dots{
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(var(--gold) 1px, transparent 1px); background-size:16px 16px; opacity:.08;
  mask-image:linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  -webkit-mask-image:linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}
.pub-nav-inner{ max-width:var(--container); margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; position:relative; z-index:2; }
.pub-logo{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:18.5px; font-family:'Cairo',sans-serif; flex:none; }
.pub-logo-mark{ width:38px; height:38px; border-radius:11px; background:var(--teal); color:var(--gold); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:16px; font-family:'Reem Kufi',serif; flex:none; }
.pub-nav-links{ display:flex; align-items:center; gap:2px; }
.pub-nav-links a{ padding:8px 13px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:700; color:var(--ink-soft); transition:all .2s ease; white-space:nowrap; line-height:1.3; }
.pub-nav-links a:hover{ background:var(--teal-tint); color:var(--teal); }
.pub-nav-links a.active{ background:var(--teal); color:#fff; box-shadow:0 4px 14px color-mix(in srgb, var(--teal) 30%, transparent); }
.pub-nav-actions{ display:flex; align-items:center; gap:10px; flex:none; }
.pub-nav-login{ font-size:14px; font-weight:700; color:var(--teal); background:var(--teal-tint); border:1.5px solid color-mix(in srgb, var(--teal) 25%, transparent); padding:9px 18px; border-radius:100px; transition:.2s ease; }
.pub-nav-login:hover{ background:var(--teal); color:#fff; border-color:var(--teal); transform:translateY(-2px) scale(1.02); }
.pub-nav-toggle{ display:none; width:40px; height:40px; border-radius:11px; align-items:center; justify-content:center; color:var(--ink); background:var(--surface); border:1px solid var(--paper-line); }
.pub-mobile-panel{ display:none; flex-direction:column; gap:2px; padding:10px 24px 20px; border-top:1px solid var(--paper-line); background:var(--paper); }
.pub-mobile-panel.open{ display:flex; }
.pub-mobile-panel a{ padding:13px 8px; border-radius:10px; font-weight:600; font-size:15px; color:var(--ink); border-bottom:1px solid var(--paper-line); }
.pub-mobile-panel a:last-child{ border-bottom:none; }

@media(max-width:900px){
  .pub-nav-links{ display:none; }
  .pub-nav-login{ display:none; }
  .pub-nav-toggle{ display:flex; }
}

/* ---------------------------------------------------------------- hero */
.pub-hero{ padding:56px 0 76px; overflow:hidden; position:relative; }
.pub-hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center; }
.pub-hero h1{ font-size:clamp(34px,4.6vw,58px); font-weight:900; margin-top:16px; letter-spacing:-.5px; }
.pub-hero h1 em{
  font-style:normal; font-family:'Reem Kufi','Cairo',sans-serif; font-weight:800; color:var(--teal); position:relative;
}
.pub-hero h1 em::after{
  content:''; position:absolute; bottom:4px; inset-inline-start:0; inset-inline-end:0; height:9px;
  background:rgba(197,160,89,.3); z-index:-1; border-radius:4px;
}
.pub-hero .lead{ font-size:17px; color:var(--ink-soft); max-width:520px; margin-top:18px; }
.pub-hero-ctas{ display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }
.pub-hero-stats{ display:flex; gap:30px; margin-top:44px; padding-top:28px; border-top:1px solid var(--paper-line); }
.pub-hero-stat b{ font-family:'Cairo',sans-serif; font-size:26px; font-weight:900; display:block; }
.pub-hero-stat span{ font-size:12.5px; color:var(--ink-soft); }

.pub-hero-art{ position:relative; }
.pub-hero-photo-wrap{ position:relative; border-radius:32px; overflow:hidden; aspect-ratio:4/4.6; box-shadow:var(--shadow-lg); background:var(--ink); }
.pub-hero-photo-wrap img{ width:100%; height:100%; object-fit:cover; }
.pub-hero-photo-wrap::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(19,26,38,.55), transparent 42%); }
.pub-hero-caption{ position:absolute; inset-inline-start:22px; bottom:20px; color:#fff; z-index:2; }
.pub-hero-caption b{ font-family:'Cairo',sans-serif; font-size:16.5px; display:block; }
.pub-hero-caption span{ font-size:12.5px; color:#D8DEEC; }
.pub-hero-badge{
  position:absolute; top:-18px; inset-inline-start:-22px; background:#fff; border-radius:18px; padding:14px 18px;
  box-shadow:0 12px 30px rgba(19,26,38,.15); display:flex; align-items:center; gap:12px; z-index:3; max-width:230px;
  border:1.5px solid var(--gold);
}
.pub-hero-badge .ic{ width:40px; height:40px; border-radius:12px; background:var(--gold-deep); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
.pub-hero-badge b{ font-size:13px; display:block; color:var(--ink); }
.pub-hero-badge span{ font-size:11.5px; color:var(--gold-deep); font-weight:700; }
.pub-hero-swash{ position:absolute; z-index:1; pointer-events:none; opacity:.5; }

@media(max-width:960px){
  .pub-hero-grid{ grid-template-columns:1fr; gap:40px; }
  .pub-hero-art{ order:-1; max-width:340px; margin:0 auto; }
  .pub-hero-stats{ flex-wrap:wrap; gap:20px 30px; }
}

/* ---------------------------------------------------------------- ink motif utilities */
.ink-rule{ height:1px; background:linear-gradient(to left, transparent, var(--paper-line) 15%, var(--paper-line) 85%, transparent); }
.letter-mark{ font-family:'Reem Kufi', serif; }

/* ---------------------------------------------------------------- about / academy intro */
.about-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start; }
.about-portrait{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); border:2px solid var(--paper-line); }
.about-portrait img{ width:100%; aspect-ratio:700/773; object-fit:cover; }
.about-signature-stamp{
  position:absolute; bottom:16px; inset-inline-end:16px; background:rgba(19,26,38,.88); backdrop-filter:blur(8px);
  padding:10px 18px; border-radius:14px; color:var(--gold-tint); border:1px solid var(--gold); text-align:center;
}
.about-signature-stamp span{ font-family:'Reem Kufi',sans-serif; font-weight:800; font-size:15px; display:block; color:var(--gold-tint); }
.about-signature-stamp small{ font-size:10.5px; color:#E2E8F0; }
.about-facts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.about-fact{ background:var(--surface); border:1px solid var(--paper-line); border-radius:var(--radius-sm); padding:14px 16px; }
.about-fact b{ font-family:'Cairo',sans-serif; font-weight:900; font-size:20px; display:block; }
.about-fact span{ font-size:12px; color:var(--ink-soft); }
.about-bio p{ color:var(--ink-soft); font-size:15.5px; margin-bottom:14px; }
.about-quote{ background:var(--teal-tint); border-inline-start:4px solid var(--teal); padding:18px 22px; border-radius:var(--radius-sm); margin-top:18px; }
.about-quote p{ color:var(--teal); font-size:16.5px; line-height:1.8; font-style:italic; }
.about-chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
.about-chip{ background:var(--teal-tint); color:var(--teal); font-size:13px; font-weight:700; padding:8px 15px; border-radius:100px; }
@media(max-width:860px){ .about-grid{ grid-template-columns:1fr; } .about-portrait{ max-width:280px; margin:0 auto; } }

/* ---------------------------------------------------------------- academic accordion */
.stage-accordion{ display:flex; flex-direction:column; gap:14px; }
.stage-item{ background:var(--surface); border:1px solid var(--paper-line); border-radius:var(--radius-md); overflow:hidden; transition:all .2s ease; }
.stage-item.open{ box-shadow:var(--shadow-md); border-color:var(--teal); }
.stage-header{ width:100%; display:flex; align-items:center; gap:16px; padding:20px 24px; text-align:start; }
.stage-header .ic{ width:46px; height:46px; border-radius:13px; background:var(--teal-tint); color:var(--teal); display:flex; align-items:center; justify-content:center; flex:none; }
.stage-header .txt{ flex:1; min-width:0; }
.stage-header .txt b{ font-family:'Cairo',sans-serif; font-size:17px; font-weight:700; display:block; }
.stage-header .txt span{ font-size:12.5px; color:var(--ink-soft); }
.stage-header .count{
  font-size:13px; font-weight:800; color:#fff; background:var(--ink); padding:7px 16px; border-radius:100px; flex:none;
  box-shadow:0 4px 12px rgba(19,26,38,.2); border:1px solid var(--ink); transition:all .22s ease;
}
.stage-item:hover .stage-header .count{ background:var(--teal); border-color:var(--teal); transform:translateY(-2px); box-shadow:0 6px 16px color-mix(in srgb, var(--teal) 35%, transparent); }
.stage-header .chev{ color:var(--ink-faint); transition:transform .25s; flex:none; }
.stage-item.open .stage-header .chev{ transform:rotate(180deg); }
.stage-panel{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.stage-item.open .stage-panel{ max-height:2400px; }
.stage-panel-inner{ padding:0 24px 26px; }
.stage-empty{ color:var(--ink-faint); font-size:13.5px; padding:8px 0 4px; }

/* year tabs (Prompt 24) — one row of year buttons per graded section;
   choosing one swaps the single course-area below instead of stacking
   every year's courses on the page at once. Gold marks the active grade,
   distinct from the teal used for the outer section/nav state. */
.year-tabs{ display:flex; gap:10px; overflow-x:auto; margin:4px 0 22px; padding-bottom:6px; scrollbar-width:none; }
.year-tabs::-webkit-scrollbar{ display:none; }
.year-tab{
  display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:100px; flex-shrink:0;
  border:1.5px solid var(--paper-line); background:var(--paper); font-size:14px; font-weight:700;
  color:var(--ink-soft); transition:.18s ease;
}
.year-tab:hover{ border-color:var(--gold); color:var(--ink); }
.year-tab .count{ font-size:11px; font-weight:700; color:var(--ink-faint); background:var(--paper-deep); padding:2px 8px; border-radius:100px; transition:.18s; }
.year-tab.active{ background:var(--gold-deep); border-color:var(--gold-deep); color:#fff; }
.year-tab.active .count{ background:rgba(255,255,255,.22); color:#fff; }

/* horizontal course carousel — one selected year's real courses */
.year-course-area{ scroll-margin-top:100px; }
.carousel-outer{ display:flex; align-items:center; position:relative; gap:12px; }
.carousel-track{
  flex:1; min-width:0; display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x proximity;
  scroll-behavior:smooth; padding:8px 4px 16px; scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-item{ flex:0 0 300px; scroll-snap-align:start; display:flex; }
.carousel-item .course-card-pub{ width:100%; }
.carousel-nav{
  flex:none; width:44px; height:44px; border-radius:50%;
  background:var(--surface); border:1.5px solid var(--paper-line); color:var(--ink);
  display:flex; align-items:center; justify-content:center; transition:.18s ease; box-shadow:var(--shadow-sm); z-index:2;
}
.carousel-nav:hover{ background:var(--teal); color:#fff; border-color:var(--teal); }
.carousel-nav.next svg{ transform:scaleX(-1); }
@media(max-width:720px){
  .carousel-nav{ display:none; }
  .carousel-item{ flex:0 0 calc(100% - 30px); }
}

/* ---------------------------------------------------------------- course cards + generative thumbnail ---------------------------------------------------------------- */
.course-grid-pub{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.course-grid-pub.cols-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:980px){ .course-grid-pub, .course-grid-pub.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .course-grid-pub, .course-grid-pub.cols-4{ grid-template-columns:1fr; } }

.course-card-pub{
  background:var(--surface); border:1px solid var(--paper-line); border-radius:var(--radius-md); overflow:hidden;
  display:flex; flex-direction:column; transition:.22s ease; box-shadow:var(--shadow-sm);
}
.course-card-pub:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--gold); }
.course-thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; flex:none; }
.course-thumb img{ width:100%; height:100%; object-fit:cover; }
.course-thumb-badge{ position:absolute; top:12px; inset-inline-start:12px; background:rgba(19,26,38,.75); color:#fff; font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:100px; backdrop-filter:blur(4px); }
.course-thumb-price{ position:absolute; bottom:12px; inset-inline-end:12px; background:var(--surface); color:var(--ink); font-family:'Cairo',sans-serif; font-size:13px; font-weight:800; padding:6px 13px; border-radius:100px; box-shadow:var(--shadow-sm); }

/* generative fallback thumbnail (no thumbnail_url): section-tinted gradient
   + one oversized, low-opacity Arabic letterform + a small motif icon —
   consistent identity across every course without a custom image. */
.course-thumb-gen{ width:100%; height:100%; position:relative; display:flex; align-items:center; justify-content:center; }
.course-thumb-gen .letter{ font-family:'Reem Kufi',serif; font-size:150px; line-height:1; position:absolute; inset-inline-end:-18px; bottom:-38px; opacity:.16; color:#fff; user-select:none; }
.course-thumb-gen .glyph{ width:50px; height:50px; border-radius:14px; background:rgba(255,255,255,.16); color:#fff; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px); }
.tg-general{ background:linear-gradient(135deg, var(--ink), #2C3A5C); }
.tg-middle_school{ background:linear-gradient(135deg, var(--teal), #0A332C); }
.tg-general_secondary{ background:linear-gradient(135deg, var(--gold-deep), #6E5726); }
.tg-azhar_secondary{ background:linear-gradient(135deg, var(--maroon), #582424); }

.course-body-pub{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.course-body-pub .meta{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-soft); flex-wrap:wrap; }
.course-body-pub .meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--ink-faint); }
.course-body-pub h3{ font-family:'Cairo',sans-serif; font-size:16px; font-weight:700; line-height:1.5; }
.course-body-pub p.desc{ font-size:13px; color:var(--ink-soft); flex:1; }
.course-card-cta{ margin-top:6px; display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:800; font-size:13.5px; color:var(--ink); padding-top:14px; border-top:1px solid var(--paper-line); transition:color .2s; }
.course-card-pub:hover .course-card-cta{ color:var(--gold-deep); }
.course-card-cta .ic{ transition:transform .2s; }
.course-card-pub:hover .course-card-cta .ic{ transform:translateX(-4px); }
[dir="ltr"] .course-card-pub:hover .course-card-cta .ic{ transform:translateX(4px); }

/* ---------------------------------------------------------------- "show more" reveal ---------------------------------------------------------------- */
.reveal-toggle{ font-size:12.5px; font-weight:700; color:var(--teal); display:inline-flex; align-items:center; gap:4px; margin-top:4px; }
.reveal-body{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.reveal-body.open{ max-height:600px; }

/* ---------------------------------------------------------------- reviews ---------------------------------------------------------------- */
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:900px){ .review-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:620px){ .review-grid{ grid-template-columns:1fr; } }
.review-card{ background:var(--surface); border:1px solid var(--paper-line); border-radius:var(--radius-md); padding:24px; position:relative; }
.review-card .quote-ic{ color:var(--gold-tint); position:absolute; top:18px; inset-inline-end:20px; }
.review-stars{ display:flex; gap:2px; color:var(--gold); margin-bottom:12px; }
.review-card p{ font-size:14px; color:var(--ink-soft); margin-bottom:16px; }
.review-who{ display:flex; align-items:center; gap:10px; }
.review-who .av{ width:38px; height:38px; border-radius:11px; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-family:'Cairo',sans-serif; font-size:13px; flex:none; }
.review-who b{ font-size:13.5px; display:block; }
.review-who span{ font-size:11.5px; color:var(--ink-faint); }

/* ---------------------------------------------------------------- feature / why band ---------------------------------------------------------------- */
.feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:900px){ .feature-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .feature-grid{ grid-template-columns:1fr; } }
.feature-card{ padding:26px 22px; border-radius:var(--radius-md); background:rgba(242,236,220,.06); border:1px solid rgba(242,236,220,.14); }
.feature-card .ic{ width:46px; height:46px; border-radius:13px; background:rgba(197,160,89,.18); color:var(--gold); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.feature-card b{ font-family:'Cairo',sans-serif; font-size:16px; display:block; margin-bottom:6px; }
.feature-card p{ font-size:13.5px; color:#B9C0D4; }

/* ---------------------------------------------------------------- CTA band ---------------------------------------------------------------- */
.cta-band{ background:var(--teal); border-radius:var(--radius-lg); padding:52px 46px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.cta-band h2{ font-size:26px; font-weight:800; color:#fff; }
.cta-band p{ color:#D6E6E3; margin-top:8px; font-size:14.5px; }

/* ---------------------------------------------------------------- footer ---------------------------------------------------------------- */
.pub-footer{ background:var(--ink); color:#B9C0D4; padding:64px 0 26px; border-top:3px solid var(--gold-deep); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:44px; }
@media(max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-brand p{ font-size:13.5px; margin-top:14px; color:#98A1BA; max-width:280px; }
.footer-col h4{ color:var(--gold); font-size:13.5px; font-weight:800; margin-bottom:16px; }
.footer-col a{ display:block; font-size:13.5px; color:#98A1BA; margin-bottom:11px; }
.footer-col a:hover{ color:var(--gold); }
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{ width:36px; height:36px; border-radius:10px; background:rgba(242,236,220,.08); display:flex; align-items:center; justify-content:center; }
.footer-bottom{ border-top:1px solid rgba(242,236,220,.12); padding-top:22px; font-size:12.5px; color:#7C859E; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ---------------------------------------------------------------- empty state ---------------------------------------------------------------- */
.pub .empty-state{ text-align:center; padding:50px 20px; color:var(--ink-soft); grid-column:1/-1; }
.pub .empty-state .ic{ font-size:34px; margin-bottom:14px; display:flex; align-items:center; justify-content:center; color:var(--ink-faint); }
.pub .empty-state .ic svg{ width:34px; height:34px; }
.pub .empty-state h4{ font-size:15px; font-weight:800; color:var(--ink); margin-bottom:6px; }
.pub .empty-state p{ font-size:13.5px; }

/* ---------------------------------------------------------------- form fields (filters, search) ---------------------------------------------------------------- */
.pub .input{
  padding:11px 16px; border-radius:12px; border:1.5px solid var(--paper-line); background:var(--surface);
  font-size:14px; color:var(--ink); transition:.15s;
}
.pub .input:focus{ border-color:var(--teal); outline:none; box-shadow:0 0 0 3px var(--teal-tint); }
.pub select.input{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234B5771' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 14px center; padding-inline-start:32px;
}

/* ---------------------------------------------------------------- misc ---------------------------------------------------------------- */
.pub .skeleton{ background:linear-gradient(90deg, var(--paper-line) 25%, var(--paper-deep) 50%, var(--paper-line) 75%); background-size:200% 100%; animation:pub-shimmer 1.4s infinite; border-radius:var(--radius-sm); }
@keyframes pub-shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce){
  .pub *{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
}