/* Craftr homepage: inline <style> blocks lifted verbatim from the v5.12 index.html.
   Loaded only for the Home Inertia page (see resources/views/app.blade.php). */

      .preloader-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 420px;
      }
      .preloader-logo-base {
        display: block;
        width: 100%;
        height: auto;
        opacity: 0.92;
      }
      .preloader-logo-sweep {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        clip-path: circle(60px at 0% 50%);
        animation: preloaderLogoSweep 2s infinite alternate;
      }
      @keyframes preloaderLogoSweep {
        from { clip-path: circle(60px at 0% 50%); }
        to { clip-path: circle(60px at 100% 50%); }
      }
      @media (max-width: 1040px) {
        .preloader-logo {
          width: 280px;
        }
      }

      .preloader.preloader--hidden {
        display: none !important;
      }

      /* Text wordmark and active nav state, shared with the tool pages (css/tools.css). */
      .tool-logo {
        color: var(--black);
        font-size: 28px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.02em;
        text-decoration: none;
      }
      .tool-logo span {
        color: var(--theme);
        -webkit-text-stroke: 1px rgba(0, 0, 0, 0.25);
      }
      .tool-logo .tool-logo-img {
        display: block;
        height: 34px;
        width: auto;
      }
      .main-menu .navbar-nav > ul > li > a[aria-current="page"],
      #mobile-nav a[aria-current="page"] {
        position: relative;
      }
      /* Menu labels read as normal sentence case, not uppercase. */
      header nav ul a,
      .main-menu-mobile nav ul a {
        text-transform: none;
      }
      /* Hero portrait with floating product chips */
      .hero-visual {
        position: relative;
        max-width: 560px;
        margin-left: auto;
      }
      .hero-visual img {
        display: block;
        width: auto;
        max-width: 82%;
        margin: 0 auto;
        /* Keep the portrait + chips inside the first viewport instead of pushing
           the hero taller than the screen (which pushed the headline to the bottom
           and cropped the bottom chip). */
        max-height: min(64vh, 620px);
      }
      .hero-visual::before {
        content: "";
        position: absolute;
        inset: 18% 4% 0 10%;
        z-index: -1;
        border-radius: 40px 40px 0 0;
        background: var(--theme);
      }
      .hero-chip {
        position: absolute;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 18px;
        border-radius: 18px;
        background: var(--white);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
        color: var(--dark);
        font-size: 15px;
        line-height: 1.3;
        white-space: nowrap;
      }
      .hero-chip strong {
        display: block;
        color: var(--black);
        font-size: 18px;
      }
      .hero-chip i {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: var(--dark-3);
        color: var(--theme);
        font-size: 18px;
      }
      .hero-chip--score { top: 30%; left: -6%; }
      .hero-chip--jobs { top: 54%; right: 0; }
      .hero-chip--export { bottom: 9%; left: 2%; }

      /* Spaced-out hero heading. Own font-size so the uppercase spacing never
         overflows narrow screens (the template's 80px/55px h1 sizes did). */
      .hero-title {
        font-size: clamp(38px, 6vw, 86px);
        letter-spacing: 0.1em;
      }

      /* Vertically balanced hero: a calmer gap under the header so the headline,
         portrait and chips all sit comfortably inside the first viewport. */
      #home.banner {
        padding-top: 160px;
        padding-bottom: 40px;
      }
      @media (max-width: 991px) {
        #home.banner {
          padding-top: 120px;
        }
      }

      /* Centered, demo4-style hero: badge pill, sentence-case heading and
         centered actions; the portrait hangs off the left as a side visual. */
      .hero-pill {
        display: inline-flex;
        align-items: center;
        padding: 6px;
        border-radius: 999px;
        background: var(--gray);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
      }
      .hero-pill-tag {
        padding: 7px 16px;
        border-radius: 999px;
        background: var(--theme);
        color: var(--black);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      .hero-pill-text {
        padding: 0 16px;
        color: var(--dark);
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .hero-title-sentence {
        text-transform: none;
        font-size: clamp(34px, 4.8vw, 74px);
        letter-spacing: -0.01em;
        line-height: 1.08;
      }
      .hero-lead {
        max-width: 620px;
        font-size: 18px;
      }
      /* On very narrow screens (320px) the pill is wider than the column -
         let it drop to two centred lines instead of overflowing. */
      @media (max-width: 342px) {
        .hero-pill {
          flex-wrap: wrap;
          justify-content: center;
          text-align: center;
        }
      }
      .hero-visual--side {
        position: absolute;
        left: -20px;
        bottom: 0;
        max-width: 360px;
        margin: 0;
        z-index: 1;
      }
      .hero-visual--side img {
        max-width: 88%;
        max-height: min(42vh, 420px);
      }
      .hero-visual--side .hero-chip--score { top: 24%; left: auto; right: -4%; }
      .hero-visual--side .hero-chip--jobs { top: 47%; left: -6%; right: auto; }
      .hero-visual--side .hero-chip--export { bottom: 4%; left: auto; right: 0; }
      /* Crafto-style hero: soft gradient photo as full-bleed banner backdrop. */
      #home.banner {
        background: url("/legacy/images/demo-recruitment-hero-banner-bg.jpg") center /
          cover no-repeat;
      }
      .hero-particles {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        pointer-events: none;
      }
      /* Gentle Crafto-style float for the side visuals. */
      @keyframes hero-float {
        0%,
        100% {
          transform: translateY(-10px);
        }
        50% {
          transform: translateY(12px);
        }
      }
      .hero-card--right {
        position: absolute;
        top: 45%;
        right: 24px;
        width: min(19vw, 250px);
        z-index: 1;
        animation: hero-float 11s ease-in-out infinite;
      }
      .hero-card--right img {
        display: block;
        width: 100%;
        border-radius: 24px;
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.16);
      }
      @media (prefers-reduced-motion: reduce) {
        .hero-card--right {
          animation: none;
        }
      }

      /* The absolute portrait no longer adds height: give the pinned hero a
         full-viewport floor on large screens so it doesn't crowd the section
         below. */
      @media (min-width: 1200px) {
        #home.banner {
          min-height: 100vh;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
      }

      /* Real product screenshots */
      .shot {
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
      }

      /* Career paths showcase: the strip is 300% wide and JS slides it one
         container-width per card, so every card must be exactly 1/3 of the
         strip with no extra gaps - otherwise each card ends up slightly
         narrower than the slide step and ~100px gets cut from the right edge. */
      @media (min-width: 768px) {
        #projects .projects-items {
          gap: 0;
        }
        #projects .project-item-container {
          width: calc(100% / 3);
          flex: none;
        }
      }

      /* Before / After comparison - Careerflow-style two-column comparison */
      .ba-section {
        background: var(--white);
        padding-top: 80px;
        padding-bottom: 60px;
      }
      .ba-head {
        text-align: center;
      }
      .ba-title {
        margin: 0 auto;
        max-width: 820px;
        color: var(--dark);
        font-size: clamp(30px, 3vw, 40px);
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: -0.02em;
      }
      .ba-highlight {
        color: #1570ef;
      }
      .ba-sub {
        max-width: 640px;
        margin: 12px auto 0;
        color: #475467;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: -0.02em;
      }
      .ba-grid {
        display: grid;
        grid-template-columns: 1fr 0.25fr 1fr;
        column-gap: 52px;
        row-gap: 20px;
      }
      .ba-headings {
        margin-top: 80px;
      }
      .ba-head-cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        text-align: center;
      }
      .ba-label {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .ba-label i {
        font-size: 34px;
        line-height: 1;
      }
      .ba-label .ba-icon-x { color: #dd3125; }
      .ba-label .ba-icon-check { color: #027a48; }
      .ba-label-text {
        font-size: 18px;
        font-weight: 600;
        line-height: 26px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }
      .ba-label--before .ba-label-text { color: #dd3125; }
      .ba-label--after .ba-label-text { color: #027a48; }
      .ba-sub-head {
        margin: 0;
        color: #101828;
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
        letter-spacing: -0.02em;
        max-width: 460px;
      }
      .ba-col {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
      .ba-row {
        display: flex;
        align-items: center;
        gap: 16px;
        background: #fff;
        border: 2px solid #e4e7ec;
        border-radius: 12px;
        padding: 24px 32px;
        transition: border-color .3s ease, box-shadow .3s ease;
      }
      .ba-row-ic {
        flex: none;
        width: 40px;
        font-size: 26px;
        color: #101828;
        text-align: center;
      }
      .ba-row h4 {
        margin: 0;
        color: #101828;
        font-size: 22px;
        font-weight: 600;
        line-height: 26px;
        letter-spacing: -0.01em;
      }
      .ba-row p {
        margin: 2px 0 0;
        color: #475467;
        font-size: 18px;
        line-height: 24px;
        letter-spacing: -0.01em;
      }
      .ba-col--before .ba-row.is-active,
      .ba-col--before .ba-row:hover { border-color: #f8afaa; }
      .ba-col--after .ba-row.is-active,
      .ba-col--after .ba-row:hover {
        border-color: #9ae5b8;
        box-shadow: 0 0 30px #e5fff4;
      }
      .ba-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .ba-arrow--v { display: none; }
      /* Decorative dot strip that separates Careerflow's sections */
      .ba-dots {
        max-width: 60%;
        height: 96px;
        margin: 40px auto 0;
        background-image: radial-gradient(#cbd5e4 2px, transparent 2.4px);
        background-size: 22px 22px;
        opacity: 0.55;
      }
      @media (max-width: 991px) {
        .ba-section { padding-top: 60px; }
        .ba-grid { grid-template-columns: 1fr; }
        .ba-arrow--h { display: none; }
        .ba-arrow--v {
          display: flex;
          margin: -6px auto;
          order: 2;
        }
        .ba-col--before { order: 1; }
        .ba-col--after { order: 3; }
        .ba-arrow--v svg { transform: rotate(90deg); }
        .ba-row { padding: 20px; }
        .ba-row h4 { font-size: 18px; line-height: 24px; }
        .ba-row p { font-size: 16px; line-height: 25px; padding-right: 10px; }
        .ba-sub-head { font-size: 18px; line-height: 26px; }
        .ba-dots { margin-top: 24px; height: 64px; }
      }

      /* How it works (reuses the dark testimonial band) */
      .how-it-works::before,
      .how-it-works::after {
        display: none;
      }
      .how-step {
        height: 100%;
        padding: 34px 30px;
      }
      .how-step-number {
        display: inline-grid;
        place-items: center;
        width: 54px;
        height: 54px;
        border-radius: 16px;
        background: var(--theme);
        color: var(--black);
        font-size: 20px;
        font-weight: 700;
      }
      .how-step p {
        color: var(--text);
      }

      /* FAQ card (replaces the template contact form) */
      .faq-card details {
        padding: 20px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      }
      .faq-card details:first-child {
        padding-top: 0;
      }
      .faq-card details:last-child {
        padding-bottom: 0;
        border-bottom: 0;
      }
      .faq-card summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        color: var(--black);
        font-size: 20px;
        font-weight: 600;
        cursor: pointer;
        list-style: none;
      }
      .faq-card summary::-webkit-details-marker {
        display: none;
      }
      .faq-card summary::after {
        content: "+";
        flex: none;
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--theme);
        font-size: 22px;
        transition: transform 0.3s ease;
      }
      .faq-card details[open] summary::after {
        transform: rotate(45deg);
      }
      .faq-card details p {
        margin-top: 12px;
        color: var(--text);
      }

      /* Course provider strip (replaces placeholder brand logos) */
      .provider-strip .brand-item {
        color: #b9babd;
        font-size: 26px;
        font-weight: 700;
        white-space: nowrap;
      }
      .footer-cta a {
        border-bottom: 2px solid var(--theme);
      }

      @media (max-width: 767px) {
        .faq-card summary {
          font-size: 17px;
        }
        .provider-strip .brand-item {
          font-size: 20px;
        }
      }

      .main-menu .navbar-nav > ul > li > a[aria-current="page"]::after {
        content: "";
        position: absolute;
        left: 0;
        right: 20px;
        bottom: -6px;
        height: 3px;
        border-radius: 3px;
        background: var(--theme);
      }

      /* Homepage contact / career interest form */
      .craftr-contact-section{padding:100px 0 20px}
      .craftr-contact-wrap{background:#f6f7f9;border:1px solid #e4e6ea;border-radius:32px;padding:clamp(24px,4vw,55px);display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,60px)}
      .craftr-contact-wrap h2{font-size:clamp(30px,3.5vw,52px);line-height:1.12;margin:10px 0 18px;color:#111}
      .craftr-contact-wrap p{color:#5e5f63;line-height:1.75}
      .craftr-contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
      .craftr-contact-field{display:flex;flex-direction:column;gap:7px;min-width:0}
      .craftr-contact-field.full{grid-column:1/-1}
      .craftr-contact-field label{font-weight:650;font-size:14px;color:#222}
      .craftr-contact-field input,.craftr-contact-field textarea{display:block;width:100%;min-height:51px;border:1px solid #d9dcdf;border-radius:13px;background:#fff;padding:13px 15px;color:#171717;font:inherit;line-height:1.35;box-sizing:border-box}
      .craftr-contact-field textarea{min-height:115px;resize:vertical}
      .craftr-contact-field input:focus,.craftr-contact-field textarea:focus{outline:2px solid #9ccc51;outline-offset:1px}
      .craftr-contact-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:20px}
      .craftr-contact-submit{border:0;border-radius:14px;background:#cdfe7d;color:#131313;font-weight:750;padding:16px 28px;cursor:pointer}
      .craftr-contact-submit:disabled{opacity:.6;cursor:wait}
      .craftr-contact-status{font-size:14px;line-height:1.5;min-height:20px;flex:1}
      .craftr-contact-status[data-state=error]{color:#a31d1d}
      .craftr-contact-status[data-state=success]{color:#236338}
      .craftr-contact-note{font-size:13px;margin-top:14px}
      .craftr-contact-trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
      @media(max-width:850px){.craftr-contact-wrap{grid-template-columns:1fr}.craftr-contact-section{padding-top:65px}}
      @media(max-width:520px){.craftr-contact-grid{grid-template-columns:1fr}.craftr-contact-field.full{grid-column:auto}}

/* ---- next legacy inline block ---- */

.craftr-expanded{padding:90px 0;background:#f6f7f9;margin-top:85px}.craftr-expanded-label{font-weight:750;letter-spacing:.13em;font-size:13px}.craftr-expanded h2{font-size:clamp(30px,4.5vw,56px);line-height:1.12;max-width:880px;margin:16px 0 20px}.craftr-expanded-intro{max-width:750px;color:#5e5f63;font-size:17px;line-height:1.7}.craftr-expanded-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:34px}.craftr-expanded-grid article{background:#fff;border:1px solid #e4e6ea;border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:14px}.craftr-expanded-number{display:inline-flex;font-weight:800;color:#45720c;letter-spacing:.06em}.craftr-expanded-grid h3{font-size:21px;margin:0}.craftr-expanded-grid p{color:#5e5f63;line-height:1.6;flex:1}.craftr-expanded-grid a{color:#1e260e;font-weight:750;text-decoration:underline;text-decoration-color:#8cc43c;text-underline-offset:5px}.craftr-expanded-footnote{margin-top:22px;color:#606369;font-size:13px}@media(max-width:991px){.craftr-expanded-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:575px){.craftr-expanded{padding:55px 0}.craftr-expanded-grid{grid-template-columns:1fr}}