/* Free-trial page (page-templates/trial.php). Shares tokens, buttons, the marquee, the .yt player and .rv reveals with
   base.css; the sign-up form is an Elementor form skinned by landing.css (.landing-body .form …). */
@keyframes trial-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes trial-enter{from{opacity:0;transform:translateX(50px) rotateY(-16deg) scale(.96)}to{opacity:1;transform:rotateY(-6deg)}}
@keyframes trial-enter-flat{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes trial-aurora{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-7%,5%) scale(1.18)}100%{transform:translate(5%,-4%) scale(1.06)}}
@keyframes trial-breathe{0%,100%{box-shadow:0 0 90px var(--glow)}50%{box-shadow:0 0 160px rgba(0,150,136,.55)}}

.trial-page .btn-ink{background:var(--ink);color:#fff}.trial-page .btn-ink:hover{transform:translateY(-2px);background:#1a2a26}
.trial-page .light{background:var(--paper);color:var(--ink)}
.trial-page .light .eyebrow{color:var(--accent-deep)}.trial-page .light .head h2{color:var(--ink)}.trial-page .light .head h2 em.s{color:var(--accent-deep)}.trial-page .light .lead{color:var(--ink-2)}
.trial-page section.block{padding-block:104px}
.trial-page .head h2{margin-top:14px}
.trial-page .head.center{margin-inline:auto;text-align:center}.trial-page .head.center .lead{margin-inline:auto}
.trial-page .row-cta{margin-top:44px;display:flex;justify-content:center}

/* hero: copy on the left, the sign-up panel on the right */
.trial-hero{position:relative;padding-block:72px 96px;overflow:clip;isolation:isolate}
.trial-hero .photo{position:absolute;inset:0;z-index:-4}
.trial-hero .photo img{width:100%;height:100%;object-fit:cover;object-position:center 60%;opacity:.38;filter:saturate(.6) contrast(1.05)}
.trial-hero .tint{position:absolute;inset:0;z-index:-3;background:linear-gradient(180deg,rgba(8,18,15,.35) 0%,rgba(8,18,15,.72) 45%,var(--bg) 100%)}
.trial-hero .aurora{position:absolute;inset:-10%;z-index:-2;pointer-events:none;filter:blur(70px);opacity:.75}
.trial-hero .aurora b{position:absolute;border-radius:50%;display:block}
.trial-hero .aurora .a1{width:56vw;height:56vw;max-width:900px;max-height:900px;right:-8%;top:-22%;background:radial-gradient(circle,rgba(0,150,136,.65),transparent 62%);animation:trial-aurora 16s ease-in-out infinite alternate}
.trial-hero .aurora .a2{width:38vw;height:38vw;max-width:620px;max-height:620px;left:-6%;bottom:-16%;background:radial-gradient(circle,rgba(95,214,194,.34),transparent 62%);animation:trial-aurora 22s ease-in-out infinite alternate-reverse}
.trial-hero .grain{z-index:-1}
.trial-hero .wrap{display:grid;grid-template-columns:1fr 460px;gap:56px;align-items:start;position:relative}
.trial-hero .eyebrow{animation:trial-rise .8s var(--ease) both}
.trial-hero h1{margin-top:18px;color:#fff;font-size:clamp(44px,5.6vw,68px);animation:trial-rise .9s var(--ease) .1s both}
.trial-hero h1 em.s{color:var(--accent-2)}
.trial-hero .lead{margin-top:22px;animation:trial-rise .9s var(--ease) .25s both}
.trial-hero .outs{display:grid;gap:12px;margin-top:30px;animation:trial-rise .9s var(--ease) .4s both}
.trial-hero .out{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--glass);border:1px solid var(--edge);transition:border-color .3s,transform .4s var(--ease)}
.trial-hero .out:hover{border-color:var(--edge-2);transform:translateX(4px)}
.trial-hero .out .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(95,214,194,.12);border:1px solid rgba(95,214,194,.28);color:var(--accent-2)}
.trial-hero .out .ic svg{width:22px;height:22px}
.trial-hero .out b{display:block;font-weight:600;color:#fff}.trial-hero .out p{color:var(--text-2);font-size:var(--fs-sm);margin-top:2px}
.trial-hero .hero-trust{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 24px;font-size:var(--fs-sm);color:var(--text-2);font-weight:500;animation:trial-rise .9s var(--ease) .55s both}
.trial-hero .hero-trust span{display:inline-flex;align-items:center;gap:8px}
.trial-hero .hero-trust i{width:16px;height:16px;border-radius:50%;background:rgba(95,214,194,.16);display:inline-grid;place-items:center}
.trial-hero .hero-trust i::after{content:"";width:8px;height:5px;border-left:2px solid var(--accent-2);border-bottom:2px solid var(--accent-2);transform:rotate(-45deg) translate(1px,-1px)}

/* the sign-up panel: a glass card around the page's Elementor form */
.trial-stage{perspective:1400px;position:sticky;top:96px}
.trial-stage .panel{background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid var(--edge-2);border-radius:var(--r-lg);backdrop-filter:blur(18px);box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 80px var(--glow);padding:24px 24px 20px;transform:rotateY(-6deg);transform-style:preserve-3d;transition:transform .5s var(--ease);animation:trial-enter 1.1s var(--ease) .3s both}
.trial-stage:hover .panel,.trial-stage .panel:focus-within{transform:rotateY(0)}
.trial-stage.landing-body{background:transparent;color:var(--text)} /* landing-body paints paper by default; here it only scopes the form skin */
.trial-stage .top{padding-bottom:16px;border-bottom:1px solid var(--edge);margin-bottom:14px}
.trial-stage .top b{display:block;color:#fff;font-size:var(--fs-h3);letter-spacing:-.015em}.trial-stage .top span{display:block;color:var(--text-3);font-size:var(--fs-xs);margin-top:4px}
.trial-stage .e-con,.trial-stage .e-con-inner{padding:0;margin:0;max-width:none;min-height:0;--padding-top:0;--padding-right:0;--padding-bottom:0;--padding-left:0;--margin-top:0;--margin-right:0;--margin-bottom:0;--margin-left:0}
.trial-stage .elementor-widget-form{margin:0}
.trial-stage .elementor-form-fields-wrapper{gap:10px}
.trial-stage .fine{margin:14px 0 0;font-size:var(--fs-cap);color:var(--text-3);text-align:center}
.trial-stage .fine a{color:var(--text-2)}
@media (max-width:1040px){.trial-hero .wrap{grid-template-columns:1fr;gap:40px}.trial-stage{position:static}.trial-stage .panel{transform:none;animation-name:trial-enter-flat}.trial-stage:hover .panel{transform:none}}
@media (max-width:920px){.trial-hero{padding-block:52px 64px}.trial-hero h1{font-size:clamp(40px,11vw,52px)}}

/* how it works: one large player */
.trial-how .player{margin:48px auto 0;max-width:960px;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 60px rgba(14,25,23,.18);background:#000}
.trial-how .player .yt{border-radius:0}

/* six benefits as numbered tiles */
.trial-benefits .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.trial-benefits .tile{position:relative;padding:26px 24px 24px;border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid var(--edge);transition:transform .5s var(--ease),border-color .35s,box-shadow .35s}
.trial-benefits .tile:hover{transform:translateY(-5px);border-color:var(--edge-2);box-shadow:0 30px 60px rgba(0,0,0,.4)}
.trial-benefits .tile .n{display:inline-block;font-family:var(--serif);font-style:italic;font-size:var(--fs-h3);color:var(--accent-2);line-height:1}
.trial-benefits .tile b{display:block;margin-top:14px;color:#fff;font-size:var(--fs-h4);font-weight:600;letter-spacing:-.015em;line-height:1.25}
.trial-benefits .tile p{margin-top:10px;color:var(--text-2);font-size:var(--fs-sm);line-height:1.55}
@media (max-width:920px){.trial-benefits .tiles{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.trial-benefits .tiles{grid-template-columns:1fr}}

/* founder and customer, side by side */
.trial-voices .voices{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:56px}
.trial-voices .voice{margin:0;padding:30px 30px 26px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 16px 36px rgba(14,25,23,.05);display:grid;gap:14px;align-content:start;justify-items:start}
.trial-voices .voice img,.trial-voices .voice .av{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--accent-2)}
.trial-voices .voice .av{display:grid;place-items:center;background:var(--ink);color:var(--accent-2);font-weight:700;font-size:var(--fs-h4);border-color:var(--ink)}
.trial-voices .voice .eyebrow{color:var(--accent-deep)}
.trial-voices .voice blockquote{margin:0;font-family:var(--serif);font-size:clamp(20px,2vw,26px);line-height:1.3;color:var(--ink);letter-spacing:-.01em}
.trial-voices .voice figcaption{font-size:var(--fs-sm);color:var(--ink-3)}.trial-voices .voice figcaption b{display:block;color:var(--ink);font-weight:600}
@media (max-width:860px){.trial-voices .voices{grid-template-columns:1fr}}

/* four groups of wants over the kettlebell photo */
.trial-fit{overflow:clip;isolation:isolate}
.trial-fit .photo{position:absolute;inset:0;z-index:-2}.trial-fit .photo img{width:100%;height:100%;object-fit:cover;opacity:.22;filter:saturate(.5)}
.trial-fit .tint{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--bg),rgba(8,18,15,.6) 40%,var(--bg))}
.trial-fit .groups{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px}
.trial-fit .group{padding:26px 26px 24px;border-radius:22px;background:rgba(8,18,15,.6);border:1px solid var(--edge);backdrop-filter:blur(10px)}
.trial-fit .group h3{color:#fff;font-size:var(--fs-h3);letter-spacing:-.02em;display:flex;align-items:center;gap:12px}
.trial-fit .group h3::before{content:"";width:28px;height:2px;border-radius:2px;background:var(--accent-2);flex:0 0 28px}
.trial-fit .group ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.trial-fit .group li{display:flex;gap:12px;align-items:flex-start;color:var(--text);font-size:var(--fs-body);line-height:1.5}
.trial-fit .group li i{flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:rgba(95,214,194,.16);display:inline-grid;place-items:center;margin-top:3px}
.trial-fit .group li i::after{content:"";width:8px;height:5px;border-left:2px solid var(--accent-2);border-bottom:2px solid var(--accent-2);transform:rotate(-45deg) translate(1px,-1px)}
@media (max-width:760px){.trial-fit .groups{grid-template-columns:1fr}}

/* closing call to action and the phone sticky button */
.trial-cta{padding-block:120px;position:relative;overflow:clip;text-align:center}
.trial-cta .halo{position:absolute;left:50%;top:50%;width:720px;height:720px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(0,150,136,.32),transparent 62%);filter:blur(30px);animation:trial-breathe 6s ease-in-out infinite}
.trial-cta .wrap{position:relative}
.trial-cta h2{color:#fff;max-width:20ch;margin:14px auto 0}.trial-cta h2 em.s{color:var(--accent-2)}
.trial-cta .lead{margin:20px auto 0}.trial-cta .actions{margin-top:32px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.trial-mcta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(8,18,15,.86);backdrop-filter:blur(14px);border-top:1px solid var(--edge)}
.trial-mcta .btn{width:100%;padding:14px}
@media (max-width:920px){.trial-mcta{display:block}.trial-page{padding-bottom:72px}}
body.menu-open .trial-mcta{display:none}
@media (prefers-reduced-motion:reduce){.trial-page *,.trial-page *::before,.trial-page *::after{animation:none!important;transition:none!important}.trial-stage .panel{transform:none}}
