/* klaritydisk.com — shared light design (matches the homepage). */

/* 1. Tokens, reset, base type */
:root{--bg:#FBFBFD;--bg2:#F5F5F7;--ink:#1D1D1F;--ink2:#6E6E73;--accent:#0E7C86;--accent-hover:#0B6971;--tint:#EEF6F7;--line:rgba(0,0,0,.08);--wrap:1120px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  --shadow:0 0 0 .5px rgba(0,0,0,.16),0 2px 6px rgba(0,0,0,.06),0 24px 48px -12px rgba(28,32,48,.22),0 60px 120px -24px rgba(28,32,48,.24)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:68px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:19px;line-height:1.6;overflow-x:hidden}
a{color:var(--accent)}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* 2. Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(251,251,253,.82);backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);border-bottom:1px solid var(--line)}
.nav-inner{height:52px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:8px;font-weight:600;font-size:17px;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.nav-links{display:flex;gap:24px;list-style:none;align-items:center}
.nav-links a{color:var(--ink);opacity:.78;text-decoration:none;font-size:13px;white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current="page"]{opacity:1}
.nav-links a[aria-current="page"]{font-weight:600}
.nav-links a.nav-cta{background:var(--accent);color:#fff;opacity:1;padding:6px 14px;border-radius:980px;font-weight:500}
.nav-links a.nav-cta:hover{background:var(--accent-hover)}
.nav-burger{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer}
.nav-burger span{display:block;width:18px;height:1.5px;background:var(--ink);margin:5px auto}

/* 3. Footer */
footer{background:var(--bg2);border-top:1px solid var(--line)}
.footer-inner{max-width:var(--wrap);margin:0 auto;padding:28px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink2)}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none}
.footer-links a{color:var(--ink2);text-decoration:none}
.footer-links a:hover{color:var(--ink)}

/* 4. Reading layout: articles and content pages */
.article-page{max-width:768px;margin:0 auto;padding:72px 24px 96px}
.article-header{margin-bottom:8px}
.article-back{display:inline-flex;gap:6px;font-size:15px;font-weight:500;text-decoration:none;margin-bottom:28px}
.article-back:hover{text-decoration:underline}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:18px;font-size:14px;color:var(--ink2)}
.article-tag{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--tint);padding:4px 10px;border-radius:980px}
.article-date{color:var(--ink2)}
.article-header h1{font-size:clamp(34px,5vw,52px);line-height:1.08;letter-spacing:-.03em;font-weight:700}
.article-subtitle{margin-top:18px;font-size:21px;line-height:1.5;color:var(--ink2)}
.article-divider{margin:36px 0 8px}
.article-divider hr{border:0;border-top:1px solid var(--line)}

/* 5. Article body */
.article-body{padding-top:8px}
.article-body>h2:first-child{margin-top:28px}
.article-body h2{font-size:32px;line-height:1.15;letter-spacing:-.022em;margin:56px 0 16px}
.article-body h3{font-size:22px;line-height:1.25;letter-spacing:-.012em;margin:36px 0 10px}
.article-body p,.article-body li{font-size:19px;line-height:1.7;color:#3A3A3F}
.article-body p{margin-bottom:20px}
.article-body ul,.article-body ol{padding-left:24px;margin:0 0 22px}
.article-body li{margin-bottom:8px}
.article-body strong{color:var(--ink)}
.article-body a{text-decoration-thickness:1px;text-underline-offset:3px}
.article-body,.content{overflow-wrap:break-word}
.article-body code,.content code{overflow-wrap:anywhere}
.article-body code{font-family:var(--mono);font-size:.86em;background:var(--bg2);border:1px solid var(--line);padding:1px 6px;border-radius:6px;color:var(--ink)}
.article-body pre{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:18px 20px;overflow-x:auto;margin:0 0 22px}
.article-body pre code{background:none;border:0;padding:0}
.article-body blockquote{border-left:3px solid var(--accent);padding:4px 0 4px 20px;margin:0 0 22px;color:var(--ink)}
.article-body blockquote p{color:var(--ink)}
.article-body figure{margin:36px 0}
.article-body figure img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:var(--shadow)}
.article-body figcaption{margin-top:14px;font-size:15px;line-height:1.5;color:var(--ink2);text-align:center}
.article-body table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:16px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.article-body th,.article-body td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left}
.article-body thead th{font-size:14px;color:var(--ink2);font-weight:600}
.article-body figure.figure-narrow img{max-width:307px;margin:0 auto}
.figure-narrow figcaption{text-align:center}
.visually-hidden,caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:28px 0 32px}
.callout{background:var(--tint);border:1px solid rgba(14,124,134,.18);border-radius:16px;padding:22px 24px;margin:32px 0}
.callout-title{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.callout p:last-child{margin-bottom:0}
.callout-title+p+.callout-title{margin-top:18px}
.article-body h3.faq-q{font-size:21px;margin:30px 0 8px}

/* 6. Article end: call to action and "More from the blog" */
.article-cta{max-width:768px;margin:0 auto 32px;padding:0 24px}
.article-cta-inner{background:#fff;border:1px solid var(--line);border-radius:20px;padding:40px 32px;text-align:center}
.article-cta-inner h3{font-size:28px;letter-spacing:-.02em;margin-bottom:10px}
.article-cta-inner p{color:var(--ink2);font-size:17px;max-width:520px;margin:0 auto 22px}
.cta-button,.cta-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;border-radius:980px;background:var(--accent);color:#fff;font-size:17px;font-weight:500;text-decoration:none}
.cta-button:hover,.cta-btn:hover{background:var(--accent-hover)}
.related-posts{max-width:760px;margin:0 auto 64px}
.article-cta+.article-cta,.related-posts{background:var(--bg2);border-radius:20px;padding:28px 32px;max-width:720px}
.article-cta+.article-cta h3,.related-posts h3{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.article-cta+.article-cta ul,.related-posts ul{list-style:none;display:grid;gap:12px}
.article-cta+.article-cta li a,.related-posts li a{font-size:17px;font-weight:500;text-decoration:none;color:var(--ink)}
.article-cta+.article-cta li a:hover,.related-posts li a:hover{color:var(--accent)}
.article-cta+.article-cta+*{margin-top:64px}
main.article-page+.article-cta{margin-top:0}
.article-page .article-cta{padding:0;max-width:none;margin:40px 0 0}
.article-page .article-cta+.article-cta{padding:28px 32px;margin-top:24px}

/* 7. Blog index */
body>header{position:relative;isolation:isolate;overflow:hidden;padding:104px 24px 72px;text-align:center}
body>header h1{font-size:clamp(40px,6vw,64px);letter-spacing:-.03em;line-height:1.05}
body>header .subtitle{margin:18px auto 0;max-width:640px;font-size:21px;color:var(--ink2)}
.blog-grid{max-width:var(--wrap);margin:0 auto;padding:0 24px 120px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.blog-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;transition:border-color .2s,transform .2s,box-shadow .2s}
.blog-card:hover{border-color:rgba(14,124,134,.4);transform:translateY(-2px);box-shadow:0 12px 30px -16px rgba(28,32,48,.25)}
.blog-meta{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.blog-meta .tag{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--tint);padding:4px 10px;border-radius:980px}
.blog-meta .date{font-size:14px;color:var(--ink2)}
.blog-card h2{font-size:22px;line-height:1.25;letter-spacing:-.015em;margin-bottom:12px}
.blog-card h2 a{color:var(--ink);text-decoration:none}
.blog-card h2 a:hover{color:var(--accent)}
.blog-card p{font-size:16px;line-height:1.55;color:var(--ink2);flex:1}
.blog-card .read-more{margin-top:18px;font-size:16px;font-weight:500;text-decoration:none}
.blog-card .read-more:hover{text-decoration:underline}

/* 7b. Blog index art: a soft treemap behind the header and a small one on each card, in the app's
   age colours. The background-image rules between the BLOG-ART markers are generated by
   .github/scripts/blog_art.py: edit that script, not them. */
body>header::before{content:"";position:absolute;inset:-24px;z-index:-2;background:center/cover no-repeat;opacity:.34;filter:blur(8px)}
/* veil: keeps the title and subtitle at >= 4.5:1 over the tiles */
body>header::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 550px 210px at 50% 56%,rgba(251,251,253,.96) 0%,rgba(251,251,253,.92) 62%,rgba(251,251,253,.5) 82%,rgba(251,251,253,0) 100%),
             linear-gradient(180deg,rgba(251,251,253,.55) 0%,rgba(251,251,253,0) 30%,rgba(251,251,253,0) 62%,var(--bg) 100%)}
.blog-card{padding-top:12px}
.blog-card::before{content:"";display:block;height:118px;margin:0 -14px 22px;border-radius:12px;background:#fff center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);transition:filter .2s}
.blog-card:hover::before{filter:saturate(1.12) brightness(1.03)}
/* BLOG-ART:START */
body>header::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 460' preserveAspectRatio='xMidYMid slice'><rect x='5.0' y='5.0' width='310.3' height='275.4' rx='12' fill='%23B9A45E'/><rect x='5.0' y='290.4' width='310.3' height='164.6' rx='12' fill='%2374AB84'/><rect x='325.3' y='5.0' width='214.7' height='220.6' rx='12' fill='%2374AB84'/><rect x='325.3' y='235.6' width='214.7' height='219.4' rx='12' fill='%2374AB84'/><rect x='550.0' y='5.0' width='255.9' height='252.3' rx='12' fill='%23D38A4E'/><rect x='550.0' y='267.3' width='138.1' height='95.6' rx='12' fill='%235B8FD6'/><rect x='550.0' y='372.9' width='138.1' height='82.1' rx='12' fill='%2374AB84'/><rect x='698.2' y='267.3' width='107.8' height='92.2' rx='12' fill='%23B9A45E'/><rect x='698.2' y='369.5' width='107.8' height='85.5' rx='12' fill='%2374AB84'/><rect x='815.9' y='5.0' width='187.1' height='123.4' rx='12' fill='%235B8FD6'/><rect x='815.9' y='138.4' width='104.2' height='107.6' rx='12' fill='%2374AB84'/><rect x='930.1' y='138.4' width='72.9' height='107.6' rx='12' fill='%235B8FD6'/><rect x='815.9' y='256.0' width='187.1' height='199.0' rx='12' fill='%23D38A4E'/><rect x='1013.0' y='5.0' width='121.7' height='155.3' rx='12' fill='%23D38A4E'/><rect x='1013.0' y='170.3' width='121.7' height='145.8' rx='12' fill='%23B9A45E'/><rect x='1013.0' y='326.1' width='121.7' height='128.9' rx='12' fill='%23C8644F'/><rect x='1144.7' y='5.0' width='121.7' height='117.6' rx='12' fill='%2374AB84'/><rect x='1144.7' y='132.6' width='121.7' height='110.9' rx='12' fill='%23D38A4E'/><rect x='1144.7' y='253.5' width='121.7' height='96.5' rx='12' fill='%23B9A45E'/><rect x='1144.7' y='360.0' width='121.7' height='95.0' rx='12' fill='%23B9A45E'/><rect x='1276.4' y='5.0' width='105.0' height='105.1' rx='12' fill='%2374AB84'/><rect x='1391.4' y='5.0' width='99.9' height='105.1' rx='12' fill='%23C8644F'/><rect x='1501.3' y='5.0' width='93.7' height='105.1' rx='12' fill='%23C8644F'/><rect x='1276.4' y='120.1' width='108.5' height='86.3' rx='12' fill='%2374AB84'/><rect x='1394.9' y='120.1' width='99.3' height='86.3' rx='12' fill='%23B9A45E'/><rect x='1504.2' y='120.1' width='90.8' height='86.3' rx='12' fill='%235B8FD6'/><rect x='1276.4' y='216.4' width='104.4' height='74.2' rx='12' fill='%23D38A4E'/><rect x='1276.4' y='300.6' width='104.4' height='72.4' rx='12' fill='%23B9A45E'/><rect x='1276.4' y='383.1' width='104.4' height='71.9' rx='12' fill='%23C8644F'/><rect x='1390.8' y='216.4' width='98.0' height='74.4' rx='12' fill='%23D38A4E'/><rect x='1498.9' y='216.4' width='96.1' height='74.4' rx='12' fill='%2374AB84'/><rect x='1390.8' y='300.8' width='98.2' height='72.6' rx='12' fill='%2374AB84'/><rect x='1390.8' y='383.4' width='98.2' height='71.6' rx='12' fill='%23D38A4E'/><rect x='1499.0' y='300.8' width='96.0' height='72.4' rx='12' fill='%235B8FD6'/><rect x='1499.0' y='383.3' width='96.0' height='71.7' rx='12' fill='%2374AB84'/></svg>")}
.blog-card:nth-last-child(12n+1)::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 150' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23fff' stop-opacity='.22'/><stop offset='.55' stop-color='%23fff' stop-opacity='0'/><stop offset='1' stop-color='%23000' stop-opacity='.06'/></linearGradient></defs><rect width='400' height='150' fill='%23FFFFFF'/><rect x='1.5' y='1.5' width='110.4' height='80.6' rx='3' fill='%2379A3DD'/><rect x='1.5' y='85.1' width='57.0' height='63.4' rx='3' fill='%2379A3DD'/><rect x='61.5' y='85.1' width='50.4' height='31.4' rx='3' fill='%238DBA9A'/><rect x='61.5' y='119.5' width='38.8' height='29.0' rx='3' fill='%2379A3DD'/><rect x='103.3' y='119.5' width='8.5' height='29.0' rx='3' fill='%2379A3DD'/><rect x='114.9' y='1.5' width='88.4' height='43.6' rx='3' fill='%2379A3DD'/><rect x='114.9' y='48.1' width='52.1' height='52.1' rx='3' fill='%2379A3DD'/><rect x='170.0' y='48.1' width='33.3' height='52.1' rx='3' fill='%238DBA9A'/><rect x='114.9' y='103.1' width='29.1' height='45.4' rx='3' fill='%23DB9F6E'/><rect x='147.0' y='103.1' width='28.1' height='45.4' rx='3' fill='%2379A3DD'/><rect x='178.1' y='103.1' width='25.2' height='45.4' rx='3' fill='%2379A3DD'/><rect x='206.3' y='1.5' width='60.8' height='42.3' rx='3' fill='%238DBA9A'/><rect x='206.3' y='46.8' width='15.6' height='31.3' rx='3' fill='%2379A3DD'/><rect x='224.8' y='46.8' width='24.7' height='16.3' rx='3' fill='%238DBA9A'/><rect x='224.8' y='66.1' width='24.7' height='12.0' rx='3' fill='%238DBA9A'/><rect x='252.5' y='46.8' width='14.5' height='18.5' rx='3' fill='%2379A3DD'/><rect x='252.5' y='68.3' width='14.5' height='9.8' rx='3' fill='%23C6B47B'/><rect x='206.3' y='81.1' width='60.8' height='67.4' rx='3' fill='%2379A3DD'/><rect x='270.0' y='1.5' width='65.5' height='53.8' rx='3' fill='%2379A3DD'/><rect x='338.6' y='1.5' width='59.9' height='53.8' rx='3' fill='%238DBA9A'/><rect x='270.0' y='58.3' width='44.1' height='46.8' rx='3' fill='%23C6B47B'/><rect x='270.0' y='108.1' width='44.1' height='40.4' rx='3' fill='%23DB9F6E'/><rect x='317.1' y='58.3' width='39.9' height='44.6' rx='3' fill='%238DBA9A'/><rect x='360.1' y='58.3' width='38.4' height='44.6' rx='3' fill='%2379A3DD'/><rect x='317.1' y='105.8' width='26.7' height='42.7' rx='3' fill='%23C6B47B'/><rect x='346.8' y='105.8' width='24.8' height='42.7' rx='3' fill='%23DB9F6E'/><rect x='374.6' y='105.8' width='23.9' height='42.7' rx='3' fill='%238DBA9A'/><rect width='400' height='150' fill='url(%23s)'/></svg>")}
.blog-card:nth-last-child(12n+2)::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 150' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23fff' stop-opacity='.22'/><stop offset='.55' stop-color='%23fff' stop-opacity='0'/><stop offset='1' stop-color='%23000' stop-opacity='.06'/></linearGradient></defs><rect width='400' height='150' fill='%23FFFFFF'/><rect x='1.5' y='1.5' width='69.8' height='108.3' rx='3' fill='%238DBA9A'/><rect x='74.3' y='1.5' width='60.3' height='108.3' rx='3' fill='%238DBA9A'/><rect x='1.5' y='112.8' width='133.2' height='35.7' rx='3' fill='%238DBA9A'/><rect x='137.7' y='1.5' width='112.1' height='55.4' rx='3' fill='%23C6B47B'/><rect x='137.7' y='59.9' width='60.0' height='88.6' rx='3' fill='%238DBA9A'/><rect x='200.6' y='59.9' width='49.1' height='88.6' rx='3' fill='%238DBA9A'/><rect x='252.8' y='1.5' width='35.2' height='70.0' rx='3' fill='%238DBA9A'/><rect x='291.0' y='1.5' width='44.9' height='35.7' rx='3' fill='%2379A3DD'/><rect x='291.0' y='40.2' width='44.9' height='31.2' rx='3' fill='%23DB9F6E'/><rect x='339.0' y='1.5' width='26.9' height='26.1' rx='3' fill='%238DBA9A'/><rect x='339.0' y='30.6' width='26.9' height='20.4' rx='3' fill='%238DBA9A'/><rect x='339.0' y='54.1' width='26.9' height='17.4' rx='3' fill='%238DBA9A'/><rect x='368.9' y='1.5' width='29.6' height='70.0' rx='3' fill='%23C6B47B'/><rect x='252.8' y='74.5' width='48.8' height='39.3' rx='3' fill='%23D2806F'/><rect x='252.8' y='116.8' width='48.8' height='31.7' rx='3' fill='%238DBA9A'/><rect x='304.6' y='74.5' width='30.2' height='40.5' rx='3' fill='%238DBA9A'/><rect x='304.6' y='118.0' width='30.2' height='30.5' rx='3' fill='%23C6B47B'/><rect x='337.7' y='74.5' width='29.0' height='28.9' rx='3' fill='%238DBA9A'/><rect x='369.7' y='74.5' width='28.8' height='28.9' rx='3' fill='%23D2806F'/><rect x='337.7' y='106.4' width='41.5' height='19.8' rx='3' fill='%23C6B47B'/><rect x='337.7' y='129.2' width='41.5' height='19.3' rx='3' fill='%23DB9F6E'/><rect x='382.2' y='106.4' width='16.3' height='42.1' rx='3' fill='%238DBA9A'/><rect width='400' height='150' fill='url(%23s)'/></svg>")}
.blog-card:nth-last-child(12n+3)::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 150' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23fff' stop-opacity='.22'/><stop offset='.55' stop-color='%23fff' stop-opacity='0'/><stop offset='1' stop-color='%23000' stop-opacity='.06'/></linearGradient></defs><rect width='400' height='150' fill='%23FFFFFF'/><rect x='1.5' y='1.5' width='44.4' height='61.6' rx='3' fill='%23DB9F6E'/><rect x='48.9' y='1.5' width='39.4' height='61.6' rx='3' fill='%23DB9F6E'/><rect x='1.5' y='66.1' width='47.6' height='45.9' rx='3' fill='%23DB9F6E'/><rect x='1.5' y='115.0' width='47.6' height='33.5' rx='3' fill='%23DB9F6E'/><rect x='52.1' y='66.1' width='36.1' height='40.3' rx='3' fill='%23C6B47B'/><rect x='52.1' y='109.4' width='36.1' height='39.1' rx='3' fill='%23C6B47B'/><rect x='91.3' y='1.5' width='34.9' height='56.8' rx='3' fill='%23C6B47B'/><rect x='129.2' y='1.5' width='31.5' height='56.8' rx='3' fill='%23C6B47B'/><rect x='91.3' y='61.3' width='69.3' height='21.7' rx='3' fill='%23C6B47B'/><rect x='91.3' y='86.0' width='34.0' height='43.7' rx='3' fill='%238DBA9A'/><rect x='91.3' y='132.7' width='34.0' height='15.8' rx='3' fill='%23C6B47B'/><rect x='128.3' y='86.0' width='32.4' height='15.2' rx='3' fill='%23D2806F'/><rect x='128.3' y='104.2' width='15.6' height='29.6' rx='3' fill='%23C6B47B'/><rect x='146.8' y='104.2' width='13.8' height='29.6' rx='3' fill='%23C6B47B'/><rect x='128.3' y='136.8' width='32.4' height='11.7' rx='3' fill='%23C6B47B'/><rect x='163.6' y='1.5' width='59.7' height='72.1' rx='3' fill='%23DB9F6E'/><rect x='163.6' y='76.6' width='59.7' height='71.9' rx='3' fill='%23C6B47B'/><rect x='226.4' y='1.5' width='55.8' height='75.4' rx='3' fill='%23C6B47B'/><rect x='226.4' y='79.9' width='55.8' height='68.6' rx='3' fill='%23DB9F6E'/><rect x='285.1' y='1.5' width='55.8' height='63.5' rx='3' fill='%23D2806F'/><rect x='343.9' y='1.5' width='54.6' height='63.5' rx='3' fill='%23C6B47B'/><rect x='285.1' y='68.0' width='61.6' height='44.4' rx='3' fill='%23C6B47B'/><rect x='285.1' y='115.4' width='61.6' height='33.1' rx='3' fill='%23C6B47B'/><rect x='349.7' y='68.0' width='48.8' height='40.9' rx='3' fill='%23C6B47B'/><rect x='349.7' y='112.0' width='48.8' height='36.5' rx='3' fill='%23C6B47B'/><rect width='400' height='150' fill='url(%23s)'/></svg>")}
.blog-card:nth-last-child(12n+4)::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 150' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23fff' stop-opacity='.22'/><stop offset='.55' stop-color='%23fff' stop-opacity='0'/><stop offset='1' stop-color='%23000' stop-opacity='.06'/></linearGradient></defs><rect width='400' height='150' fill='%23FFFFFF'/><rect x='1.5' y='1.5' width='157.3' height='147.0' rx='3' fill='%23DB9F6E'/><rect x='161.8' y='1.5' width='42.6' height='102.7' rx='3' fill='%23C6B47B'/><rect x='161.8' y='107.2' width='42.6' height='41.3' rx='3' fill='%23DB9F6E'/><rect x='207.4' y='1.5' width='38.9' height='43.2' rx='3' fill='%23C6B47B'/><rect x='207.4' y='47.7' width='38.9' height='30.8' rx='3' fill='%23DB9F6E'/><rect x='249.3' y='1.5' width='40.3' height='27.1' rx='3' fill='%23DB9F6E'/><rect x='249.3' y='31.6' width='18.9' height='31.6' rx='3' fill='%23DB9F6E'/><rect x='271.2' y='31.6' width='18.4' height='31.6' rx='3' fill='%23DB9F6E'/><rect x='249.3' y='66.1' width='40.3' height='12.4' rx='3' fill='%23D2806F'/><rect x='207.4' y='81.5' width='34.3' height='38.4' rx='3' fill='%23DB9F6E'/><rect x='207.4' y='122.9' width='34.3' height='25.6' rx='3' fill='%23C6B47B'/><rect x='244.6' y='81.5' width='22.0' height='36.6' rx='3' fill='%23D2806F'/><rect x='269.6' y='81.5' width='20.0' height='36.6' rx='3' fill='%23C6B47B'/><rect x='244.6' y='121.1' width='22.8' height='27.4' rx='3' fill='%23DB9F6E'/><rect x='270.4' y='121.1' width='19.2' height='27.4' rx='3' fill='%23DB9F6E'/><rect x='292.6' y='1.5' width='52.9' height='52.0' rx='3' fill='%238DBA9A'/><rect x='348.5' y='1.5' width='50.0' height='52.0' rx='3' fill='%23DB9F6E'/><rect x='292.6' y='56.5' width='36.2' height='51.2' rx='3' fill='%23D2806F'/><rect x='292.6' y='110.7' width='36.2' height='37.8' rx='3' fill='%23D2806F'/><rect x='331.8' y='56.5' width='35.6' height='33.9' rx='3' fill='%23DB9F6E'/><rect x='370.4' y='56.5' width='28.1' height='33.9' rx='3' fill='%23DB9F6E'/><rect x='331.8' y='93.4' width='32.5' height='26.1' rx='3' fill='%23DB9F6E'/><rect x='331.8' y='122.5' width='32.5' height='26.0' rx='3' fill='%23C6B47B'/><rect x='367.4' y='93.4' width='31.1' height='26.1' rx='3' fill='%23DB9F6E'/><rect x='367.4' y='122.5' width='31.1' height='26.0' rx='3' fill='%23DB9F6E'/><rect width='400' height='150' fill='url(%23s)'/></svg>")}
.blog-card:nth-last-child(12n+5)::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 150' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23fff' stop-opacity='.22'/><stop offset='.55' stop-color='%23fff' stop-opacity='0'/><stop offset='1' stop-color='%23000' stop-opacity='.06'/></linearGradient></defs><rect width='400' height='150' fill='%23FFFFFF'/><rect x='1.5' y='1.5' width='68.9' height='85.6' rx='3' fill='%23D2806F'/><rect x='73.4' y='1.5' width='63.5' height='85.6' rx='3' fill='%23D2806F'/><rect x='1.5' y='90.1' width='69.0' height='58.4' rx='3' fill='%23D2806F'/><rect x='73.5' y='90.1' width='63.3' height='58.4' rx='3' fill='%23D2806F'/><rect x='139.9' y='1.5' width='45.9' height='78.9' rx='3' fill='%2379A3DD'/><rect x='188.8' y='1.5' width='53.9' height='47.2' rx='3' fill='%238DBA9A'/><rect x='188.8' y='51.7' width='25.5' height='28.7' rx='3' fill='%23DB9F6E'/><rect x='217.3' y='51.7' width='25.5' height='28.7' rx='3' fill='%238DBA9A'/><rect x='139.9' y='83.4' width='39.8' height='65.1' rx='3' fill='%23D2806F'/><rect x='182.7' y='83.4' width='60.1' height='31.0' rx='3' fill='%238DBA9A'/><rect x='182.7' y='117.4' width='34.8' height='31.1' rx='3' fill='%2379A3DD'/><rect x='220.4' y='117.4' width='22.3' height='31.1' rx='3' fill='%2379A3DD'/><rect x='245.8' y='1.5' width='54.6' height='83.1' rx='3' fill='%2379A3DD'/><rect x='245.8' y='87.6' width='54.6' height='60.9' rx='3' fill='%23D2806F'/><rect x='303.4' y='1.5' width='50.2' height='62.3' rx='3' fill='%2379A3DD'/><rect x='356.6' y='1.5' width='41.9' height='62.3' rx='3' fill='%23D2806F'/><rect x='303.4' y='66.8' width='34.9' height='39.4' rx='3' fill='%2379A3DD'/><rect x='303.4' y='109.2' width='34.9' height='39.3' rx='3' fill='%23DB9F6E'/><rect x='341.3' y='66.8' width='28.2' height='42.2' rx='3' fill='%2379A3DD'/><rect x='372.4' y='66.8' width='26.1' height='42.2' rx='3' fill='%23DB9F6E'/><rect x='341.3' y='112.0' width='28.6' height='36.5' rx='3' fill='%2379A3DD'/><rect x='372.9' y='112.0' width='25.6' height='36.5' rx='3' fill='%2379A3DD'/><rect width='400' height='150' fill='url(%23s)'/></svg>")}
.blog-card:nth-last-child(12n+6)::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 150' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23fff' stop-opacity='.22'/><stop offset='.55' stop-color='%23fff' stop-opacity='0'/><stop offset='1' stop-color='%23000' stop-opacity='.06'/></linearGradient></defs><rect width='400' height='150' fill='%23FFFFFF'/><rect x='1.5' y='1.5' width='72.2' height='72.1' rx='3' fill='%2379A3DD'/><rect x='76.7' y='1.5' width='57.6' height='72.1' rx='3' fill='%2379A3DD'/><rect x='1.5' y='76.6' width='37.0' height='71.9' rx='3' fill='%23D2806F'/><rect x='41.5' y='76.6' width='66.5' height='36.9' rx='3' fill='%23D2806F'/><rect x='41.5' y='116.6' width='66.5' height='31.9' rx='3' fill='%23D2806F'/><rect x='110.9' y='76.6' width='23.4' height='71.9' rx='3' fill='%2379A3DD'/><rect x='137.3' y='1.5' width='71.0' height='46.7' rx='3' fill='%238DBA9A'/><rect x='137.3' y='51.2' width='71.0' height='40.4' rx='3' fill='%23DB9F6E'/><rect x='211.3' y='1.5' width='17.5' height='90.1' rx='3' fill='%23DB9F6E'/><rect x='137.3' y='94.6' width='91.5' height='53.9' rx='3' fill='%23D2806F'/><rect x='231.8' y='1.5' width='60.4' height='74.4' rx='3' fill='%23D2806F'/><rect x='231.8' y='78.9' width='60.4' height='69.6' rx='3' fill='%23D2806F'/><rect x='295.2' y='1.5' width='65.3' height='47.6' rx='3' fill='%23C6B47B'/><rect x='363.5' y='1.5' width='35.0' height='47.6' rx='3' fill='%23C6B47B'/><rect x='295.2' y='52.1' width='35.6' height='46.7' rx='3' fill='%238DBA9A'/><rect x='295.2' y='101.8' width='35.6' height='46.7' rx='3' fill='%23C6B47B'/><rect x='333.8' y='52.1' width='31.4' height='51.7' rx='3' fill='%238DBA9A'/><rect x='368.1' y='52.1' width='30.4' height='51.7' rx='3' fill='%238DBA9A'/><rect x='333.8' y='106.8' width='31.2' height='41.7' rx='3' fill='%23D2806F'/><rect x='367.9' y='106.8' width='30.6' height='41.7' rx='3' fill='%23DB9F6E'/><rect width='400' height='150' fill='url(%23s)'/></svg>")}
.blog-card:nth-last-child(12n+7)::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 150' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23fff' stop-opacity='.22'/><stop offset='.55' stop-color='%23fff' stop-opacity='0'/><stop offset='1' stop-color='%23000' stop-opacity='.06'/></linearGradient></defs><rect width='400' height='150' fill='%23FFFFFF'/><rect x='1.5' y='1.5' width='66.9' height='59.0' rx='3' fill='%238DBA9A'/><rect x='71.4' y='1.5' width='66.2' height='59.0' rx='3' fill='%238DBA9A'/><rect x='1.5' y='63.5' width='72.2' height='41.1' rx='3' fill='%2379A3DD'/><rect x='1.5' y='107.6' width='72.2' height='40.9' rx='3' fill='%238DBA9A'/><rect x='76.7' y='63.5' width='60.9' height='42.2' rx='3' fill='%2379A3DD'/><rect x='76.7' y='108.7' width='60.9' height='39.8' rx='3' fill='%238DBA9A'/><rect x='140.6' y='1.5' width='70.4' height='55.3' rx='3' fill='%2379A3DD'/><rect x='140.6' y='59.8' width='70.4' height='40.1' rx='3' fill='%2379A3DD'/><rect x='140.6' y='102.9' width='35.0' height='45.6' rx='3' fill='%2379A3DD'/><rect x='178.6' y='102.9' width='32.3' height='45.6' rx='3' fill='%23C6B47B'/><rect x='214.0' y='1.5' width='68.4' height='53.2' rx='3' fill='%2379A3DD'/><rect x='214.0' y='57.7' width='22.4' height='35.5' rx='3' fill='%2379A3DD'/><rect x='239.4' y='57.7' width='20.4' height='35.5' rx='3' fill='%2379A3DD'/><rect x='262.7' y='57.7' width='19.7' height='35.5' rx='3' fill='%238DBA9A'/><rect x='214.0' y='96.3' width='68.4' height='52.2' rx='3' fill='%23D2806F'/><rect x='285.4' y='1.5' width='55.3' height='60.0' rx='3' fill='%238DBA9A'/><rect x='343.7' y='1.5' width='54.8' height='60.0' rx='3' fill='%23D2806F'/><rect x='285.4' y='64.5' width='51.2' height='44.0' rx='3' fill='%238DBA9A'/><rect x='285.4' y='111.6' width='51.2' height='36.9' rx='3' fill='%238DBA9A'/><rect x='339.7' y='64.5' width='30.0' height='40.2' rx='3' fill='%2379A3DD'/><rect x='372.6' y='64.5' width='25.9' height='40.2' rx='3' fill='%238DBA9A'/><rect x='339.7' y='107.7' width='19.8' height='40.8' rx='3' fill='%2379A3DD'/><rect x='362.4' y='107.7' width='36.1' height='19.3' rx='3' fill='%238DBA9A'/><rect x='362.4' y='130.0' width='36.1' height='18.5' rx='3' fill='%2379A3DD'/><rect width='400' height='150' fill='url(%23s)'/></svg>")}
.blog-card:nth-last-child(12n+8)::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 150' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23fff' stop-opacity='.22'/><stop offset='.55' stop-color='%23fff' stop-opacity='0'/><stop offset='1' stop-color='%23000' stop-opacity='.06'/></linearGradient></defs><rect width='400' height='150' fill='%23FFFFFF'/><rect x='1.5' y='1.5' width='188.4' height='147.0' rx='3' fill='%23C6B47B'/><rect x='192.9' y='1.5' width='88.8' height='87.6' rx='3' fill='%238DBA9A'/><rect x='192.9' y='92.1' width='88.8' height='56.4' rx='3' fill='%23DB9F6E'/><rect x='284.8' y='1.5' width='68.3' height='73.3' rx='3' fill='%238DBA9A'/><rect x='284.8' y='77.8' width='68.3' height='70.7' rx='3' fill='%23C6B47B'/><rect x='356.1' y='1.5' width='42.4' height='67.5' rx='3' fill='%23C6B47B'/><rect x='356.1' y='72.0' width='42.4' height='20.4' rx='3' fill='%238DBA9A'/><rect x='356.1' y='95.4' width='21.5' height='15.0' rx='3' fill='%23C6B47B'/><rect x='380.5' y='95.4' width='18.0' height='15.0' rx='3' fill='%23C6B47B'/><rect x='356.1' y='113.4' width='12.9' height='17.5' rx='3' fill='%23DB9F6E'/><rect x='356.1' y='133.9' width='12.9' height='14.6' rx='3' fill='%238DBA9A'/><rect x='371.9' y='113.4' width='13.2' height='13.8' rx='3' fill='%23C6B47B'/><rect x='388.1' y='113.4' width='10.4' height='13.8' rx='3' fill='%23DB9F6E'/><rect x='371.9' y='130.1' width='12.5' height='8.1' rx='3' fill='%23DB9F6E'/><rect x='371.9' y='141.2' width='12.5' height='7.3' rx='3' fill='%23DB9F6E'/><rect x='387.5' y='130.1' width='11.0' height='8.3' rx='3' fill='%2379A3DD'/><rect x='387.5' y='141.5' width='11.0' height='7.0' rx='3' fill='%23C6B47B'/><rect width='400' height='150' fill='url(%23s)'/></svg>")}
.blog-card:nth-last-child(12n+9)::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 150' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23fff' stop-opacity='.22'/><stop offset='.55' stop-color='%23fff' stop-opacity='0'/><stop offset='1' stop-color='%23000' stop-opacity='.06'/></linearGradient></defs><rect width='400' height='150' fill='%23FFFFFF'/><rect x='1.5' y='1.5' width='107.8' height='75.9' rx='3' fill='%2379A3DD'/><rect x='1.5' y='80.4' width='59.0' height='68.1' rx='3' fill='%23D2806F'/><rect x='63.5' y='80.4' width='45.7' height='68.1' rx='3' fill='%23D2806F'/><rect x='112.3' y='1.5' width='37.8' height='78.8' rx='3' fill='%23D2806F'/><rect x='153.1' y='1.5' width='42.7' height='43.1' rx='3' fill='%2379A3DD'/><rect x='153.1' y='47.6' width='42.7' height='32.7' rx='3' fill='%2379A3DD'/><rect x='198.8' y='1.5' width='38.6' height='27.8' rx='3' fill='%2379A3DD'/><rect x='198.8' y='32.3' width='38.6' height='24.8' rx='3' fill='%23D2806F'/><rect x='198.8' y='60.1' width='38.6' height='20.2' rx='3' fill='%23D2806F'/><rect x='112.3' y='83.3' width='32.4' height='65.2' rx='3' fill='%23D2806F'/><rect x='147.6' y='83.3' width='52.3' height='32.9' rx='3' fill='%2379A3DD'/><rect x='147.6' y='119.3' width='52.3' height='29.2' rx='3' fill='%23C6B47B'/><rect x='202.9' y='83.3' width='34.5' height='23.4' rx='3' fill='%2379A3DD'/><rect x='202.9' y='109.7' width='34.5' height='19.5' rx='3' fill='%2379A3DD'/><rect x='202.9' y='132.2' width='34.5' height='16.3' rx='3' fill='%23DB9F6E'/><rect x='240.4' y='1.5' width='59.9' height='109.4' rx='3' fill='%23C6B47B'/><rect x='240.4' y='113.9' width='59.9' height='34.6' rx='3' fill='%23C6B47B'/><rect x='303.4' y='1.5' width='47.9' height='37.1' rx='3' fill='%2379A3DD'/><rect x='354.3' y='1.5' width='44.2' height='37.1' rx='3' fill='%23D2806F'/><rect x='303.4' y='41.6' width='46.2' height='34.9' rx='3' fill='%2379A3DD'/><rect x='352.6' y='41.6' width='45.9' height='34.9' rx='3' fill='%23D2806F'/><rect x='303.4' y='79.6' width='48.3' height='33.0' rx='3' fill='%2379A3DD'/><rect x='303.4' y='115.5' width='48.3' height='33.0' rx='3' fill='%23DB9F6E'/><rect x='354.6' y='79.6' width='43.9' height='33.9' rx='3' fill='%2379A3DD'/><rect x='354.6' y='116.4' width='43.9' height='32.1' rx='3' fill='%2379A3DD'/><rect width='400' height='150' fill='url(%23s)'/></svg>")}
.blog-card:nth-last-child(12n+10)::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 150' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23fff' stop-opacity='.22'/><stop offset='.55' stop-color='%23fff' stop-opacity='0'/><stop offset='1' stop-color='%23000' stop-opacity='.06'/></linearGradient></defs><rect width='400' height='150' fill='%23FFFFFF'/><rect x='1.5' y='1.5' width='89.0' height='77.1' rx='3' fill='%238DBA9A'/><rect x='1.5' y='81.6' width='89.0' height='66.9' rx='3' fill='%23D2806F'/><rect x='93.5' y='1.5' width='65.0' height='70.3' rx='3' fill='%23D2806F'/><rect x='93.5' y='74.8' width='65.0' height='37.1' rx='3' fill='%23D2806F'/><rect x='93.5' y='115.0' width='65.0' height='33.5' rx='3' fill='%23D2806F'/><rect x='161.6' y='1.5' width='46.6' height='54.1' rx='3' fill='%238DBA9A'/><rect x='161.6' y='58.6' width='46.6' height='24.0' rx='3' fill='%23D2806F'/><rect x='211.2' y='1.5' width='34.6' height='28.6' rx='3' fill='%238DBA9A'/><rect x='211.2' y='33.1' width='34.6' height='17.6' rx='3' fill='%238DBA9A'/><rect x='211.2' y='53.7' width='17.1' height='28.8' rx='3' fill='%238DBA9A'/><rect x='231.3' y='53.7' width='14.5' height='28.8' rx='3' fill='%238DBA9A'/><rect x='161.6' y='85.5' width='37.6' height='63.0' rx='3' fill='%23D2806F'/><rect x='202.2' y='85.5' width='43.6' height='37.2' rx='3' fill='%23D2806F'/><rect x='202.2' y='125.7' width='43.6' height='22.8' rx='3' fill='%23D2806F'/><rect x='248.8' y='1.5' width='53.8' height='49.0' rx='3' fill='%23D2806F'/><rect x='248.8' y='53.5' width='53.8' height='47.4' rx='3' fill='%238DBA9A'/><rect x='248.8' y='103.8' width='53.8' height='44.7' rx='3' fill='%238DBA9A'/><rect x='305.6' y='1.5' width='46.8' height='49.8' rx='3' fill='%23D2806F'/><rect x='355.4' y='1.5' width='43.1' height='49.8' rx='3' fill='%23D2806F'/><rect x='305.6' y='54.3' width='50.8' height='41.6' rx='3' fill='%238DBA9A'/><rect x='359.4' y='54.3' width='39.1' height='41.6' rx='3' fill='%238DBA9A'/><rect x='305.6' y='98.9' width='32.5' height='49.6' rx='3' fill='%23C6B47B'/><rect x='341.1' y='98.9' width='28.3' height='49.6' rx='3' fill='%238DBA9A'/><rect x='372.3' y='98.9' width='26.2' height='49.6' rx='3' fill='%23DB9F6E'/><rect width='400' height='150' fill='url(%23s)'/></svg>")}
.blog-card:nth-last-child(12n+11)::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 150' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23fff' stop-opacity='.22'/><stop offset='.55' stop-color='%23fff' stop-opacity='0'/><stop offset='1' stop-color='%23000' stop-opacity='.06'/></linearGradient></defs><rect width='400' height='150' fill='%23FFFFFF'/><rect x='1.5' y='1.5' width='105.8' height='53.2' rx='3' fill='%23C6B47B'/><rect x='1.5' y='57.7' width='55.5' height='90.8' rx='3' fill='%2379A3DD'/><rect x='60.0' y='57.7' width='47.2' height='90.8' rx='3' fill='%2379A3DD'/><rect x='110.3' y='1.5' width='80.8' height='64.0' rx='3' fill='%2379A3DD'/><rect x='110.3' y='68.5' width='46.0' height='42.9' rx='3' fill='%23C6B47B'/><rect x='110.3' y='114.4' width='46.0' height='34.1' rx='3' fill='%238DBA9A'/><rect x='159.3' y='68.5' width='31.8' height='40.4' rx='3' fill='%23C6B47B'/><rect x='159.3' y='111.9' width='31.8' height='23.3' rx='3' fill='%23C6B47B'/><rect x='159.3' y='138.2' width='31.8' height='10.3' rx='3' fill='%23C6B47B'/><rect x='194.1' y='1.5' width='37.1' height='73.1' rx='3' fill='%2379A3DD'/><rect x='234.2' y='1.5' width='43.4' height='23.6' rx='3' fill='%238DBA9A'/><rect x='234.2' y='28.1' width='43.4' height='22.7' rx='3' fill='%23C6B47B'/><rect x='234.2' y='53.7' width='43.4' height='20.9' rx='3' fill='%2379A3DD'/><rect x='194.1' y='77.6' width='83.5' height='70.9' rx='3' fill='%238DBA9A'/><rect x='280.6' y='1.5' width='60.8' height='40.8' rx='3' fill='%2379A3DD'/><rect x='344.4' y='1.5' width='54.1' height='40.8' rx='3' fill='%23C6B47B'/><rect x='280.6' y='45.3' width='38.3' height='51.3' rx='3' fill='%238DBA9A'/><rect x='280.6' y='99.5' width='38.3' height='49.0' rx='3' fill='%23C6B47B'/><rect x='321.9' y='45.3' width='37.9' height='44.4' rx='3' fill='%23D2806F'/><rect x='362.8' y='45.3' width='35.7' height='44.4' rx='3' fill='%238DBA9A'/><rect x='321.9' y='92.7' width='27.3' height='55.8' rx='3' fill='%238DBA9A'/><rect x='352.2' y='92.7' width='46.3' height='26.9' rx='3' fill='%238DBA9A'/><rect x='352.2' y='122.6' width='46.3' height='25.9' rx='3' fill='%23C6B47B'/><rect width='400' height='150' fill='url(%23s)'/></svg>")}
.blog-card:nth-last-child(12n)::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 150' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23fff' stop-opacity='.22'/><stop offset='.55' stop-color='%23fff' stop-opacity='0'/><stop offset='1' stop-color='%23000' stop-opacity='.06'/></linearGradient></defs><rect width='400' height='150' fill='%23FFFFFF'/><rect x='1.5' y='1.5' width='74.7' height='87.3' rx='3' fill='%2379A3DD'/><rect x='79.2' y='1.5' width='65.7' height='87.3' rx='3' fill='%23DB9F6E'/><rect x='1.5' y='91.8' width='86.7' height='56.7' rx='3' fill='%23DB9F6E'/><rect x='91.2' y='91.8' width='53.7' height='56.7' rx='3' fill='%23D2806F'/><rect x='147.9' y='1.5' width='80.7' height='49.1' rx='3' fill='%238DBA9A'/><rect x='147.9' y='53.6' width='58.4' height='41.3' rx='3' fill='%23DB9F6E'/><rect x='209.3' y='53.6' width='19.3' height='41.3' rx='3' fill='%23C6B47B'/><rect x='147.9' y='97.9' width='80.7' height='50.6' rx='3' fill='%238DBA9A'/><rect x='231.6' y='1.5' width='61.3' height='57.9' rx='3' fill='%23D2806F'/><rect x='231.6' y='62.4' width='61.3' height='44.3' rx='3' fill='%23D2806F'/><rect x='231.6' y='109.6' width='61.3' height='38.9' rx='3' fill='%2379A3DD'/><rect x='295.9' y='1.5' width='50.5' height='46.8' rx='3' fill='%2379A3DD'/><rect x='349.5' y='1.5' width='49.0' height='46.8' rx='3' fill='%23DB9F6E'/><rect x='295.9' y='51.3' width='43.1' height='52.1' rx='3' fill='%23D2806F'/><rect x='295.9' y='106.5' width='43.1' height='42.0' rx='3' fill='%23D2806F'/><rect x='342.0' y='51.3' width='56.5' height='31.2' rx='3' fill='%23DB9F6E'/><rect x='342.0' y='85.5' width='56.5' height='30.4' rx='3' fill='%23D2806F'/><rect x='342.0' y='118.9' width='56.5' height='29.6' rx='3' fill='%23DB9F6E'/><rect width='400' height='150' fill='url(%23s)'/></svg>")}
/* BLOG-ART:END */

/* 8. Content pages (changelog, press, support, privacy, terms, age rating, comparison) */
.content{max-width:768px;margin:0 auto;padding:72px 24px 96px}
.content>h1{font-size:clamp(36px,5vw,52px);line-height:1.08;letter-spacing:-.03em;margin-bottom:12px}
.content h2{font-size:28px;line-height:1.2;letter-spacing:-.02em;margin:48px 0 14px}
.content h3{font-size:21px;margin:30px 0 10px}
.content p,.content li{font-size:19px;line-height:1.7;color:#3A3A3F}
.content p{margin-bottom:18px}
.content ul,.content ol{padding-left:24px;margin:0 0 20px}
.content li{margin-bottom:8px}
.content strong{color:var(--ink)}
.content small{font-size:15px;font-weight:400;color:var(--ink2)}
.updated{font-size:15px;color:var(--ink2);margin-bottom:28px}
.release{padding:28px 0;border-top:1px solid var(--line)}
.release:first-of-type{border-top:0}
.release h2{margin-top:0}
.facts,.highlight-box,.apple-eula-box,.requirements{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:24px 26px;margin:28px 0}
.highlight-box{background:var(--tint);border-color:rgba(14,124,134,.18)}
.facts>h2:first-child,.facts>h3:first-child,.contact-info h3{margin-top:0}
.content blockquote{border-left:3px solid var(--accent);padding:4px 0 4px 20px;margin:0 0 22px;color:var(--ink)}
.content blockquote p{color:var(--ink)}
.facts p:last-child,.highlight-box p:last-child,.apple-eula-box p:last-child{margin-bottom:0}
.section-divider{border:0;border-top:1px solid var(--line);margin:40px 0}
.compare-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:18px;background:#fff;margin:24px 0}
.compare-table{width:100%;min-width:560px;border-collapse:collapse;font-size:16px}
.compare-table th,.compare-table td{padding:13px 18px;border-bottom:1px solid var(--line);text-align:left}
.compare-table tr:last-child th,.compare-table tr:last-child td{border-bottom:0}
.compare-table thead th{font-size:14px;color:var(--ink2);font-weight:600}
.compare-table th:first-child,.compare-table td:first-child{position:sticky;left:0;background:#fff}
.cta{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;margin:40px 0;text-align:center}
.cta h2,.cta h3{margin-top:0}
.contact-card{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 24px;margin:20px 0}
.contact-icon{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:var(--tint);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:20px}
.contact-info p{margin-bottom:6px}
.faq-item{border-bottom:1px solid var(--line);padding:18px 0}
.faq-q{font-size:19px;font-weight:600;color:var(--ink);cursor:pointer;background:none;border:0;text-align:left;width:100%;font-family:inherit}
.faq-a{margin-top:10px;color:#3A3A3F}
.req-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:16px 0}
.req-item{display:flex;gap:10px;align-items:center;font-size:17px}
.req-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.eml{font-family:var(--mono);font-size:.92em}
.sub{color:var(--ink2)}

/* 9. Research post (treemap vs sunburst) */
body>article{max-width:808px;margin:0 auto;padding:72px 24px 96px}
body>article>.article-header h1{font-size:clamp(34px,5vw,52px);line-height:1.08;letter-spacing:-.03em}
body>article>.article-header .subtitle{margin-top:16px;font-size:21px;line-height:1.5}
body>article .content{padding:0;max-width:none}
.container{max-width:808px;margin:0 auto;padding:0 24px}
article .content,.container .content{padding-top:0}
.diagram{background:#0F1012;border-radius:16px;padding:24px;margin:32px 0;text-align:center}
.diagram img,.diagram svg{display:block;max-width:100%;height:auto;margin:0 auto;cursor:zoom-in}
.diagram .diagram-caption,.diagram-caption{margin:12px 0 0;font-size:15px;line-height:1.5;color:#A1A1A6;text-align:center}
.toc{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:20px 24px;margin:28px 0}
.toc ul,.toc ol{margin-bottom:0;padding-left:22px}
.part-divider{border:0;border-top:1px solid var(--line);margin:56px 0}
.cta-box{background:#fff;border:1px solid var(--line);border-radius:20px;padding:36px 32px;margin:48px 0;text-align:center}
.cta-box h2,.cta-box h3{margin-top:0}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.86);display:none;align-items:center;justify-content:center;z-index:100;padding:24px}
.lightbox.active,.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:100%}
.lightbox-close{position:absolute;top:16px;right:20px;background:none;border:0;color:#fff;font-size:32px;cursor:pointer}
.tag{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.subtitle{color:var(--ink2)}

/* 10. Phones */
@media (max-width:820px){
  body{font-size:17px}
  .nav-links{display:none;position:absolute;top:52px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 0 16px}
  .nav-links.open,html:not(.js) .nav-links{display:flex}
  html:not(.js) .nav{position:static}
  html:not(.js) .nav-inner{height:auto;min-height:52px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  html:not(.js) .nav-links{position:static;width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 16px;padding:8px 0 0;border:0;background:none}
  .nav-links a{display:block;padding:12px 24px;font-size:17px;opacity:1}
  html:not(.js) .nav-links a{padding:6px 0;font-size:15px}
  html:not(.js) .nav-links a.nav-cta{padding:6px 14px;margin:0}
  .nav-links a.nav-cta{margin:8px 24px 0;text-align:center;padding:12px}
  .nav-burger{display:block}
  html:not(.js) .nav-burger{display:none}
  .article-page,.content{padding:48px 20px 72px}
  body>article{padding:48px 20px 72px}
  body>article .content{padding:0}
  .article-subtitle{font-size:18px}
  .article-body h2{font-size:26px;margin-top:44px}
  .article-body h3{font-size:20px}
  .article-body p,.article-body li,.content p,.content li{font-size:17px}
  .article-body figure img{border-radius:10px}
  .article-cta,.article-cta+.article-cta{padding-left:20px;padding-right:20px}
  .article-cta-inner{padding:32px 20px}
  .content h2{font-size:24px}
  body>header{padding:64px 20px 44px}
  body>header::before{opacity:.3;background-size:auto 140%;background-position:38% 0}
  body>header::after{background:radial-gradient(ellipse 85% 62% at 50% 52%,var(--bg) 0%,rgba(251,251,253,.94) 55%,rgba(251,251,253,0) 100%),linear-gradient(180deg,rgba(251,251,253,0) 60%,var(--bg) 100%)}
  .blog-card::before{height:108px}
  body>header .subtitle{font-size:18px}
  .blog-grid{grid-template-columns:1fr;padding:0 20px 80px}
  .req-grid{grid-template-columns:1fr}
  .contact-card{padding:18px}
}