/* Shared page hero (matches inner pages like Pricing, Features) */
.page-hero{position:relative; padding:80px 0 56px; overflow:hidden; text-align:center;
  background:linear-gradient(128deg, #FDF1EF 0%, #F8F4FC 48%, #EFE9FC 100%);
}
.page-hero::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(28,24,48,0.07) 1.3px, transparent 1.3px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 20%, #000 40%, transparent 100%);
          mask-image:radial-gradient(ellipse 70% 70% at 50% 20%, #000 40%, transparent 100%);
}
.page-hero .wrap{position:relative; z-index:1;}
.page-hero h1{font-size:clamp(30px,4vw,46px); font-weight:800; line-height:1.15; max-width:820px; margin:0 auto;}
.page-hero .hl{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.page-hero p.lead-sm{font-family:'Sora',sans-serif; font-weight:700; font-size:19px; color:var(--ink); max-width:640px; margin:16px auto 0;}
.page-hero p{color:var(--ink-soft); font-size:16.5px; max-width:640px; margin:14px auto 0;}
.page-hero-ctas{display:flex; gap:14px; justify-content:center; margin-top:30px; flex-wrap:wrap;}
.page-hero .hero-tags{justify-content:center; margin:28px 0 0;}

/* Extra trust-tag icon (extends the shared hero-tags / cta-trust icon set) */
.hero-tags span.tag-support::before, .cta-trust span.tag-support::before{
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237658F7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 13a8 8 0 0 1 16 0'/><path d='M4 13v4a2 2 0 0 0 2 2h1v-6H5a1 1 0 0 0-1 1z'/><path d='M20 13v4a2 2 0 0 1-2 2h-1v-6h1a1 1 0 0 1 1 1z'/></svg>");
}

/* Product preview device frame */
.ft-preview{padding:56px 0 90px;}
.ft-device-wrap{max-width:840px; margin:0 auto;}
.ft-device-wrap .device-browser{max-width:none;}
.ft-device-wrap .device-body{padding:0;}
.ft-device-wrap picture, .ft-device-wrap img{display:block; width:100%; height:auto;}

/* Problem -> Solution compare grid */
.compare-section{padding:90px 0; background:var(--bg-alt);}
.compare-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:900px; margin:44px auto 0;}
.compare-card{background:#fff; border:1.5px solid var(--line); border-radius:18px; padding:30px 28px;}
.compare-card h3{font-size:17px; margin-bottom:18px;}
.compare-card ul{display:flex; flex-direction:column; gap:12px;}
.compare-card li{font-size:14.5px; color:var(--ink-soft); padding-left:26px; position:relative;}
.compare-card.before li::before{content:'✕'; position:absolute; left:0; top:1px; color:var(--ink-faint); font-weight:700; font-size:13px;}
.compare-card.after{background:var(--violet-tint); border-color:#DDD3FB;}
.compare-card.after li{color:var(--ink);}
.compare-card.after li::before{content:'✓'; position:absolute; left:0; top:1px; color:var(--violet-dark); font-weight:700; font-size:13px;}

/* Use cases */
.ft-usecases{padding:90px 0;}
.ft-usecases .pill-cloud span{background:var(--bg-alt); border:1px solid var(--line); color:var(--ink);}
.ft-usecases .section-foot{text-align:center; margin-top:36px;}

/* How it works — 4 steps */
.ft-how .how-grid{grid-template-columns:repeat(4,1fr);}

/* Benefits checklist */
.ft-benefits{padding:90px 0; background:var(--bg-alt);}
.ft-benefits-grid{display:grid; grid-template-columns:1fr 1fr; gap:2px 32px; max-width:820px; margin:0 auto;}

/* Trust / security */
.ft-trust-section{padding:80px 0; text-align:center;}
.ft-trust-section .wrap{max-width:760px;}

/* Start Trial — embedded signup wizard */
.trial-form-section{padding:90px 0; background:var(--bg-alt);}
.trial-form-card{
  max-width:480px; margin:44px auto 0; background:#fff; border:1px solid var(--line);
  border-radius:22px; padding:36px; box-shadow:var(--shadow-md);
}
.trial-form-footnote{text-align:center; margin-top:22px; font-size:14px; color:var(--ink-soft);}
.trial-form-footnote a{color:var(--violet-dark); font-weight:600;}

.form-alert{border-radius:14px; padding:14px 16px; font-size:13.5px; line-height:1.5; margin-bottom:18px;}
.form-alert-error{background:var(--coral-tint); color:var(--coral-dark); border:1px solid #F5C6C2;}

.trial-progress{display:flex; justify-content:center; gap:0; margin-bottom:26px;}
.trial-progress-step{
  display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  color:var(--ink-faint); padding:0 14px; position:relative;
}
.trial-progress-step:not(:last-child)::after{
  content:''; position:absolute; right:-2px; top:50%; transform:translateY(-50%);
  width:20px; height:1.5px; background:var(--line);
}
.trial-progress-step i{
  width:22px; height:22px; border-radius:50%; background:var(--bg-alt); border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-style:normal; font-family:'Sora',sans-serif;
  font-size:11px; color:var(--ink-faint); flex-shrink:0;
}
.trial-progress-step.is-active{color:var(--ink);}
.trial-progress-step.is-active i{background:var(--violet); border-color:var(--violet); color:#fff;}
.trial-progress-step.is-done i{background:#1F9254; border-color:#1F9254; color:#fff;}

.trial-form[hidden], .trial-step[hidden]{display:none;}
.trial-form{display:flex; flex-direction:column; gap:14px;}
.trial-form .field{display:flex; flex-direction:column; gap:6px;}
.trial-form label{font-size:12.5px; font-weight:700; color:var(--ink); font-family:'Sora',sans-serif;}
.trial-form input{
  font-family:'Inter',sans-serif; font-size:14px; color:var(--ink);
  border:1.5px solid var(--line); border-radius:9px; padding:11px 13px;
  background:var(--bg-alt); transition:border-color .15s, background .15s;
}
.trial-form input:focus{outline:none; border-color:var(--violet); background:#fff;}
.trial-form .btn{width:100%; justify-content:center;}
.trial-form .form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.trial-form .form-row > *{min-width:0;}
.trial-form-note{text-align:center; font-size:12px; color:var(--ink-faint);}
.trial-form .form-sub{font-size:13.5px; color:var(--ink-soft); margin:-4px 0 2px;}

.trial-otp-input{text-align:center; font-family:'Sora',sans-serif; font-size:22px; font-weight:800; letter-spacing:0.5em; padding-left:20px !important;}
.trial-otp-links{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.link-btn{
  background:none; border:none; padding:0; font-family:'Inter',sans-serif; font-size:12.5px;
  font-weight:600; color:var(--violet-dark); cursor:pointer;
}
.link-btn:disabled{color:var(--ink-faint); cursor:default;}
.trial-change-mobile{background:var(--bg-alt); border-radius:12px; padding:14px; margin-top:-2px;}

/* Searchable multi-select combobox (subjects / standards) */
.trial-multiselect{position:relative;}
.trial-ms-chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px;}
.trial-ms-chips:empty{display:none;}
.trial-ms-chip{
  display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--violet-dark);
  background:var(--violet-tint); border:1px solid #DDD3FB; border-radius:999px; padding:5px 8px 5px 12px;
}
.trial-ms-chip-remove{
  display:flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%;
  background:rgba(118,88,247,0.16); border:none; color:var(--violet-dark); cursor:pointer; font-size:12px; line-height:1; padding:0;
}
.trial-ms-chip-remove:hover{background:var(--violet); color:#fff;}
.trial-ms-input{width:100%;}
.trial-ms-dropdown{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20; max-height:220px; overflow-y:auto;
  background:#fff; border:1.5px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg); padding:6px;
}
.trial-ms-dropdown[hidden]{display:none;}
.trial-ms-option{
  display:block; width:100%; text-align:left; background:none; border:none; border-radius:8px;
  padding:9px 10px; font-family:'Inter',sans-serif; font-size:13.5px; color:var(--ink); cursor:pointer;
}
.trial-ms-option:hover, .trial-ms-option.is-highlighted{background:var(--bg-alt);}
.trial-ms-empty{padding:10px; font-size:13px; color:var(--ink-faint); text-align:center;}

@media (max-width:980px){
  .compare-grid{grid-template-columns:1fr;}
  .ft-how .how-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .ft-benefits-grid{grid-template-columns:1fr;}
  .ft-how .how-grid{grid-template-columns:1fr;}
  .trial-form-card{padding:26px 20px;}
  .trial-form .form-row{grid-template-columns:1fr;}
}