/* TD List: warm grocery photography and crisp, theme-aware product details. */
.td-list-slide{--td-link:#005be8;background:var(--paper);color:var(--ink)}
.td-list-slide>.td-list-slide-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;padding-block:30px 52px;min-height:400px}
.td-list-slide .feature-copy{width:auto;max-width:550px;margin:0;padding:0;background:none;position:relative;z-index:2}
.td-list-slide .eyebrow{color:var(--td-link);margin-bottom:18px}
.td-list-slide .feature-copy h2{color:var(--ink);font-size:clamp(38px,4.2vw,60px);line-height:1.02;letter-spacing:-.045em;margin-bottom:20px}
.td-list-slide .feature-copy p:not(.eyebrow){color:var(--muted);font-size:17px;line-height:1.5;max-width:475px;margin-bottom:26px}
.td-list-slide .td-list-explore{background:#005be8;color:#fff;gap:22px}
.td-list-slide .td-list-explore:hover{background:#004ac3;color:#fff}
.td-list-slide .td-list-explore:focus-visible{outline-color:var(--td-link)}
.td-list-slide-photo{position:absolute;top:0;left:50%;width:50%;height:100%;object-fit:cover;object-position:center;display:block}

.td-list-page{--td-blue:#005be8;--td-link:#005be8}
.td-list-page .td-beta-button{background:var(--td-blue);color:#fff}
.td-list-page .td-beta-button:hover{background:#004ac3;color:#fff}
.td-list-page a:focus-visible,.td-list-page summary:focus-visible,.td-list-page button:focus-visible{outline-color:var(--td-link)}
.td-list-hero{padding-top:24px}
.td-list-photo{display:block;width:100%;height:auto;aspect-ratio:2.4/1;object-fit:cover;border-radius:8px}
.td-list-intro{padding-block:36px 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.td-list-intro .eyebrow{color:var(--td-link);margin-bottom:12px}
.td-list-intro h1{font-size:clamp(48px,6.4vw,92px);line-height:1.02;letter-spacing:-.048em;margin:0}
.td-list-intro-copy>p:first-child{font-size:21px;line-height:1.5;max-width:550px;margin-bottom:24px}
.td-list-details{border-top:1px solid var(--line);padding-block:40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:72px}
.td-list-details .eyebrow{color:var(--td-link);margin-bottom:16px}
.td-list-details h2{font-size:clamp(34px,3.8vw,54px);margin-bottom:18px}
.td-list-details p:not(.eyebrow){max-width:500px;font-size:20px;line-height:1.5;margin:0}
/* Static example of the app UI: text and library icons stay crisp at any density. */
.td-list-example{margin:0;padding:0 12px;color:var(--ink);font-size:22px;line-height:1.4}
.td-list-example-section+.td-list-example-section{border-top:1px solid var(--line);margin-top:22px;padding-top:22px}
.td-list-example-heading,.td-list-example-task{display:grid;grid-template-columns:36px minmax(0,1fr) 30px;column-gap:18px;align-items:center}
.td-list-example-heading{margin-bottom:20px}
.td-list-example-heading strong{font-size:21px;font-weight:700;letter-spacing:-.025em}
.td-list-example-icon{display:block;width:28px;height:28px;max-width:none;justify-self:center;flex:none}
.td-list-example-circle{width:36px;height:36px}
.td-list-example-attachments{grid-column:2;display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:12px;color:var(--td-link);font-size:17px}
.td-list-example-attachments span{display:inline-flex;align-items:center;gap:10px}
.td-list-example-attachments .td-list-example-icon{width:24px;height:24px}
.td-list-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding-block:4px 38px}
.td-list-benefits article{display:flex;align-items:flex-start;gap:22px;padding-inline:30px}
.td-list-benefits article:first-child{padding-left:0}
.td-list-benefits article:last-child{padding-right:0}
.td-list-benefits article+article{border-left:1px solid var(--line)}
.td-list-benefit-icon{width:50px;height:50px;flex:none}
.td-list-benefits h3{font-size:21px;line-height:1.2;letter-spacing:-.025em;margin:0 0 10px}
.td-list-benefits p{font-size:16px;line-height:1.5;margin:0}
.td-list-beta{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-block:30px;border-block:1px solid var(--line)}
.td-list-beta h2{font-size:32px;line-height:1.15;margin:0 0 8px}
.td-list-beta-copy p{font-size:18px;line-height:1.5;margin:0}
.td-list-beta-action{text-align:center;flex:none}

[data-theme="dark"] .td-list-slide,[data-theme="dark"] .td-list-page{--td-link:#72b0ff}
[data-theme="dark"] .td-list-slide .eyebrow{color:var(--td-link)}
[data-theme="dark"] .td-list-slide .feature-copy p:not(.eyebrow){color:var(--muted)}
[data-theme="dark"] .td-list-slide .td-list-explore{background:#005be8;color:#fff}
[data-theme="dark"] .td-list-slide .td-list-explore:hover{background:#126df1;color:#fff}
[data-theme="dark"] .td-list-page .td-beta-button{background:var(--td-blue);color:#fff}
[data-theme="dark"] .td-list-page .td-beta-button:hover{background:#126df1;color:#fff}
[data-theme="dark"] .td-list-benefit-icon:not(.td-list-star),[data-theme="dark"] .td-list-example-icon:not(.td-list-example-star){filter:brightness(1.65)}

@media(min-width:701px) and (max-width:1200px){
  .td-list-benefits article{gap:16px;padding-inline:20px}
  .td-list-benefit-icon{width:42px;height:42px}
  .td-list-beta h2{font-size:28px}
}
@media(min-width:701px) and (max-width:950px){
  .td-list-slide .feature-copy h2{font-size:38px}
  .td-list-slide .feature-copy p:not(.eyebrow){font-size:16px}
  .td-list-slide>.td-list-slide-grid{gap:32px;padding-block:28px 52px}
  .td-list-intro{gap:36px}
  .td-list-intro h1{font-size:55px}
  .td-list-details{gap:36px}
  .td-list-details h2{font-size:37px}
  .td-list-example{padding:0;font-size:20px}
  .td-list-example-heading,.td-list-example-task{column-gap:12px}
  .td-list-example-attachments{gap:12px}
  .td-list-benefits article{display:block}
  .td-list-benefit-icon{margin-bottom:15px}
  .td-list-beta{flex-wrap:wrap}
  .td-list-beta-action{text-align:left}
}
@media(max-width:700px){
  .td-list-slide>.td-list-slide-grid{display:block;min-height:0;padding-block:28px}
  .td-list-slide .feature-copy{max-width:none}
  .td-list-slide .feature-copy h2{font-size:clamp(35px,8.7vw,48px);margin-bottom:16px}
  .td-list-slide .eyebrow{margin-bottom:16px;font-size:10px}
  .td-list-slide .feature-copy p:not(.eyebrow){font-size:16px;line-height:1.5;margin-bottom:20px}
  .td-list-slide-photo{top:auto;bottom:0;left:0;width:100%;height:285px}
  .td-list-hero{padding-top:20px}
  .td-list-intro{grid-template-columns:1fr;gap:24px;padding-block:28px 32px}
  .td-list-intro .eyebrow{font-size:10px}
  .td-list-intro h1{font-size:clamp(48px,12vw,66px)}
  .td-list-intro-copy>p:first-child{font-size:17px;margin-bottom:22px;max-width:540px}
  .td-list-photo{aspect-ratio:1.35/1;object-position:center;border-radius:7px}
  .td-list-details{grid-template-columns:1fr;gap:32px;padding-block:32px}
  .td-list-details h2{font-size:36px}
  .td-list-details p:not(.eyebrow){font-size:17px;max-width:540px}
  .td-list-example{padding:0;font-size:21px}
  .td-list-example-heading strong{font-size:20px}
  .td-list-example-heading,.td-list-example-task{column-gap:12px}
  .td-list-example-attachments{gap:12px 20px;font-size:16px}
  .td-list-benefits{grid-template-columns:1fr;gap:22px;padding-block:0 32px}
  .td-list-benefits article{padding:0;gap:20px}
  .td-list-benefits article+article{border-left:0;border-top:1px solid var(--line);padding-top:22px}
  .td-list-benefit-icon{width:44px;height:44px}
  .td-list-benefits h3{font-size:21px;margin-bottom:7px}
  .td-list-benefits p{font-size:16px}
  .td-list-beta{display:block;padding-block:28px}
  .td-list-beta h2{font-size:28px}
  .td-list-beta-copy p{font-size:16px}
  .td-list-beta-action{text-align:left;margin-top:24px}
}
@media(max-width:360px){
  .td-list-slide .feature-copy h2{font-size:33px}
  .td-list-slide .feature-copy p:not(.eyebrow){font-size:15px}
  .td-list-slide-photo{height:270px}
  .td-list-example-attachments{gap:10px}
  .td-list-example-attachments span{gap:7px}
}