:root {
    --ui-paper: #ffffff;
    --ui-cream: #f9f8f6;
    --ui-sand: #f2ede5;
    --ui-ink: #0a0a0a;
    --ui-steel: #545454;
    --ui-border: #d5d9e2;
    --ui-brand-blue: #1677ff;
    --ui-brand-blue-dark: #0b57d0;
    --ui-danger: #d92d20;
    --ui-success: #16803c;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--ui-paper);
    color: var(--ui-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--ui-brand-blue-dark); }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.trial-shell {
    width: min(100%, 840px);
    margin: 0 auto;
    padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}
.trial-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ui-border);
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ui-ink);
    text-decoration: none;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
}
.brand img { display: block; width: 44px; height: 60px; object-fit: contain; }
.brand-caption { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--ui-steel); }
.back-link { display: inline-flex; min-height: 44px; align-items: center; font-size: 14px; text-underline-offset: 4px; white-space: nowrap; }
.trial-intro { margin: 32px 0 24px; }
h1 { margin: 0 0 16px; font-size: 30px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.trial-intro > p { margin: 0 0 12px; color: var(--ui-steel); }
.availability { font-size: 14px; }
.availability[data-tone="error"], .form-status[data-tone="error"] { color: var(--ui-danger); }
.availability[data-tone="success"], .form-status[data-tone="success"] { color: var(--ui-success); }
.retry-button { margin-top: 4px; }
.trial-form { padding: 24px; border: 1px solid var(--ui-border); border-radius: 16px; background: var(--ui-cream); }
.form-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.form-section { min-width: 0; margin: 0 0 28px; padding: 0 0 24px; border: 0; border-bottom: 1px solid var(--ui-border); }
.form-section h2, .feature-section > legend { margin: 0 0 8px; padding: 0; font-size: 18px; font-weight: 600; line-height: 1.5; }
.section-hint, .field-hint, .submit-hint { color: var(--ui-steel); font-size: 14px; }
.section-hint { margin: 0 0 20px; }
.field-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.field { min-width: 0; }
.field label { display: block; margin-bottom: 8px; font-weight: 500; }
.required { color: var(--ui-danger); }
.field input {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 10px 12px;
    color: var(--ui-ink);
    background: var(--ui-paper);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    transition: border-color 180ms ease, background-color 180ms ease;
}
.field input::placeholder { color: #6f6f6f; opacity: 1; }
.field input[aria-invalid="true"] { border-color: var(--ui-danger); }
.field input:disabled { background: var(--ui-sand); color: var(--ui-steel); }
.field-error { margin: 6px 0 0; color: var(--ui-danger); font-size: 14px; }
.field-error:empty { display: none; }
.field-hint { margin: 8px 0 0; }
.phone-row { display: flex; align-items: stretch; gap: 8px; }
.phone-row input { flex: 1; }
.phone-row .sms-button { flex: none; padding-right: 14px; padding-left: 14px; font-size: 14px; white-space: nowrap; }
.code-field { grid-column: 1 / -1; }
.code-field input { max-width: 280px; }
.feature-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.feature-option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    cursor: pointer;
}
.feature-option:has(input:checked) { border-color: var(--ui-brand-blue); background: var(--ui-paper); }
.feature-option input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ui-brand-blue); }
.feature-option input:disabled { cursor: default; }
.feature-copy { min-width: 0; }
.feature-title, .feature-note { display: block; }
.feature-note { margin-top: 4px; color: var(--ui-steel); font-size: 14px; }
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 24px;
    border: 1px solid transparent;
    border-radius: 9999px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    line-height: 1.5;
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.primary { color: var(--ui-paper); background: var(--ui-brand-blue-dark); }
.primary:hover:not(:disabled) { background: #0849b1; }
.secondary { color: var(--ui-ink); border-color: var(--ui-border); background: var(--ui-paper); }
.secondary:hover:not(:disabled) { border-color: var(--ui-steel); background: var(--ui-sand); }
.button:active:not(:disabled) { transform: translateY(1px); }
.button:disabled { color: var(--ui-steel); background: var(--ui-sand); border-color: var(--ui-border); cursor: not-allowed; }
:where(a, button, input):focus-visible { outline: 3px solid var(--ui-brand-blue); outline-offset: 3px; }
.submit-hint { margin: 0 0 16px; }
.submit-button { width: 100%; }
.form-status { margin: 16px 0 0; overflow-wrap: anywhere; }
.form-status:empty { display: none; }
.noscript-message { color: var(--ui-danger); }
.success-section { padding: 32px 24px; background: var(--ui-cream); border: 1px solid var(--ui-border); border-radius: 16px; }
.success-section h2 { margin: 0 0 16px; font-size: 24px; line-height: 1.3; }
.success-section p { margin: 0 0 12px; overflow-wrap: anywhere; }
.success-section .button { margin-top: 12px; }
.success-features { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ui-border); }
.success-features h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (min-width: 640px) {
    .trial-shell { padding-top: 40px; padding-bottom: 56px; }
    .trial-intro { margin-top: 40px; }
    .trial-form { padding: 32px; }
}
@media (min-width: 720px) {
    .field-grid, .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 399px) {
    .trial-shell { padding-right: max(16px, env(safe-area-inset-right)); padding-left: max(16px, env(safe-area-inset-left)); }
    .trial-form { padding: 20px; }
    h1 { font-size: 24px; }
    .phone-row .sms-button { padding-right: 12px; padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}