/* iStitchAds: sky, navy and a red thread. The thread is decoration and button fill; red TEXT uses --thread-text for contrast. */
@font-face{
  font-family:"Bricolage Grotesque"; src:url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight:200 800; font-stretch:75% 100%; font-style:normal; font-display:swap;
}
:root{
  --sky:#D6ECF8; --cloud:#FFFFFF; --navy:#102A43; --slate:#3B5570; --rule:#B7D3E4;
  --thread:#E8403D; --thread-text:#B72B28; --thread-btn:#C9322F; --ok:#1B6B3A;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,"Liberation Mono",monospace;
  --wide:min(64rem,100% - 2.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--sky); color:var(--navy); font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:1.0625rem; line-height:1.6; min-height:100vh; display:flex; flex-direction:column}
main{flex:1; padding-bottom:3.5rem}
main:focus{outline:none}
.wrap{width:var(--wide); margin-inline:auto}
a{color:var(--navy); text-decoration-color:var(--thread); text-decoration-thickness:2px; text-underline-offset:3px}
a:hover{color:var(--thread-text)}
:focus-visible{outline:3px solid var(--thread-text); outline-offset:3px; border-radius:3px}
.skip{position:absolute; left:1rem; top:-4rem; z-index:10; background:var(--navy); color:#fff; padding:.7rem 1rem; border-radius:0 0 10px 10px}
.skip:focus{top:0; color:#fff}

h1,h2,h3{letter-spacing:-.025em; line-height:1.05; margin:0 0 .6rem}
h1{font-weight:800; font-size:clamp(2.4rem,7.4vw,5rem); max-width:14ch}
h2{font-weight:800; font-size:clamp(1.55rem,3.8vw,2.2rem); margin-top:3rem}
h3{font-weight:700; font-size:1.2rem; letter-spacing:-.01em; line-height:1.2}
p{margin:0 0 1rem; max-width:42rem}
ul,ol{padding-left:1.25rem; max-width:42rem}
li{margin-bottom:.4rem}
.lead{font-size:clamp(1.12rem,2.3vw,1.3rem); max-width:38rem}
.muted{color:var(--slate)}

.site-header .bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.25rem 1.5rem; padding-block:1rem}
.wordmark{font-weight:800; font-size:1.4rem; letter-spacing:-.02em; text-decoration:none; display:inline-flex; gap:0; min-height:2.75rem; align-items:center}
.wordmark span{color:var(--thread-text)}
.nav{display:flex; flex-wrap:wrap; gap:0 1.4rem; list-style:none; margin:0; padding:0}
.nav li{margin:0}
.nav a{display:inline-flex; min-height:2.75rem; align-items:center; font-weight:600; text-decoration:none; border-bottom:3px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--thread)}

.hero{padding-block:clamp(2rem,6vw,4.5rem) 0}
.seam{display:block; width:min(100%,46rem); height:14px; margin:clamp(1.5rem,4vw,2.5rem) 0 0}
.seam line{stroke:var(--thread); stroke-width:4; stroke-linecap:round; stroke-dasharray:14 10}
.board{background:var(--cloud); border-radius:18px; padding:clamp(1.25rem,3vw,1.75rem); margin:clamp(1.5rem,4vw,2.25rem) 0 0; max-width:42rem}
.board p:last-child{margin-bottom:0}
.board .lede{font-size:clamp(1.1rem,2.4vw,1.3rem)}

.status{display:inline-block; margin:0 0 .8rem; padding:.15rem .7rem; border:2px solid currentColor; border-radius:999px; font-size:.82rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; line-height:1.5}
.status-dev{color:var(--thread-text)}
.status-soon{color:var(--slate)}
.status-early{color:var(--navy)}
.status-available{color:var(--ok)}

.panel{background:var(--cloud); border-radius:18px; padding:clamp(1.1rem,3vw,1.6rem); margin:1.25rem 0 0; max-width:44rem}
.panel h3{margin-top:0}
.panel ul,.panel ol{margin-bottom:0}
.stitched{list-style:none; padding:0; margin:1.25rem 0; max-width:44rem}
.stitched li{position:relative; background:var(--cloud); border-radius:14px; padding:1rem 1.2rem 1rem 3.4rem; margin:0 0 .8rem}
.stitched li::before{content:attr(data-n); position:absolute; left:1rem; top:1rem; width:1.7rem; height:1.7rem; border-radius:50%; background:var(--navy); color:#fff; font-weight:800; display:grid; place-items:center; font-size:.95rem}
.stitched li::after{content:""; position:absolute; left:1.8rem; top:3rem; bottom:-.9rem; border-left:3px dashed var(--thread)}
.stitched li:last-child::after{display:none}
.stitched h3{margin:0 0 .15rem}
.stitched p{margin:0}
.stitched .tag{display:inline-block; margin-top:.4rem; font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase}
.tag-now{color:var(--ok)}
.tag-plan{color:var(--thread-text)}

.checks{list-style:none; padding:0; margin:1rem 0}
.checks li{position:relative; padding-left:1.7rem}
.checks li::before{content:"\2713"; position:absolute; left:0; font-weight:800; color:var(--ok)}
.checks.plan li::before{content:"\25CB"; color:var(--thread-text)}
.checks.no li::before{content:"\00d7"; color:var(--thread-text)}

.crumbs{padding-top:1.25rem; font-size:.95rem; color:var(--slate)}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:.25rem .6rem; padding:0; margin:0; max-width:none}
.crumbs li{margin:0}
.crumbs li+li::before{content:"/"; margin-right:.6rem}
.crumbs a{display:inline-block; padding-block:.55rem}
.page-head{padding-top:1.25rem}

.cta{background:var(--navy); color:#fff; border-radius:20px; padding:clamp(1.5rem,4vw,2.5rem); margin:3.5rem 0 0}
.cta h2{margin-top:0; color:#fff}
.cta p{color:#D6ECF8}
.btn{display:inline-flex; align-items:center; min-height:3rem; padding:.7rem 1.4rem; border-radius:10px; background:var(--thread-btn); color:#fff; font-weight:700; text-decoration:none; border:2px solid var(--thread-btn)}
.btn:hover{background:#A92724; color:#fff; border-color:#A92724}
.cta :focus-visible{outline-color:#fff}
.related{margin-top:3rem}
.related ul{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.5rem 1rem; max-width:none}
.related li{margin:0}
.related a{display:inline-block; padding:.5rem 0}

.site-footer{background:var(--navy); color:#D6ECF8; padding:2.25rem 0 1.5rem; margin-top:auto}
.site-footer a{color:#fff; text-decoration-color:var(--thread)}
.site-footer :focus-visible{outline-color:#fff}
.foot-grid{display:grid; gap:1.75rem; grid-template-columns:1fr}
@media (min-width:44rem){.foot-grid{grid-template-columns:1.4fr 1fr}}
.foot-title{font-weight:800; color:#fff; margin-bottom:.4rem}
.site-footer ul{list-style:none; padding:0; margin:0}
.site-footer li{margin:0}
.site-footer li a{display:inline-block; padding:.35rem 0}
.site-footer p{margin-bottom:.4rem}
.foot-base{margin-top:1.5rem; padding-top:1rem; border-top:1px solid #2C4A66; font-size:.9rem}

@media (prefers-reduced-motion:no-preference){
  .seam line{stroke-dashoffset:480; animation:sew 1.6s ease-out .2s forwards}
  @keyframes sew{to{stroke-dashoffset:0}}
}
@media print{.site-header,.site-footer,.cta,.skip{display:none}}