/* TracisAI editorial design */
:root {
    --blue:#166ac7;
    --blue-2:#166ac7;
    --sky:#48b7e5;
    --navy:#123b70;
    --text:#18314e;
    --muted:#526b87;
    --line:#d9e6f5;
    --shadow:0 18px 45px rgba(18,59,112,.09);
    --shadow-blue:0 14px 30px rgba(18,59,112,.12);
    --max:1240px;
    --paper:#f7fbff;
    --accent:#0867c8
}

body {
    background:var(--paper)
}

.site-header {
    background:rgba(247,251,255,.95);
    border-bottom:1px solid #d9e6f5;
    backdrop-filter:blur(14px)
}

.site-header.is-scrolled {
    box-shadow:0 10px 25px rgba(18,59,112,.06)
}

.global-nav {
    color:var(--navy)
}

.global-nav a::after {
    background:var(--accent)
}

.header-cta,
.button.primary,
.price-card a,
.contact-submit {
    color:#fff;
    background:var(--accent);
    border-radius:8px;
    box-shadow:none
}

.header-cta:hover,
.button.primary:hover,
.price-card a:hover,
.contact-submit:hover {
    background:#0753a2
}

.button.secondary {
    color:var(--navy);
    background:transparent;
    border:1px solid var(--navy);
    border-radius:8px
}

.section-kicker {
    padding:0;
    color:var(--accent);
    background:transparent;
    border-radius:0;
    font-size:12px;
    letter-spacing:.18em
}

.section-heading h2 {
    color:var(--navy)
}

.hero {
    padding:32px 20px 68px
}

.hero-shell {
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    align-items:center;
    gap:clamp(36px,5vw,76px);
    max-width:1340px;
    padding:clamp(34px,5vw,72px);
    border:0;
    border-radius:8px;
    background:#eaf4ff;
    box-shadow:none;
    text-align:left
}

.hero-copy {
    min-width:0
}

.hero-eyebrow {
    display:inline-block;
    margin:0 0 28px;
    padding-bottom:7px;
    border-bottom:2px solid var(--accent);
    color:var(--navy);
    font-size:13px;
    font-weight:900;
    letter-spacing:.08em
}

.hero-copy h1 {
    margin:0 0 24px;
    color:var(--navy);
    font-size:clamp(36px,3.7vw,56px);
    font-weight:900;
    line-height:1.18;
    letter-spacing:-.055em
}

.hero-copy h1 span {
    display:block;
    color:var(--blue)
}

.hero-description {
    max-width:34em;
    margin:0 0 30px;
    color:#365777;
    font-size:17px;
    font-weight:700;
    line-height:1.9
}

.hero-impact {
    display:flex;
    align-items:center;
    gap:18px;
    margin:0 0 28px;
    padding:12px 0 12px 18px;
    border-left:3px solid var(--blue)
}

.hero-impact strong {
    color:var(--blue);
    font-size:clamp(30px,3vw,44px);
    font-weight:900;
    line-height:1;
    white-space:nowrap
}

.hero-impact span {
    color:var(--navy);
    font-size:14px;
    font-weight:900;
    line-height:1.45
}

.hero-impact small {
    display:block;
    color:var(--muted);
    font-size:11px;
    font-weight:700
}

.hero-actions {
    justify-content:flex-start;
    gap:12px
}

.button {
    min-width:0;
    min-height:52px;
    padding:12px 20px;
    font-size:14px
}

.hero-note {
    margin:16px 0 0;
    color:var(--muted);
    font-size:12px;
    font-weight:700
}

.hero-product {
    min-width:0;
    overflow:hidden;
    border:1px solid #1b5188;
    border-radius:12px;
    background:#191d23;
    box-shadow:18px 20px 0 rgba(18,59,112,.13)
}

.product-window-head {
    display:flex;
    align-items:center;
    gap:14px;
    height:39px;
    padding:0 14px;
    border-bottom:1px solid #343b41;
    color:#aebbb6;
    font-size:10px;
    font-weight:800;
    letter-spacing:.13em
}

.product-window-dots,
.product-window-dots::before,
.product-window-dots::after {
    display:block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#a2aeaa
}

.product-window-dots {
    position:relative;
    margin-right:21px
}

.product-window-dots::before,
.product-window-dots::after {
    content:"";
    position:absolute;
    top:0
}

.product-window-dots::before {left:11px}
.product-window-dots::after {left:22px}

.product-window-image {
    display:block;
    height:clamp(300px,32vw,460px);
    overflow:hidden;
    background:#191d23
}

.product-window-image img {
    width:100%;
    height:auto
}

.product-window-foot {
    display:flex;
    align-items:center;
    gap:9px;
    min-height:40px;
    padding:8px 14px;
    border-top:1px solid #343b41;
    color:#dce6df;
    font-size:11px;
    font-weight:700
}

.product-window-foot span:last-child {
    margin-left:auto;
    color:#aebbb6
}

.product-window-status {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#49bee7
}

.story {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(40px,8vw,120px);
    align-items:start;
    padding-top:100px;
    padding-bottom:100px
}

.story h2,
.workflow h2,
.benefits h2 {
    margin:0;
    color:var(--navy);
    font-size:clamp(34px,3.7vw,54px);
    line-height:1.27;
    letter-spacing:-.04em
}

.story-copy {
    padding-top:36px;
    border-top:2px solid var(--navy)
}

.story-lead {
    margin:0 0 16px;
    color:var(--navy);
    font-size:23px;
    font-weight:900;
    line-height:1.5
}

.story-copy>p:not(.story-lead) {
    color:var(--muted);
    font-weight:700
}

.story-sources {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:25px
}

.story-sources span {
    padding:6px 12px;
    border:1px solid #aec9e8;
    color:var(--navy);
    font-size:12px;
    font-weight:800
}

.workflow {
    max-width:none;
    padding:88px 20px;
    background:#123b70
}

.workflow-inner {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:clamp(40px,7vw,100px);
    max-width:var(--max);
    margin:auto
}

.workflow .section-kicker {
    color:#83d7ff
}

.workflow h2 {
    color:#fff
}

.workflow-heading>p:last-child {
    max-width:27em;
    margin:20px 0 0;
    color:#d8e9fb;
    font-weight:700
}

.workflow-list article {
    display:grid;
    grid-template-columns:145px 1fr;
    gap:20px;
    padding:24px 0;
    border-top:1px solid rgba(255,255,255,.35)
}

.workflow-list article:last-child {
    border-bottom:1px solid rgba(255,255,255,.35)
}

.workflow-list article>span {
    color:#83d7ff;
    font-size:12px;
    font-weight:900;
    letter-spacing:.1em
}

.workflow-list h3 {
    margin:0 0 6px;
    color:#fff;
    font-size:22px
}

.workflow-list p {
    margin:0;
    color:#d8e9fb;
    font-size:14px;
    font-weight:700
}

.benefits {
    padding-top:100px;
    padding-bottom:100px
}

.benefits-heading {
    margin-bottom:42px
}

.benefit-list {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:2px solid var(--navy)
}

.benefit-list article {
    padding:26px 32px 0 0
}

.benefit-list article+article {
    padding-left:32px;
    border-left:1px solid var(--line)
}

.benefit-list span {
    color:var(--accent);
    font-size:14px;
    font-weight:900
}

.benefit-list h3 {
    margin:22px 0 12px;
    color:var(--navy);
    font-size:24px
}

.benefit-list p {
    margin:0;
    color:var(--muted);
    font-weight:700
}

.pricing,
.docs,
.contact-faq {
    background:#fff
}

.price-card,
.docs-card,
.faq-panel,
.contact-panel,
.start-requirements,
.install-steps article {
    border:1px solid var(--line);
    border-radius:8px;
    box-shadow:none
}

.price-card {
    min-height:300px
}

.price-card.featured {
    color:var(--navy);
    background:#e6f1ff;
    border:1px solid #b8d5f3
}

.price-card.featured h3,
.price-card.featured .plan-name,
.price-card.featured ul {
    color:var(--navy)
}

.recommend {
    color:#fff;
    background:var(--navy)
}

.price-card.featured a {
    color:#fff;
    background:var(--accent)
}

.install {
    background:#eef6ff
}

.docs-card span {
    color:var(--accent);
    background:#e9f3ff
}

.docs-card a {
    color:var(--accent)
}

.contact-page {
    background:var(--paper)
}

.contact-form input,
.contact-form textarea {
    border-color:#c6dcf4;
    background:#fbfdff
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color:var(--blue);
    box-shadow:0 0 0 4px rgba(22,106,199,.12)
}

.cta-panel {
    border-radius:8px;
    background:#123b70;
    box-shadow:none
}

.cta-button,
.contact-open,
.contact-trial {
    border-radius:8px
}

.site-footer {
    background:var(--paper)
}

@media (max-width:1100px) {
    .hero-shell {
        gap:34px;
        padding:42px
    }

    .hero-copy h1 {
        font-size:clamp(38px,4.5vw,56px)
    }
}

@media (max-width:900px) {
    .hero-shell,
    .story,
    .workflow-inner {
        grid-template-columns:1fr
    }

    .hero-product {
        max-width:680px
    }

    .story {
        gap:28px
    }

    .story-copy {
        padding-top:24px
    }
}

@media (max-width:760px) {
    .site-header {
        background:rgba(247,251,255,.96)
    }

    .global-nav {
        background:var(--paper)
    }

    .hero {
        padding:18px 14px 48px
    }

    .hero-shell {
        gap:30px;
        padding:28px 22px 36px
    }

    .hero-eyebrow {
        margin-bottom:20px;
        font-size:11px
    }

    .hero-copy h1 {
        font-size:clamp(36px,10vw,49px)
    }

    .hero-description {
        font-size:15px
    }

    .hero-actions {
        display:grid;
        grid-template-columns:1fr
    }

    .hero-actions .button {
        width:100%
    }

    .hero-product {
        box-shadow:9px 10px 0 rgba(18,59,112,.13)
    }

    .product-window-image {
        height:260px
    }

    .story,
    .benefits {
        padding-top:68px;
        padding-bottom:68px
    }

    .workflow {
        padding:68px 20px
    }

    .workflow-list article {
        grid-template-columns:1fr;
        gap:6px
    }

    .benefit-list {
        grid-template-columns:1fr
    }

    .benefit-list article,
    .benefit-list article+article {
        padding:26px 0;
        border-left:0;
        border-bottom:1px solid var(--line)
    }
}
.reveal {
    opacity:1;
    transform:none
}

.docs-card a { color:#fff; background:var(--accent); border-radius:8px }
.docs-card a:hover { color:#fff; background:#0753a2 }
.communication-flow { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:28px }
.communication-flow p { margin:0; padding:18px; border:1px solid rgba(255,255,255,.35); color:#d8e9fb; font-size:14px; line-height:1.9 }
.communication-flow strong { color:#fff; font-size:16px }
@media(max-width:760px) { .communication-flow { grid-template-columns:1fr } }
/* Communication cost: editorial sequence comparison */
.hero-shell { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:36px; padding:48px }
.hero-copy h1 { font-size:clamp(34px,3.25vw,48px); line-height:1.35 }
.hero-keyvisual { margin:0; min-width:0 }
.hero-keyvisual img { display:block; width:100%; height:auto; border-radius:4px; box-shadow:0 18px 45px rgba(18,59,112,.12) }
.hero-keyvisual figcaption { color:var(--muted); font-size:12px; margin-top:14px; text-align:center }
.workflow { background:#edf3fa; color:var(--navy) }
.workflow-inner { display:block }
.workflow .section-kicker { color:var(--accent) }
.workflow h2 { color:var(--navy) }
.workflow-heading>p:last-child { color:var(--muted); max-width:48em; line-height:1.9 }
.exchange-comparison { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:42px }
.exchange-panel { min-width:0; padding:32px; background:#fff; border:1px solid #d6e2f0; border-radius:6px }
.exchange-new { border-top:3px solid #166ac7; padding-top:30px }
.exchange-heading>span { font-size:12px; letter-spacing:.07em; font-weight:800; color:#65758a }
.exchange-new .exchange-heading>span { color:#166ac7 }
.exchange-heading h3 { margin:12px 0 10px; font-size:27px; letter-spacing:-.035em; color:#18314e }
.exchange-heading p { margin:0; font-size:14px; color:#65758a }
.exchange-people { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:30px; padding-bottom:15px; border-bottom:1px solid #d6e2f0; text-align:center; font-size:14px; font-weight:800 }
.exchange-new .exchange-people { grid-template-columns:1fr 1fr }
.exchange-brand { color:#166ac7 }
.exchange-sequence { position:relative; height:364px; padding:18px 0 }
.exchange-sequence::before { content:''; position:absolute; inset:0; background:linear-gradient(to right,transparent calc(16.666% - .5px),#e3e9f1 calc(16.666% - .5px),#e3e9f1 calc(16.666% + .5px),transparent calc(16.666% + .5px),transparent calc(50% - .5px),#e3e9f1 calc(50% - .5px),#e3e9f1 calc(50% + .5px),transparent calc(50% + .5px),transparent calc(83.333% - .5px),#e3e9f1 calc(83.333% - .5px),#e3e9f1 calc(83.333% + .5px),transparent calc(83.333% + .5px)); pointer-events:none }
.sequence-line { position:relative; width:50%; margin:0 auto 18px; height:36px; border-bottom:1px solid #a0afc2; color:#526780 }
.sequence-line::after { content:''; position:absolute; bottom:-4px; right:0; width:7px; height:7px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg) }
.sequence-line.reverse::after { right:auto; left:0; transform:rotate(-135deg) }
.sequence-line span { position:absolute; bottom:7px; left:50%; transform:translateX(-50%); white-space:nowrap; padding:2px 4px; background:#fff; font-size:12px; font-weight:600 }
.to-middle { width:33.333%; margin-left:16.666%; margin-right:0 }
.to-right { width:33.333%; margin-left:50%; margin-right:0 }
.new-sequence::before { background:linear-gradient(to right,transparent calc(25% - .5px),#d1e3f6 calc(25% - .5px),#d1e3f6 calc(25% + .5px),transparent calc(25% + .5px),transparent calc(75% - .5px),#d1e3f6 calc(75% - .5px),#d1e3f6 calc(75% + .5px),transparent calc(75% + .5px)) }
.new-sequence .sequence-line { color:#166ac7; border-color:#166ac7; margin-top:15px; margin-bottom:30px }
.new-sequence .sequence-line span { font-size:13px }
.sequence-investigation { position:relative; width:50%; margin:0 0 28px 50%; padding:23px 8px; text-align:center; background:#edf5ff; border:1px solid #cfe1f7; color:#166ac7; border-radius:4px }
.sequence-investigation>span { display:block; font-weight:800; font-size:14px }
.sequence-investigation small { display:block; margin-top:10px; color:#526b87; font-size:11px; line-height:1.7 }
.exchange-summary { margin:0; padding-top:20px; border-top:1px solid #d6e2f0; color:#526b87; font-size:13px; font-weight:700; line-height:1.8 }
.exchange-new .exchange-summary { color:#166ac7 }
.exchange-note { margin:20px 0 0; color:#65758a; font-size:12px; line-height:1.9 }
@media(max-width:1000px) { .hero-shell { grid-template-columns:1fr; padding:36px } .hero-keyvisual { max-width:800px } .exchange-panel { padding:24px 18px } .exchange-new { padding-top:22px } }
@media(max-width:760px) { .hero-shell { padding:28px 22px } .hero-copy h1 { font-size:clamp(30px,7.7vw,42px) } .exchange-comparison { grid-template-columns:1fr; gap:24px } .exchange-heading h3 { font-size:25px } .exchange-sequence { height:354px } .exchange-people { font-size:13px } .sequence-line span { font-size:11px } .exchange-panel { padding:24px 18px } }
/* Keep Japanese headlines and sentence endings readable at each width. */
.heading-line,.copy-line { display:block }
.story h2 { font-size:clamp(28px,3.1vw,44px); line-height:1.45 }
.story h2,.workflow h2,.benefits h2 { text-wrap:balance; overflow-wrap:normal; word-break:normal }
.story-lead { font-size:clamp(18px,1.6vw,23px); text-wrap:pretty }
.story-copy p,.workflow-heading>p,.benefit-list p,.hero-description,.section-heading>p { text-wrap:pretty }
.workflow-heading>p:last-child { max-width:none }
.workflow-heading .copy-line { max-width:44em; text-wrap:pretty }
@media(max-width:760px) {
 .story h2,.workflow h2,.benefits h2 { font-size:clamp(24px,6vw,34px); line-height:1.5 }
 .story-lead { font-size:18px }
}
/* Improve the legibility of the sequence comparison. */
.story-question { margin-top:.35em; font-size:.83em }
.story-question .phrase { display:inline-block }
.exchange-panel { padding:30px 24px }
.exchange-new { padding-top:28px }
.exchange-heading>span { font-size:14px; color:#43566e }
.exchange-heading p { color:#43566e; font-size:15px }
.exchange-people { font-size:16px; gap:8px; margin-top:28px; padding-bottom:18px }
.exchange-people>span { padding:10px 2px; background:#eaf0f7; border-radius:4px; color:#18314e }
.exchange-new .exchange-people>span { background:#e8f2ff }
.exchange-new .exchange-people>.exchange-brand { background:#166ac7; color:#fff }
.exchange-sequence { height:414px; padding-top:22px }
.sequence-line { height:40px; margin-bottom:22px; border-bottom:2px solid #607894; color:#304a69 }
.sequence-line::after { width:9px; height:9px; bottom:-5px; border-width:2px }
.sequence-line span { font-size:15px; font-weight:700; bottom:9px; padding:3px 5px; color:#304a69 }
.new-sequence .sequence-line span { font-size:16px; color:#125da9 }
.new-sequence .sequence-line { border-color:#166ac7; margin-top:20px; margin-bottom:36px }
.sequence-investigation { padding:27px 8px; border-color:#94bcea; background:#e7f2ff; margin-bottom:34px }
.sequence-investigation>span { font-size:16px; color:#125da9 }
.sequence-investigation small { font-size:13px; color:#365574 }
.exchange-summary { font-size:15px; color:#304a69; border-top-color:#b7c8dc }
.exchange-note { font-size:13px; color:#43566e }
@media(max-width:1100px) { .exchange-comparison { grid-template-columns:1fr; max-width:760px; margin-left:auto; margin-right:auto } }
@media(max-width:480px) {
 .exchange-panel { padding:24px 14px }
 .exchange-people { font-size:13px; gap:5px }
 .sequence-line span { font-size:12px; padding-left:2px; padding-right:2px }
 .new-sequence .sequence-line span { font-size:13px }
 .sequence-investigation>span { font-size:13px }
 .sequence-investigation small { font-size:11px }
 .exchange-summary { font-size:14px }
}
/* Present only the Slack screen from the original key visual. */
.hero-slack-screen { position:relative; aspect-ratio:535 / 417; overflow:hidden; border:1px solid #c0d1e5; border-radius:8px; background:#fff; box-shadow:0 18px 45px rgba(18,59,112,.12) }
.hero-keyvisual .hero-slack-screen img { position:absolute; width:186.916%; max-width:none; height:auto; left:-78.692%; top:-14.389%; border-radius:0; box-shadow:none }
.workflow .section-heading h2,.benefits .section-heading h2 { margin:0 0 12px; font-size:48px; line-height:1.22; letter-spacing:0 }
.workflow .section-heading>p,.benefits .section-heading>p { line-height:1.9 }
@media(max-width:760px) { .workflow .section-heading h2,.benefits .section-heading h2 { font-size:32px } }
/* Focus trial links and keep prerequisites compact. */
.docs-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
.start-requirements { padding:20px 24px; margin-bottom:28px; background:rgba(255,255,255,.55) }
.start-requirements-label { font-size:13px; margin-bottom:12px }
.start-requirements h3 { font-size:15px; margin-bottom:8px }
.start-requirements ul { font-size:13px; font-weight:500; line-height:1.8 }
.start-requirements li+li { margin-top:3px }
.start-requirements-grid { gap:24px }
.sequence-investigation { width:70%; margin-left:30%; padding:18px 14px; background:#123b70; border:0; border-left:4px solid #48b7e5; border-radius:6px; box-shadow:0 8px 20px rgba(18,59,112,.12) }
.sequence-investigation>span { color:#fff; font-size:18px; line-height:1.5 }
.sequence-investigation>.investigation-label { color:#92dfff; font-size:11px; letter-spacing:.08em; margin-bottom:9px }
.investigation-sources { margin-top:14px; padding-top:12px; border-top:1px solid #527297; display:grid; gap:8px; text-align:left }
.investigation-sources>span { display:flex; align-items:center; gap:8px; font-size:11px; color:#eaf4ff; white-space:nowrap }
.investigation-sources b { min-width:32px; padding:2px 4px; border:1px solid #6488b2; border-radius:3px; font-size:10px; text-align:center; color:#fff }
@media(max-width:760px) { .docs-grid { grid-template-columns:1fr } .start-requirements { padding:18px } .start-requirements-grid { gap:16px } }
@media(max-width:480px) { .sequence-investigation { padding:16px 10px; width:80%; margin-left:20% } .sequence-investigation>span { font-size:16px } .investigation-sources>span { font-size:10px } }
.hero-ec-screen { display:block; border:1px solid #c0d1e5; border-radius:10px; overflow:hidden; background:#fff; box-shadow:0 18px 45px rgba(18,59,112,.12) }
.hero-keyvisual .hero-ec-screen img { display:block; position:static; width:100%; max-width:100%; height:auto; border-radius:0; box-shadow:none }
.hero-ec-screen iframe { display:block; width:100%; height:660px; border:0; background:#fff } .hero-keyvisual figcaption a { display:inline-block; margin-top:6px; color:#166ac7; text-decoration:underline } @media(max-width:760px) { .hero-ec-screen iframe { height:600px } }/* Match the chat image height to the hero copy on desktop. */
@media(min-width:1001px) {
 .hero-shell { align-items:start }
 .hero-keyvisual .hero-ec-screen { width:min(100%,calc(var(--hero-copy-height,520px) * 1.17647)); margin-inline:auto }
}