/* V18: the Qihui card system throughout the product page. */
:root{--td-card:var(--portal-surface);--td-card-blue:radial-gradient(ellipse at 100% 0%,#e0ecff,transparent 65%),linear-gradient(135deg,#fff,#f2f7ff)}
:root[data-theme="dark"]{--td-card-blue:radial-gradient(ellipse at 100% 0%,#29476e,transparent 65%),linear-gradient(135deg,#172234,#1c304a)}
.td-panel{background:var(--td-blue-bg);border-color:var(--brand-line);padding:28px;border-radius:26px;margin-bottom:48px}
.td-main h2{font-size:32px;line-height:1.45}
.td-section-heading{padding:10px 8px 0;margin-bottom:28px}
.td-section-heading h2 br{display:none}

/* The first screen consists of two complete cards inside one blue frame. */
.td-hero{grid-template-columns:1fr 1fr;gap:22px;padding:22px;min-height:600px}
.td-hero-copy{padding:36px;border:1px solid var(--brand-line);border-radius:20px;background:var(--td-card-blue)}
.td-hero h1{font-size:clamp(36px,3.5vw,52px);margin-bottom:22px}
.td-lead{font-size:20px}
.td-intro{font-size:15px}
.td-hero-art{padding:18px;margin:0;border:1px solid var(--brand-line);border-radius:20px;background:var(--portal-tint);overflow:hidden}
.td-hero-art::before{content:none}
.td-hero-art img{border-radius:12px}
.td-hero-points{width:100%;gap:9px;margin-top:26px}
.td-hero-points span{border:1px solid var(--brand-line);border-radius:7px;padding:5px 10px;background:var(--td-card);font-size:12px}
.td-hero-points span+span::before{content:none}

/* Each capability is a visible, complete card, rather than a ruled list. */
.td-feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.td-feature-grid article{display:flex;flex-direction:column;align-items:flex-start;gap:18px;border:1px solid var(--brand-line);border-radius:18px;padding:26px;min-height:220px;background:var(--td-card)}
.td-feature-grid article>.icon{box-sizing:content-box;width:23px;height:23px;padding:10px;border:1px solid var(--brand-line);border-radius:11px;background:var(--brand-soft);margin:0}
.td-feature-grid h3{font-size:19px;margin-bottom:10px}
.td-feature-grid p{font-size:15px;line-height:1.85}

/* A product introduction card sits alongside an interactive volume card. */
#volumes{grid-template-columns:.9fr 1.1fr;gap:20px;padding:22px;align-items:stretch}
#volumes .td-split-copy{display:flex;flex-direction:column;justify-content:center;padding:34px;border:1px solid var(--brand-line);border-radius:18px;background:var(--td-card-blue)}
#volumes .td-split-copy h2{font-size:31px}
#volumes .td-split-copy>p{font-size:16px}
.td-volume-area{border:1px solid var(--brand-line);border-radius:18px;padding:28px;background:var(--td-card)}
.td-volume-area::before{content:none}
.td-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border:0;padding:0;margin:0 0 25px}
.td-tabs button{border:1px solid var(--line);border-radius:9px;background:var(--bg-soft);padding:10px 7px;font-size:15px;min-width:0}
.td-tabs button[aria-selected="true"]{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-ink)}
.td-tabs button[aria-selected="true"]::after{content:none}
.td-volume-panel{min-height:218px;padding:0}
.td-volume-panel h3{font-size:22px;margin-bottom:20px}
.td-volume-panel ul{padding-left:18px;line-height:2.1}

/* A four-card workflow makes the steps individually scannable. */
#workflow{display:block;padding:28px}
#workflow .td-split-copy{padding:10px 8px 0;margin-bottom:26px;display:grid;grid-template-columns:1fr auto;gap:10px 30px;align-items:end}
#workflow .td-split-copy h2{grid-column:1;margin-bottom:2px}
#workflow .td-split-copy h2 br{display:none}
#workflow .td-split-copy>p{grid-column:1;max-width:790px}
#workflow .td-split-copy .td-text-button{grid-column:2;grid-row:1 / 3;margin:0;white-space:nowrap}
.td-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.td-steps::before{content:none}
.td-steps li,.td-steps li:last-child{display:flex;flex-direction:column;gap:22px;border:1px solid var(--brand-line);border-radius:18px;padding:24px;min-height:245px;background:var(--td-card)}
.td-steps li>span{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--brand-soft);border:1px solid var(--brand-line);font-size:14px;line-height:1}
.td-steps h3{font-size:18px;line-height:1.6;margin-bottom:10px}
.td-steps p{font-size:15px;line-height:1.85}

/* Download options and every FAQ are also separate cards. */
.td-editions{gap:20px}
.td-editions article{display:flex;flex-direction:column;align-items:flex-start;padding:30px;border:1px solid var(--brand-line);border-radius:18px;background:var(--td-card);min-width:0}
.td-editions article+article::before{content:none}
.td-editions article:last-child{background:var(--td-card-blue)}
.td-editions h3{font-size:26px}
.td-editions p{font-size:16px;line-height:1.9;min-height:62px;max-width:500px;flex:1}
.td-editions .td-muted{margin-top:17px;font-size:13px}
.td-faq{display:grid;gap:13px}
.td-faq details{padding:22px 26px;border:1px solid var(--brand-line);border-radius:14px;background:var(--td-card)}
.td-faq summary{font-size:17px}
.td-faq details[open]{background:var(--td-card-blue)}
.td-closing{padding:40px;gap:30px;background:var(--td-card-blue)}
.td-closing h2{font-size:32px}

@media(max-width:1100px){
 .td-hero-copy{padding:28px}.td-hero h1{font-size:38px}.td-lead{font-size:18px}.td-actions{gap:18px}.td-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .td-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.td-steps li,.td-steps li:last-child{min-height:210px}
 #volumes .td-split-copy{padding:28px}.td-volume-area{padding:24px}
}
@media(max-width:850px){
 .td-panel{padding:22px;margin-bottom:32px}.td-hero{grid-template-columns:1fr;gap:18px;padding:18px}.td-hero-copy{padding:30px}.td-hero-art{padding:18px}.td-hero-art img{max-width:620px}
 #volumes{grid-template-columns:1fr;padding:18px;gap:18px}.td-volume-panel{min-height:170px}
 #workflow{padding:22px}#workflow .td-split-copy{display:block}#workflow .td-split-copy .td-text-button{margin-top:14px}
 .td-editions article{padding:26px}.td-closing{padding:32px}
}
@media(max-width:600px){
 .td-panel{border-radius:22px;padding:18px}.td-main h2{font-size:26px}.td-section-heading{padding:5px 2px 0;margin-bottom:23px}
 .td-hero{padding:12px;gap:12px}.td-hero-copy{padding:24px 20px;border-radius:16px}.td-hero h1{font-size:36px}.td-hero-art{padding:12px;border-radius:16px}.td-hero-points{gap:7px}.td-hero-points span{padding:4px 7px;font-size:11px}
 .td-feature-grid{grid-template-columns:1fr;gap:14px}.td-feature-grid article{padding:24px;min-height:0;border-radius:16px;gap:18px}
 #volumes{padding:12px;gap:14px}#volumes .td-split-copy{padding:25px 22px;border-radius:16px}#volumes .td-split-copy h2{font-size:26px}.td-volume-area{padding:22px 18px;border-radius:16px}.td-tabs{gap:7px}.td-tabs button{padding:9px 3px;font-size:14px}.td-volume-panel{min-height:255px}.td-volume-panel h3{font-size:20px}
 #workflow{padding:18px}.td-steps{grid-template-columns:1fr;gap:14px}.td-steps li,.td-steps li:last-child{padding:23px;min-height:0;gap:18px;border-radius:16px}
 .td-editions{grid-template-columns:1fr;gap:14px}.td-editions article{padding:25px 22px;border-radius:16px}.td-editions h3{font-size:24px}.td-editions p{min-height:0}.td-editions .button{font-size:14px;padding-inline:13px}
 .td-faq details{padding:19px 18px;border-radius:13px}.td-faq summary{font-size:16px}.td-closing{padding:28px 24px}.td-closing h2{font-size:26px}
}
@media(max-width:360px){.td-hero-copy{padding:24px 17px}.td-hero h1{font-size:29px}.td-lead{font-size:17px}.td-actions{gap:10px}.td-actions .button{font-size:13px;padding-inline:12px}.td-actions .td-text-button{font-size:14px;min-width:60px}.td-editions .button{font-size:13px;gap:8px;padding-inline:9px}}