/* /blog/digital-fairness-act: figures for the opinion piece, on top of the
   blog's "art" layout (/css/tiktok-worse-than-smoking.css) and the sx-*
   figure styles (/css/cancel-subscriptions.css), both loaded first.
   See scripts/build-digital-fairness.py. */

.art p.df-close{font-size:clamp(22px,2.2vw,26px);font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
/* closing card: the blog's aside.next (tiktok-worse-than-smoking.css) + a line and a quiet link */
.df-next-card{margin-top:72px}
.df-next-p{max-width:520px;margin:16px auto 0;font-family:var(--sans);font-size:17px;line-height:1.5;color:var(--muted)}
.df-next-card .btn-glass{display:flex;width:max-content;margin:28px auto 0}
.df-next-link{display:inline-block;margin-top:18px;font-family:var(--sans);font-size:16px;font-weight:500;color:var(--blue)}
.df-next-link:hover{text-decoration:underline;text-underline-offset:4px}
.df-next-card + .art h2#faq{margin-top:88px}

/* header: the title is two sentences, one per line on tablet and desktop
   (Samy 2026-11-13). Line 1 is ~18.6× the font size wide, so the size
   follows the viewport and stops at 60px (the blog's 72px would not fit). */
@media(min-width:761px){
  [data-variant="blog-digital-fairness-act"] .art-head{max-width:1200px}
  [data-variant="blog-digital-fairness-act"] .art-head h1{max-width:1160px;font-size:clamp(34px,calc((100vw - 96px)/19),60px)}
  [data-variant="blog-digital-fairness-act"] .art-head h1 .title-part{display:block}
  [data-variant="blog-digital-fairness-act"] .art-dek{max-width:none}
}

/* the 30-second facts box (sx-summary look) */
.df-facts{margin:30px 0 6px}
.df-facts ul{list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:16px;line-height:1.5}
.df-facts li{padding:8px 0;border-top:1px solid var(--line)}
.df-facts li:first-child{border-top:0;padding-top:2px}
.df-facts li b{color:var(--ink)}
.art .df-facts p.df-facts-src{margin:10px 0 0;font-family:var(--sans);font-size:13px;color:var(--dim)}

/* 1 · the waking day */
.df-day{padding:26px 28px}
.df-big{margin:0!important;font-size:clamp(52px,7vw,84px);font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--ink)}
.df-big span{display:inline-block;font-size:17px;font-weight:400;letter-spacing:0;color:var(--muted);vertical-align:middle;max-width:220px;line-height:1.3;margin-left:10px}
.df-bar{margin-top:24px;height:44px;border-radius:12px;background:#eceef2;overflow:hidden}
.df-bar i{font-style:normal;display:flex;align-items:center;justify-content:center;height:100%;background:var(--blue)}
.df-bar b{font-size:14px;font-weight:600;color:#fff;white-space:nowrap}
.df-ends{display:flex;justify-content:space-between;margin-top:8px;font-size:13px;color:var(--dim)}
.df-stats{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.df-stats div{display:flex;flex-direction:column}
.df-stats b{font-size:22px;letter-spacing:-.02em}
.df-stats span{font-size:13px;color:var(--muted)}

/* 2 · 97% */
.df-dark{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;padding:26px 28px}
.df-pct{margin:0!important;font-size:clamp(84px,11vw,124px);font-weight:600;letter-spacing:-.05em;line-height:.9;color:var(--blue)}
.df-dark-h{margin:16px 0 0!important;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.df-dark-s{margin:10px 0 0!important;font-size:14px;color:var(--muted)}
.df-dark ol{list-style:none;margin:0;padding:0}
.df-dark li{display:grid;grid-template-columns:24px 1fr;gap:12px;padding:10px 0;border-top:1px solid #f0f1f4}
.df-dark li .n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--blue-tonal);color:var(--blue-tonal-ink);font-size:12px;font-weight:700}
.df-dark li div{display:flex;flex-direction:column}
.df-dark li b{font-size:15px}
.df-dark li div span{font-size:13.5px;color:var(--muted);line-height:1.4}

/* 3 · timeline */
.df-tl{padding:26px 28px}
.df-tl-h{margin:0 0 22px!important;font-size:clamp(20px,2.4vw,26px);font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.df-tl ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:14px;position:relative}
/* each step draws its own segment, from its dot centre to the next dot centre, so line and dots always meet */
.df-tl li::after{content:"";position:absolute;z-index:0;left:7px;top:6px;width:calc(100% + 14px);height:2px;background:var(--ink)}
.df-tl li.df-now::after{background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 11px)}
.df-tl li:last-child::after{display:none}
.df-tl li{position:relative;padding-top:26px;display:flex;flex-direction:column;gap:4px}
.df-tl li::before{content:"";position:absolute;z-index:1;left:0;top:0;width:14px;height:14px;border-radius:50%;background:var(--ink)}
.df-tl li.df-now::before{background:var(--blue);box-shadow:0 0 0 6px rgba(0,110,255,.18)}
.df-tl li.df-next::before{background:#fff;box-shadow:inset 0 0 0 2.5px var(--ink)}
.df-tl time{font-size:13px;font-weight:600;color:var(--dim)}
.df-tl li.df-now time{color:var(--blue)}
.df-tl b{font-size:15px;line-height:1.2}
.df-tl li span{font-size:13px;line-height:1.4;color:var(--muted)}

/* 4 · what we reward */
.df-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.df-two figcaption{grid-column:1/-1}
.df-col{padding:22px 24px}
.df-col ul{list-style:none;margin:0;padding:0}
.df-col li{padding:11px 0;border-top:1px solid var(--line);font-size:16px}
.df-grey{color:var(--muted)!important}
.df-blue{background:var(--blue);color:#fff}
.df-blue .sx-eyebrow{color:rgba(255,255,255,.8)}
.df-blue li{border-top-color:rgba(255,255,255,.25)}

/* 5 · Lucie chat icons */
.df-ic{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--blue-tonal);color:var(--blue);font-style:normal}

@media(max-width:760px){
  .df-dark,.df-two{grid-template-columns:1fr}
  .df-tl ol{grid-template-columns:1fr;row-gap:18px;padding-left:28px}
  .df-tl li{padding-top:0}
  .df-tl li::before{left:-28px;top:2px}
  .df-tl li::after{left:-22px;top:9px;width:2px;height:calc(100% + 18px)}
  .df-tl li.df-now::after{background:repeating-linear-gradient(180deg,var(--ink) 0 6px,transparent 6px 11px)}
  .df-big span{display:block;margin:8px 0 0;max-width:none}
}