body.trial-page { background: var(--paper); }
.trial-top { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; flex-wrap:wrap; }
.trial-top a { text-decoration:none; }
.trial-shell { width:min(960px,calc(100% - 32px)); margin:0 auto 60px; }
.trial-card { background:white; border:1px solid var(--line); border-radius:24px; padding:clamp(22px,4vw,42px); margin-top:20px; }
.trial-card h1 { font-family:var(--sans); font-size:clamp(28px,5vw,40px); line-height:1.2; letter-spacing:-.03em; margin:8px 0 18px; }
.trial-card h2 { font-family:var(--sans); font-size:24px; line-height:1.3; }
.trial-card p { color:var(--muted); }
.trial-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.trial-grid label { display:flex; flex-direction:column; gap:7px; font-size:16px; font-weight:600; min-width:0; }
.trial-grid input, .trial-grid select, .trial-grid textarea { width:100%; padding:13px; min-height:48px; background:white; border:1px solid #afbfcd; border-radius:10px; font:inherit; font-weight:400; color:var(--ink); }
.span-all { grid-column:1/-1; }
.trial-grid .check-label { flex-direction:row; align-items:flex-start; font-size:14px; font-weight:400; }
.check-label input { width:20px; min-height:20px; flex-shrink:0; margin-top:4px; }
.trial-actions { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:24px; }
.trial-actions .button { text-align:center; white-space:normal; }
.trial-notice { background:#e4f6ef; border:1px solid #b4dece; padding:16px; border-radius:12px; margin:16px 0; color:#12563e; }
.trial-notice:empty { display:none; }
.trial-notice[data-error="true"] { background:#fff0ec; color:#932a15; border-color:#efc3b7; }
.trial-note { font-size:14px; }
.trial-grid button:disabled { opacity:.55; cursor:wait; }
.text-button { background:none; border:0; color:var(--blue); font:inherit; text-decoration:underline; cursor:pointer; padding:8px 0; }
[hidden] { display:none !important; }
.demo-layout { display:grid; grid-template-columns:200px minmax(0,1fr); gap:24px; }
.demo-nav { display:flex; flex-direction:column; gap:8px; align-self:start; position:sticky; top:16px; }
.demo-nav button { border:0; border-radius:10px; padding:14px 18px; font:inherit; font-weight:600; text-align:left; background:white; color:var(--navy); cursor:pointer; }
.demo-nav button[aria-current="page"] { background:var(--navy); color:white; }
.demo-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.demo-stats div { border:1px solid var(--line); padding:18px; border-radius:14px; font-size:14px; }
.demo-stats strong { display:block; font-size:30px; color:var(--navy); }
.demo-list { list-style:none; padding:0; }
.demo-list li { border:1px solid var(--line); padding:18px; border-radius:12px; margin:12px 0; overflow-wrap:anywhere; }
.demo-list h3 { font-size:18px; margin:0 0 6px; }
.demo-list p { margin:4px 0; }
.demo-list select { font:inherit; padding:8px; border:1px solid var(--line); border-radius:8px; max-width:100%; }
.demo-badge { font-weight:700; font-size:14px; color:var(--green-dark); }
.demo-document { white-space:pre-wrap; line-height:1.8; background:white; border:1px solid var(--line); padding:24px; border-radius:12px; overflow-wrap:anywhere; }
input:focus-visible,button:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible { outline:3px solid #208add; outline-offset:3px; }
@media(max-width:680px) {
  .trial-grid,.demo-layout { grid-template-columns:1fr; }
  .demo-nav { position:static; flex-direction:row; flex-wrap:wrap; gap:6px; }
  .demo-nav button { font-size:14px; padding:10px; }
  .demo-stats { grid-template-columns:1fr; }
  .trial-top .brand { font-size:14px; }
  .trial-top .brand img { width:36px; height:36px; }
}
@media print { body * { visibility:hidden; } .demo-document,.demo-document * { visibility:visible; } .demo-document { position:absolute; left:0; top:0; border:0; } }