/* ==========================================================
   CutoutPix — Free Trial page styles
   Depends on style.css being loaded FIRST on this page
   (uses its CSS variables, fonts, .btn / .field / .dropzone
   components). Does not redefine or override anything in
   style.css — safe to load alongside it everywhere.
   ========================================================== */

.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

/* page background (overrides style.css's body background for this page only) */
body{background:#F7F2FA;}

/* ---------- header ---------- */
header{border-bottom:1px solid var(--border);background:var(--surface);}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 0;}
.brand{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;color:var(--ink);}
.brand-mark img{display:block;border-radius:8px;}
.nav-links{display:flex;align-items:center;gap:28px;}
.nav-links a{font-size:13.5px;font-weight:500;color:var(--ink-dim);}
.nav-links a:hover,.nav-links a.active{color:var(--chroma-dim);}

/* ---------- hero ---------- */
.hero{padding:56px 0 48px;background:linear-gradient(180deg,var(--chroma-tint) 0%,#F7F2FA 70%);}
.hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;}
.kicker{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);color:var(--chroma-dim);font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:20px;margin-bottom:18px;}
.kicker svg{width:14px;height:14px;}
.hero h1{font-size:38px;line-height:1.15;margin:0 0 16px;}
.lead{font-size:15.5px;line-height:1.65;color:var(--ink-dim);margin:0 0 26px;max-width:560px;}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.hero-stats div{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 10px;font-size:11px;color:var(--ink-dim);text-align:center;}
.hero-stats strong{display:block;font-family:'Space Grotesk',sans-serif;font-size:18px;color:var(--ink);margin-bottom:2px;}

.hero-visual{display:flex;justify-content:center;}
.path-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow);max-width:400px;width:100%;}
.path-card svg{width:100%;border-radius:10px;display:block;}
.anchor-line{fill:none;stroke:var(--chroma);stroke-width:2;stroke-dasharray:6 5;}
.anchor{fill:#fff;stroke:var(--chroma);stroke-width:2;}
.path-caption{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-faint);margin-top:12px;}

/* ---------- generic section ---------- */
section{padding:52px 0;}
.section-head{text-align:center;margin-bottom:28px;}
.section-head h2{font-size:25px;}

/* ---------- trial form section ---------- */
#trial .wrap{background:#ffffff;border-radius:20px;padding-top:30px;padding-bottom:50px;}
.trial{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch;}

/* left block: info panel */
.trial-info{background:#183444;color:#ffffff;border-radius:20px;padding:40px;display:flex;flex-direction:column;}
.trial-info h2{font-size:22px;margin-bottom:8px;color:#ffffff;}
.trial-info > p{color:#ffffff;opacity:.85;font-size:13.5px;margin:0 0 20px;}
.trial-info ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.trial-info li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:#ffffff;}
.trial-info li svg{flex:none;width:18px;height:18px;color:var(--chroma);margin-top:1px;}
.trial-info-img{width:100%;flex:1;min-height:160px;object-fit:cover;border-radius:10px;margin-top:20px;display:block;}

/* right block: form panel */
.trial-form{background:var(--surface);border:2px solid #9AA0A6;border-radius:20px;padding:40px;box-shadow:var(--shadow);}

.req{color:var(--red);}
.form-note{font-size:12.5px;margin-top:4px;}
.field input.field-invalid,.field textarea.field-invalid,.dropzone.field-invalid{border-color:var(--red) !important;}

.success{display:none;text-align:center;padding:30px 10px;}
.success svg{width:46px;height:46px;color:var(--chroma);background:var(--chroma-tint);border-radius:50%;padding:10px;margin-bottom:14px;box-sizing:border-box;}
.success h3{font-size:18px;margin-bottom:8px;}
.success p{color:var(--ink-dim);font-size:13.5px;margin:0;}

/* ---------- FAQ accordion ---------- */
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;padding:18px 2px;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left;font-family:inherit;}
.faq-q svg{flex:none;color:var(--ink-faint);transition:transform .2s;}
.faq-item.open .faq-q svg{transform:rotate(45deg);color:var(--chroma);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-item.open .faq-a{max-height:220px;}
.faq-a p{margin:0 0 18px;font-size:13.5px;color:var(--ink-dim);line-height:1.6;}

/* ---------- CTA band ---------- */
.cta-band{background:#183444;border-radius:20px;padding:44px;text-align:center;color:#ffffff;}
.cta-band h2{font-size:23px;margin-bottom:8px;color:#ffffff;}
.cta-band p{color:#ffffff;font-size:14px;margin:0 0 22px;}
.cta-band .btn{width:auto;display:inline-flex;padding:12px 26px;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--border);padding:24px 0;background:var(--surface);}
.footer-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--ink-faint);}
.footer-row a{color:var(--ink-dim);}
.footer-row a:hover{color:var(--chroma-dim);}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{order:-1;}
  .trial{grid-template-columns:1fr;}
  .trial-info,.trial-form{padding:28px;}
  .hero-stats{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  .nav-links{display:none;}
  .hero h1{font-size:30px;}
  .cta-band{padding:32px 20px;}
}