/* CareNotes /trust : Trust Center, layered on sample3.css */

:root { --tr: #2563eb; --tr-deep: #1e40af; --tr-soft: #dbeafe; --tr-ink: #0f1f3d; --tr-ok: #15803d; }

/* ---------------- HERO ---------------- */
.tr-hero {
    margin-top: -76px; padding: 150px 22px 0; text-align: center; overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #eef3ff 45%, #d9e6ff 100%);
    color: #1d1d1f;
}
.tr-hero .eyebrow, .detail .eyebrow { color: var(--tr-deep); }
.tr-hero h1 {
    margin: 10px auto 0; max-width: 900px;
    font-size: clamp(40px, 6vw, 76px); font-weight: 700; line-height: 1.04; letter-spacing: -.015em; text-wrap: balance;
}
.tr-hero .lede {
    margin: 18px auto 0; max-width: 680px; font-size: clamp(18px, 2vw, 23px); line-height: 1.35;
    color: #3b4a6b; letter-spacing: -.01em; text-wrap: balance;
}
.tr-hero .ctas { margin-top: 26px; }
.tr-hero .btn-fill { background: #1d1d1f; color: #fff; }
.tr-hero .btn-fill:hover { background: var(--tr); }
.tr-hero .btn-line { color: #1d1d1f; box-shadow: inset 0 0 0 1px #1d1d1f; }
.tr-hero .btn-line:hover { background: #1d1d1f; color: #fff; }
.tr-legend { margin: 22px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; font-size: 14px; font-weight: 500; color: #3b4a6b; }
.tr-legend span { display: inline-flex; align-items: center; gap: 8px; }
.tr-legend i { color: var(--tr); font-size: 12px; }

.tr-stage { position: relative; height: 640px; margin: 44px auto 0; width: min(1000px, 100%); }
.tr-stage .glow {
    position: absolute; left: 50%; bottom: -10%; width: 900px; height: 600px; transform: translateX(-50%);
    background: radial-gradient(55% 60% at 50% 100%, rgba(37, 99, 235, .42) 0, rgba(37, 99, 235, .14) 40%, rgba(37, 99, 235, 0) 72%);
    opacity: 0; transition: opacity 1.2s var(--ease);
}
.is-play .tr-stage .glow { opacity: 1; }
.tr-stage .phone { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.tr-stage .phone .screen img { object-position: top; }

/* Data path card (left of phone) */
.path-card {
    position: absolute; left: calc(50% - 490px); top: 70px; width: 310px;
    padding: 18px 18px 16px; border-radius: 22px; color: #1d1d1f; text-align: left;
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: 0 40px 80px -40px rgba(20, 50, 120, .45), inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(0, 0, 0, .04);
}
.path-card .pc-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--tr-deep); }
.path-card .pc-sub { margin-top: 4px; font-size: 12px; color: #5f6b80; }
.pc-steps { position: relative; margin-top: 14px; padding-left: 30px; }
.pc-rail { position: absolute; left: 10px; top: 10px; bottom: 14px; width: 2px; background: rgba(0, 0, 0, .08); border-radius: 2px; overflow: hidden; }
.pc-rail::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--tr), var(--tr-ok)); transform: scaleY(0); transform-origin: top; }
.is-play .pc-rail::after { animation: railGrow 2.6s var(--ease) .4s forwards; }
@keyframes railGrow { to { transform: scaleY(1); } }
.pc-step { position: relative; padding: 0 0 14px; opacity: .38; transform: translateX(6px); }
.pc-step:last-child { padding-bottom: 0; }
.pc-step .dot {
    position: absolute; left: -26px; top: 4px; width: 14px; height: 14px; border-radius: 50%;
    background: #fff; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .18);
}
.pc-step .dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--tr); transform: scale(0); }
.pc-step b { display: block; font-size: 14px; font-weight: 600; color: #1d1d1f; }
.pc-step span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: #5f6b80; }
.is-play .pc-step { animation: stepOn .6s var(--ease) forwards; animation-delay: calc(.5s + var(--i) * .6s); }
.is-play .pc-step .dot { animation: dotRing .6s var(--ease) forwards; animation-delay: calc(.5s + var(--i) * .6s); }
.is-play .pc-step .dot::after { animation: dotFill .45s var(--ease) forwards; animation-delay: calc(.6s + var(--i) * .6s); }
@keyframes stepOn { to { opacity: 1; transform: none; } }
@keyframes dotRing { to { box-shadow: inset 0 0 0 2px var(--tr); } }
@keyframes dotFill { to { transform: scale(1); } }

/* Illustrative phone screen: everything in em, base scales with the phone width */
.tr-screen {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
    padding: 5.6em 2.2em 3.6em; font-size: calc(var(--pw) / 32); font-family: var(--font); color: #1d1d1f;
    background: linear-gradient(180deg, #f8faff 0%, #eef3ff 55%, #e2ebff 100%);
}
.ts-rec { display: inline-flex; align-items: center; gap: .8em; font-size: 1.2em; font-weight: 600; padding: .6em 1.1em; border-radius: 980px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 .8em 1.6em -1em rgba(0, 0, 0, .3); }
.ts-rec i { width: .7em; height: .7em; border-radius: 50%; background: #ef4444; animation: tsPulse 1.2s ease-in-out infinite; }
@keyframes tsPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
.ts-wave { margin-top: 4.2em; display: flex; align-items: center; gap: .5em; height: 6em; }
.ts-wave i { --h: 2.4em; width: .6em; height: 1.2em; border-radius: .3em; background: linear-gradient(180deg, var(--tr), #60a5fa); animation: tsWave 1.15s ease-in-out infinite; animation-delay: calc(var(--i) * -.09s); }
.ts-wave i:nth-child(2n) { --h: 3.6em; }
.ts-wave i:nth-child(3n) { --h: 5.2em; }
.ts-wave i:nth-child(5n) { --h: 4.4em; }
.ts-wave i:nth-child(7n) { --h: 6em; }
@keyframes tsWave { 0%, 100% { height: 1.2em; } 50% { height: var(--h); } }
.ts-shield {
    margin-top: 3em; width: 9.6em; height: 9.6em; border-radius: 3em; display: grid; place-items: center; font-size: 1em; color: #fff;
    background: linear-gradient(135deg, var(--tr), var(--tr-ok)); box-shadow: 0 3em 5em -2.4em rgba(37, 99, 235, .65);
}
.ts-shield i { font-size: 4.2em; }
.ts-lines { margin-top: 3em; width: 100%; }
.ts-label { display: block; font-size: 1.05em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6e6e73; margin-bottom: 1em; }
.ts-lines i { display: block; height: 1em; border-radius: .5em; background: rgba(0, 0, 0, .09); margin-bottom: .8em; transform-origin: left; transform: scaleX(0); }
.is-play .ts-lines i { animation: tsLine .5s var(--ease) forwards; animation-delay: calc(.9s + var(--i) * .22s); }
@keyframes tsLine { to { transform: scaleX(1); } }
.ts-foot { margin-top: 2.6em; display: inline-flex; align-items: center; gap: .6em; font-size: 1.15em; font-weight: 600; color: var(--tr-ok); background: #dcfce7; padding: .6em 1.1em; border-radius: 980px; opacity: 0; transform: translateY(.8em); }
.is-play .ts-foot { animation: chipPop .6s var(--ease) 2.2s forwards; }

/* Floating chips (right of phone) */
.tr-stage .float-chip { z-index: 2; opacity: 0; transform: translateY(10px) scale(.9); }
.chip-audio { top: 22%; right: calc(50% - 165px - 190px); }
.chip-lock { top: 37%; right: calc(50% - 165px - 150px); }
.chip-audio .chip-ic { background: #1d1d1f; }
.chip-lock .chip-ic { background: linear-gradient(135deg, var(--tr), var(--tr-ok)); }
.is-play .chip-audio { animation: chipPop .7s var(--ease) 2s forwards; }
.is-play .chip-lock { animation: chipPop .7s var(--ease) 2.6s forwards; }
@keyframes chipPop { 60% { opacity: 1; transform: translateY(-3px) scale(1.03); } to { opacity: 1; transform: none; } }
.tr-hero .replay { background: rgba(0, 0, 0, .08); color: #1d1d1f; }

/* ---------------- PHOTO ---------------- */
.tr-photo { background: #000; }
.tr-photo figure { position: relative; margin: 0; max-height: 720px; overflow: hidden; }
.tr-photo img { width: 100%; height: 100%; max-height: 720px; object-fit: cover; display: block; }
.tr-photo figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 120px 22px 34px; text-align: center; color: #fff;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .58) 100%);
}
.tr-photo figcaption strong { display: block; font-size: clamp(22px, 2.8vw, 34px); font-weight: 600; letter-spacing: -.01em; }
.tr-photo figcaption span { display: block; margin-top: 6px; font-size: 15px; color: rgba(255, 255, 255, .82); }

/* ---------------- COMMITMENTS ---------------- */
.tr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; text-align: left; }
.tr-card { background: #f5f5f7; border-radius: 22px; padding: 26px 24px 28px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.detail-alt .tr-card { background: #fff; }
.tr-card:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -36px rgba(0, 0, 0, .35); }
.tr-card .ico {
    width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px;
    background: linear-gradient(135deg, var(--tr-soft), #bfdbfe); color: var(--tr-deep); font-size: 17px;
}
.tr-card h4 { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.tr-card p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: #6e6e73; letter-spacing: -.01em; }

/* ---------------- DATA LIFECYCLE ---------------- */
.tr-flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; text-align: left; }
.tr-flow::before {
    content: ""; position: absolute; left: 12%; right: 12%; top: 46px; height: 2px;
    background: linear-gradient(90deg, var(--tr), var(--tr-ok)); opacity: .35;
}
.tr-stop { position: relative; background: #fff; border-radius: 22px; padding: 24px 22px 24px; }
.tr-stop .where { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tr-deep); }
.tr-stop .num {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 16px;
    background: #fff; color: var(--tr-deep); font-weight: 700; box-shadow: 0 0 0 2px var(--tr-soft), 0 10px 20px -12px rgba(37, 99, 235, .5);
}
.tr-stop h4 { margin-top: 10px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.tr-stop p { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: #6e6e73; letter-spacing: -.01em; }
.tr-stop .never { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #b91c1c; background: #fee2e2; padding: 5px 9px; border-radius: 980px; }
.tr-stop .ok { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--tr-ok); background: #dcfce7; padding: 5px 9px; border-radius: 980px; }

/* ---------------- COMPLIANCE ---------------- */
.tr-two { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; margin-top: 44px; text-align: left; }
.tr-copy h4 { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.tr-copy ul { margin: 6px 0 0; padding: 0; list-style: none; }
.tr-copy li { margin-top: 14px; font-size: 16px; line-height: 1.5; color: #424245; letter-spacing: -.01em; padding-left: 30px; position: relative; }
.tr-copy li::before {
    content: "\2713"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%;
    display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--tr-soft); color: var(--tr-deep);
}
.tr-copy li strong { color: #1d1d1f; }
.tr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tr-stat { background: #f5f5f7; border-radius: 20px; padding: 22px 20px 20px; }
.tr-stat .big { font-size: clamp(30px, 3.4vw, 42px); font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--tr-deep); }
.tr-stat .big small { font-size: .5em; font-weight: 600; letter-spacing: 0; margin-left: 4px; color: #6e6e73; }
.tr-stat p { margin-top: 8px; font-size: 14px; line-height: 1.45; color: #6e6e73; letter-spacing: -.01em; }

/* ---------------- FAQ ---------------- */
.tr-qa { margin: 40px auto 0; max-width: 820px; text-align: left; }
.tr-qa details { border-top: 1px solid rgba(0, 0, 0, .1); }
.tr-qa details:last-child { border-bottom: 1px solid rgba(0, 0, 0, .1); }
.tr-qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 20px 4px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.tr-qa summary::-webkit-details-marker { display: none; }
.tr-qa summary::after { content: "+"; margin-left: auto; font-size: 24px; font-weight: 300; color: #86868b; transition: transform .3s var(--ease); }
.tr-qa details[open] summary::after { transform: rotate(45deg); }
.tr-qa .ans { padding: 0 4px 22px 4px; font-size: 16px; line-height: 1.55; color: #424245; letter-spacing: -.01em; max-width: 720px; }
.tr-qa .ans a { color: var(--tr); }
.tr-qa .ans a:hover { text-decoration: underline; }

/* ---------------- DOCUMENTATION (dark) ---------------- */
.tr-dark { background: #1d1d1f; color: #f5f5f7; }
.tr-dark .eyebrow { color: #93c5fd; }
.tr-dark h3 { color: #f5f5f7; }
.tr-dark .lede { margin: 14px auto 0; max-width: 620px; font-size: 17px; line-height: 1.47; color: #a1a1a6; letter-spacing: -.01em; }
.tr-docs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 40px; text-align: left; }
.tr-doc {
    display: flex; gap: 16px; align-items: flex-start; background: #2a2a2e; border-radius: 20px; padding: 22px 22px 20px;
    color: inherit; text-decoration: none; transition: background .25s var(--ease), transform .3s var(--ease);
}
a.tr-doc:hover { background: #333338; transform: translateY(-3px); }
.tr-doc .ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(147, 197, 253, .14); color: #93c5fd; font-size: 17px; }
.tr-doc h4 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: #f5f5f7; }
.tr-doc p { margin-top: 4px; font-size: 14px; line-height: 1.45; color: #a1a1a6; letter-spacing: -.01em; }
.tr-doc .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tr-doc .acts a {
    display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 980px;
    background: #f5f5f7; color: #1d1d1f; text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease);
}
.tr-doc .acts a:hover { background: var(--tr); color: #fff; }
.tr-doc .acts a.ghost { background: transparent; color: #f5f5f7; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.tr-doc .acts a.ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.tr-doc .go { margin-top: 10px; font-size: 14px; font-weight: 600; color: #93c5fd; }
.tr-doc .go::after { content: " \2192"; }

/* ---------------- CONTACT ---------------- */
.tr-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; text-align: left; }
.tr-contact .tr-card p a { color: var(--tr); font-weight: 600; }
.tr-contact .tr-card p a:hover { text-decoration: underline; }
.tr-contact .mail { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 16px; font-weight: 600; color: var(--tr); text-decoration: none; }
.tr-contact .mail:hover { text-decoration: underline; }
#contact .btn-fill { background: #1d1d1f; color: #fff; }
#contact .btn-fill:hover { background: var(--tr); }
#contact .btn-line { color: #1d1d1f; box-shadow: inset 0 0 0 1px #1d1d1f; }
#contact .btn-line:hover { background: #1d1d1f; color: #fff; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1068px) {
    .path-card { left: 12px; width: 260px; }
    .chip-audio, .chip-lock { right: 12px; }
    .tr-flow { grid-template-columns: 1fr 1fr; }
    .tr-flow::before { display: none; }
}
@media (max-width: 734px) {
    .tr-hero { padding-top: 120px; }
    .tr-stage { height: 560px; }
    .path-card { display: none; }
    .chip-audio, .chip-lock { display: none; }
    .tr-grid, .tr-flow, .tr-docs, .tr-contact, .tr-stats { grid-template-columns: 1fr; }
    .tr-two { grid-template-columns: 1fr; gap: 28px; }
    .tr-qa summary { font-size: 16px; padding: 16px 2px; }
    .tr-photo figcaption { position: static; padding: 18px 22px 26px; background: #000; }
}

@media (prefers-reduced-motion: reduce) {
    .pc-step { opacity: 1; transform: none; }
    .pc-step .dot { box-shadow: inset 0 0 0 2px var(--tr); }
    .pc-step .dot::after { transform: scale(1); }
    .pc-rail::after { transform: none; }
    .tr-stage .float-chip { opacity: 1; transform: none; }
    .ts-lines i { transform: none; }
    .ts-foot { opacity: 1; transform: none; }
    .ts-wave i { height: var(--h); }
}