/* Steelyard Ventures: one look for every page inside the site.
   The landing gate is a dark steel yard with a riveted plate and an emerald S. Inside, the same yard photograph
   runs across the top of every page, the page itself is brushed steel, and content sits on light riveted plates. */
:root{--ink:#16242b;--muted:#4c5c64;--em:#008c5f;--em-d:#006b4b;--em-l:#2ee6a0;--line:#cfd7db;--line-2:#e1e6e9;--night:#0b0f11;
--sans:"Avenir Next",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;color:var(--ink);font:16px/1.65 var(--sans);background:#d5dbde url(/assets/steel.jpg) center top/100% auto repeat-y}
img{max-width:100%;height:auto}
a{color:var(--em-d);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid #a65325;outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:10px;z-index:9;background:#fff;color:var(--ink);padding:9px 14px;border-radius:6px;font-weight:600;text-decoration:none}
.skip:focus{left:10px}
.wrap{position:relative;width:min(1080px,calc(100% - 48px));margin:0 auto}

/* top band: the steel yard at dusk */
.top{position:relative;color:#fff;background:var(--night) url(/assets/yard.jpg) center 58%/cover no-repeat}
.top::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,9,11,.74),rgba(6,9,11,.5) 50%,rgba(6,9,11,.84))}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,#00573d,#17c489 50%,#00573d)}
.brand{display:inline-flex;align-items:center;gap:13px;color:#fff;text-decoration:none;padding:22px 0 18px}
.brand img{width:52px;height:52px;display:block;filter:drop-shadow(0 3px 8px rgba(0,0,0,.55))}
.brand b{display:block;font-weight:700;font-size:27px;letter-spacing:-.03em;line-height:1;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.brand small{display:block;font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;margin-top:6px;opacity:.84}
.pagehead{padding:14px 0 38px}
.pagehead.tall{padding:26px 0 54px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;font-weight:600;margin-bottom:12px;color:rgba(255,255,255,.7)}
.crumbs a{color:rgba(255,255,255,.88);text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs [aria-current]{color:var(--em-l)}
.pagehead h1{margin:0;font-size:clamp(32px,4.6vw,52px);font-weight:650;letter-spacing:-.04em;line-height:1.06;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.pagehead p{margin:14px 0 0;max-width:64ch;font-size:17px;line-height:1.7;color:rgba(255,255,255,.88);text-shadow:0 1px 10px rgba(0,0,0,.6)}

/* the page: brushed steel, with content on riveted plates */
main{flex:1;padding:34px 0 68px}
.plate{position:relative;border:1px solid #b6c0c6;border-radius:12px;padding:clamp(24px,3.6vw,44px);
  background:
    radial-gradient(circle at 17px 17px,#fff 0,#dfe5e8 1.6px,#87949b 4.6px,rgba(135,148,155,0) 5.4px),
    radial-gradient(circle at calc(100% - 17px) 17px,#fff 0,#dfe5e8 1.6px,#87949b 4.6px,rgba(135,148,155,0) 5.4px),
    radial-gradient(circle at 17px calc(100% - 17px),#fff 0,#dfe5e8 1.6px,#87949b 4.6px,rgba(135,148,155,0) 5.4px),
    radial-gradient(circle at calc(100% - 17px) calc(100% - 17px),#fff 0,#dfe5e8 1.6px,#87949b 4.6px,rgba(135,148,155,0) 5.4px),
    linear-gradient(180deg,#fcfdfd,#f2f5f6);
  box-shadow:inset 0 1px 0 #fff,0 22px 44px -22px rgba(13,24,30,.5),0 2px 6px rgba(13,24,30,.14)}

/* product lists */
.group{display:grid;grid-template-columns:178px minmax(0,1fr);gap:0 30px;padding:28px 0;border-top:1px solid var(--line)}
.group:first-child{border-top:0;padding-top:4px}
.group:last-child{padding-bottom:4px}
.group>h2{margin:3px 0 0;padding-left:12px;border-left:3px solid var(--em);font-size:13.5px;font-weight:700;line-height:1.4;color:var(--em-d);align-self:start}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 30px;align-items:center;padding:18px 0;border-top:1px solid var(--line-2)}
.row:first-child{border-top:0;padding-top:0}
.row:last-child{padding-bottom:0}
.row h3{margin:0 0 3px;font-size:17.5px;font-weight:700;letter-spacing:-.012em;line-height:1.3}
.row p{margin:0;max-width:60ch;font-size:15px;line-height:1.6;color:var(--muted)}
.app{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.app img{display:block;border-radius:22.5%;box-shadow:0 2px 6px rgba(13,24,30,.28)}
.act{display:flex;flex-direction:column;align-items:flex-end;gap:9px;white-space:nowrap;font-size:14px;font-weight:650}
.act.inline{flex-direction:row;gap:20px}
a.go{color:var(--em-d);text-decoration:none}
a.go:hover{text-decoration:underline}
.stores{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-height:40px}
.stores.left{justify-content:flex-start;margin:20px 0 6px}
.stores a{display:block;line-height:0;border-radius:7px;font-size:13px;font-weight:650}
.stores img{max-width:none}
.stores img.as{height:40px;width:auto;display:block}
.stores img.gp{height:59px;width:auto;display:block;margin:-9.5px -10px}

/* app pages */
.apphero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:44px;align-items:start}
.apphead{display:flex;gap:18px;align-items:center}
.apphead img{width:88px;height:88px;border-radius:22.5%;box-shadow:0 3px 10px rgba(13,24,30,.3);flex:none}
.kicker{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--em-d)}
.tag{margin:0;font-size:clamp(19px,2.1vw,24px);font-weight:650;letter-spacing:-.02em;line-height:1.25}
.shot{width:232px;height:auto;display:block;border-radius:28px;border:7px solid #151c20;background:#151c20;box-shadow:0 26px 44px -20px rgba(13,24,30,.6),0 3px 8px rgba(13,24,30,.2)}
.applinks{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:30px;padding-top:18px;border-top:1px solid var(--line);font-size:14.5px;font-weight:650}
.applinks a{text-decoration:none}
.applinks a:hover{text-decoration:underline}
.applinks [aria-current]{color:var(--ink)}

/* running text: app announcements, help, privacy, terms */
.prose{max-width:72ch;overflow-wrap:anywhere}
.prose>:first-child{margin-top:0}
.prose p,.prose li{font-size:16px;line-height:1.7}
.prose p{margin:0 0 1em}
.apppage .prose{margin-top:18px}
.apppage .prose p{font-size:17px}
.apppage .prose p:first-of-type{font-size:19px;line-height:1.6;color:var(--ink)}
.prose h2{margin:1.9em 0 .5em;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.prose h3{margin:1.5em 0 .4em;font-size:17px;font-weight:700}
.prose ul,.prose ol{margin:0 0 1em;padding-left:1.3em}
.prose li{margin:.25em 0}
.prose section+section{margin-top:44px;padding-top:30px;border-top:1px solid var(--line)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.2em;font-size:14.5px;font-variant-numeric:tabular-nums}
@media (max-width:760px){.prose table{display:block;overflow-x:auto}}
.prose th,.prose td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line-2);vertical-align:top}
.prose th{font-weight:700;border-bottom-color:var(--line)}
.prose figure{margin:1.4em 0}
.prose figure img,.prose figure video,.prose>img,.prose>video,.prose p>img{display:block;max-width:100%;max-height:560px;width:auto;height:auto;border-radius:10px;border:1px solid var(--line)}
.prose figcaption{margin-top:8px;font-size:13.5px;color:var(--muted)}
.fine{font-size:13.5px;color:var(--muted)}
.langs{display:flex;gap:18px;margin:0 0 22px;padding:10px 0 14px;border-bottom:1px solid var(--line);font-size:14px;font-weight:650;position:sticky;top:0;z-index:2;background:#f9fbfb}
.langs a{text-decoration:none}
/* deep emerald fill: white label 6.55:1 (8.31:1 on hover); the brighter --em gave only 4.27:1 */
.button{display:inline-block;background:var(--em-d);color:#fff;text-decoration:none;font-weight:650;font-size:15px;padding:11px 20px;border-radius:8px;border:1px solid #005a3b;box-shadow:0 1px 0 rgba(255,255,255,.25) inset}
.button:hover{background:#005a3b}

.formframe{margin:8px 0 10px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.formframe iframe{display:block;width:100%;height:740px;border:0}

/* bottom band */
.foot{position:relative;background:var(--night);color:#aebac0;font-size:14px}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#00573d,#17c489 50%,#00573d)}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 28px;padding:30px 0 28px}
.foot strong{display:block;color:#fff;font-weight:700}
.foot span{display:block;font-size:13px}
.foot nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.foot a{color:#e9eff1;text-decoration:none;font-weight:600}
.foot a:hover{text-decoration:underline}
.foot a.quiet{font-size:12px;font-weight:500;color:#93a1a8}

@media (max-width:600px){.formframe iframe{height:1080px}}
@media (max-width:760px){a.go,.foot nav a,.langs a,.crumbs a,.applinks a{display:inline-block;padding:11px 0}.act{gap:0}.foot nav{gap:0 22px}.applinks{gap:0 24px}}
@media (max-width:760px){
  .wrap{width:calc(100% - 32px)}
  .brand{padding:16px 0 12px}.brand img{width:44px;height:44px}.brand b{font-size:23px}
  .group{grid-template-columns:1fr;gap:14px 0;padding:24px 0}
  .row{grid-template-columns:1fr;gap:12px}
  .act{align-items:flex-start;white-space:normal}
  .stores{justify-content:flex-start}
  .apphero{grid-template-columns:1fr;gap:28px}
  .shot{width:min(232px,62%);margin:0 auto}
  .plate{border-radius:10px;padding:22px 18px}
  .foot .wrap{flex-direction:column;align-items:flex-start}
}