/*! cds-page 1.0.5 | /data-sources/<slug> CMS template to Figma 4703:2837 ("Zomato", 1920 frame, rails 304 / 1616).
   Loads after cfs-page 1.0.4 + cfr-page 1.0.1. Everything is scoped to the cds-* classes of this template; no shared
   cfh-* class is restyled outside .cds-* sections. Rich text comes from CMS (overview / tells / uses), so its p and h3
   are styled through .cds-block .w-richtext. Desktop numbers are the Figma boxes at 1920: hero 88..352, band ..824,
   "Overview" row ..1154, body ..2404 (blocks split at 1472 / 1990), How it works ..2674, related ..2958, CTA band
   3078..3413, footer at 3533. Column split 876 / 436 (the rule at x 1180), how + related columns 438 / 438 / 436.
   Letter-spacing is measured off the Figma line widths (Geist): body copy, h3 and card text -2%, hero sub, facts and CTA
   sub -1%; with it every Figma line break is reproduced at 1920 (check/measure.py). Display text is Geist here (Artific in
   Figma), so headings run a little wider than the frame. 1.0.1: calibration above, facts/name spacing, Overview gap and
   forced step breaks only at 1200+, related cards stacked at 992-1199, 44px phone buttons.
   1.0.2: the Overview stats strip (Figma group 4726:20735, drawn over the frame at 304/956: 3 columns 438/438/436 on
   #F9F7F4 between hairlines, values 48px orange at 1006, captions at 1062) fills the old gap; "Browse all data sources"
   shows again (links to the /data-sources listing) in the third column like Figma (1216/2748).
   1.0.3: stat values 40px at 992-1199 (48px overflowed the 3 columns there), 44px tap area on "Browse all".
   1.0.4: related cards of sources without a page yet (cds-related 1.0.1 marks them .is-soon) are plain, not links;
   an item page without copy stays blank while cds-related sends it to the listing.
   1.0.5: an item without a Hero image shows the built lockup instead (its logo x the Clayface logo on the dotted
   #F4F2EE ground of the Zomato hero, sizes taken off that image: Clayface 237 of 803, x 48 from each side); an
   item without a Uses block hides it (and the rule above it); 1 or 2 stats share the strip evenly at 992+; the related
   list shows at most 3 cards before cds-related 1.0.2 picks them. */

.cfh-page .cds-hero,.cfh-page .cds-band,.cfh-page .cds-body,.cfh-page .cds-how,.cfh-page .cds-rel{border-bottom:1px solid #EEEDEC}
.cfh-page .cds-h1,.cfh-page .cds-h2{margin:0;font-family:var(--cfh-display);font-weight:500;font-size:32px;line-height:33.6px;letter-spacing:-0.64px;color:#1D0A05}

/* ---- hero: H1 156, sub 206 (637 box, breaks after "See"), button 268..304, rule 351 ---- */
.cfh-page .cds-hero{padding:68px 36px 47px}
.cfh-page .cds-h1{margin-bottom:16.4px;text-wrap:balance}
.cfh-page .cds-h2{text-wrap:balance}
.cfh-page .cds-hero-text{margin:0 0 20.4px;max-width:637px;font-family:var(--cfh-sans);font-weight:400;font-size:16px;line-height:20.8px;letter-spacing:-0.16px;color:#1D0A05;text-wrap:pretty}
.cfh-page .cds-btns{display:flex;flex-wrap:wrap;gap:12px}
.cfh-page .cds-btns .cfh-s02-btn-primary,.cfh-page .cds-cta .cfh-s02-btn-primary{box-sizing:border-box;min-width:164px;height:36px;min-height:36px}
.cfh-page :is(.cds-btns,.cds-cta) .cfh-s02-btn-primary:hover .cfh-s02-btn-icon{transform:translateX(3px)}
.cfh-page :is(.cds-btns,.cds-cta) .cfh-s02-btn-primary:active{transform:translateY(1px)}

/* ---- band: image 803 x 400 at 36 / 36 in the 876 column; facts column 436 with the rule at 1180:
   logo 48 at 1215 / 388, name + "By Clayface" centred on it 16px right, rule 467, facts every 56 from 500,
   button 752..788 (bottom of the image) ---- */
.cfh-page .cds-band{display:grid;grid-template-columns:minmax(0,876fr) minmax(0,436fr)}
.cfh-page .cds-media{min-width:0;padding:36px 37px 35px 36px}
.cfh-page .cds-hero-img{display:block;width:100%;height:100%;aspect-ratio:803/400;object-fit:cover}
.cfh-page .cds-facts{display:flex;flex-direction:column;min-width:0;border-left:1px solid #EEEDEC}
.cfh-page .cds-facts-head{display:flex;align-items:center;gap:16px;padding:36px 36px 31px 34px;border-bottom:1px solid #EEEDEC}
.cfh-page .cds-logo{display:block;flex:none;width:48px;height:48px;object-fit:contain}
.cfh-page .cds-facts-id{min-width:0;padding-top:2px}
.cfh-page .cds-name{margin:0;font-family:var(--cfh-sans);font-weight:500;font-size:16px;line-height:22.4px;letter-spacing:-0.2px;color:#1D0A05}
.cfh-page .cds-by{margin:0;font-family:var(--cfh-sans);font-weight:400;font-size:14px;line-height:19.6px;letter-spacing:-0.2px;color:#8A8F98;margin-top:1px}
.cfh-page .cds-facts-list{display:flex;flex-direction:column;gap:16.3px;padding:33px 36px 0 34px}
.cfh-page .cds-fact{min-width:0}
.cfh-page .cds-fact-k,.cfh-page .cds-fact-v{margin:0;font-family:var(--cfh-sans);font-size:14px;line-height:19.6px;letter-spacing:-0.14px;color:#292929;overflow-wrap:anywhere}
.cfh-page .cds-fact-k{margin-bottom:0.5px;font-weight:600}
.cfh-page .cds-fact-v{font-weight:400}
.cfh-page .cds-facts-btns{margin-top:auto;padding:43.3px 36px 35px 34px}

/* ---- "Overview" row: heading 62 under the band, stats strip 36.4 under it (956..1154), body text follows ---- */
.cfh-page .cds-ovh{padding:62px 0 0}
.cfh-page .cds-ovh .cds-h2{padding:0 36px}
.cfh-page .cds-stats{display:grid;grid-template-columns:minmax(0,438fr) minmax(0,438fr) minmax(0,436fr);margin-top:36.4px;background:#F9F7F4;border-top:1px solid #EEEDEC;border-bottom:1px solid #EEEDEC}
.cfh-page .cds-stat{min-width:0;padding:49px 36px 49.4px}
.cfh-page .cds-stat+.cds-stat{border-left:1px solid #EEEDEC}
.cfh-page .cds-stat-num{margin:0 0 8px;font-family:var(--cfh-display);font-weight:400;font-size:48px;line-height:48px;letter-spacing:-0.96px;color:#FF5400;white-space:nowrap}
.cfh-page .cds-stat-label{margin:0;max-width:240px;font-family:var(--cfh-sans);font-weight:400;font-size:16px;line-height:20.8px;letter-spacing:-0.16px;color:#1D0A05;text-wrap:balance}
/* an item without stats: empty bound text gets w-dyn-bind-empty, so drop that stat, or the whole strip */
.cfh-page .cds-stat:has(.cds-stat-num.w-dyn-bind-empty){display:none}
.cfh-page .cds-stats:not(:has(.cds-stat-num:not(.w-dyn-bind-empty))){display:none}

/* ---- body: 876 text column (blocks split by rules at 1471 / 1989) + the empty 436 column ---- */
.cfh-page .cds-body{display:grid;grid-template-columns:minmax(0,876fr) minmax(0,436fr)}
.cfh-page .cds-main{min-width:0}
.cfh-page .cds-aside{border-left:1px solid #EEEDEC}
.cfh-page .cds-block{padding:48px 36px 47px;border-bottom:1px solid #EEEDEC}
.cfh-page .cds-block:last-child{border-bottom:0}
.cfh-page .cds-block-ov{padding-top:36px}
.cfh-page .cds-block .cds-h2{margin-bottom:24.8px}
/* the CMS text: 16px on a 26px line, a blank line between items, h3 sits right on its paragraph */
/* Figma text boxes: 795 for Overview + tells, 788 for uses (the widths that give its line breaks) */
.cfh-page .cds-block .w-richtext{max-width:795px;font-family:var(--cfh-sans);font-weight:400;font-size:16px;line-height:26px;letter-spacing:-0.32px;color:#292929}
.cfh-page .cds-block[data-cds-block="uses"] .w-richtext{max-width:788px}
.cfh-page .cds-block .w-richtext p{margin:0 0 26px;font-size:16px;line-height:26px;letter-spacing:-0.32px;color:#292929}
.cfh-page .cds-block .w-richtext h3{margin:0;font-family:var(--cfh-sans);font-weight:600;font-size:16px;line-height:26px;letter-spacing:-0.32px;color:#292929}
.cfh-page .cds-block .w-richtext>:last-child{margin-bottom:0}
.cfh-page .cds-block .w-richtext a{color:#FF5400;text-decoration:underline;text-underline-offset:2px}
.cfh-page .cds-block .w-richtext :is(ul,ol){margin:0 0 26px;padding-left:22px}
.cfh-page .cds-block .w-richtext li{margin:0;line-height:26px}

/* ---- How it works: heading 48 under the rule, icons bottom-aligned at 2563, step text 2578 (20/24, one line
   per sentence: the CMS step text carries its line break) ---- */
.cfh-page .cds-how{padding:48px 0 47px}
.cfh-page .cds-how .cds-h2{padding:0 36px;margin-bottom:53.4px}
.cfh-page .cds-how-grid{display:grid;grid-template-columns:minmax(0,438fr) minmax(0,438fr) minmax(0,436fr)}
.cfh-page .cds-how-col{min-width:0;padding:0 36px}
.cfh-page .cds-how-ico{display:flex;align-items:flex-end;height:24px;margin:0 0 15px}
.cfh-page .cds-how-svg{display:block;flex:none}
.cfh-page .cds-how-t{margin:0;font-family:var(--cfh-display);font-weight:500;font-size:20px;line-height:24px;letter-spacing:-0.4px;color:#1D0A05;text-wrap:pretty}
@media (min-width:1200px),(min-width:480px) and (max-width:991px){
  .cfh-page .cds-how-t{white-space:pre-line}
}

/* ---- related: heading 64 under the rule, cards at 2830 (logo 80, copy 24 to its right: name 600 16, text 16/22.4
   in balanced lines) ---- */
.cfh-page .cds-rel{padding:64px 0 47px}
.cfh-page .cds-rel-head{display:grid;grid-template-columns:minmax(0,438fr) minmax(0,438fr) minmax(0,436fr);align-items:end;margin-bottom:58.4px}
.cfh-page .cds-rel-head .cds-h2{grid-column:1/span 2;padding:0 36px}
/* "Browse all data sources ->": mono 16, orange, rule 1px under it level with the heading's box bottom */
.cfh-page .cds-rel-all{grid-column:3;justify-self:start;display:inline-flex;align-items:center;gap:6px;margin-left:36px;padding:0 0 3.4px;border-bottom:1px solid #FF5400;font-family:var(--cfh-mono);font-weight:400;font-size:16px;line-height:20.8px;letter-spacing:-0.32px;color:#FF5400;text-decoration:none;white-space:nowrap}
.cfh-page .cds-rel-all-t{color:inherit}
.cfh-page .cds-rel-arrow{display:block;flex:none;transition:transform .18s ease-out}
.cfh-page .cds-rel-all:hover .cds-rel-arrow{transform:translateX(3px)}
.cfh-page .cds-rel-all:focus-visible{outline:2px solid #FF5400;outline-offset:4px}
.cfh-page .cds-rel-all{position:relative}
.cfh-page .cds-rel-all::after{content:"";position:absolute;left:-4px;right:-4px;top:-10px;bottom:-10px}
.cfh-page .cds-rel-slot .w-dyn-items{display:grid;grid-template-columns:minmax(0,438fr) minmax(0,438fr) minmax(0,436fr)}
.cfh-page .cds-rel-slot .w-dyn-item{min-width:0;padding:0 36px}
.cfh-page .cds-rel-card{display:flex;align-items:flex-start;gap:24px;color:inherit;text-decoration:none}
.cfh-page .cds-rel-logo{display:block;flex:none;width:80px;height:80px;object-fit:contain}
.cfh-page .cds-rel-copy{min-width:0;max-width:260px}
.cfh-page .cds-rel-name{margin:0 0 16.8px;font-family:var(--cfh-sans);font-weight:600;font-size:16px;line-height:19.2px;letter-spacing:-0.28px;color:#292929}
.cfh-page .cds-rel-text{margin:0;font-family:var(--cfh-sans);font-weight:400;font-size:16px;line-height:22.4px;letter-spacing:-0.32px;color:#292929;text-wrap:balance}
.cfh-page .cds-rel-card:hover .cds-rel-name{color:#FF5400}
.cfh-page .cds-rel-card:focus-visible{outline:2px solid #FF5400;outline-offset:4px}
.cfh-page .cds-rel-card.is-soon{cursor:default}
.cfh-page .cds-rel-card.is-soon:hover .cds-rel-name{color:#292929}
body:has(.cds-h1.w-dyn-bind-empty) .cfh-page{visibility:hidden}
/* the list hides itself (script) when no other source is published; until then nothing reads "No items found." */
.cfh-page .cds-rel-slot .w-dyn-empty{display:none}

/* ---- CTA: band 3078..3413 (120 above and below), heading on one line, sub on one line ---- */
@media (min-width:992px){
  .cfh-page .cfh-sec.cfh-s13.cds-cta{padding-top:120px;padding-bottom:120px}
  .cfh-page .cfh-s13.cds-cta .cfh-s13-band{padding:90px 24px 90px}
  .cfh-page .cfh-s13.cds-cta .cfh-s13-head{max-width:none;margin:0 0 20px}
  .cfh-page .cfh-s13.cds-cta .cfh-s13-sub{max-width:720px;margin:0 0 30.4px}
}

/* ---- narrow desktop: the band stacks (image full width, facts under it) before the facts column gets too thin ---- */
@media (max-width:1199px){
  .cfh-page .cds-band{grid-template-columns:minmax(0,1fr)}
  .cfh-page .cds-media{padding:36px 36px 0}
  .cfh-page .cds-hero-img{height:auto}
  .cfh-page .cds-facts{border-left:0}
  .cfh-page .cds-facts-head{padding:32px 36px 24px}
  .cfh-page .cds-facts-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px;padding:24px 36px 0}
  .cfh-page .cds-facts-btns{margin-top:0;padding:32px 36px 36px}
  .cfh-page .cds-rel-card{flex-direction:column;gap:20px}
  .cfh-page .cds-rel-logo{width:64px;height:64px}
  .cfh-page .cds-rel-name{margin-bottom:10px}
  .cfh-page .cds-stat-num{font-size:40px;line-height:40px;letter-spacing:-0.8px}
  .cfh-page .cds-stat-label{max-width:220px}
}

@media (max-width:991px){
  .cfh-page .cds-hero{padding:56px 32px 48px}
  .cfh-page .cds-hero-text{max-width:600px}
  .cfh-page .cds-media{padding:32px 32px 0}
  .cfh-page .cds-facts-head{padding:28px 32px 24px}
  .cfh-page .cds-facts-list{padding:24px 32px 0}
  .cfh-page .cds-facts-btns{padding:32px 32px 32px}
  .cfh-page .cds-ovh{padding:56px 0 0}
  .cfh-page .cds-ovh .cds-h2{padding:0 32px}
  .cfh-page .cds-stats{grid-template-columns:minmax(0,1fr);margin-top:28px}
  .cfh-page .cds-stat{padding:28px 32px}
  .cfh-page .cds-stat+.cds-stat{border-left:0;border-top:1px solid #EEEDEC}
  .cfh-page .cds-stat-num{font-size:40px;line-height:40px;letter-spacing:-0.8px}
  .cfh-page .cds-stat-label{max-width:420px}
  .cfh-page .cds-body{grid-template-columns:minmax(0,1fr)}
  .cfh-page .cds-aside{display:none}
  .cfh-page .cds-block{padding:40px 32px}
  .cfh-page .cds-block-ov{padding-top:24px}
  .cfh-page .cds-block .cds-h2{margin-bottom:20px}
  .cfh-page .cds-how{padding:56px 0}
  .cfh-page .cds-how .cds-h2{padding:0 32px;margin-bottom:32px}
  .cfh-page .cds-how-grid{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .cfh-page .cds-how-col{padding:0 32px}
  .cfh-page .cds-how-ico{margin-bottom:12px}
  .cfh-page .cds-rel{padding:56px 0}
  .cfh-page .cds-rel-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;padding:0 32px;margin-bottom:32px}
  .cfh-page .cds-rel-head .cds-h2{padding:0}
  .cfh-page .cds-rel-all{margin-left:0}
  .cfh-page .cds-rel-slot .w-dyn-items{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .cfh-page .cds-rel-slot .w-dyn-item{padding:0 32px}
  .cfh-page .cds-rel-card{flex-direction:row;gap:24px}
  .cfh-page .cds-rel-copy{max-width:420px}
  .cfh-page .cfh-sec.cfh-s13.cds-cta{padding-bottom:64px}
}

@media (max-width:767px){
  .cfh-page .cds-h1,.cfh-page .cds-h2{font-size:28px;line-height:30.8px;letter-spacing:-0.4px}
  .cfh-page .cds-hero{padding:48px 24px 40px}
  .cfh-page .cds-h1{margin-bottom:14px}
  .cfh-page .cds-hero-text{margin-bottom:24px}
  .cfh-page :is(.cds-btns,.cds-cta) .cfh-s02-btn-primary{width:100%;max-width:320px;height:44px;min-height:44px;justify-content:center}
  .cfh-page .cds-media{padding:24px 24px 0}
  .cfh-page .cds-facts-head{padding:24px 24px 20px}
  .cfh-page .cds-facts-list{grid-template-columns:minmax(0,1fr);gap:16px;padding:20px 24px 0}
  .cfh-page .cds-facts-btns{padding:28px 24px 28px}
  .cfh-page .cds-ovh{padding:48px 0 0}
  .cfh-page .cds-ovh .cds-h2{padding:0 24px}
  .cfh-page .cds-stats{margin-top:24px}
  .cfh-page .cds-stat{padding:24px}
  .cfh-page .cds-stat-num{font-size:36px;line-height:36px;letter-spacing:-0.72px;margin-bottom:6px}
  .cfh-page .cds-block{padding:32px 24px}
  .cfh-page .cds-block-ov{padding-top:20px}
  .cfh-page .cds-block .cds-h2{margin-bottom:16px}
  .cfh-page .cds-how{padding:48px 0}
  .cfh-page .cds-how .cds-h2{padding:0 24px;margin-bottom:28px}
  .cfh-page .cds-how-grid{row-gap:28px}
  .cfh-page .cds-how-col{padding:0 24px}
  .cfh-page .cds-how-t{font-size:18px;line-height:22px;letter-spacing:-0.3px}
  .cfh-page .cds-rel{padding:48px 0}
  .cfh-page .cds-rel-head{padding:0 24px;margin-bottom:28px}
  .cfh-page .cds-rel-all{font-size:14px;line-height:19.6px;letter-spacing:-0.28px}
  .cfh-page .cds-rel-slot .w-dyn-items{row-gap:28px}
  .cfh-page .cds-rel-slot .w-dyn-item{padding:0 24px}
  .cfh-page .cds-rel-card{gap:20px}
  .cfh-page .cds-rel-logo{width:64px;height:64px}
  .cfh-page .cds-rel-name{margin-bottom:10px}
  .cfh-page .cfh-sec.cfh-s13.cds-cta{padding-bottom:56px}
}

@media (max-width:479px){
  .cfh-page .cds-h1,.cfh-page .cds-h2{font-size:26px;line-height:28.6px;letter-spacing:-0.3px}
  .cfh-page .cds-hero{padding:40px 20px 36px}
  .cfh-page .cds-media{padding:20px 20px 0}
  .cfh-page .cds-facts-head{padding:20px 20px 18px}
  .cfh-page .cds-facts-list{padding:18px 20px 0}
  .cfh-page .cds-facts-btns{padding:24px 20px 24px}
  .cfh-page .cds-ovh{padding:40px 0 0}
  .cfh-page .cds-ovh .cds-h2{padding:0 20px}
  .cfh-page .cds-stat{padding:20px}
  .cfh-page .cds-stat-num{font-size:32px;line-height:32px;letter-spacing:-0.64px}
  .cfh-page .cds-block{padding:28px 20px}
  .cfh-page .cds-block-ov{padding-top:16px}
  .cfh-page .cds-how{padding:40px 0}
  .cfh-page .cds-how .cds-h2,.cfh-page .cds-how-col{padding-left:20px;padding-right:20px}
  .cfh-page .cds-rel{padding:40px 0}
  .cfh-page .cds-rel-head,.cfh-page .cds-rel-slot .w-dyn-item{padding-left:20px;padding-right:20px}
  .cfh-page .cds-rel-card{gap:16px}
  .cfh-page .cds-rel-logo{width:56px;height:56px}
}

/* ---- 1.0.5: hero lockup for items without a Hero image (the empty image binding renders img.w-dyn-bind-empty) ---- */
.cfh-page .cds-lockup{display:none}
.cfh-page .cds-media:has(.cds-hero-img.w-dyn-bind-empty) .cds-hero-img{display:none}
.cfh-page .cds-media:has(.cds-hero-img.w-dyn-bind-empty) .cds-lockup{container-type:inline-size;display:flex;align-items:center;justify-content:center;width:100%;height:100%;aspect-ratio:803/400;background-color:#F4F2EE;background-image:radial-gradient(circle at center,#E2DFDA 0 1px,transparent 1.4px);background-size:9.75px 9.75px;background-position:3.9px 3.9px}
.cfh-page .cds-lockup-logo{display:block;flex:none;width:10cqw;height:10cqw;border-radius:2.2cqw;object-fit:cover}
.cfh-page .cds-lockup-x{flex:none;margin:0 6cqw;font-family:var(--cfh-sans);font-weight:300;font-size:3.4cqw;line-height:1;color:#1D0A05}
.cfh-page .cds-lockup-cf{display:block;flex:none;width:29.5cqw;height:auto}

/* ---- 1.0.5: no Uses copy -> no Uses block; Tells then closes the column without a rule ---- */
.cfh-page .cds-block[data-cds-block="uses"]:has(> .w-richtext.w-dyn-bind-empty){display:none}
.cfh-page .cds-block[data-cds-block="tells"]:has(+ .cds-block[data-cds-block="uses"] > .w-richtext.w-dyn-bind-empty){border-bottom:0}

/* ---- 1.0.5: 1 or 2 stats split the strip evenly instead of leaving an empty third column ---- */
@media (min-width:992px){
  .cfh-page .cds-stats:has(.cds-stat-num.w-dyn-bind-empty){grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
}

/* ---- 1.0.5: the related list holds every source (cds-related 1.0.2 keeps the 3 from Related slugs); show 3 until it runs ---- */
.cfh-page .cds-rel-slot .w-dyn-item:nth-child(n+4){display:none}