/* AQF Digital Career Toolkit
   Scoped to .ctk so nothing leaks into the theme. Rajdhani comes from the page template.
   No webfonts, images or libraries are loaded here.
   Scroll effects use CSS scroll-driven animations where supported; every browser gets the static layout. */

.ctk {
  --red: #c91517;
  --red-deep: #9c1012;
  --ink: #1d1e22;
  --ink-2: #45464d;
  --muted: #6d6e68;
  --line: #e3e2dc;
  --line-dark: #34353b;
  --sand: #f5f4ef;
  --paper: #ffffff;
  --head: 'Rajdhani', 'Arial Narrow', Arial, sans-serif;
  --body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --nav-h: 60px;
  --shell: none;
  --gutter: clamp(20px, 3vw, 48px);

  font: 400 16px/1.65 var(--body);
  color: var(--ink-2);
  background: var(--paper);
  width: 100%;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  interpolate-size: allow-keywords;
}

/* Resets against the parent theme */
.ctk *, .ctk *::before, .ctk *::after { box-sizing: border-box; }
.ctk [hidden] { display: none !important; }
.ctk a { color: inherit; text-decoration: none; }
.ctk p { margin: 0; }
.ctk ul, .ctk ol, .ctk dl, .ctk dd { margin: 0; padding: 0; }
.ctk li { list-style: none; }
.ctk img { display: block; max-width: 100%; height: auto; }
.ctk button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; letter-spacing: normal; text-transform: none; border-radius: 0; }
.ctk h1, .ctk h2, .ctk h3, .ctk h4 {
  font-family: var(--head); font-weight: 600; font-style: normal; text-transform: none;
  line-height: 1.05; letter-spacing: -.015em; color: var(--ink); margin: 0;
}
.ctk h1::before, .ctk h1::after, .ctk h2::before, .ctk h2::after,
.ctk h3::before, .ctk h3::after, .ctk h4::before, .ctk h4::after { content: none; }
.ctk strong { font-weight: 600; color: var(--ink); }
.ctk :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.ctk .ctk-icon { display: block; flex: 0 0 auto; width: 20px; height: 20px; }
.ctk .ctk-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip: rect(0, 0, 0, 0); white-space: nowrap; overflow: hidden; }
.ctk .ctk-skip { position: fixed; top: 12px; left: 12px; z-index: 80; background: var(--ink); color: #fff; padding: 12px 18px; font: 600 16px/1 var(--head); transform: translateY(-300%); }
.ctk .ctk-skip:focus { transform: none; }
.ctk .ctk-shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

@media (prefers-reduced-motion: no-preference) { html:has(.ctk) { scroll-behavior: smooth; } }

/* Buttons */
.ctk .ctk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px;
  background: var(--red); color: #fff;
  font: 600 18px/1 var(--head); letter-spacing: .01em;
  border-radius: 4px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.ctk .ctk-btn:hover { background: var(--red-deep); }
.ctk .ctk-btn--line { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.ctk .ctk-btn--line:hover { background: var(--ink); color: #fff; }
.ctk .ctk-btn--white { background: #fff; color: var(--red); }
.ctk .ctk-btn--white:hover { background: var(--sand); color: var(--red-deep); }

/* Hero */
.ctk .ctk-hero {
  position: relative; overflow: clip;
  padding-block: clamp(56px, 8vw, 112px) clamp(48px, 6vw, 88px);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #fff1f0 0%, #fffaf9 38%, #ffffff 62%, #fdeceb 100%);
}
.ctk .ctk-hero::before {
  content: ""; position: absolute; inset: -25% -15%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 48% at 84% 22%, rgba(201, 21, 23, .26) 0%, rgba(201, 21, 23, 0) 72%),
    radial-gradient(30% 42% at 100% 70%, rgba(201, 21, 23, .14) 0%, rgba(201, 21, 23, 0) 70%),
    radial-gradient(36% 46% at 6% 96%, rgba(201, 21, 23, .12) 0%, rgba(201, 21, 23, 0) 70%),
    radial-gradient(26% 36% at 30% 12%, rgba(29, 30, 34, .05) 0%, rgba(29, 30, 34, 0) 70%);
  will-change: transform;
}
.ctk .ctk-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .6) 56%, rgba(255, 255, 255, 0) 74%);
}
.ctk .ctk-hero .ctk-hero__index { border-top-color: rgba(29, 30, 34, .14); }
.ctk .ctk-hero .ctk-hero__index a { border-bottom-color: rgba(29, 30, 34, .14); }
.ctk .ctk-hero__grid { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: stretch; }
.ctk .ctk-hero__side { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-width: 0; }
.ctk .ctk-hero__logo { display: block; align-self: flex-end; width: min(300px, 60%); }
.ctk .ctk-hero__logo img { display: block; width: 100%; max-width: 300px; height: auto; }
/* Square-canvas crop: the mark sits between 30% and 70% of the file's height. */
.ctk .ctk-hero__logo[data-canvas="square"] { overflow: hidden; aspect-ratio: 1080 / 436; }
.ctk .ctk-hero__logo[data-canvas="square"] img { margin-top: -29.8%; }
.ctk .ctk-hero__office { font: 600 19px/1 var(--head); color: var(--red); margin-bottom: 22px; }
.ctk .ctk-hero h1 { font-size: clamp(46px, 5.4vw, 88px); font-weight: 700; line-height: .96; letter-spacing: -.03em; }
.ctk .ctk-hero__tagline { margin-top: 20px; font: 600 clamp(22px, 2.2vw, 28px)/1.2 var(--head); color: var(--ink); letter-spacing: -.01em; max-width: 30ch; }
.ctk .ctk-hero__lede { max-width: 60ch; margin-top: 22px; font-size: 17px; line-height: 1.7; }
.ctk .ctk-hero__lede p + p { margin-top: 12px; }
.ctk .ctk-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.ctk .ctk-hero__index { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.ctk .ctk-hero__index a {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name icon" "desc icon"; column-gap: 20px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--line);
  transition: padding-left .25s ease;
}
.ctk .ctk-hero__index-name { grid-area: name; font: 600 24px/1.1 var(--head); color: var(--ink); transition: color .18s ease; }
.ctk .ctk-hero__index-desc { grid-area: desc; font-size: 15px; line-height: 1.5; color: var(--muted); margin-top: 4px; max-width: 40ch; }
.ctk .ctk-hero__index .ctk-icon { grid-area: icon; color: var(--red); opacity: 0; transform: translateX(-8px); transition: opacity .2s ease, transform .25s ease; }
.ctk .ctk-hero__index a:hover { padding-left: 10px; }
.ctk .ctk-hero__index a:hover .ctk-hero__index-name { color: var(--red); }
.ctk .ctk-hero__index a:hover .ctk-icon, .ctk .ctk-hero__index a:focus-visible .ctk-icon { opacity: 1; transform: none; }

/* Sticky section navigation */
.ctk .ctk-nav {
  position: -webkit-sticky; position: sticky; top: var(--ctk-sticky-offset, 0px); z-index: 40;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.ctk .ctk-nav__inner { display: flex; gap: clamp(20px, 3vw, 40px); height: var(--nav-h); align-items: stretch; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ctk .ctk-nav__inner::after { content: ""; flex: 0 0 var(--gutter); }
.ctk .ctk-nav__inner::-webkit-scrollbar { display: none; }
.ctk .ctk-nav a { display: inline-flex; align-items: center; font: 600 17px/1 var(--head); color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .18s ease, border-color .18s ease; }
.ctk .ctk-nav a:hover { color: var(--ink); }
.ctk .ctk-nav a[aria-current="location"] { color: var(--ink); border-bottom-color: var(--red); }
.ctk .ctk-nav__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; }

/* Sections */
.ctk .ctk-section { padding-block: clamp(64px, 8vw, 120px); scroll-margin-top: calc(var(--ctk-sticky-offset, 0px) + var(--nav-h)); }
.ctk .ctk-section--sand { background: var(--sand); }
.ctk .ctk-section--ink { background: var(--ink); color: #c9cad0; }
.ctk .ctk-section--ink h2, .ctk .ctk-section--ink h3 { color: #fff; }
.ctk .ctk-head { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 24px clamp(32px, 4vw, 72px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.ctk .ctk-head h2 { font-size: clamp(40px, 4.6vw, 64px); font-weight: 700; letter-spacing: -.025em; }
.ctk .ctk-head p { max-width: 64ch; font-size: 17px; line-height: 1.7; }

/* Guides */
.ctk .ctk-guides { border-top: 1px solid var(--line); }
.ctk .ctk-guide { border-bottom: 1px solid var(--line); }
.ctk .ctk-guide summary {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) 44px; gap: 24px; align-items: start;
  padding: 30px 0; cursor: pointer; list-style: none;
}
.ctk .ctk-guide summary::-webkit-details-marker { display: none; }
.ctk .ctk-guide summary::marker { content: none; }
.ctk .ctk-guide__topic { font: 600 16px/1.3 var(--head); color: var(--red); padding-top: 12px; }
.ctk .ctk-guide__title { display: block; font: 600 clamp(28px, 3vw, 40px)/1.05 var(--head); letter-spacing: -.02em; color: var(--ink); transition: color .18s ease; }
.ctk .ctk-guide__intro { display: block; margin-top: 8px; font-size: 16px; color: var(--muted); max-width: 60ch; }
.ctk .ctk-guide__toggle {
  display: grid; place-items: center; width: 44px; height: 44px; margin-top: 2px;
  border: 1px solid var(--line); border-radius: 50%; color: var(--ink);
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .3s ease;
}
.ctk .ctk-guide summary:hover .ctk-guide__title { color: var(--red); }
.ctk .ctk-guide summary:hover .ctk-guide__toggle { border-color: var(--ink); }
.ctk .ctk-guide[open] .ctk-guide__toggle { background: var(--ink); color: #fff; border-color: var(--ink); transform: rotate(45deg); }

.ctk .ctk-guide__body { display: grid; grid-template-columns: minmax(0, 66ch) minmax(300px, 440px); gap: 40px clamp(32px, 4vw, 64px); padding: 8px 0 52px 174px; }
.ctk .ctk-guide__content { max-width: 64ch; }
.ctk .ctk-guide__content h3 { font-size: 22px; margin: 32px 0 12px; }
.ctk .ctk-guide__content h3:first-child { margin-top: 0; }
.ctk .ctk-guide__content p { font-size: 17px; line-height: 1.7; margin-bottom: 14px; }
.ctk .ctk-guide__content ul, .ctk .ctk-guide__content ol { margin-bottom: 14px; }
.ctk .ctk-guide__content li { position: relative; padding-left: 22px; margin-bottom: 10px; font-size: 17px; line-height: 1.6; }
.ctk .ctk-guide__content ul li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; background: var(--red); border-radius: 50%; }
.ctk .ctk-guide__content ol { counter-reset: ctk-step; }
.ctk .ctk-guide__content ol li { padding-left: 32px; counter-increment: ctk-step; }
.ctk .ctk-guide__content ol li::before { content: counter(ctk-step); position: absolute; left: 0; top: .05em; font: 600 17px/1.5 var(--head); color: var(--red); }
.ctk .ctk-guide__content blockquote { margin: 18px 0 16px; padding: 4px 0 4px 22px; border-left: 2px solid var(--red); font: 500 20px/1.5 var(--head); color: var(--ink); }
.ctk .ctk-example-label { font: 600 15px/1.3 var(--head) !important; color: var(--muted); margin: 16px 0 6px !important; }
.ctk .ctk-guide__content blockquote.is-improved { background: var(--sand); border-left-color: var(--red); padding: 16px 20px; border-radius: 0 8px 8px 0; }
.ctk .ctk-guide__content blockquote:not(.is-improved) { border-left-color: var(--ink); }
.ctk .ctk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px !important; }
.ctk .ctk-chips li { padding: 7px 14px !important; margin: 0 !important; border: 1px solid var(--line); border-radius: 999px; font: 600 15px/1.2 var(--head) !important; color: var(--ink); }
.ctk .ctk-chips li::before { content: none !important; }
.ctk .ctk-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.ctk .ctk-star { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 6px 0 22px; }
.ctk .ctk-star > div { padding: 14px 0 0; border-top: 2px solid var(--ink); }
.ctk .ctk-star dt { font: 600 20px/1.1 var(--head); color: var(--ink); }
.ctk .ctk-star dd { font-size: 14px; color: var(--muted); margin-top: 4px; }
.ctk .ctk-guide__next { align-self: start; padding: 24px 26px 22px; background: var(--sand); border-radius: 8px; }
.ctk .ctk-guide__next h4 { font-size: 20px; margin-bottom: 12px; }
.ctk .ctk-guide__resources li { border-top: 1px solid rgba(29, 30, 34, .1); }
.ctk .ctk-guide__resources li > a, .ctk .ctk-guide__resources li > span { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 11px 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.ctk .ctk-guide__resources .ctk-icon { width: 17px; height: 17px; margin-top: 2px; color: var(--red); }
.ctk .ctk-guide__resources .is-pending { color: var(--ink-2); }
.ctk .ctk-guide__resources .is-pending .ctk-icon { color: var(--muted); }
.ctk .ctk-guide__resources em { font: 600 13px/1.6 var(--head); font-style: normal; color: var(--muted); white-space: nowrap; }
.ctk .ctk-guide__resources a:hover span:not(.ctk-sr) { color: var(--red); }
.ctk .ctk-guide__next-note { margin-top: 12px; font-size: 13px; color: var(--muted); }
.ctk .ctk-guide__next p { font-size: 16px; line-height: 1.65; }

/* Native open/close transition. Chrome and Edge animate; other browsers open instantly. */
.ctk .ctk-guide::details-content { height: 0; overflow: clip; transition: height .4s cubic-bezier(.4, 0, .2, 1), content-visibility .4s allow-discrete; }
.ctk .ctk-guide[open]::details-content { height: auto; }

/* Resources */
.ctk .ctk-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.ctk .ctk-filter button { padding: 0 16px; height: 40px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 600 16px/1 var(--head); color: var(--ink-2); transition: background .18s ease, color .18s ease, border-color .18s ease; }
.ctk .ctk-filter button:hover { border-color: var(--ink); color: var(--ink); }
.ctk .ctk-filter button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

.ctk .ctk-resources { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.ctk .ctk-resource { display: flex; flex-direction: column; padding: 28px 26px 24px; background: #fff; border: 1px solid var(--line); border-radius: 10px; transition: border-color .18s ease, transform .25s ease; }
.ctk .ctk-resource:hover { border-color: var(--ink); }
.ctk .ctk-resource.is-pending { background: transparent; border-style: dashed; }
.ctk .ctk-resource__category { font: 600 14px/1 var(--head); color: var(--red); margin-bottom: 18px; }
.ctk .ctk-resource h3 { font-size: 26px; line-height: 1.05; }
.ctk .ctk-resource__desc { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.ctk .ctk-resource__foot { margin-top: auto; padding-top: 26px; }
.ctk .ctk-resource__link { display: inline-flex; align-items: center; gap: 8px; font: 600 17px/1 var(--head); color: var(--ink); }
.ctk .ctk-resource__link:hover { color: var(--red); }
.ctk .ctk-resource__link .ctk-icon { width: 18px; height: 18px; }
.ctk .ctk-resource__format { color: var(--muted); font-weight: 500; }
.ctk .ctk-resource__pending { display: inline-flex; align-items: center; gap: 8px; font: 600 16px/1 var(--head); color: var(--muted); }
.ctk .ctk-resource__pending .ctk-icon { width: 17px; height: 17px; }
.ctk .ctk-resources__empty { padding: 32px 0; font-size: 17px; color: var(--muted); }

/* Digital tools */
.ctk .ctk-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); border-top: 1px solid var(--line); }
.ctk .ctk-tool { display: grid; grid-template-columns: 48px 1fr auto; grid-template-areas: "logo name icon" "logo desc icon"; column-gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.ctk .ctk-tool__logo { grid-area: logo; align-self: start; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .18s ease; }
.ctk .ctk-tool__logo img { width: 28px; height: 28px; object-fit: contain; }
.ctk .ctk-tool:hover .ctk-tool__logo { border-color: var(--ink); }
.ctk .ctk-tool__name { grid-area: name; font: 600 24px/1.1 var(--head); color: var(--ink); transition: color .18s ease; }
.ctk .ctk-tool__desc { grid-area: desc; margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.ctk .ctk-tool .ctk-icon { grid-area: icon; width: 18px; height: 18px; color: var(--muted); transition: color .18s ease, transform .2s ease; }
.ctk .ctk-tool:hover .ctk-tool__name { color: var(--red); }
.ctk .ctk-tool:hover .ctk-icon { color: var(--red); transform: translate(2px, -2px); }

/* Notes under the tools list */
.ctk .ctk-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 640px)); gap: 32px clamp(32px, 4vw, 72px); margin-top: clamp(40px, 5vw, 64px); }
.ctk .ctk-notes h3 { font-size: 22px; margin-bottom: 12px; }
.ctk .ctk-notes p { font-size: 17px; line-height: 1.7; max-width: 58ch; }
.ctk .ctk-notes li { position: relative; padding-left: 22px; margin-bottom: 10px; font-size: 17px; line-height: 1.6; }
.ctk .ctk-notes li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; background: var(--red); border-radius: 50%; }

/* Career readiness checklist: a reference list, not a tracker */
.ctk .ctk-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); border-top: 1px solid rgba(29, 30, 34, .12); }
.ctk .ctk-checklist li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px 0; border-bottom: 1px solid rgba(29, 30, 34, .12); font-size: 17px; line-height: 1.55; color: var(--ink); }
.ctk .ctk-checklist .ctk-icon { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--red); color: #fff; }

/* Featured success tip */
.ctk .ctk-tip__inner { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 24px clamp(32px, 4vw, 72px); align-items: start; }
.ctk .ctk-tip h2 { font-size: clamp(34px, 4vw, 52px); font-weight: 700; letter-spacing: -.025em; }
.ctk .ctk-tip__lead { font: 600 clamp(22px, 2.2vw, 28px)/1.35 var(--head); color: #fff; letter-spacing: -.01em; margin-bottom: 18px; }
.ctk .ctk-tip p:not(.ctk-tip__lead) { font-size: 17px; line-height: 1.7; max-width: 60ch; }

/* Contact */
.ctk .ctk-contact { background: var(--red); color: #fff; padding-block: clamp(56px, 7vw, 96px); scroll-margin-top: calc(var(--ctk-sticky-offset, 0px) + var(--nav-h)); }
.ctk .ctk-contact__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px clamp(32px, 5vw, 80px); align-items: center; }
.ctk .ctk-contact h2 { color: #fff; font-size: clamp(34px, 4vw, 52px); font-weight: 700; letter-spacing: -.025em; max-width: 16ch; }
.ctk .ctk-contact p { margin-top: 14px; font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, .86); max-width: 48ch; }
.ctk .ctk-contact__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ctk .ctk-contact__mail { font: 600 18px/1.2 var(--head); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.ctk .ctk-contact__mail:hover { text-decoration-thickness: 2px; }

/* Motion. One load sequence in the hero, one scroll-linked reveal per block, one progress line. */
@keyframes ctk-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes ctk-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ctk-drift { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-3%, 2.5%, 0); } 100% { transform: translate3d(0, 0, 0); } }

@media (prefers-reduced-motion: no-preference) {
  .ctk .ctk-hero__office, .ctk .ctk-hero h1, .ctk .ctk-hero__tagline, .ctk .ctk-hero__lede, .ctk .ctk-hero__actions { animation: ctk-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .ctk .ctk-hero h1 { animation-delay: .08s; }
  .ctk .ctk-hero__tagline { animation-delay: .14s; }
  .ctk .ctk-hero__lede { animation-delay: .2s; }
  .ctk .ctk-hero__actions { animation-delay: .26s; }
  .ctk .ctk-hero::before { animation: ctk-drift 28s ease-in-out infinite; }
  .ctk .ctk-hero__logo { animation: ctk-rise .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: .1s; }
  .ctk .ctk-hero__index a { animation: ctk-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .ctk .ctk-hero__index a:nth-child(1) { animation-delay: .28s; }
  .ctk .ctk-hero__index a:nth-child(2) { animation-delay: .36s; }
  .ctk .ctk-hero__index a:nth-child(3) { animation-delay: .44s; }
  .ctk .ctk-hero__index a:nth-child(4) { animation-delay: .52s; }

  @supports (animation-timeline: view()) {
    .ctk .ctk-reveal { animation: ctk-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    .ctk .ctk-nav__progress { animation: ctk-grow linear both; animation-timeline: scroll(root); }
  }
}

/* Responsive */
@media (max-width: 1024px) {
  .ctk .ctk-guide__body { grid-template-columns: 1fr; padding-left: 174px; }
  .ctk .ctk-guide__next { position: static; }
  .ctk .ctk-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .ctk .ctk-hero__grid { grid-template-columns: 1fr; }
  .ctk .ctk-hero__side { gap: 28px; }
  .ctk .ctk-hero__logo { align-self: flex-start; width: 220px; }
  .ctk .ctk-head { grid-template-columns: 1fr; align-items: start; }
  .ctk .ctk-contact__inner { grid-template-columns: 1fr; }
  .ctk .ctk-tip__inner { grid-template-columns: 1fr; }
  .ctk .ctk-notes { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ctk .ctk-guide summary { grid-template-columns: minmax(0, 1fr) 40px; gap: 6px 16px; padding: 24px 0; }
  .ctk .ctk-guide__topic { grid-column: 1; padding-top: 0; }
  .ctk .ctk-guide__toggle { grid-column: 2; grid-row: 1 / span 2; width: 40px; height: 40px; }
  .ctk .ctk-guide__lead { grid-column: 1; }
  .ctk .ctk-guide__body { padding: 4px 0 40px; }
  .ctk .ctk-star { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctk .ctk-tools { grid-template-columns: 1fr; }
  .ctk .ctk-checklist { grid-template-columns: 1fr; }
  .ctk .ctk-cols { grid-template-columns: 1fr; }
  .ctk .ctk-hero__br { display: none; }
  .ctk .ctk-head { margin-bottom: 32px; }
  .ctk .ctk-resource { padding: 24px 22px 20px; }
}
@media (max-width: 480px) {
  .ctk { --nav-h: 54px; }
  .ctk .ctk-hero { padding-block: 44px 40px; }
  .ctk .ctk-hero__lede { font-size: 17px; margin-top: 22px; }
  .ctk .ctk-hero__actions { margin-top: 28px; }
  .ctk .ctk-hero__actions .ctk-btn { flex: 1 1 100%; }
  .ctk .ctk-hero__index-name { font-size: 22px; }
  .ctk .ctk-nav a { font-size: 16px; }
  .ctk .ctk-guide__title { font-size: 26px; }
  .ctk .ctk-guide__content p, .ctk .ctk-guide__content li { font-size: 16px; }
  .ctk .ctk-guide__content blockquote { font-size: 18px; padding-left: 16px; }
  .ctk .ctk-hero__tagline { font-size: 21px; }
  .ctk .ctk-checklist li { font-size: 16px; }
  .ctk .ctk-guide__next { padding: 22px 20px; }
  .ctk .ctk-star { grid-template-columns: 1fr; gap: 12px; }
  .ctk .ctk-resource h3 { font-size: 24px; }
  .ctk .ctk-contact__actions .ctk-btn { width: 100%; }
  .ctk .ctk-contact__mail { font-size: 17px; word-break: break-all; }
}
@media (min-width: 1600px) {
  .ctk .ctk-hero h1 { font-size: 96px; }
}

/* Sticky nav guard. position: sticky stops working when any ancestor has overflow hidden or auto,
   which HubSpot section wrappers and some themes set. overflow: clip clips the same way without breaking sticky. */
   :is(html, body):has(.ctk) { overflow-x: clip; }
   body *:has(.ctk) { overflow: visible !important; }
   
/* Print: a readable document, no chrome. */
@media print {
  .ctk .ctk-nav, .ctk .ctk-skip, .ctk .ctk-filter, .ctk .ctk-guide__toggle, .ctk .ctk-hero__actions, .ctk .ctk-contact__actions { display: none !important; }
  .ctk .ctk-guide::details-content { height: auto; }
  .ctk .ctk-section--ink { background: none; color: var(--ink-2); }
  .ctk .ctk-section--ink h2, .ctk .ctk-section--ink h3 { color: var(--ink); }
  .ctk .ctk-contact { background: none; color: var(--ink); }
}