/* =========================================================
   Trial pages — /trial.html, /trial-staging.html, /trial-thankyou.html
   Page-scoped styles ported from the September 2026 trial redesign.
   Everything is scoped to .tr-scope (the <main> element) so nothing
   leaks into or out of style.css. Fonts resolve to the site's Inter.
   ========================================================= */
.tr-scope{
  --tr-ink:#0b0a14;
  --tr-ink-line:rgba(255,255,255,.12);
  --tr-paper-sunken:#f4f4fa;
  --tr-border:#e6e6f0;
  --tr-text:#0b0a14;
  --tr-text-secondary:#54536b;
  --tr-text-muted:#8b899e;
  --tr-text-inverse-soft:rgba(255,255,255,.75);
  --tr-brand:var(--c-accent,#634afc);
  --tr-brand-hover:#4931dc;
  --tr-brand-soft:#b8adff;
  --tr-tint-15:#ebeeff;
  --tr-badge-dark-bg:#301792;
  --tr-badge-dark-text:#ded9ff;
  --tr-error:#c53030;
  --tr-error-bg:#fdecec;
  --tr-warn-bg:#fef3e2;
  --tr-radius-md:12px;
  --tr-font:var(--font-sans,'Inter',Helvetica,Arial,sans-serif);
  font-family:var(--tr-font);
  color:var(--tr-text);
  padding-bottom:80px;
}
.tr-scope *,.tr-scope *::before,.tr-scope *::after{box-sizing:border-box}
.tr-scope h1,.tr-scope h2,.tr-scope h3{font-family:var(--tr-font);font-weight:700;margin:0;line-height:1.2;color:var(--tr-text);letter-spacing:-.015em;text-wrap:balance}
.tr-scope p{margin:0;color:inherit}
.tr-scope img,.tr-scope svg{display:block;max-width:100%}
.tr-scope a{text-decoration:none;color:inherit}
.tr-scope button{font-family:inherit}
/* The ring follows each element's own border-radius. It is only rounded here
   for plain links and text buttons, which have none: set on the universal
   rule it would beat .tr-input / .tr-select and reshape a focused control. */
.tr-scope :focus-visible{outline:2px solid var(--tr-brand);outline-offset:2px}
.tr-scope a:not(.btn):focus-visible,.tr-scope .tr-faq-q:focus-visible,.tr-scope .tr-alert-close:focus-visible{border-radius:4px}

.tr-container{width:100%;max-width:1240px;margin:0 auto;padding:0 32px}
@media(max-width:720px){.tr-container{padding:0 20px}}

.tr-eyebrow{display:inline-flex;align-items:center;justify-content:center;padding:2px 12px;border-radius:8px;font-size:14px;font-weight:500;line-height:20px;white-space:nowrap;background:var(--tr-tint-15);color:var(--tr-brand-hover)}
.tr-eyebrow.on-dark{background:var(--tr-badge-dark-bg);color:var(--tr-badge-dark-text)}

/* Buttons: the site's .btn / .btn-primary classes are used; these give the
   prototype's sizing and make room for the submit spinner. */
.tr-scope .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:9px 20px;border-radius:6px;border:none;cursor:pointer;font-family:var(--tr-font);font-size:14px;font-weight:500;line-height:20px;white-space:nowrap;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .1s ease}
.tr-scope .btn:hover{transform:scale(.97)}
.tr-scope .btn:active{transform:translateY(1px)}
.tr-scope .btn-primary{background:var(--tr-brand);color:#fff}
.tr-scope .btn-primary:hover{background:var(--tr-brand-hover);color:#fff}
.tr-scope .btn-outline{background:#fff;color:var(--tr-brand-hover);border:1px solid var(--tr-border);padding:9px 19px}
.tr-scope .btn-outline:hover{background:var(--tr-paper-sunken)}
.tr-scope .btn-lg{height:52px;padding:12px 28px;font-size:15px;border-radius:8px}
.tr-scope .btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* Scroll reveals — only hidden once trial-page.js has marked the scope,
   so the content stays visible without JavaScript. */
.tr-js .tr-reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.tr-js .tr-reveal.in{opacity:1;transform:translateY(0)}
.tr-js .tr-fade{opacity:0;transform:translateY(20px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.tr-js .tr-fade.is-visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .tr-js .tr-reveal{opacity:1;transform:none;transition:none}
  .tr-js .tr-fade{transform:none;transition:opacity .2s ease}
}

/* =========================================================
   HERO — dark panel (copy) + form panel
   ========================================================= */
.tr-hero{padding:32px 0 96px}
.tr-hero .tr-container{max-width:1576px;padding-left:32px;padding-right:88px}
.tr-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:stretch}
/* Single column: the 32/88 desktop padding would push it 56px off centre. */
@media(max-width:960px){.tr-hero-grid{grid-template-columns:1fr;gap:48px}.tr-hero .tr-container{padding-right:32px}}
@media(max-width:720px){
  .tr-hero{padding:24px 0 60px}
  .tr-hero .tr-container{padding-left:20px;padding-right:20px}
}

.tr-panel-dark{position:relative;overflow:hidden;border-radius:28px;padding:56px 48px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:64px;height:100%;max-width:740px}
.tr-panel-copy{width:100%;max-width:544px;display:flex;flex-direction:column;align-items:flex-start}
.tr-panel-bg{position:absolute;inset:0;z-index:0;background:#0b0a14 url("/assets/images/pages/trial/hero-bg.webp") bottom center/cover no-repeat}
.tr-panel-dark>*:not(.tr-panel-bg){position:relative;z-index:2}
.tr-panel-dark h1{font-size:68px;line-height:72px;color:#fff;margin-top:18px}
.tr-panel-dark h1 span{color:inherit}
.tr-hero-word{display:inline-block;opacity:0;transform:translateY(28px);filter:blur(6px);animation:tr-hero-word-in .8s cubic-bezier(.16,1,.3,1) forwards}
@keyframes tr-hero-word-in{to{opacity:1;transform:translateY(0);filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.tr-hero-word{animation:none;opacity:1;transform:none;filter:none}}
.tr-lede{font-size:16px;line-height:1.65;color:var(--tr-text-inverse-soft);margin-top:18px;max-width:480px}
@media(max-width:720px){
  .tr-panel-dark{padding:40px 26px;border-radius:22px;height:auto;gap:36px}
  .tr-panel-dark h1{font-size:36px;line-height:1.1}
}

.tr-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:36px;width:100%;max-width:544px;background:var(--tr-ink-line);border-radius:var(--tr-radius-md);overflow:hidden}
@media(max-width:720px){.tr-steps{grid-template-columns:1fr 1fr}}
.tr-step{background:rgba(255,255,255,.04);padding:16px 14px}
.tr-step-num{font-weight:700;font-size:13px;color:var(--tr-brand-soft)}
.tr-step-title{font-size:13px;font-weight:600;color:#fff;margin-top:6px;line-height:1.3}
.tr-step-sub{font-size:11.5px;color:var(--tr-text-inverse-soft);margin-top:3px}
@media(max-width:560px){.tr-steps{grid-template-columns:1fr}}

/* ---- form panel ---- */
.tr-form-panel{padding:56px 0 0;max-width:620px}
@media(max-width:960px){.tr-form-panel{padding-top:0;max-width:none}}
.tr-form-heading{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.tr-form-panel h2{font-size:26px;line-height:1.08;white-space:nowrap}
@media(max-width:420px){.tr-form-panel h2{white-space:normal}}
.tr-form-badge{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:12px;background:#e4ffe9;color:#096931;font-size:12.5px;font-weight:600;white-space:nowrap;flex-shrink:0}
.tr-form-badge svg{width:18px;height:18px;flex-shrink:0}

#trialForm{margin-top:40px}
#trialForm>*+*{margin-top:32px}

.tr-alert{display:none;align-items:flex-start;gap:10px;padding:13px 14px;border-radius:12px;margin-top:20px;font-size:13px;line-height:1.55}
.tr-alert.show{display:flex}
.tr-alert.error{background:var(--tr-error-bg);color:#8a2323;border:1px solid rgba(197,48,48,.25)}
.tr-alert.warn{background:var(--tr-warn-bg);color:#7c4a12;border:1px solid rgba(180,83,9,.25)}
.tr-alert svg{width:17px;height:17px;flex-shrink:0;margin-top:1px}
.tr-alert-close{margin-left:auto;background:none;border:none;cursor:pointer;color:inherit;opacity:.6;padding:0;flex-shrink:0;line-height:0}
.tr-alert-close:hover{opacity:1}

.tr-field{margin-top:0;min-width:0}
.tr-field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
@media(max-width:520px){.tr-field-row{grid-template-columns:1fr}.tr-field-row .tr-field+.tr-field{margin-top:32px}}
.tr-field label{display:block;font-size:13.5px;font-weight:600;color:var(--tr-text);margin-bottom:7px}
.tr-field label .tr-optional{font-weight:400;color:var(--tr-text-muted)}
.tr-field-help{font-size:12.5px;color:var(--tr-text-muted);margin-top:6px}
.tr-input,.tr-select{width:100%;background:var(--tr-paper-sunken);border:1.5px solid transparent;border-radius:12px;padding:12px 14px;font-family:var(--tr-font);font-size:14.5px;line-height:1.4;color:var(--tr-text);margin:0;transition:border-color .15s ease,background .15s ease}
.tr-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M15.8337 6.66669L10.0003 12.5L4.16699 6.66669' stroke='%2354536B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.tr-select:invalid,.tr-select option[value=""]{color:var(--tr-text-muted)}
.tr-input::placeholder{color:var(--tr-text-muted)}
.tr-input:focus,.tr-select:focus{outline:none;border-color:var(--tr-brand);background:#fff;box-shadow:0 0 0 3px rgba(99,74,252,.14)}
.tr-field.invalid .tr-input,.tr-field.invalid .tr-select{border-color:var(--tr-error);background:#fff}
.tr-field-error{display:none;font-size:12.5px;color:var(--tr-error);margin-top:6px}
.tr-field.invalid .tr-field-error{display:block}

.tr-consent{display:flex;align-items:flex-start;gap:10px}
.tr-consent input{margin:3px 0 0;width:16px;height:16px;accent-color:var(--tr-brand);flex-shrink:0}
.tr-consent label{font-size:12.5px;line-height:1.6;color:var(--tr-text-secondary)}
.tr-consent a{color:var(--tr-brand-hover);text-decoration:underline}
.tr-consent.invalid label{color:var(--tr-error)}
.tr-consent .tr-field-error{margin-top:6px}
.tr-consent.invalid .tr-field-error{display:block}

.tr-submit{width:100%;position:relative}
.tr-spinner{display:none;width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:tr-spin .7s linear infinite}
.tr-submit.is-loading .tr-spinner{display:inline-block}
.tr-submit.is-loading .tr-submit-label{opacity:.85}
@keyframes tr-spin{to{transform:rotate(360deg)}}
.tr-submit-caption{text-align:center;font-size:12.5px;color:var(--tr-text-muted);margin-top:12px}

.tr-info-box{display:flex;align-items:center;gap:24px;background:#eff1ff;border:1px solid #dce0ff;border-radius:16px;padding:16px 24px 16px 18px;margin-top:56px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.tr-info-box-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:80px;height:80px;border-radius:100px;background:#dee2ff;font-size:32px}
.tr-info-box b{display:block;font-size:16px;font-weight:500;color:var(--tr-text);margin-bottom:12px}
.tr-info-box p{font-size:14px;color:var(--tr-text-secondary);line-height:1.45}
@media(max-width:560px){.tr-info-box{flex-direction:column;align-items:flex-start;text-align:left}}

/* =========================================================
   BENEFITS — six stacking cards
   ========================================================= */
.tr-benefits{padding:24px 0 110px}
.tr-stack-head{max-width:640px;margin:0 auto 56px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.tr-stack-head h2{font-size:clamp(26px,3.2vw,34px);line-height:1.2}
.tr-stack{position:relative;max-width:860px;margin:0 auto}
.tr-stack-card{position:sticky;width:100%;max-width:860px;aspect-ratio:860/393;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#fff;border-radius:28px;overflow:hidden;box-shadow:0 10px 32px rgba(0,0,0,.08);margin-bottom:20px}
.tr-stack-card:nth-child(1){top:88px;z-index:1;background-image:url("/assets/images/pages/trial/card-1-desktop.webp")}
.tr-stack-card:nth-child(2){top:110px;z-index:2;background-image:url("/assets/images/pages/trial/card-2-desktop.webp")}
.tr-stack-card:nth-child(3){top:132px;z-index:3;background-image:url("/assets/images/pages/trial/card-3-desktop.webp")}
.tr-stack-card:nth-child(4){top:154px;z-index:4;background-image:url("/assets/images/pages/trial/card-4-desktop.webp")}
.tr-stack-card:nth-child(5){top:176px;z-index:5;background-image:url("/assets/images/pages/trial/card-5-desktop.webp")}
.tr-stack-card:nth-child(6){top:198px;z-index:6;margin-bottom:0;background-image:url("/assets/images/pages/trial/card-6-desktop.webp")}
.tr-stack-content{position:absolute;top:30px;right:34px;width:395px;height:331px;background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.05);padding:0 32px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:24px}
.tr-stack-icon{width:56px;height:56px;border-radius:16px;background:var(--tr-tint-15);color:var(--tr-brand-hover);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tr-stack-icon svg{width:26px;height:26px}
.tr-stack-card h3{font-size:26px;letter-spacing:-.01em;line-height:1.15}
.tr-stack-card p{font-size:14px;color:var(--tr-text-secondary);line-height:1.6;margin-top:24px}
@media(max-width:900px){.tr-stack-content{width:min(395px,calc(100% - 68px))}}
@media(max-width:720px){
  .tr-stack-card:nth-child(n){position:relative;top:auto;aspect-ratio:auto;height:732px;background-position:top center}
  .tr-stack-content{position:absolute;top:auto;left:16px;right:16px;bottom:24px;width:auto;height:auto;padding:20px}
  .tr-stack-card:nth-child(1){background-image:url("/assets/images/pages/trial/card-1-mobile.webp")}
  .tr-stack-card:nth-child(2){background-image:url("/assets/images/pages/trial/card-2-mobile.webp")}
  .tr-stack-card:nth-child(3){background-image:url("/assets/images/pages/trial/card-3-mobile.webp")}
  .tr-stack-card:nth-child(4){background-image:url("/assets/images/pages/trial/card-4-mobile.webp")}
  .tr-stack-card:nth-child(5){background-image:url("/assets/images/pages/trial/card-5-mobile.webp")}
  .tr-stack-card:nth-child(6){background-image:url("/assets/images/pages/trial/card-6-mobile.webp")}
}

/* =========================================================
   HARDWARE — clocks and badges panel
   ========================================================= */
.tr-hardware{padding:0 0 96px}
.tr-hardware-panel{position:relative;overflow:visible;border-radius:24px;padding:40px 52px;background:radial-gradient(90% 130% at 100% 0%,rgba(184,173,255,.10) 0%,rgba(184,173,255,0) 55%),linear-gradient(90deg,#0b0a14 0%,#0b0a14 100%);display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.tr-hardware-copy{max-width:600px;position:relative;z-index:1}
.tr-hardware-copy h2{font-size:clamp(22px,2.4vw,30px);line-height:1.2;color:#fff;letter-spacing:-.01em}
.tr-hardware-copy h2 span{color:#b8adff}
.tr-hardware-copy p{font-size:14.5px;line-height:1.55;color:var(--tr-text-inverse-soft);max-width:600px;margin-top:16px}
.tr-hardware .btn{flex-shrink:0;position:relative;z-index:1}
.tr-hardware-image{position:absolute;right:230px;bottom:0;width:245px;pointer-events:none}
.tr-hardware-image img{width:100%;height:auto;display:block}
@media(max-width:1100px){.tr-hardware-image{right:200px;width:187px}}
@media(max-width:900px){
  .tr-hardware-panel{padding:36px}
  .tr-hardware-image{display:none}
}

/* =========================================================
   FAQ — single-open accordion
   Collapsing is gated on .tr-js like the scroll reveals: without JavaScript
   every answer stays open and the toggle icons disappear. visibility follows
   max-height so a collapsed answer also leaves the accessibility tree, which
   overflow:hidden alone does not do; the delay keeps it visible while it
   closes and removes it the moment it opens.
   ========================================================= */
.tr-faq{padding:72px 0 0}
.tr-faq-head{max-width:640px;margin:0 auto 36px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.tr-faq-head h2{font-size:32px;line-height:1.25}
.tr-faq-columns{display:grid;grid-template-columns:1fr;gap:0;align-items:start;max-width:760px;margin:0 auto}
.tr-faq-item{border-bottom:1px solid #f3f3fe}
.tr-faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:20px 0;background:none;border:none;cursor:pointer;text-align:left;font-family:var(--tr-font)}
.tr-faq-q span{font-size:15px;font-weight:600;color:var(--tr-text)}
.tr-faq-q svg{width:16px;height:16px;color:var(--tr-text-muted);flex-shrink:0;transition:transform .2s ease}
.tr-scope:not(.tr-js) .tr-faq-q{cursor:default}
.tr-scope:not(.tr-js) .tr-faq-q svg{display:none}
.tr-faq-item.open .tr-faq-q svg{transform:rotate(45deg)}
.tr-js .tr-faq-a{max-height:0;overflow:hidden;visibility:hidden;transition:max-height .25s ease,visibility 0s linear .25s}
.tr-js .tr-faq-item.open .tr-faq-a{max-height:300px;visibility:visible;transition:max-height .25s ease,visibility 0s}
.tr-faq-a p{font-size:13.5px;color:var(--tr-text-secondary);line-height:1.6;padding-bottom:20px;max-width:640px}
@media(prefers-reduced-motion:reduce){
  .tr-js .tr-faq-a,.tr-js .tr-faq-item.open .tr-faq-a{transition:none}
}

/* =========================================================
   THANK-YOU PAGE
   ========================================================= */
#trConfetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.ty-hero{min-height:calc(100vh - 72px);display:flex;align-items:center;justify-content:center;padding:32px 0 0;position:relative}
.ty-card{width:520px;max-width:100%;margin:0 auto;text-align:center;position:relative;z-index:6;background:#fbf9ff;border:1px solid #f3edff;border-radius:16px;box-shadow:0 1px 4px rgba(0,0,0,.05);padding:64px 40px;display:flex;flex-direction:column;align-items:center;gap:40px}
.ty-card-top{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%}
/* Animated check — adapted from Jon Kantner's "Check Spinner With Pop Effect"
   (codepen.io/jkantner/pen/LEPrqBd): a ring spins, draws into a tick and
   pops out a burst of dots. animation-fill-mode:forwards holds the tick. */
.ty-icon{width:64px;height:64px;border-radius:100px;background:#cef9de;color:#0f8a52;display:flex;align-items:center;justify-content:center;
  --light-green:hsl(105,40%,70%);--light-blue:hsl(210,90%,70%);--periwinkle:hsl(240,90%,70%);--orange:hsl(15,90%,70%);--magenta:hsl(300,90%,70%);--light-teal:hsl(150,40%,70%);--purple:hsl(270,90%,70%)}
.ty-icon svg{width:40px;height:40px;overflow:visible}
.ty-icon svg circle,.ty-icon svg g,.ty-icon svg path{animation-duration:2s;animation-timing-function:linear;animation-fill-mode:forwards}
.ty-icon .spinner__check,.ty-icon .spinner__pop-start,.ty-icon .spinner__worm{transform-origin:24px 24px}
.ty-icon .spinner__check{animation-name:ty-check}
.ty-icon .spinner__pop-dot{animation-name:ty-pop-dot}
.ty-icon .spinner__pop-dot-group{animation-name:ty-pop-dot-group1}
.ty-icon .spinner__pop-dot-group+.spinner__pop-dot-group{animation-name:ty-pop-dot-group2}
.ty-icon .spinner__pop-end{animation-name:ty-pop-end}
.ty-icon .spinner__pop-start{animation-name:ty-pop-start}
.ty-icon .spinner__worm{animation-name:ty-worm}
@keyframes ty-check{
  from,64%{stroke-dashoffset:-36.7;transform:scale(1)}
  75%,77%{animation-timing-function:cubic-bezier(.65,0,.35,1);stroke-dashoffset:13.7;transform:scale(1)}
  79%{animation-timing-function:cubic-bezier(.65,0,.35,1);stroke-dashoffset:13.7;transform:scale(.4)}
  87%{animation-timing-function:cubic-bezier(.32,0,.67,0);stroke-dashoffset:13.7;transform:scale(1.4)}
  93%,to{stroke-dashoffset:13.7;transform:scale(1)}
}
@keyframes ty-pop-dot{
  from,80%{animation-timing-function:cubic-bezier(.33,1,.68,1);transform:translate(0,6px)}
  90%,to{transform:translate(0,0)}
}
@keyframes ty-pop-dot-group1{from,82.5%,90%,to{opacity:0}85%,87.5%{opacity:1}}
@keyframes ty-pop-dot-group2{from,82.5%,to{opacity:0}85%,90%{opacity:1}}
@keyframes ty-pop-end{
  from{animation-timing-function:steps(1,end);opacity:0;r:18px;stroke-width:4px}
  82.5%{animation-timing-function:linear;opacity:1;r:18px;stroke-width:4px}
  84%,to{opacity:0;r:19px;stroke-width:3px}
}
@keyframes ty-pop-start{
  from{animation-timing-function:steps(1,end);opacity:0;transform:scale(.35)}
  76%{animation-timing-function:cubic-bezier(.65,0,.35,1);opacity:1;transform:scale(.35)}
  82.5%{animation-timing-function:steps(1,start);opacity:1;transform:scale(1)}
  to{opacity:0;transform:scale(1)}
}
@keyframes ty-worm{
  from{stroke-dashoffset:-51.84;transform:rotate(-119deg)}
  60%{stroke-dashoffset:-51.84;transform:rotate(241deg)}
  64%{animation-timing-function:cubic-bezier(.61,1,.88,1);stroke-dashoffset:-51.84;transform:rotate(313deg)}
  72.5%,to{stroke-dashoffset:-138.23;transform:rotate(313deg)}
}
@media(prefers-reduced-motion:reduce){
  .ty-icon svg circle,.ty-icon svg g,.ty-icon svg path{animation:none}
  .ty-icon .spinner__check{stroke-dashoffset:13.7}
  .ty-icon .spinner__worm{opacity:0}
  .ty-icon .spinner__pop-start{opacity:1;transform:scale(1)}
}
/* Holds "Trial created for " + up to 100 characters of company name, so it
   wraps inside the card rather than running out of it on a phone. */
.ty-badge{display:inline-flex;align-items:center;justify-content:center;min-height:24px;max-width:100%;padding:2px 12px;border-radius:8px;background:#ebeeff;color:#4931dc;font-size:14px;font-weight:500;line-height:20px;text-align:center;overflow-wrap:anywhere}
.ty-card h1{font-size:clamp(34px,5vw,50px);line-height:1.1;letter-spacing:-.01em}
.ty-sub{font-size:14px;line-height:20px;color:var(--tr-text-secondary);max-width:440px}
.ty-sub p{color:inherit}
.ty-sub p+p{margin-top:12px}
.ty-actions{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.ty-actions .btn-outline{height:52px;min-width:199px;padding:10px 21px;border-radius:8px}
.ty-actions .btn-primary{height:52px;min-width:196px;border-radius:8px;padding:12px 28px}
.ty-help{max-width:420px;width:100%;background:var(--tr-paper-sunken);border:1px solid var(--tr-border);border-radius:16px;padding:22px 24px;text-align:left;display:none}
.ty-help.show{display:block;margin-top:-16px}
.ty-help p{font-size:13px;color:var(--tr-text-secondary);line-height:1.6}
.ty-help a{color:var(--tr-brand-hover);font-weight:600;text-decoration:underline}
@media(max-width:560px){.ty-card{padding:48px 24px}}