/* Use the same light/dark palette as the rest of Attest. */
:root {
    --ink: var(--text);
    --line: var(--card-border);
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:24px
}
body {
    margin:0;
    background:var(--page-bg);
    color:var(--ink);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased
}
a {
    color:inherit
}
button,input,select {
    font:inherit
}
a,button,input,select {
    outline-offset:5px
}
a:focus-visible,button:focus-visible {
    outline:2px solid var(--accent)
}
.wrap {
    width:min(1220px,calc(100% - 80px));
    margin:auto
}
.skip-link {
    position:absolute;
    left:12px;
    top:-80px;
    padding:12px;
    background:var(--input-bg);
    color:var(--text);
    z-index:10
}
.skip-link:focus {
    top:12px
}
.campaign-header {
    height:102px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid var(--line)
}
.brand {
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none
}
.brand strong {
    font-size:25px;
    letter-spacing:-1px
}
.brand strong span {
    display:block;
    font-size:10px;
    letter-spacing:1.6px;
    text-transform:uppercase;
    color:var(--muted);
    margin-top:1px
}
.brand img {
    object-fit:contain
}
.header-cta {
    font-size:13px;
    text-decoration:none;
    border-bottom:1px solid var(--border);
    padding:10px 0
}
.header-cta span {
    margin-left:20px;
    color:var(--accent)
}
.hero {
    display:grid;
    grid-template-columns:1.12fr 1fr;
    gap:70px;
    align-items:start;
    padding-top:64px;
    padding-bottom:64px
}
.eyebrow {
    font-size:10px;
    line-height:1.8;
    font-weight:750;
    letter-spacing:1.8px;
    margin:0 0 22px;
    color:var(--accent)
}
.signal {
    display:inline-block;
    width:7px;
    height:7px;
    background:var(--accent);
    border-radius:50%;
    margin-right:8px;
    box-shadow:0 0 18px rgba(124,92,255,.3)
}
h1 {
    font-size:clamp(38px,4.5vw,62px);
    font-weight:550;
    line-height:1.08;
    letter-spacing:-3px;
    margin:0 0 26px
}
h1 em {
    font-style:normal;
    color:var(--accent)
}
.hero-intro {
    font-size:21px;
    line-height:1.5;
    max-width:470px;
    margin:0 0 20px
}
.hero-detail {
    font-size:15px;
    line-height:1.8;
    color:var(--muted);
    max-width:465px
}
.hero-detail strong {
    color:var(--ink);
    font-weight:600
}
.value-lines {
    display:flex;
    gap:20px;
    border-top:1px solid var(--line);
    padding-top:25px;
    margin-top:33px;
    flex-wrap:wrap;
    font-size:11px
}
.value-lines b {
    display:block;
    font:12px ui-monospace,monospace;
    color:var(--accent);
    margin-bottom:9px
}
.preview-link {
    display:inline-block;
    font-size:13px;
    color:var(--muted);
    text-decoration:none;
    margin-top:32px
}
.preview-link span {
    color:var(--accent);
    margin-left:12px
}
.request-card {
    background:var(--panel);
    color:var(--text);
    border-radius:6px;
    padding:30px 32px;
    box-shadow:var(--shadow);
    border:1px solid var(--card-border);
    scroll-margin-top:20px
}
.request-card .eyebrow {
    color:var(--accent);
    margin-bottom:9px;
    font-size:9px
}
.request-card h2 {
    font-size:28px;
    font-weight:600;
    line-height:1.17;
    letter-spacing:-.9px;
    margin:0 0 12px
}
.request-card>p:not(.eyebrow) {
    font-size:13px;
    line-height:1.6;
    color:var(--muted);
    margin:0 0 20px
}
.trial-form {
    display:grid;
    gap:12px
}
.information-name-fields {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
}
.field {
    min-width:0
}
.label {
    display:block;
    font-size:11px;
    font-weight:650;
    color:var(--text);
    margin-bottom:6px
}
.trial-input,.trial-select {
    color-scheme:inherit;
    width:100%;
    height:43px;
    border:1px solid var(--input-border);
    border-radius:4px;
    background:var(--input-bg);
    color:var(--text);
    padding:9px 11px;
    font-size:14px
}
.trial-input:focus,.trial-select:focus {
    outline:2px solid var(--accent);
    outline-offset:1px
}
.trial-cta,.primary-link {
    border:0;
    background:var(--accent);
    color:#fff;
    font-weight:750;
    font-size:13px;
    line-height:1.5;
    padding:15px 18px;
    border-radius:4px;
    text-decoration:none;
    cursor:pointer;
    display:block;
    text-align:center
}
.trial-cta {
    margin-top:5px;
    background:var(--accent);
    color:#fff;
    min-height:48px
}
.trial-cta:hover {
    background:color-mix(in srgb, var(--accent) 88%, #000)
}
.primary-link:hover {
    background:color-mix(in srgb, var(--accent) 88%, #000)
}
.request-card .form-note {
    font-size:10px!important;
    line-height:1.7!important;
    margin:13px 0 0!important
}
.trial-banner {
    padding:12px;
    margin:0 0 12px;
    background:var(--panel2);
    font-size:13px;
    border-left:3px solid var(--accent)
}
.trial-banner.is-error {
    background:#f7e0d9;
    border-color:#a43524;
    color:#7b2519
}
.bridge {
    display:flex;
    gap:35px;
    align-items:center;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:30px 0
}
.product-label {
    font-size:10px;
    letter-spacing:2px;
    color:var(--accent);
    font-weight:650
}
.bridge p {
    font-size:16px;
    line-height:1.6;
    color:var(--muted);
    margin:7px 0 0
}
.bridge strong {
    color:var(--text);
    font-weight:500
}
.bridge-plus {
    font-size:28px;
    color:var(--muted)
}
.bridge .bridge-outcome {
    margin-left:auto;
    border-left:1px solid var(--line);
    padding-left:45px;
    font-size:17px
}
.preview-section {
    padding:78px 0
}
.section-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;
    margin-bottom:30px
}
.section-heading .eyebrow {
    margin-bottom:12px
}
h2 {
    font-size:39px;
    font-weight:500;
    letter-spacing:-1.5px;
    line-height:1.15;
    margin:0
}
.section-heading h2 span {
    color:var(--muted)
}
.section-heading>p {
    font-size:15px;
    line-height:1.7;
    color:var(--muted);
    max-width:340px;
    margin:0
}
.console {
    color:#e8edf7;
    border:1px solid #33505b;
    border-radius:9px;
    background:#0c202b;
    overflow:hidden;
    box-shadow:0 30px 80px #0003
}
.console-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:17px 25px;
    background:#172f3b;
    border-bottom:1px solid #2e4751;
    font-size:13px;
    letter-spacing:.5px
}
.console-top b {
    font-weight:400;
    color:#a5bbc8
}
.console-icon {
    display:inline-grid;
    place-items:center;
    border:1px solid #56bfe4;
    color:#65d6e6;
    width:24px;
    height:26px;
    margin-right:12px;
    font-weight:700
}
.sample-badge {
    font-size:10px;
    color:#b5c9cd;
    letter-spacing:0
}
.console-body {
    padding:28px
}
.console-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}
.console-heading .eyebrow {
    color:#8cbed3;
    font-size:9px;
    margin:0 0 7px
}
.console-heading h3 {
    font-size:23px;
    font-weight:550;
    margin:0;
    letter-spacing:-.5px
}
.console-status {
    color:#8cb2b1;
    font-size:10px
}
.preview-tabs {
    display:flex;
    gap:25px;
    border-bottom:1px solid #29414d;
    margin:25px 0
}
.preview-tabs button {
    background:none;
    border:0;
    border-bottom:2px solid transparent;
    color:#a5bcc7;
    padding:12px 0;
    cursor:pointer;
    font-size:12px
}
.preview-tabs button[aria-selected=true] {
    color:#6ce4da;
    border-color:#6ce4da
}
.metrics {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px
}
.metrics>div {
    padding:19px 22px;
    border:1px solid #294752;
    background:#102735;
    border-radius:6px
}
.metrics span,.metrics small {
    display:block;
    font-size:11px;
    color:#a2bbc8
}
.metrics strong {
    font-size:34px;
    font-weight:550;
    display:block;
    margin:9px 0
}
.metrics i {
    font-size:21px;
    font-style:normal;
    color:#8caaba
}
.console-grid {
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:20px;
    margin-top:20px
}
.tools-panel,.evidence-panel {
    border:1px solid #294752;
    padding:23px;
    border-radius:6px
}
.console h4 {
    font-size:15px;
    font-weight:550;
    margin:0 0 20px
}
.tool-row {
    display:grid;
    grid-template-columns:110px 1fr 60px;
    gap:14px;
    align-items:center;
    font-size:12px;
    margin-top:21px;
    color:#bcd0d7
}
.tool-row small {
    font-size:10px;
    color:#93b6bb
}
.bar {
    background:#203e4f;
    height:7px;
    border-radius:2px;
    overflow:hidden
}
.bar i {
    background:#32b6d0;
    height:100%;
    display:block
}
.tool-row:nth-child(3) .bar i {
    background:#9c93f6
}
.tool-row:nth-child(4) .bar i {
    background:#46caa8
}
.tool-row:nth-child(5) .bar i {
    background:#79a9ff
}
.mini-label {
    font-size:8px;
    letter-spacing:1.5px;
    color:#89b2c3
}
.evidence-panel h4 {
    font-size:24px;
    line-height:1.25;
    margin:15px 0
}
.evidence-panel p {
    font-size:11px;
    line-height:1.7;
    color:#a2bac5;
    margin:0;
    max-width:340px
}
.console-caption {
    border-top:1px solid #294752;
    padding:15px 28px;
    font-size:10px;
    color:#a1b9c3
}
.workflow-panel {
    display:flex;
    gap:35px;
    min-height:332px;
    align-items:center;
    max-width:850px;
    margin:auto;
    padding:20px
}
.workflow-number {
    font-size:80px;
    letter-spacing:-5px;
    color:#406674
}
.workflow-panel h4 {
    font-size:29px;
    margin:0 0 15px
}
.workflow-panel p,.workflow-panel li {
    color:#b6cbd0;
    font-size:14px;
    line-height:1.7
}
.workflow-panel ul {
    padding-left:18px
}
.workflow-panel .capability-note {
    font-size:11px;
    color:#90b0bb
}
.steps-section {
    padding-bottom:72px
}
.steps-section>.eyebrow {
    margin-bottom:10px
}
.steps {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    margin-top:32px
}
.steps article {
    border-top:1px solid var(--card-border);
    padding-top:24px
}
.steps article>span {
    font-size:10px;
    letter-spacing:1px;
    color:var(--accent)
}
.steps h3 {
    font-size:20px;
    font-weight:500;
    letter-spacing:-.5px;
    margin:20px 0 12px
}
.steps p {
    font-size:14px;
    line-height:1.8;
    color:var(--muted);
    margin:0
}
.closing {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:40px;
    border:1px solid var(--card-border);
    background:var(--hero-bg);
    border-radius:6px
}
.closing .eyebrow {
    margin-bottom:10px
}
.closing h2 {
    font-size:32px
}
.closing .primary-link {
    min-width:280px
}
.primary-link span {
    margin-left:12px
}
.campaign-footer {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:32px 0;
    color:var(--muted);
    font-size:11px
}
.campaign-footer nav {
    display:flex;
    gap:22px
}
.campaign-footer a {
    text-decoration:none
}
[hidden] {
    display:none!important
}
@media(min-width:1400px) {
    .hero {
        padding-top:75px;
        padding-bottom:75px
    }
}
@media(max-width:1050px) {
    .wrap {
        width:calc(100% - 48px)
    }
    .hero {
        gap:35px;
        grid-template-columns:1fr 1fr
    }
    .request-card {
        padding:26px
    }
    .hero h1 {
        font-size:45px
    }
    .hero-intro {
        font-size:19px
    }
    .value-lines {
        gap:15px
    }
    .bridge {
        gap:22px
    }
    .bridge .bridge-outcome {
        padding-left:25px
    }
    .tool-row {
        grid-template-columns:95px 1fr 50px;
        gap:7px
    }
    .console-body {
        padding:22px
    }
}
@media(max-width:760px) {
    .wrap {
        width:calc(100% - 36px)
    }
    .campaign-header {
        height:80px
    }
    .header-cta {
        font-size:10px
    }
    .header-cta span {
        margin-left:5px
    }
    .brand strong {
        font-size:23px
    }
    .brand img {
        width:30px;
        height:30px
    }
    .hero {
        display:flex;
        flex-direction:column;
        gap:28px;
        padding-top:35px;
        padding-bottom:38px
    }
    .hero-copy {
        width:100%
    }
    .hero h1 {
        font-size:44px;
        letter-spacing:-2px;
        margin-bottom:20px
    }
    .hero .eyebrow {
        font-size:8px;
        letter-spacing:1.2px;
        margin-bottom:17px
    }
    .hero-intro {
        font-size:19px;
        margin-bottom:12px;
        max-width:100%
    }
    .hero-detail {
        font-size:14px;
        max-width:100%;
        margin-bottom:0
    }
    .value-lines,.preview-link {
        display:none
    }
    .request-card {
        width:100%;
        padding:25px
    }
    .request-card h2 {
        font-size:27px
    }
    .bridge {
        gap:17px;
        flex-wrap:wrap;
        padding:24px 0
    }
    .bridge>div {
        flex:1
    }
    .bridge p {
        font-size:12px
    }
    .bridge .bridge-outcome {
        display:none
    }
    .bridge-plus {
        font-size:20px
    }
    .product-label {
        font-size:9px
    }
    .preview-section {
        padding:45px 0
    }
    .section-heading {
        display:block
    }
    .section-heading h2 {
        font-size:33px
    }
    .section-heading>p {
        margin-top:18px;
        font-size:14px;
        max-width:100%
    }
    .console-top {
        padding:14px;
        align-items:flex-start;
        flex-direction:column;
        gap:8px
    }
    .console-body {
        padding:16px
    }
    .console-heading {
        display:block
    }
    .console-heading h3 {
        font-size:21px
    }
    .console-status {
        display:block;
        margin-top:12px
    }
    .preview-tabs {
        gap:22px;
        margin:16px 0
    }
    .preview-tabs button {
        font-size:11px
    }
    .metrics {
        gap:7px
    }
    .metrics>div {
        padding:12px 8px
    }
    .metrics span {
        font-size:9px;
        min-height:25px
    }
    .metrics strong {
        font-size:27px
    }
    .metrics i {
        font-size:13px
    }
    .metrics small {
        font-size:8px;
        line-height:1.5
    }
    .console-grid {
        grid-template-columns:1fr;
        gap:12px
    }
    .tools-panel,.evidence-panel {
        padding:17px
    }
    .evidence-panel h4 {
        font-size:22px
    }
    .console-caption {
        padding:14px 16px;
        line-height:1.6
    }
    .workflow-panel {
        padding:5px;
        min-height:450px;
        gap:0
    }
    .workflow-number {
        display:none
    }
    .workflow-panel h4 {
        font-size:25px
    }
    .workflow-panel p,.workflow-panel li {
        font-size:13px
    }
    .steps-section {
        padding-bottom:40px
    }
    .steps-section h2 {
        font-size:31px
    }
    .steps {
        grid-template-columns:1fr;
        gap:25px;
        margin-top:25px
    }
    .steps h3 {
        margin:12px 0 9px
    }
    .closing {
        padding:26px;
        display:block
    }
    .closing h2 {
        font-size:28px
    }
    .closing .primary-link {
        margin-top:25px;
        min-width:0;
        font-size:12px
    }
    .closing .eyebrow {
        font-size:8px
    }
    .campaign-footer {
        font-size:10px;
        flex-direction:column;
        gap:15px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
}
/* Keep the complete request form visible in a standard desktop viewport. */
@media(min-width:761px) {
    .campaign-header {
        height:84px
    }
    .hero {
        padding-top:38px
    }
    .request-card {
        padding:25px 28px
    }
    .request-card h2 {
        font-size:26px
    }
    .request-card>p:not(.eyebrow) {
        margin-bottom:15px
    }
    .information-detail-fields {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:12px
    }
    .hero h1 {
        font-size:clamp(38px,4.3vw,60px)
    }
}
@media(max-width:760px) {
    .information-detail-fields {
        display:grid;
        gap:12px
    }
}
