/* Designs to Stitch — tokens from storefront/DIRECTION.md */
@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/assets/fonts/ibm-plex-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/assets/fonts/ibm-plex-sans-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --ground:#FBF8F2;--surface:#FFFFFF;--ink:#1C2A3A;--brand:#11545C;--muted:#4B5563;--buy:#B3261E;--line:#D9D2C3;--tint:#F3EEE3;
  --display:"Fraunces",Georgia,serif;--sans:"IBM Plex Sans",system-ui,sans-serif;--mono:"IBM Plex Sans",system-ui,sans-serif;
  --r:14px;--gap:120px;--max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.narrow{max-width:820px}
.skip{position:absolute;left:-999px;top:8px;background:var(--brand);color:#fff;padding:8px 14px;border-radius:8px;z-index:20}
.skip:focus{left:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1,h2,h3{margin:0}
h2{font:700 32px/1.2 var(--sans);letter-spacing:-.01em;color:var(--brand)}
h3{font:700 20px/1.3 var(--sans)}

/* header and footer (also used by the platform legal pages) */
.site-header{background:var(--ground);border-bottom:1px solid var(--line);position:relative}
.site-header:after{content:"";position:absolute;left:0;right:0;bottom:-5px;border-top:2px dashed var(--line)}
.hd{display:flex;align-items:center;justify-content:space-between;height:76px;gap:16px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--brand);min-width:0}
.wm{font:700 25px/1 var(--display);white-space:nowrap}
.wm b{font-weight:700;text-decoration:underline dashed var(--buy) 2px;text-underline-offset:7px}
.site-header nav{display:flex;gap:28px}
.site-header nav a{color:var(--ink);text-decoration:none;font-weight:400;font-size:16px}
.site-header nav a:hover{color:var(--brand);text-decoration:underline}
.site-footer{margin-top:var(--gap);background:var(--brand);color:var(--ground);padding:48px 0;font-size:15px}
.site-footer a{color:var(--ground)}
.ft{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.ft-brand{display:flex;gap:14px;align-items:center;line-height:1.5}
.ft-brand img{background:var(--ground);border-radius:50%;padding:2px}
.site-footer nav{display:flex;gap:22px;flex-wrap:wrap}
/* platform legal pages: <header class="site-header"><a class="logo">Name</a></header>, <main class="legal"><div class="wrap">, footer .wrap > p + nav */
.site-header>.logo{max-width:var(--max);margin:0 auto;padding:20px 32px;font:700 25px/1.2 var(--display);gap:12px}
.site-header>.logo:before{content:"";width:36px;height:36px;flex:none;background:url(/assets/mark.svg) center/contain no-repeat}
.site-footer>.wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.site-footer>.wrap>p{margin:0}
.legal .back{margin-top:32px}
.legal{padding:48px 0 0;max-width:820px;margin:0 auto;overflow-wrap:anywhere}
.legal h1{font:700 40px/1.15 var(--display);color:var(--brand);margin-bottom:24px}
.legal h2{font-size:24px;margin:32px 0 8px}
.legal code,.legal pre{white-space:pre-wrap;overflow-wrap:anywhere}
.legal table{display:block;max-width:100%;overflow-x:auto}

/* the line */
.line{padding:56px 0 40px}
.line h1{font:700 56px/1.05 var(--display);color:var(--brand);text-transform:capitalize;letter-spacing:-.01em}
.sub{font-size:20px;line-height:1.45;margin:14px 0 0;max-width:46ch}
.fmt{letter-spacing:.02em;list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:10px 26px;font:400 14px/1.3 var(--mono);color:var(--ink)}
.fmt li{display:flex;align-items:center;gap:8px}
.ic{flex:none;color:var(--brand)}

/* pills, controls */
.pill{display:inline-block;font:400 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--c,var(--brand));padding:7px 10px;border-radius:99px}
.soon{font-variant-numeric:tabular-nums;letter-spacing:.02em;display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;font:400 15px/1 var(--mono);color:var(--buy);background:var(--ground);border:1.5px dashed var(--buy);border-radius:10px;padding:13px 14px;cursor:not-allowed;white-space:nowrap;opacity:1}
.soon .amt{font-size:16px;font-weight:700}
.soon.big{font-size:17px;padding:17px 18px}
.soon.big .amt{font-size:19px;font-weight:700}

/* sets (featured row) */
.sets{padding:8px 0 0}
.set-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.set{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;position:relative}
.set:before{content:"";position:absolute;inset:7px;border:1.5px dashed var(--line);border-radius:10px;pointer-events:none}
.set h3{font:700 30px/1.1 var(--display);margin:12px 0 8px}
.set h3 a{color:var(--ink);text-decoration:none}
.set h3 a:hover{text-decoration:underline}
.members{letter-spacing:.02em;font:400 14px/1.5 var(--mono);color:var(--muted);margin:0 0 10px}
.members .short{display:none}
.card-txt{display:block}
.saving{margin:0 0 16px;font-size:16px}
.saving b{color:var(--buy)}

/* peek: cover in front, placeholder sheet behind */
.peek{position:relative;aspect-ratio:1/1;background:var(--tint);border-radius:10px;overflow:hidden}
.peek .front{position:absolute;left:9%;top:8%;height:84%;width:auto;border-radius:8px;box-shadow:0 2px 3px rgba(0,0,0,.15),0 10px 24px rgba(0,0,0,.18)}
.peek .sheet{position:absolute;left:46%;top:12%;width:46%;height:74%;background:#fff repeating-linear-gradient(0deg,transparent 0 17px,#E6E0D4 17px 18px);border:1.5px dashed #8A93A0;border-radius:6px;transform:rotate(5deg);box-shadow:0 6px 16px rgba(0,0,0,.12)}
.peek .sheet span{position:absolute;right:7px;top:12px;writing-mode:vertical-rl;font:400 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:#fff;padding:5px 2px;white-space:nowrap}
.peek-set .whole{position:absolute;left:4%;top:6%;width:92%;height:88%;object-fit:contain}
/* listing grid */
.all{padding-top:80px}
.sec-hd{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.sec-hd p{margin:0;color:var(--muted)}
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;position:relative}
.card:before{content:"";position:absolute;inset:6px;border:1.5px dashed var(--line);border-radius:10px;pointer-events:none}
.card-link{color:var(--ink);text-decoration:none;display:block;position:relative;z-index:1}
.card-link .pill{margin-top:14px}
.card h3{margin:8px 0 4px;font-size:19px}
.card-link:hover h3{text-decoration:underline}
.card p{margin:0 0 14px;font-size:15px;line-height:1.45;color:var(--muted);flex:1}
.card .soon{position:relative;z-index:1}

/* why, how */
.why{padding-top:var(--gap)}
.why-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.why p{font-size:18px;margin:16px 0 0}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.ticks li{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.ticks .ic{margin-top:2px}
.how{padding-top:var(--gap)}
.steps{list-style:none;counter-reset:s;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.steps li{counter-increment:s;border-top:2px dashed var(--brand);padding-top:18px;display:grid;gap:6px}
.steps li b:before{content:counter(s,decimal-leading-zero) "  ";font:400 14px var(--mono);color:var(--buy)}
.steps b{font-size:20px}

/* faq */
.faq{padding-top:var(--gap)}
.faq h2{margin-bottom:18px}
details{border-bottom:1.5px dashed var(--line);padding:4px 0}
summary{cursor:pointer;font-weight:700;font-size:18px;padding:14px 28px 14px 0;list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";position:absolute;right:4px;top:10px;font:400 22px var(--mono);color:var(--brand)}
details[open] summary:after{content:"–"}
details p{margin:0 0 16px;max-width:68ch}

/* product page */
.buy{padding:40px 0 0}
.buy-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:start}
.buy-img .peek{border-radius:var(--r)}
.crumb{font-size:14px;color:var(--muted);margin-bottom:18px}
.crumb a{color:var(--muted)}
.buy-txt h1{font:700 50px/1.06 var(--display);color:var(--brand);margin:14px 0 0;letter-spacing:-.01em}
.buy-txt .sub{margin-top:12px}
.buy-txt .saving{margin:14px 0 0}
#mainbuy{margin-top:24px}
.note{display:flex;gap:8px;align-items:center;font-size:15px;color:var(--muted);margin:12px 0 0}
.alt{margin-top:26px;padding:18px;border:1.5px dashed var(--line);border-radius:var(--r);background:var(--surface)}
.alt p{margin:0 0 12px;font-size:16px}
.look{padding-top:var(--gap)}
.lead{color:var(--muted);margin:8px 0 24px}
.frames{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.frame{margin:0}
.frame div{aspect-ratio:4/3;border:2px dashed #8A93A0;border-radius:var(--r);background:var(--surface) repeating-linear-gradient(45deg,transparent 0 14px,var(--tint) 14px 15px);display:grid;place-items:center}
.frame span{font:400 15px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:var(--surface);padding:8px 12px;border-radius:6px}
.frame figcaption{margin-top:10px;font-size:15px;color:var(--ink)}
.specs{padding-top:var(--gap)}
.specs-in{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.def{margin:12px 0 20px}
.spec{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.spec div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:12px 16px;border-top:1px dashed var(--line)}
.spec div:first-child{border-top:0}
.spec dt{font-weight:400}
.spec dd{margin:0;font:400 14px/1.5 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.specs h3{margin:0 0 10px;color:var(--brand)}
.specs h3+ul{margin-top:0}
.plan,.not{padding-left:20px;margin:0 0 26px}
.plan li,.not li{margin-bottom:8px}
.not li::marker{content:"– "}
.fine{font-size:15px;color:var(--muted);margin:0}
.price-table{width:100%;max-width:640px;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin:20px 0 14px}
.price-table th,.price-table td{text-align:left;padding:12px 16px;border-top:1px dashed var(--line)}
.price-table .num{font-variant-numeric:tabular-nums;text-align:right;font:400 16px var(--mono)}
.price-table .tot th{font-weight:700}
.price-table .tot:last-child .num{color:var(--buy)}
.more{padding-top:var(--gap)}
.more .sec-hd a{font-weight:400}
.closing{padding-top:var(--gap)}
.closing-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:16px 28px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px 32px;max-width:900px}
.closing-in b{display:block;font:700 24px/1.2 var(--display);color:var(--brand)}
.closing-in span{color:var(--muted);font-size:15px}
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;gap:12px;align-items:center;justify-content:space-between;background:var(--surface);border-top:1.5px dashed var(--line);padding:10px 16px;box-shadow:0 -6px 16px rgba(0,0,0,.08)}
.sticky[hidden]{display:none}
.sticky span{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sticky .soon{width:auto;flex:none}
.h-404{font:700 44px/1.1 var(--display);color:var(--brand)}
.textbtn{display:inline-block;margin-top:20px;font-weight:700}

@media (min-width:821px){.sticky{display:none !important}}
@media (max-width:1100px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.set{grid-template-columns:1fr}.set-img{max-width:340px}}
@media (max-width:820px){
  :root{--gap:64px}
  .wrap{padding:0 18px}
  .hd{height:60px}
  .logo{gap:8px}
  .logo img{width:28px;height:28px}
  .wm{font-size:19px}
  .wm b{text-underline-offset:5px}
  .site-header nav{gap:14px}
  .site-header nav a{font-size:15px}
  .site-header nav a[href="/#sets"]{display:none}
  .line{padding:22px 0 18px}
  .line h1{font-size:34px}
  .sub{font-size:16px;margin-top:8px}
  .fmt{gap:4px 14px;font-size:12px;margin-top:12px}
  .fmt .ic{width:16px;height:16px}
  .set-row{grid-template-columns:minmax(0,1fr);gap:16px}
  .set{grid-template-columns:96px minmax(0,1fr);grid-template-rows:min-content 1fr auto;gap:6px 14px;padding:14px;align-items:start}
  .set-img{grid-row:1/3;grid-column:1}
  .set .peek{aspect-ratio:4/5;background:none}
  .set .peek-set .whole{left:0;top:0;width:100%;height:100%}
  .set .peek .front{left:0;top:0;height:100%}
  .set-body{display:contents}
  .set-head{grid-column:2;grid-row:1}
  .set h3{font-size:22px;margin:6px 0 2px}
  .members .long{display:none}
  .members .short{display:inline}
  .members{font-size:13px;margin:0}
  .set .saving{grid-column:2;grid-row:2;font-size:14.5px;margin:0;line-height:1.4}
  .set .soon{grid-column:1/-1;grid-row:3;margin-top:6px}
  h2{font-size:26px}
  .grid,.grid.g3{grid-template-columns:minmax(0,1fr);gap:16px}
  .card{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:min-content 1fr auto;gap:4px 14px;padding:14px}
  .card-link{display:contents}
  .card .peek{grid-row:1/3;grid-column:1;aspect-ratio:4/5;background:none}
  .card .peek .sheet{display:none}
  .card .peek .front{left:0;top:0;height:100%}
  .card-txt{grid-column:2;grid-row:1}
  .card-link .pill{margin-top:0}
  .card h3{margin:6px 0 0;font-size:18px}
  .card p{grid-column:2;grid-row:2;font-size:14.5px;margin:0}
  .card .soon{grid-column:1/-1;grid-row:3;margin-top:8px}
  .price-table td:nth-child(2){display:none}
  .price-table th,.price-table td{padding:10px 12px}
  .why-in,.specs-in{grid-template-columns:1fr;gap:28px}
  .steps{grid-template-columns:1fr;gap:16px}
  .buy{padding-top:14px}
  .buy-in{grid-template-columns:minmax(0,1fr);gap:18px}
  .buy-txt{order:-1}
  .buy-img{max-width:420px}
  .crumb{margin-bottom:10px}
  .buy-txt h1{font-size:36px;margin-top:10px}
  #mainbuy{margin-top:16px}
  .closing-in{grid-template-columns:minmax(0,1fr);padding:20px}
  .site-footer{padding:36px 0 96px}
  .site-header>.logo{padding:16px 18px;font-size:20px}
  .site-header>.logo:before{width:28px;height:28px}
  .all{padding-top:var(--gap)}
  .ft{flex-direction:column;align-items:flex-start}
}
@media (max-width:360px){
  .wm{font-size:17px}
  .card,.set{grid-template-columns:80px minmax(0,1fr)}
  .wm{font-size:17px}
  .soon{font-size:14px;padding:12px}
  .soon.big{font-size:15px}
  .soon.big .amt{font-size:16px}
}
