/* Atlas blog post — shared styling for all posts.
   Single source of truth: edit here, every post updates. Mirrors the site's
   True Night dark mode + dawn background. */
:root{
  --paper:#F8FBFD; --ocean-top:#F0F5FA;
  --ink-1:#0E1B33; --ink-2:#4A5C7A; --ink-3:#8C9CB5; --ink-4:#BFCCDB;
  --accent:#3D7DBE; --accent-deep:#2A5A8B; --accent-glow:#5EB8E8; --accent-soft:rgba(61,125,190,.10);
  --sage:#5EA68A; --amber:#D89B3F; --warning:#C7382E;
  --card:#FFFFFF; --hairline:rgba(13,27,51,.10); --hairline-soft:rgba(13,27,51,.06);
  --shadow-tight:0 4px 14px rgba(13,27,51,.06); --shadow-soft:0 18px 40px rgba(13,27,51,.10);
  --leather:#6C849C; --paper-band:#C4D4E4; --page-edges:#EADFC8;
  --serif:"Fraunces","New York",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme: dark){
  /* True Night - matches the app's Theme.swift dark tokens. */
  :root{
    --paper:#0A1420; --ocean-top:#11202F;
    --ink-1:#F0F4F9; --ink-2:#C8D4E3; --ink-3:#8A99AB; --ink-4:#5E6C7E;
    --accent:#2F63CC; --accent-deep:#1A428F; --accent-glow:#4F7FE6; --accent-soft:rgba(47,99,204,.22);
    --card:#18212F; --card-solid:#1C2636; --hairline:rgba(255,255,255,.10); --hairline-soft:rgba(255,255,255,.06);
    --shadow-tight:0 4px 14px rgba(0,0,0,.45); --shadow-soft:0 18px 40px rgba(0,0,0,.45);
  }
  body a{ color:var(--accent-glow); }
  body .article a{ color:var(--accent-glow); border-bottom-color:rgba(79,127,230,.35); }
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}

body{
  margin:0; font-family:var(--sans); color:var(--ink-2); line-height:1.65; position:relative;
  background-color:var(--paper); background-repeat:no-repeat;
  background-image:
    radial-gradient(ellipse 900px 520px at 50% -40px, rgba(95,184,232,.16), transparent 60%),
    radial-gradient(ellipse 760px 420px at 82% 24px, rgba(247,196,108,.07), transparent 58%),
    linear-gradient(180deg,
      #0E1B33 0px, #15243C 120px, #1F3251 220px, #2C4163 315px, #3C5274 400px,
      #4F6688 480px, #647B9C 555px, #8398B3 625px, #A7BACF 690px, #CCD9E8 745px,
      var(--paper) 810px);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
@media (prefers-color-scheme: dark){
  body{ background-image:
    radial-gradient(ellipse 900px 520px at 50% -40px, rgba(95,184,232,.14), transparent 60%),
    linear-gradient(180deg, #080E18 0px, #0C1422 280px, #0F1B2D 560px, var(--paper) 880px); }
}
.starfield{position:absolute; top:0; left:0; right:0; height:740px; pointer-events:none; z-index:0; overflow:hidden;}
.star{position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; opacity:.55;}
.star.lg{width:3px; height:3px;}
@keyframes twinkle{0%,100%{opacity:.55;}50%{opacity:.2;}}
@media (prefers-reduced-motion: no-preference){ .star.tw{animation:twinkle 4.2s ease-in-out infinite;} }

a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}

.brand-icon{display:inline-block; width:24px; height:24px; border-radius:6.5px; background:linear-gradient(180deg,var(--leather) 0%,#5b7388 100%); position:relative; box-shadow:0 1px 3px rgba(13,27,51,.2), inset 0 1px 0 rgba(255,255,255,.2); flex-shrink:0;}
.brand-icon::before{content:''; position:absolute; left:6%; right:6%; top:40%; bottom:40%; background:var(--paper-band); border-radius:1px;}
.brand-icon::after{content:''; position:absolute; left:8%; right:8%; bottom:4%; height:12%; background:var(--page-edges); border-radius:1px;}
.topnav{position:relative; z-index:3; display:flex; align-items:center; gap:clamp(18px,2.4vw,40px); padding:clamp(16px,2vh,30px) clamp(16px,3vw,44px);}
.topnav-brand{display:flex; align-items:center; gap:clamp(9px,.9vw,14px); text-decoration:none; flex-shrink:0;}
.topnav-brand:hover{text-decoration:none;}
.topnav-brand .brand-icon{width:clamp(30px,2.3vw,38px); height:clamp(30px,2.3vw,38px); border-radius:clamp(8px,.62vw,10px); box-shadow:0 2px 5px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.25);}
.topnav-name{font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(22px,1.7vw,30px); color:#fff; letter-spacing:-.012em;}
.topnav-links{display:flex; gap:clamp(18px,1.9vw,32px); margin-left:clamp(4px,.7vw,12px);}
.topnav-links a{font-size:clamp(14.5px,1.05vw,17px); font-weight:500; color:rgba(255,255,255,.8); text-decoration:none; white-space:nowrap; transition:color .15s;}
.topnav-links a:hover{color:#fff; text-decoration:none;}
.topnav-links a.current{color:#fff;}
.topnav-actions{margin-left:auto; display:flex; align-items:center; gap:clamp(10px,1vw,18px); flex-shrink:0;}
.mac-badge{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:clamp(10px,.92vw,13.5px) clamp(16px,1.4vw,24px); min-width:clamp(196px,16vw,236px); border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); color:rgba(255,255,255,.92); font-size:clamp(14px,1vw,16.5px); font-weight:500; white-space:nowrap; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
.mac-badge .apple-mark{width:clamp(12px,.85vw,14px); height:auto; fill:currentColor; opacity:.95; margin-top:-2px;}

@property --bg-ang{syntax:'<angle>'; initial-value:0deg; inherits:false;}
.buy-group{position:relative; display:inline-flex; align-items:center; gap:2px; padding:clamp(4px,.35vw,6px); background:#fff; border-radius:999px; box-shadow:0 10px 28px rgba(8,14,24,.3);}
.buy-group::before{content:''; position:absolute; inset:-1.5px; border-radius:inherit; padding:1.5px; background:conic-gradient(from var(--bg-ang), rgba(255,255,255,.16) 0deg, rgba(255,255,255,.16) 232deg, rgba(255,255,255,.95) 286deg, rgba(255,255,255,.16) 332deg, rgba(255,255,255,.16) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; filter:drop-shadow(0 0 3px rgba(255,255,255,.45)); pointer-events:none; z-index:4; animation:bgBorderLight 4.5s linear infinite;}
@keyframes bgBorderLight{to{--bg-ang:360deg;}}
@media (prefers-reduced-motion: reduce){ .buy-group::before{animation:none;} }
.bg-btn{border-radius:999px; font-family:var(--sans); font-size:clamp(14px,1vw,16.5px); font-weight:600; white-space:nowrap; padding:clamp(9px,.85vw,12px) clamp(15px,1.35vw,22px); transition:background .15s, transform .15s, box-shadow .15s; cursor:pointer; border:0; line-height:1.1;}
.bg-download{color:#16243C; background:transparent;} .bg-download:hover{background:rgba(13,27,51,.06); text-decoration:none;}
.bg-remind{display:none; color:#16243C; background:transparent; align-items:center;} .bg-remind:hover{background:rgba(13,27,51,.06); text-decoration:none;}
.bg-divider{width:1px; align-self:stretch; margin:clamp(5px,.5vw,8px) 2px; background:rgba(13,27,51,.12);}
.bg-buy{color:#fff; background:linear-gradient(180deg,var(--accent-glow),var(--accent)); box-shadow:0 3px 10px rgba(61,125,190,.4), inset 0 1px 0 rgba(255,255,255,.28);}
.bg-buy:hover{transform:translateY(-1px); text-decoration:none; box-shadow:0 6px 16px rgba(61,125,190,.48), inset 0 1px 0 rgba(255,255,255,.28);}

.post-hero{position:relative; z-index:3; max-width:760px; margin:0 auto; text-align:center; padding:clamp(30px,5vh,60px) clamp(20px,5vw,40px) clamp(60px,10vh,108px);}
.cat-pill{display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#BFE0F4; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); padding:6px 14px; border-radius:999px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); margin:0 0 22px;}
.post-hero h1{font-family:var(--serif); font-weight:400; font-size:clamp(34px,5.6vw,56px); line-height:1.05; letter-spacing:-.02em; color:#fff; margin:0 auto 22px; max-width:18ch; text-wrap:balance;}
.post-hero h1 em{font-style:italic; color:#BFE0F4;}
.post-meta{display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; font-size:13.5px; color:rgba(255,255,255,.66);}
.post-meta .dot{opacity:.5;}
.post-deck{color:rgba(255,255,255,.84); font-size:clamp(16.5px,1.9vw,19px); line-height:1.6; max-width:58ch; margin:26px auto 0; text-wrap:pretty;}

.article{position:relative; z-index:2; max-width:720px; margin:0 auto; padding:0 clamp(20px,5vw,40px) 40px;}
.article .lead{font-size:clamp(18px,2vw,21px); line-height:1.6; color:var(--ink-1); margin:0 0 26px; text-wrap:pretty;}
.article p{font-size:17px; line-height:1.75; color:var(--ink-2); margin:0 0 20px; text-wrap:pretty;}
.article h2{font-family:var(--serif); font-weight:500; font-style:italic; font-size:clamp(24px,3vw,30px); letter-spacing:-.01em; color:var(--ink-1); margin:46px 0 14px; text-wrap:balance;}
.article h3{font-weight:700; font-size:18px; color:var(--ink-1); margin:30px 0 8px;}
.article a{color:var(--accent); border-bottom:1px solid rgba(61,125,190,.32);}
.article a:hover{border-bottom-color:currentColor; text-decoration:none;}
.article strong{color:var(--ink-1); font-weight:600;}
.article ul, .article ol{padding-left:22px; margin:0 0 22px;}
.article li{font-size:17px; line-height:1.7; color:var(--ink-2); margin:9px 0;}
.article ol{counter-reset:step; list-style:none; padding-left:0;}
.article ol li{position:relative; padding-left:44px; margin:14px 0;}
.article ol li::before{counter-increment:step; content:counter(step); position:absolute; left:0; top:-1px; width:28px; height:28px; border-radius:50%; background:var(--accent-soft); border:1px solid rgba(61,125,190,.28); color:var(--accent); font-weight:700; font-size:14px; display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums;}

.keyfact{margin:24px 0; padding:20px 22px; border-radius:16px; background:var(--accent-soft); border:1px solid rgba(61,125,190,.28);}
.keyfact p{margin:0; font-size:16.5px; line-height:1.65; color:var(--ink-1);}
.keyfact b{font-weight:700;}

.ttable{width:100%; border-collapse:collapse; margin:24px 0; font-size:15.5px; background:var(--card); border:1px solid var(--hairline); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-tight);}
.ttable th, .ttable td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--hairline-soft);}
.ttable th{font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); background:var(--accent-soft);}
.ttable td{color:var(--ink-2);} .ttable td:first-child{color:var(--ink-1); font-weight:600;}
.ttable tr:last-child td{border-bottom:none;}

.callout{display:flex; gap:14px; margin:26px 0; padding:18px 20px; border-radius:16px; background:var(--card); border:1px solid var(--hairline); box-shadow:var(--shadow-tight);}
.callout .ic{flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;}
.callout .bd{flex:1; min-width:0;}
.callout .bd b{display:block; color:var(--ink-1); font-size:15px; margin-bottom:3px;}
.callout .bd p{margin:0; font-size:15px; line-height:1.6; color:var(--ink-2);}
.callout.tip{background:rgba(94,166,138,.10); border-color:rgba(94,166,138,.30);}
.callout.tip .ic{background:rgba(94,166,138,.18); color:var(--sage);}
.callout.warn{background:rgba(216,155,63,.10); border-color:rgba(216,155,63,.30);}
.callout.warn .ic{background:rgba(216,155,63,.18); color:var(--amber);}

.faq{margin:40px 0 8px;}
.faq h2{margin-bottom:8px;}
.faq details{border-top:1px solid var(--hairline); padding:4px 0;}
.faq details summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 2px; font-weight:600; font-size:16.5px; color:var(--ink-1);}
.faq details summary::-webkit-details-marker{display:none;}
.faq details summary .pm{flex:0 0 auto; width:22px; height:22px; position:relative; transition:transform .25s var(--ease-out);}
.faq details summary .pm::before, .faq details summary .pm::after{content:''; position:absolute; background:var(--accent); border-radius:2px;}
.faq details summary .pm::before{left:4px; right:4px; top:10px; height:2px;}
.faq details summary .pm::after{top:4px; bottom:4px; left:10px; width:2px; transition:opacity .25s;}
.faq details[open] summary .pm::after{opacity:0;}
.faq details .ans{padding:0 2px 18px; font-size:16px; line-height:1.7; color:var(--ink-2);}

.cta{margin:46px 0 8px; padding:34px 32px; border-radius:22px; text-align:center; color:#fff; position:relative; overflow:hidden;
  background:radial-gradient(120% 140% at 80% -10%, rgba(95,184,232,.5), transparent 60%), linear-gradient(180deg, #1B3050, #0E1B33);
  box-shadow:var(--shadow-soft);}
.cta h2{font-family:var(--serif); font-style:normal; font-weight:400; font-size:clamp(24px,3vw,32px); color:#fff; margin:0 0 8px; letter-spacing:-.01em;}
.cta p{color:rgba(255,255,255,.76); font-size:16px; margin:0 0 22px;}
.cta .cta-btn{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:16px; color:#102038; background:#fff; padding:13px 26px; border-radius:999px; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 12px 30px rgba(6,12,22,.4);}
.cta .cta-btn:hover{transform:translateY(-1px); text-decoration:none;}
.cta-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.cta .cta-btn.ghost{background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.32); color:#fff; box-shadow:none;}
.cta .cta-btn.ghost:hover{background:rgba(255,255,255,.18);}
.cta .cta-note{display:block; margin-top:14px; font-size:13px; color:rgba(255,255,255,.55);}

/* Author / E-E-A-T bio box (team persona) */
.authorbox{display:flex; gap:14px; align-items:flex-start; margin:40px 0 0; padding:20px 22px; border-radius:16px; background:var(--card); border:1px solid var(--hairline); box-shadow:var(--shadow-tight);}
.authorbox .ab-mark{flex:0 0 auto; width:40px; height:40px; border-radius:10px; background:linear-gradient(180deg,var(--leather) 0%,#5b7388 100%); position:relative; box-shadow:0 1px 3px rgba(13,27,51,.2), inset 0 1px 0 rgba(255,255,255,.2);}
.authorbox .ab-mark::before{content:''; position:absolute; left:6%; right:6%; top:40%; bottom:40%; background:var(--paper-band); border-radius:1px;}
.authorbox .ab-mark::after{content:''; position:absolute; left:8%; right:8%; bottom:4%; height:12%; background:var(--page-edges); border-radius:1px;}
.authorbox b{display:block; color:var(--ink-1); font-size:15px; margin-bottom:3px;}
.authorbox p{margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-2);}

.back-wrap{text-align:center; margin-top:44px;}
.back-btn{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:15px; color:var(--ink-1); background:var(--card); border:1px solid var(--hairline); padding:12px 24px; border-radius:999px; box-shadow:var(--shadow-tight); transition:transform .15s var(--ease-out), border-color .2s, box-shadow .2s;}
.back-btn:hover{transform:translateY(-2px); text-decoration:none; border-color:rgba(61,125,190,.4); box-shadow:var(--shadow-soft);}
.back-btn svg{color:var(--accent);}

/* Blog card grid + hub pages (cluster hubs reuse this) */
.hub-intro{position:relative; z-index:2; max-width:760px; margin:0 auto; padding:0 clamp(20px,5vw,40px) clamp(18px,3vh,30px);}
.hub-intro .lead{font-size:clamp(17px,1.9vw,20px); line-height:1.6; color:var(--ink-2); text-wrap:pretty; margin:0;}
.hub-wrap{position:relative; z-index:2; max-width:1140px; margin:0 auto; padding:0 clamp(20px,4vw,32px) 20px;}
.hub-count{display:block; text-align:center; font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 22px;}
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.post-card{display:flex; flex-direction:column; padding:22px 22px 20px; border-radius:18px; background:var(--card); border:1px solid var(--hairline); box-shadow:var(--shadow-tight); transition:transform .15s var(--ease-out), box-shadow .2s, border-color .2s; color:inherit; text-decoration:none;}
.post-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-soft); border-color:rgba(61,125,190,.3); text-decoration:none;}
.pc-pill{align-self:flex-start; font-weight:600; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); background:var(--accent-soft); border:1px solid rgba(61,125,190,.2); padding:4px 10px; border-radius:999px; margin-bottom:14px;}
.pc-title{font-family:var(--serif); font-weight:500; font-size:20px; line-height:1.18; letter-spacing:-.01em; color:var(--ink-1); margin:0 0 9px; text-wrap:balance;}
.pc-excerpt{font-size:14.5px; line-height:1.6; color:var(--ink-2); margin:0 0 16px; flex:1;}
.pc-meta{font-size:12.5px; color:var(--ink-3); display:flex; gap:8px; align-items:center;}
.pc-meta .dot{opacity:.5;}
@media (max-width:820px){ .posts{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .posts{grid-template-columns:1fr;} }

.site-footer{position:relative; z-index:2; background:transparent; border-top:none; color:var(--ink-3); font-size:13px; padding:clamp(28px,5vh,56px) clamp(24px,5vw,48px) clamp(40px,6vh,60px);}
.footer-inner{max-width:1120px; margin:0 auto;}
.footer-main{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(28px,4vw,48px); padding:0 0 40px; text-align:left;}
.footer-brand{display:inline-flex; align-items:center; gap:9px; font-family:var(--serif); font-style:italic; font-size:19px; color:var(--ink-1);}
.footer-brand:hover{text-decoration:none;}
.footer-brand .brand-icon{width:22px; height:22px; border-radius:6px;}
.footer-tag{font-family:var(--serif); font-style:italic; font-size:15px; color:var(--ink-2); margin:14px 0 0; line-height:1.45; max-width:30ch;}
.footer-coord{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:10px; letter-spacing:.06em; color:var(--ink-3); margin:16px 0 0;}
.footer-col h4{font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); margin:0 0 16px;}
.footer-col a{display:block; font-family:var(--sans); font-size:14px; color:var(--ink-2); margin-bottom:11px; width:fit-content; transition:color .2s, transform .2s;}
.footer-col a:hover{color:var(--ink-1); text-decoration:none; transform:translateX(2px);}
.footer-bottom{display:flex; flex-direction:column; align-items:center; gap:12px; padding-top:30px; border-top:1px solid var(--hairline-soft); text-align:center;}
.footer-credit{margin:0; font-size:12.5px; color:var(--ink-3);}

@media (max-width:900px){ .footer-main{grid-template-columns:repeat(3,1fr);} .footer-brandcol{grid-column:1/-1;} .footer-tag{max-width:42ch;} }
@media (max-width:560px){ .footer-brandcol{display:none;} .footer-main{grid-template-columns:repeat(3,1fr); gap:26px 10px;} .footer-col h4{font-size:9.5px;} .footer-col a{font-size:13px;} .ttable{font-size:14px;} .ttable th,.ttable td{padding:10px 12px;} }
@media (max-width:880px){
  .topnav{justify-content:space-between; padding:14px 16px; gap:10px;}
  .topnav-links, .topnav .mac-badge{display:none !important;}
  .buy-group .bg-download{display:none !important;}
  .buy-group .bg-divider{display:none !important;}
  .topnav .buy-group .bg-divider{display:inline-block !important;}
  .topnav .buy-group .bg-remind{display:inline-flex !important;}
  .topnav .buy-group .bg-btn{padding:9px 14px; font-size:13.5px;}
}