/*
 * Free-trial marketing blocks on the home page (partials/marketing-trial-*).
 * Loaded only while SiteSettings::trialPublic() is on, so none of this
 * reaches the page otherwise.
 *
 * The legacy stylesheet sets p{font-size:20px !important} and
 * .home a:hover{color:#FFF !important} site-wide, so text sizes and link
 * colours here carry !important where they have to win.
 */
.trm{--trm-ink:#18333E;--trm-teal:#5FC4BB;--trm-deep:#17867A;--trm-mint:#A8E4DF;
  --trm-muted:#4A5A65;--trm-soft:#6B7C8A;--trm-line:rgba(24,51,62,.08);
  --trm-sh:0 1px 2px rgba(24,51,62,.04),0 16px 38px -18px rgba(24,51,62,.22)}
.trm *,.trm *::before,.trm *::after{box-sizing:border-box}

/* --- Hero CTA -------------------------------------------------------
   The USP strip under the hero is pulled 70px up over it, so the hero
   needs room below the no-card line or the strip covers it. */
#hm-banner{padding-bottom:110px}
.trm-cta-row{display:flex;align-items:center;gap:18px 26px;flex-wrap:wrap;margin-top:44px}
.trm-cta-row > *{margin:0 !important}
.trm-hero-cta{display:inline-flex;align-items:center;gap:12px;background:var(--trm-teal,#5FC4BB);
  color:#18333E !important;padding:20px 36px;border-radius:104px;font-size:18px;font-weight:700;
  letter-spacing:-.02em;line-height:1.1;text-decoration:none !important;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.6);transition:background .15s ease}
.trm-hero-cta:hover,.home .trm-hero-cta:hover,.trm-hero-cta:focus{background:#A8E4DF;color:#18333E !important;text-decoration:none !important}
.trm-hero-cta svg{flex:0 0 auto}
.trm-hero-note{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:26px 0 0;padding:0}
.trm-hero-note li{display:flex;align-items:center;gap:8px;font-size:15px;line-height:1.3;color:#DDEFEF;white-space:nowrap}
.trm-hero-note b{color:#fff;font-weight:700}
.trm-tick{width:19px;height:19px;border-radius:50%;background:rgba(95,196,187,.22);
  border:1px solid rgba(95,196,187,.55);color:#5FC4BB;display:inline-grid;place-items:center;
  font-size:11px;font-weight:700;flex:0 0 auto;line-height:1}

/* --- Trial explainer ------------------------------------------------
   Sits directly under the USP strip, which is pulled 70px over its
   neighbours (margin:-70px auto), hence the tall top padding. */
#free-trial{background:linear-gradient(180deg,#FFFFFF 0%,#EFF6F6 100%);padding:150px 0 110px}
.trm-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 72px;
  padding:0;list-style:none}
.trm-strip li{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--trm-line);
  border-radius:16px;padding:16px 18px;box-shadow:var(--trm-sh);font-size:16px;line-height:1.4;color:var(--trm-muted)}
.trm-strip li b{color:var(--trm-ink);font-weight:700}
.trm-strip .trm-ic{width:36px;height:36px;border-radius:11px;background:rgba(23,134,122,.1);color:var(--trm-deep);
  display:grid;place-items:center;flex:0 0 auto;font-weight:700;font-size:15px}
.trm-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:end;margin-bottom:60px}
.trm-kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(23,134,122,.1);
  border:1px solid rgba(23,134,122,.22);color:#0F6E66;border-radius:999px;padding:7px 15px;
  font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;margin-bottom:22px}
.trm-kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--trm-deep);display:block}
.trm h2.trm-title{font-size:50px;line-height:1.04;font-weight:700;color:var(--trm-ink);letter-spacing:-.035em;margin:0}
.trm .trm-lede{font-size:19px !important;line-height:1.6 !important;color:var(--trm-muted);margin:0}
.trm .trm-lede b{color:var(--trm-ink)}

.trm-rail{display:grid;grid-template-columns:repeat(var(--trm-steps,4),minmax(0,1fr));margin:0 0 56px;padding:0;list-style:none}
.trm-step{position:relative;padding:0 26px 0 0}
.trm-step::before{content:"";position:absolute;left:9px;right:0;top:8px;height:2px;background:var(--trm-teal);border-radius:2px}
/* The segment into the gate fades: that is where the free days stop. */
.trm-step:nth-last-child(2)::before{background:linear-gradient(90deg,#5FC4BB,#C8D3D6)}
.trm-step:last-child::before{display:none}
.trm-step .pin{position:relative;z-index:1;width:18px;height:18px;border-radius:50%;background:var(--trm-teal);
  border:4px solid #fff;box-shadow:0 0 0 2px #5FC4BB;display:block;margin-bottom:18px}
.trm-step.is-gate .pin{background:var(--trm-ink);box-shadow:0 0 0 2px #18333E}
.trm-step .d{display:block;font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#0F6E66;margin-bottom:6px}
.trm-step.is-gate .d{color:var(--trm-ink)}
.trm-step .t{display:block;font-size:17px;line-height:1.4;font-weight:500;color:var(--trm-ink);max-width:22ch}

.trm-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.trm-card{background:#fff;border:1px solid rgba(24,51,62,.07);border-radius:22px;padding:32px 30px 34px;
  box-shadow:var(--trm-sh);display:flex;flex-direction:column}
.trm-card .k{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--trm-soft);margin-bottom:12px}
.trm-card h3{font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.025em;color:var(--trm-ink);margin:0 0 22px}
.trm-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.trm-card li{display:flex;gap:13px;font-size:16px;line-height:1.5;color:#3E4E59}
.trm-card li .m{flex:0 0 auto;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  font-size:11px;font-weight:700;margin-top:1px;line-height:1;background:rgba(23,134,122,.1);color:var(--trm-deep)}
.trm-card--cap li .m{background:#EFF2F4;color:#7A8A95}
.trm-card--gate{background:linear-gradient(158deg,#1B3C48 0%,#14313C 55%,#132C36 100%);border-color:rgba(255,255,255,.09);
  box-shadow:0 1px 2px rgba(24,51,62,.1),0 22px 46px -18px rgba(19,44,54,.6)}
.trm-card--gate .k{color:var(--trm-teal)}
.trm-card--gate h3{color:#fff}
.trm-card--gate li{color:#C4D6DA}
.trm-card--gate li b{color:#fff;font-weight:600}
.trm-card--gate li .m{background:rgba(95,196,187,.16);color:var(--trm-teal)}
.trm .trm-note{margin:auto 0 0;padding-top:22px;font-size:14px !important;line-height:1.6 !important;color:var(--trm-soft);
  border-top:1px solid rgba(24,51,62,.09)}
.trm-card ul + .trm-note{margin-top:24px}
.trm .trm-note b{color:var(--trm-deep);font-weight:600}
.trm .trm-card--gate .trm-note{color:#8FAAB1;border-top-color:rgba(255,255,255,.1)}
.trm .trm-card--gate .trm-note b{color:var(--trm-teal)}

/* --- Pricing preview ------------------------------------------------
   The monthly/yearly switch is two radios and sibling selectors, so it
   works without JavaScript. */
#trial-pricing{background:#fff;padding:110px 0 100px}
.trm-sec-head{text-align:center;max-width:640px;margin:0 auto 34px}
.trm-sec-head h2{text-align:center;font-size:44px;line-height:1.1;font-weight:700;letter-spacing:-.03em;color:var(--trm-ink);margin:0 0 14px}
.trm .trm-sec-head p{font-size:17px !important;line-height:1.6 !important;color:var(--trm-muted);margin:0}
.trm-cycle{position:absolute;opacity:0;pointer-events:none}
.trm-toggle{display:flex;justify-content:center;margin:0 0 34px}
.trm-toggle-inner{display:inline-flex;background:#EFF4F5;border:1px solid var(--trm-line);border-radius:999px;padding:4px}
.trm-toggle label{margin:0;cursor:pointer;border-radius:999px;padding:10px 22px;font-size:15px;font-weight:700;color:var(--trm-muted);
  line-height:1.2;white-space:nowrap}
.trm-toggle label .save{font-weight:600;color:var(--trm-deep);margin-left:4px}
#trm-cycle-m:checked ~ .trm-toggle label[for="trm-cycle-m"],
#trm-cycle-y:checked ~ .trm-toggle label[for="trm-cycle-y"]{background:var(--trm-ink);color:#fff}
#trm-cycle-m:checked ~ .trm-toggle label[for="trm-cycle-m"] .save,
#trm-cycle-y:checked ~ .trm-toggle label[for="trm-cycle-y"] .save{color:var(--trm-mint)}
#trm-cycle-m:focus-visible ~ .trm-toggle label[for="trm-cycle-m"],
#trm-cycle-y:focus-visible ~ .trm-toggle label[for="trm-cycle-y"]{outline:2px solid var(--trm-deep);outline-offset:2px}
#trm-cycle-m:checked ~ .trm-prices .is-yearly,
#trm-cycle-y:checked ~ .trm-prices .is-monthly{display:none !important}

.trm-prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:860px;margin:0 auto}
.trm-price{background:#fff;border:1px solid rgba(24,51,62,.1);border-radius:22px;padding:32px 30px;display:flex;
  flex-direction:column;box-shadow:var(--trm-sh)}
.trm-price.is-feat{border:2px solid var(--trm-teal)}
.trm-price .name{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;min-height:34px;font-size:14px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--trm-soft);margin-bottom:14px}
.trm-price .tag{font-size:11px;letter-spacing:.06em;background:rgba(23,134,122,.1);color:#0F6E66;border-radius:999px;padding:4px 10px}
.trm-price .free{font-size:40px;line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--trm-ink)}
.trm-price .free small{font-size:16px;font-weight:600;color:var(--trm-soft);letter-spacing:0;margin-left:4px}
.trm .trm-price .after{font-size:16px !important;line-height:1.5 !important;color:var(--trm-muted);margin:10px 0 0}
.trm .trm-price .after b{color:var(--trm-ink)}
.trm .trm-price .after.is-na{color:#8A5200}
.trm .trm-price .after a,.home .trm .trm-price .after a:hover{color:#0F6E66 !important;font-weight:700}
.trm .trm-price .fine{font-size:14px !important;line-height:1.55 !important;color:var(--trm-soft);margin:8px 0 0}
.trm-price ul{list-style:none;margin:22px 0 26px;padding:20px 0 0;border-top:1px solid var(--trm-line);display:flex;flex-direction:column;gap:10px}
.trm-price li{display:flex;gap:10px;font-size:15.5px;line-height:1.45;color:#3E4E59}
.trm-price li .m{color:var(--trm-deep);font-weight:700;flex:0 0 auto}
.trm-btn{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:auto;border-radius:999px;padding:15px 22px;
  font-size:16px;font-weight:700;text-decoration:none !important;line-height:1.2;transition:background .15s ease}
.trm-btn--solid{background:var(--trm-teal);color:#18333E !important}
.trm-btn--solid:hover,.home .trm-btn--solid:hover{background:#A8E4DF;color:#18333E !important}
.trm-btn--out{background:#fff;color:#18333E !important;border:1px solid rgba(24,51,62,.2)}
.trm-btn--out:hover,.home .trm-btn--out:hover{background:#EFF6F6;color:#18333E !important}
.trm .trm-skip{text-align:center;font-size:16px !important;color:var(--trm-muted);margin:26px 0 0}
.trm-skip a,.home .trm-skip a:hover{color:#0F6E66 !important;font-weight:700}

/* --- FAQ ------------------------------------------------------------ */
#trial-faq{background:#F4F8F8;padding:100px 0}
.trm-faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.trm-faq details{background:#fff;border:1px solid var(--trm-line);border-radius:16px;padding:0;box-shadow:0 1px 2px rgba(24,51,62,.04)}
.trm-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 24px;font-size:18px;font-weight:700;color:var(--trm-ink);line-height:1.35}
.trm-faq summary::-webkit-details-marker{display:none}
.trm-faq summary::after{content:"+";flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#EFF4F5;color:var(--trm-deep);
  display:grid;place-items:center;font-size:18px;font-weight:700;line-height:1}
.trm-faq details[open] summary::after{content:"\2212"}
.trm .trm-faq p{font-size:16px !important;line-height:1.65 !important;color:var(--trm-muted);margin:0;padding:0 24px 22px}

/* --- Mobile sticky CTA ---------------------------------------------- */
.trm-bar,.trm-bar-spacer{display:none}

@media (max-width:1100px){
  .trm-cards{grid-template-columns:minmax(0,1fr)}
  .trm-rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 0}
  .trm-step:nth-child(even)::before{display:none}
}
@media (max-width:900px){
  #free-trial{padding:130px 0 70px}
  .trm-strip{grid-template-columns:minmax(0,1fr);margin-bottom:50px}
  .trm-head{grid-template-columns:minmax(0,1fr);gap:18px;align-items:start;margin-bottom:40px}
  .trm h2.trm-title{font-size:36px}
  .trm-prices{grid-template-columns:minmax(0,1fr)}
  #trial-pricing,#trial-faq{padding:70px 0}
  .trm-sec-head h2{font-size:34px}
}
@media (max-width:767px){
  .trm-cta-row{margin-top:32px}
  .trm-hero-cta{padding:17px 26px;font-size:16px;white-space:normal}
  .trm-hero-note li{white-space:normal}
  .trm-rail{grid-template-columns:minmax(0,1fr);gap:22px}
  .trm-step::before{display:none !important}
  .trm-step{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:14px;padding:0}
  .trm-step .pin{grid-row:1 / span 2;margin:3px 0 0}
  .trm-step .t{max-width:none}
  .trm-card{padding:26px 22px}
  .trm-price{padding:26px 22px}
  .trm-faq summary{font-size:16px;padding:18px 18px}
  .trm .trm-faq p{padding:0 18px 20px}
  .trm-toggle label{padding:9px 14px;font-size:14px}

  .trm-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1030;align-items:center;gap:12px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(24,51,62,.97);
    box-shadow:0 -10px 30px -12px rgba(0,0,0,.45);transition:transform .2s ease}
  .trm-bar.is-hidden{transform:translateY(110%)}
  .trm-bar .txt{flex:1;min-width:0;color:#DDEFEF;font-size:13px;line-height:1.3}
  .trm-bar .txt b{display:block;color:#fff;font-size:15px}
  .trm-bar a{flex:0 0 auto;background:#5FC4BB;color:#18333E !important;border-radius:999px;padding:12px 18px;font-size:15px;
    font-weight:700;text-decoration:none !important;white-space:nowrap}
  .home .trm-bar a:hover{color:#18333E !important}
  .trm-bar-spacer{display:block;height:76px}
  /* The back-to-top button would otherwise sit under the bar. */
  #scrollUp{bottom:90px !important}
}
@media (max-width:380px){
  .trm-bar .txt span{display:none}
}