/* ============================================================
   GainAISkills — shared design system (light teal / blue / green)
   Logo: Option C "Skill Bars". Loaded by every page.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --bg:#f4fbfa; --ink:#0b1f21; --muted:#4a6567; --dim:#7d9799;
  --card:#ffffff; --line:rgba(11,31,33,.08); --line-2:rgba(11,31,33,.14);
  --teal:#0ea5a0; --teal-d:#0b807c; --green:#16c07a; --emerald:#10b981;
  --blue:#2b8fff; --blue-d:#1668d6; --cyan:#22d3ee; --amber:#f5a623;
  --radius:22px; --radius-lg:30px; --maxw:1200px;
  --shadow:0 24px 60px -18px rgba(14,165,160,.30);
  --shadow-soft:0 12px 40px -14px rgba(11,31,33,.14);
  --grad:linear-gradient(120deg,var(--teal),var(--green));
  --grad-text:linear-gradient(110deg,var(--teal),var(--green) 45%,var(--blue));
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:'Space Grotesk','Inter',sans-serif;letter-spacing:-.02em;line-height:1.08}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.muted{color:var(--muted)} .dim{color:var(--dim)}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* animated gradient mesh + grain (fixed) */
.mesh{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(50% 50% at 15% 20%,rgba(14,165,160,.28),transparent 60%),
  radial-gradient(50% 50% at 85% 15%,rgba(43,143,255,.20),transparent 60%),
  radial-gradient(50% 50% at 75% 80%,rgba(22,192,122,.22),transparent 60%),
  radial-gradient(50% 50% at 25% 85%,rgba(34,211,238,.18),transparent 60%);
  background-size:200% 200%;animation:mesh 22s ease-in-out infinite}
@keyframes mesh{0%,100%{background-position:0% 0%,100% 0%,100% 100%,0% 100%}50%{background-position:100% 100%,0% 100%,0% 0%,100% 0%}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(var(--bg),transparent 30%,transparent 70%,var(--bg))}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:999px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s;white-space:nowrap}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 30px 70px -18px rgba(14,165,160,.5)}
.btn-ghost{background:rgba(255,255,255,.7);border-color:var(--line);color:var(--ink);backdrop-filter:blur(8px)}
.btn-ghost:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.btn-sm{padding:10px 18px;font-size:14px}
.glass{background:rgba(255,255,255,.72);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);box-shadow:var(--shadow-soft)}

/* ---- Logo: Option C skill bars ---- */
.brand{display:flex;align-items:center;gap:11px;font-family:'Space Grotesk';font-weight:700;font-size:19px}
.brand .mark{width:36px;height:36px;flex:none;border-radius:11px;background:linear-gradient(135deg,var(--green),var(--teal));display:grid;place-items:center;box-shadow:0 6px 18px rgba(14,165,160,.4)}
.brand .mark svg .bar{transform-origin:bottom;animation:barrise .9s cubic-bezier(.2,.8,.2,1) both}
.brand .mark svg .bar.b1{animation-delay:.05s}
.brand .mark svg .bar.b2{animation-delay:.15s}
.brand .mark svg .bar.b3{animation-delay:.25s}
.brand .mark svg .spark{animation:sparkpop .5s ease .5s both}
@keyframes barrise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes sparkpop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
/* The wordmark reads "Gain AI Skills". Real spaces now separate the three
   words in the markup (previously "AI" and "Skills" were joined, so the gaps
   were uneven). Keep it on one line so the mark never splits mid-name. */
.brand{white-space:nowrap}
.brand .ai{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* nav */
header.nav{position:sticky;top:14px;z-index:60;margin-top:14px}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:62px;padding:0 22px;border-radius:999px}
.nav-links{display:flex;gap:26px;align-items:center;margin-left:14px}
/* Multi-word items ("Skill Tracks", "Beginner Path") were breaking onto two
   lines, which made the bar uneven. They are labels, not prose — never wrap. */
.nav-links a{font-size:15px;color:var(--muted);font-weight:500;transition:color .2s;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--teal)}
.nav-right{display:flex;align-items:center;gap:12px}
.country-switch{position:relative;display:flex;align-items:center;gap:7px;font-size:14px;font-weight:500;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.6);cursor:pointer}
.country-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-soft);padding:8px;min-width:210px;display:none;z-index:70}
.country-menu.open{display:block}
.country-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;font-size:14px;color:var(--ink)}
.country-menu a:hover{background:rgba(14,165,160,.08)}
.hamburger{display:none;font-size:24px;background:none;border:none;cursor:pointer}

/* section shell */
section{padding:80px 0;position:relative}
.eyebrow{display:inline-block;color:var(--teal-d);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.sec-head{max-width:640px;margin-bottom:44px}
.sec-head.center{margin:0 auto 44px;text-align:center}
.sec-head h2{font-size:clamp(30px,4.5vw,46px);font-weight:700;margin:14px 0 12px}
.sec-head p{color:var(--muted);font-size:17px}

/* generic grids/cards used across pages */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.card-soft{border-radius:var(--radius);background:var(--card);padding:26px;box-shadow:var(--shadow-soft)}

/* skill-track card */
.tcard{border-radius:var(--radius);background:var(--card);padding:26px;box-shadow:var(--shadow-soft);transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden}
.tcard::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--teal),var(--blue));transform:scaleX(0);transform-origin:left;transition:transform .35s}
.tcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)} .tcard:hover::before{transform:scaleX(1)}
.tcard .ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px;color:#fff;box-shadow:0 10px 24px -8px rgba(14,165,160,.5)}
.tcard h3{font-size:20px;margin-bottom:6px}.tcard .tools{font-size:13px;color:var(--teal-d);font-weight:600;margin-bottom:16px}
.tcard .meta{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);padding-top:16px;border-top:1px solid var(--line)}

/* platform card */
.grid-platforms{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.pcard{border-radius:18px;background:var(--card);padding:24px 16px;text-align:center;box-shadow:var(--shadow-soft);transition:transform .25s;display:flex;flex-direction:column;align-items:center;gap:12px}
.pcard:hover{transform:translateY(-5px) rotate(-1deg)}
.pcard .logo-ph{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-family:'Space Grotesk';font-weight:700;color:#fff;font-size:20px}
.pcard span{font-size:13px;color:var(--muted);font-weight:600}

/* stats band */
.stats-band{border-radius:var(--radius-lg);padding:44px;background:linear-gradient(120deg,var(--teal),var(--blue) 55%,var(--green));color:#fff;box-shadow:var(--shadow)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{text-align:center}.stat .n{font-family:'Space Grotesk';font-weight:700;font-size:46px}.stat .l{font-size:14px;opacity:.9;margin-top:4px}

/* ---- icon system (see gais-icons.js) ---- */
[data-icon]{display:inline-flex;align-items:center;justify-content:center;line-height:0}
[data-icon] svg{width:1em;height:1em}
.ico-inline{font-size:18px;color:var(--teal-d);vertical-align:middle}
/* gradient icon tiles */
.ico-tile{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:#fff;font-size:26px;box-shadow:0 10px 24px -8px rgba(14,165,160,.5);flex:none}
.ico-tile.sm{width:44px;height:44px;border-radius:13px;font-size:22px;box-shadow:0 8px 18px -8px rgba(14,165,160,.5)}
.ico-tile.lg{width:64px;height:64px;border-radius:19px;font-size:30px}
.t-teal{background:linear-gradient(135deg,#0ea5a0,#2b8fff)}
.t-green{background:linear-gradient(135deg,#16c07a,#22d3ee)}
.t-blue{background:linear-gradient(135deg,#2b8fff,#0ea5a0)}
.t-emerald{background:linear-gradient(135deg,#10b981,#2b8fff)}
.t-cyan{background:linear-gradient(135deg,#22d3ee,#16c07a)}
.t-indigo{background:linear-gradient(135deg,#1668d6,#16c07a)}
.t-tealsoft{background:linear-gradient(135deg,var(--teal-d),var(--green))}
/* soft (light) icon chip for inline/meta use */
.ico-soft{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(14,165,160,.1);color:var(--teal-d);font-size:19px;flex:none}
.ico-soft.green{background:rgba(22,192,122,.12);color:#0a7a4c}
.ico-soft.blue{background:rgba(43,143,255,.12);color:var(--blue-d)}
/* thumbnail band for cards that use a photo header */
.card-photo{height:150px;position:relative;overflow:hidden}
.card-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
a:hover>.card-photo img,.card-soft:hover .card-photo img{transform:scale(1.07)}
.card-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(11,31,33,.35),transparent 55%)}
.card-photo .ovl{position:absolute;z-index:2;bottom:12px;left:14px;display:flex;align-items:center;gap:8px;color:#fff;font-weight:600;font-size:13px}
/* section header with side image */
.imghead{border-radius:var(--radius-lg);overflow:hidden;position:relative;min-height:220px}
.imghead img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}

/* pills / tags */
.tagchip{font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;background:rgba(14,165,160,.1);color:var(--teal-d);display:inline-flex;align-items:center;gap:6px}
.tagchip.free{background:rgba(22,192,122,.14);color:#0a7a4c}
.tagchip.blue{background:rgba(43,143,255,.12);color:var(--blue-d)}

/* testimonials */
.grid-testi{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tst{border-radius:var(--radius);background:var(--card);padding:26px;box-shadow:var(--shadow-soft)}
.tst .stars{color:var(--amber);letter-spacing:2px;margin-bottom:12px}.tst p{font-size:15px;margin-bottom:20px}
.tst .who{display:flex;align-items:center;gap:12px}.tst .who img{width:46px;height:46px;border-radius:50%;object-fit:cover}.tst .who b{font-size:14px}.tst .who small{color:var(--muted);font-size:12px}

/* faq */
.faq{max-width:780px;margin:0 auto}
.qa{border-radius:16px;background:var(--card);box-shadow:var(--shadow-soft);margin-bottom:12px;overflow:hidden}
.qa summary{list-style:none;cursor:pointer;padding:22px 24px;font-weight:600;font-size:16px;display:flex;justify-content:space-between;align-items:center}
.qa summary::-webkit-details-marker{display:none}.qa .plus{color:var(--teal);font-size:24px;transition:transform .25s}.qa[open] .plus{transform:rotate(135deg)}
.qa .ans{padding:0 24px 22px;color:var(--muted);font-size:15px}

/* cta band */
.cta-band{border-radius:var(--radius-lg);padding:64px 40px;text-align:center;color:#fff;position:relative;overflow:hidden;background:linear-gradient(130deg,#06373a,var(--teal) 50%,var(--green));box-shadow:var(--shadow)}
.cta-band::after{content:'';position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(43,143,255,.5),transparent 70%);top:-160px;right:-100px}
.cta-band h2{font-size:clamp(30px,4.5vw,48px);margin-bottom:14px;position:relative}
.cta-band p{font-size:17px;opacity:.92;max-width:50ch;margin:0 auto 30px;position:relative}
.cta-band .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}
.cta-band .btn-ghost{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff}

/* footer */
footer{padding:60px 0 34px;margin-top:30px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;margin-bottom:40px}
.foot-grid h4{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);margin-bottom:16px}
.foot-grid a{display:block;color:var(--muted);font-size:14px;margin-bottom:10px}.foot-grid a:hover{color:var(--teal)}
.foot-bottom{display:flex;justify-content:space-between;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--dim);flex-wrap:wrap;gap:12px}

/* breadcrumb */
.crumb{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);padding:24px 0 0}
.crumb a:hover{color:var(--teal)} .crumb .sep{color:var(--dim)}

/* page hero (interior pages) */
.phero{padding:40px 0 20px}
.phero h1{font-size:clamp(32px,5vw,54px);font-weight:700}
.phero p{color:var(--muted);font-size:18px;max-width:60ch;margin-top:16px}

/* marquee */
.marquee{overflow:hidden;padding:22px 0;margin-top:20px;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:46px;width:max-content;animation:scroll 26s linear infinite}
.marquee-track span{font-family:'Space Grotesk';font-weight:600;font-size:19px;color:var(--dim);display:flex;align-items:center;gap:12px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* responsive */

/* NAV FIT.
   The full bar needs roughly 1130px: brand (175) + seven links (552) +
   country switch, auth control and CTA (344). Below that it used to wrap
   "Skill Tracks" and "Beginner Path" onto two lines. Now the links never
   wrap, so instead the spacing tightens through the squeeze band and the
   hamburger takes over before anything can overflow. */
@media (max-width:1260px){
  .nav-links{gap:18px;margin-left:10px}
  .nav-inner{padding:0 16px}
  .nav-right{gap:9px}
}
@media (max-width:1160px){
  .nav-links{gap:14px;margin-left:8px}
  .nav-links a{font-size:14.5px}
  /* The CTA duplicates the Beginner Path link; drop it before the nav breaks. */
  .nav-right .btn-primary{display:none}
}
@media (max-width:1010px){
  .nav-links{gap:11px;margin-left:6px}
  .nav-links a{font-size:14px}
  .nav-inner{padding:0 12px}
  .country-switch{padding:8px 10px}
}

@media (max-width:940px){
  .grid-3,.grid-testi{grid-template-columns:1fr 1fr}
  .grid-platforms{grid-template-columns:repeat(3,1fr)}.stats{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}.nav-links{display:none}.hamburger{display:block}
  /* Restore the CTA once the links collapse — there is room again, and it
     becomes the primary action in the bar. */
  .nav-right .btn-primary{display:inline-flex}
}
@media (max-width:560px){
  .grid-3,.grid-2,.grid-testi,.grid-platforms{grid-template-columns:1fr}
  section{padding:56px 0}.stats-band{padding:30px}
}

/* ---- mobile hardening (fixes inline 2-col grids + hero collage) ---- */
@media (max-width:760px){
  /* Any element with an inline grid-template-columns (hero, beginner, country hero,
     stats band, etc.) collapses to a single column. !important is required to beat
     the inline style attribute. */
  [style*="grid-template-columns"]{grid-template-columns:1fr !important;gap:28px !important}

  /* Hero collage: the absolutely-positioned percentage-width photos become a clean,
     full-width stacked image instead of 0-width slivers. */
  .hero .reveal[style*="position:relative"],
  .hero [style*="height:500px"],
  .phero [style*="height:400px"]{position:static !important;height:auto !important;display:flex;flex-direction:column;gap:14px}
  .hero .photo,.phero .photo{position:static !important;width:100% !important;height:auto !important;inset:auto !important;transform:none !important;aspect-ratio:16/10}
  .hero .photo img,.phero .photo img{height:100% !important}
  /* keep only the primary hero photo on small screens; hide the 2 decorative overlaps + floating glass badges to avoid clutter */
  .hero .photo[data-depth="0.20"],.hero .photo[data-depth="0.30"],
  .hero .glass[data-depth],.phero .glass[data-depth]{display:none !important}
}

/* ============================================================
   ACCOUNT MENU (nav) — mirrors .country-switch / .country-menu
   ============================================================ */
.gais-acct{position:relative;display:inline-block}
.gais-acct-btn{display:inline-flex;align-items:center;gap:7px}
.gais-acct-caret{font-size:10px;opacity:.6;transition:transform .18s}
.gais-acct.is-open .gais-acct-caret{transform:rotate(180deg)}
.gais-acct-av{width:22px;height:22px;border-radius:50%;flex:none;object-fit:cover}
.gais-acct-av-fb{display:grid;place-items:center;background:var(--grad);color:#fff;
  font-size:11px;font-weight:700;font-family:'Space Grotesk',sans-serif}
.gais-acct-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-soft);
  padding:7px;min-width:236px;display:none;z-index:80}
.gais-acct.is-open .gais-acct-menu{display:block}
.gais-acct-head{padding:9px 12px 11px;border-bottom:1px solid var(--line);margin-bottom:6px;
  display:flex;flex-direction:column;gap:2px;min-width:0}
.gais-acct-head b{font-size:14px;color:var(--ink)}
.gais-acct-head span{font-size:12.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gais-acct-menu a,.gais-acct-menu button{display:block;width:100%;text-align:left;
  padding:9px 12px;border-radius:9px;font:inherit;font-size:14px;color:var(--muted);
  background:none;border:none;cursor:pointer;transition:background .15s,color .15s}
.gais-acct-menu a:hover,.gais-acct-menu button:hover{background:rgba(14,165,160,.08);color:var(--teal-d)}
.gais-acct-menu [data-gais-signout]{border-top:1px solid var(--line);margin-top:6px;
  padding-top:11px;border-radius:0 0 9px 9px;color:var(--dim)}
.gais-acct-menu [data-gais-signout]:hover{background:rgba(194,65,12,.07);color:#c2410c}
.gais-acct-menu [data-gais-signout]:disabled{opacity:.6;cursor:default}
@media (max-width:860px){ .gais-acct-menu{min-width:200px} }

/* ============================================================
   ACCOUNT DASHBOARD — plans, modules, certificates
   ============================================================ */
.ac-tabs{display:flex;gap:6px;margin-bottom:18px;padding:5px;border-radius:14px;
  background:rgba(11,31,33,.04);width:fit-content}
.ac-tab{padding:9px 18px;border-radius:10px;border:none;background:none;font:inherit;
  font-size:14.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .18s}
.ac-tab b{font-weight:600;opacity:.6;margin-left:3px}
.ac-tab:hover{color:var(--teal-d)}
.ac-tab.is-on{background:#fff;color:var(--teal-d);box-shadow:0 2px 8px rgba(11,31,33,.07)}

/* overall summary */
.ac-summary{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.ac-sum-ring{position:relative;flex:none;display:grid;place-items:center}
.ac-sum-ring svg{display:block}
.ac-sum-ring circle{transition:stroke-dashoffset .8s cubic-bezier(.22,1,.36,1)}
.ac-sum-pct{position:absolute;font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:19px;color:var(--ink)}
.ac-sum-body{flex:1;min-width:220px}
.ac-sum-body h3{font-size:19px;margin-bottom:4px}
.ac-sum-body p{font-size:14px}

/* plan card */
.ac-plan-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex:none}
.ac-vtext{color:var(--teal-d);font-weight:600}
.ac-plan.is-open{box-shadow:0 16px 48px -16px rgba(11,31,33,.2)}

/* modules */
.ac-modules{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.ac-phase{margin-bottom:20px}
.ac-phase:last-of-type{margin-bottom:8px}
.ac-phase-head{display:flex;justify-content:space-between;align-items:center;
  padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.ac-phase-head b{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--teal-d)}
.ac-phase-head .dim{font-size:13px;font-variant-numeric:tabular-nums}
.ac-mod{display:flex;gap:13px;align-items:flex-start;padding:11px 12px;border-radius:12px;
  transition:background .15s}
.ac-mod:hover{background:rgba(14,165,160,.045)}
.ac-mod.is-done .ac-mod-title{color:var(--dim);text-decoration:line-through;text-decoration-thickness:1px}
.ac-mod.is-missing{padding-left:14px;font-size:13.5px}
.ac-check{position:relative;flex:none;width:21px;height:21px;margin-top:2px;cursor:pointer}
.ac-check input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.ac-check span{position:absolute;inset:0;border-radius:7px;border:1.8px solid var(--line-2);
  background:#fff;transition:all .16s;pointer-events:none}
.ac-check input:checked + span{background:var(--grad);border-color:transparent}
.ac-check input:checked + span::after{content:'';position:absolute;left:6.5px;top:2.5px;
  width:5px;height:10px;border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(45deg)}
.ac-check input:disabled + span{opacity:.75;cursor:default}
.ac-check input:focus-visible + span{box-shadow:0 0 0 3px rgba(14,165,160,.25)}
.ac-mod-body{flex:1;min-width:0}
.ac-mod-title{font-size:15px;font-weight:600;color:var(--ink);display:inline-block;line-height:1.4}
.ac-mod-title:hover{color:var(--teal-d)}
.ac-ext{font-size:12px;opacity:.5}
.ac-mod-meta{display:flex;gap:8px;align-items:center;margin-top:5px;flex-wrap:wrap;font-size:12.5px}
.ac-verified{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;
  background:rgba(22,192,122,.12);color:#0a6b45;font-size:11.5px;font-weight:600}
.ac-verified [data-icon]{width:12px;height:12px}
.ac-mod-note{font-size:12.5px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.ac-foot-note{font-size:13px;text-align:center;margin-top:18px}
.ac-foot-note a{color:var(--teal-d);font-weight:600}

/* certificates */
.ac-modes{display:flex;gap:6px;margin:16px 0 4px;padding:4px;border-radius:12px;
  background:rgba(11,31,33,.04);width:fit-content}
.ac-mode{padding:7px 15px;border-radius:9px;border:none;background:none;font:inherit;
  font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .16s}
.ac-mode.is-on{background:#fff;color:var(--teal-d);box-shadow:0 2px 6px rgba(11,31,33,.07)}
.ac-drop{display:block;margin-top:14px;padding:30px 20px;border-radius:16px;text-align:center;
  border:1.8px dashed var(--line-2);background:rgba(14,165,160,.03);cursor:pointer;transition:all .18s}
.ac-drop:hover{border-color:var(--teal);background:rgba(14,165,160,.06)}
.ac-drop b{display:block;font-size:15px;margin-bottom:4px}
.ac-drop span{font-size:13px}
.ac-manual{margin-top:14px}
.ac-manual select{padding:12px 14px;border-radius:13px;border:1.5px solid var(--line);
  background:var(--card);font:inherit;font-size:15px;color:var(--ink);width:100%}
.ac-manual select:focus,.ac-manual input:focus{outline:none;border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(14,165,160,.12)}
.ac-preview{margin-top:16px;padding:18px 20px;border-radius:16px;
  background:rgba(14,165,160,.06);border:1px solid rgba(14,165,160,.2)}
.ac-preview h4{font-size:14px;margin-bottom:8px;color:var(--teal-d)}
.ac-preview p{font-size:14.5px}
.ac-preview-actions{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
.ac-cert{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line)}
.ac-cert:last-child{border-bottom:none;padding-bottom:0}
.ac-cert-body{flex:1;min-width:0}
.ac-cert-body b{display:block;font-size:15px;margin-bottom:2px}
.ac-cert-body span{display:block;font-size:13px}
.ac-linked{display:inline-flex !important;align-items:center;gap:4px;margin-top:5px;
  color:#0a6b45;font-size:12.5px;font-weight:600}
.ac-linked [data-icon]{width:13px;height:13px}
.ac-unlinked{margin-top:5px;font-size:12.5px}

@media (max-width:620px){
  .ac-plan-actions{flex-direction:row;align-items:center;width:100%;justify-content:space-between;margin-top:4px}
  .ac-summary{gap:16px}
  .ac-tabs,.ac-modes{width:100%}
  .ac-tab,.ac-mode{flex:1;text-align:center}
}