/* 全站统一「简易预约表单」—— 电脑端那一份。手机端的同名文件在 assets/css/fk-trial-form.css，
   两边是两套独立规则，改一边不会影响另一边，要改视觉请两边都看。

   谁引它：index / foundation / breakthrough / tuition / results（常驻表单）
           educators / method（点击打开的弹层）

   前面这一段 .cta-form / .form-field / .form-row 是从首页那份样式表
   assets/90b157310d209bd0.css 原样搬过来的 —— 那份只有首页和 book-trial 引用，
   其余页面的样式表里没有表单规则。数值保持一致，首页同时引两份也不会打架。
   **每条规则都必须带 #v-pc 前缀**，去掉之后会连手机端那份 DOM 一起改掉。 */

#v-pc .cta-form{
  background:#fff;color:var(--ink);
  border-radius:var(--radius-lg);
  padding:32px 30px;
  box-shadow:0 30px 80px rgba(11,34,51,.10), 0 8px 22px rgba(11,34,51,.05);
  border:1px solid rgba(255,255,255,.8);
}
#v-pc .cta-form-title{
  font-family:var(--font-serif);
  font-size:24px;margin:0 0 6px;
  font-weight:700;color:var(--ink);
  letter-spacing:-.008em;
}
#v-pc .cta-form-sub{
  font-size:13.5px;color:var(--ink-3);
  margin:0 0 24px;
}
#v-pc .form-field{margin-bottom:16px}
#v-pc .form-field label{
  display:block;font-size:13px;font-weight:600;
  color:var(--ink);margin-bottom:6px;
}
#v-pc .form-field input,#v-pc .form-field select{
  width:100%;padding:13px 14px;
  border:1.5px solid var(--line);
  border-radius:10px;font:inherit;font-size:15px;
  color:var(--ink);background:#fff;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
#v-pc .form-field input:focus,#v-pc .form-field select:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(20,151,208,.15);
}
#v-pc .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#v-pc .cta-form .btn{width:100%;margin-top:8px}

/* 收紧版（简易表单专用）。挂在 .cta-form-home 上，不要改上面的全局值 ——
   book-trial.html 也用 .cta-form / .form-field，那边的 .bt-hint 间距是按 16px 算的。 */
#v-pc .cta-form-home{padding:26px 24px}
#v-pc .cta-form-home .cta-form-sub{margin-bottom:18px}
#v-pc .cta-form-home .form-field{margin-bottom:10px}
#v-pc .cta-form-home .form-field label{margin-bottom:5px}
#v-pc .cta-form-home .form-field input,
#v-pc .cta-form-home .form-field select{padding:11px 13px}
#v-pc .cta-form-home .form-row{gap:12px}
#v-pc .cta-form-home .cta-form-note{margin-top:12px}
/* 国家码只放 +1 (US / Canada) 这种短文本，和电话号码平分一行太空 */
#v-pc .cta-form-home .form-row-phone{grid-template-columns:.85fr 1.15fr}
#v-pc .cta-form-note{
  margin-top:14px;font-size:12.5px;
  color:var(--ink-3);text-align:center;line-height:1.5;
}
/* 蜜罐隐藏、提交中态、错误提示、提交成功后的感谢卡 */
#v-pc .hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
#v-pc .cta-form.is-submitting{opacity:.6;pointer-events:none}
#v-pc .form-error{margin:10px 0 0;color:#C64C3B;font-size:14px;line-height:1.5}
#v-pc .cta-form-thanks{text-align:center}

/* ==========================================================================
   以下是本次新增的部分
   ========================================================================== */

/* 「提交 ≠ 已预约」。紧跟提交按钮，是这张表单上最容易被误解的一句，别挪到页脚注之后。 */
#v-pc .cta-form-status{
  margin:10px 0 0;font-size:12.5px;line-height:1.5;
  color:var(--ink-2);text-align:center;font-weight:600;
}
/* 进详细预约页的次要入口：文字链，不做成第二个色块按钮，否则两个同权重 CTA 互相稀释 */
#v-pc .trial-alt{margin:16px 0 0;text-align:center;font-size:13.5px;color:var(--ink-3)}
#v-pc .trial-alt a{color:var(--brand-deep);text-decoration:underline;text-underline-offset:3px}
#v-pc .trial-alt a:hover{color:var(--ink)}

/* ---------- 常驻表单区块（左营销 / 右表单） ---------- */
#v-pc .trial-section{
  background:
    radial-gradient(ellipse 900px 500px at 15% 20%, rgba(20,151,208,.10), transparent 62%),
    linear-gradient(135deg, #EAF5FB 0%, #D5EBF6 55%, #C0DFEF 100%);
  color:var(--ink);
  position:relative;overflow:hidden;
  /* 站内锚点跳转要让开固定页头（.site-header .container 高 114px），
     否则标题会被压在页头底下。html{scroll-behavior:smooth} 与 scrollIntoView 都认这个值。 */
  scroll-margin-top:126px;
}
#v-pc .trial-section::before{
  content:"";position:absolute;
  right:-100px;top:-100px;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.5), transparent 65%);
  pointer-events:none;
}
/* align-items:start —— 表单比左栏高，center 会把左栏顶到中间、上下各留一截死空白 */
#v-pc .trial-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:56px;align-items:start;
  position:relative;z-index:1;
}
#v-pc .trial-pitch .eyebrow{color:var(--brand-deep)}
#v-pc .trial-pitch .eyebrow::after,#v-pc .trial-pitch .eyebrow::before{background:var(--brand-deep)}
#v-pc .trial-title{
  font-family:var(--font-serif);
  font-size:clamp(34px,3vw,44px);
  line-height:1.12;letter-spacing:-.02em;
  margin:0 0 20px;font-weight:700;
  color:var(--ink);text-wrap:balance;
}
#v-pc .trial-lead{font-size:17px;color:var(--ink-2);line-height:1.6;margin:0 0 32px}
#v-pc .trial-points{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}
#v-pc .trial-points li{
  display:flex;gap:14px;align-items:center;
  font-size:16px;line-height:1.5;color:var(--ink);font-weight:600;
}
#v-pc .trial-points .check{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  background:var(--brand);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(20,151,208,.28);
}
#v-pc .trial-points .check svg{width:12px;height:12px}

/* 1180px 以下两栏会挤到表单放不下，直接落成单栏 */
@media (max-width:1180px){
  #v-pc .trial-grid{grid-template-columns:1fr;gap:36px}
  #v-pc .trial-pitch{max-width:720px}
}

/* ---------- 点击打开的弹层（educators / method） ----------
   电脑端原本没有任何弹层，这一套是新写的；手机端用的是它自己那份 .modal（已有）。 */
#v-pc .fk-modal{
  position:fixed;inset:0;z-index:200;
  display:none;align-items:flex-start;justify-content:center;
  padding:48px 20px;overflow-y:auto;
}
#v-pc .fk-modal.is-open{display:flex}
#v-pc .fk-modal-backdrop{position:fixed;inset:0;background:rgba(11,34,51,.55);border:0;padding:0}
#v-pc .fk-modal-panel{
  position:relative;z-index:1;
  width:100%;max-width:560px;margin:auto;
  background:#fff;border-radius:var(--radius-lg);
  box-shadow:0 40px 90px rgba(11,34,51,.28);
  padding:30px 30px 26px;
}
#v-pc .fk-modal-close{
  position:absolute;top:14px;right:14px;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--ink-2);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease);
}
#v-pc .fk-modal-close:hover{background:var(--bg-alt);color:var(--ink)}
#v-pc .fk-modal-close svg{width:18px;height:18px}
/* 弹层里的表单已经在白卡片上了，不要再套一层白卡片＋投影 */
#v-pc .fk-modal .cta-form{box-shadow:none;border:0;padding:0;border-radius:0;background:transparent}
#v-pc .fk-modal .cta-form-title{padding-right:40px}
#v-pc .fk-modal .trial-alt{margin-top:14px}

/* 首页沿用原来的 .final-cta 区块（多一块 ESA 说明），锚点同样要让开固定页头 */
#v-pc .final-cta{scroll-margin-top:126px}

/* 弹层里的试听信息：同一组三条，收紧一档，不抢表单的位置 */
#v-pc .trial-points-mini{gap:9px;margin:0 0 20px}
#v-pc .trial-points-mini li{font-size:14px}
#v-pc .trial-points-mini .check{width:20px;height:20px;box-shadow:none}
#v-pc .trial-points-mini .check svg{width:10px;height:10px}