/* Tools for Builders. Tokens and rules: DESIGN.md. */
:root{
  --ground:#ffffff;--sheet:#f1f5f8;--ink:#19384f;--muted:#4f6577;--rule:#d3dee7;
  --signal:#326b98;--signal-hover:#244f73;
  --display:"Barlow Semi Condensed","Arial Narrow",sans-serif;
  --body:"Barlow","Segoe UI",sans-serif;
  --r-sm:3px;--r-md:4px;
  --frame:1200px;--measure:680px;--gutter:32px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 18px/1.55 var(--body)}
a{color:var(--signal);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .15s}
a:hover{color:var(--signal-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;margin:0 0 16px;color:var(--ink)}
h1{font-size:56px;letter-spacing:-.01em}
h2{font-size:36px}
h3{font-size:24px;line-height:1.2}
p{margin:0 0 16px}
.muted{color:var(--muted)}

/* frame */
.frame{max-width:var(--frame);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.narrow>*{max-width:var(--measure)}
.narrow>table.plans{max-width:860px}
main>section,main>article{padding-top:64px;padding-bottom:64px}
.band{background:var(--sheet)}

/* header and footer */
header.site{border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:baseline;gap:32px;padding-top:18px;padding-bottom:18px}
.wordmark{font:600 24px/1 var(--display);color:var(--ink);text-decoration:none;white-space:nowrap}
.bar nav{display:flex;gap:22px;flex-wrap:wrap;font-size:16px}
.bar nav a{color:var(--ink);text-decoration:none}
.bar nav a:hover{color:var(--signal);text-decoration:underline}
header.site{position:relative;z-index:5}
.menu{position:relative}
.menu summary{cursor:pointer;list-style:none;color:var(--ink)}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"";display:inline-block;width:6px;height:6px;margin:0 2px 3px 8px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.menu[open] summary::after{transform:rotate(225deg);margin-bottom:0}
.menu summary:hover{color:var(--signal)}
.panel{position:absolute;top:calc(100% + 14px);left:-16px;width:380px;background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-md);padding:6px}
.panel a{display:block;padding:10px 12px;border-radius:var(--r-sm);text-decoration:none!important}
.panel a:hover{background:var(--sheet)}
.panel strong{display:block;font:600 19px/1.2 var(--display);color:var(--ink)}
.panel span{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.sub{border-top:1px solid var(--rule);background:var(--sheet)}
.sub .bar{padding-top:12px;padding-bottom:12px}
.subname{font:600 20px/1 var(--display)}
footer.site{border-top:1px solid var(--rule);padding:32px 0 40px;font-size:15px}
footer .frame{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 28px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 18px;flex:1}
footer nav a{color:var(--muted);text-decoration:none}
footer nav a:hover{color:var(--ink)}

/* opener: words at the text measure, the strongest real picture beside them */
.opener{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding-top:72px}
.words{max-width:var(--measure)}
.lede{font-size:21px;line-height:1.5;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 24px;margin-top:28px}
.status{font:600 20px/1.2 var(--display);margin:24px 0 0}
.price{font:600 56px/1 var(--display);margin:24px 0 0}
.price span{font-size:24px;color:var(--muted)}

.btn{display:inline-block;background:var(--signal);color:var(--ground);font:500 17px/1 var(--body);padding:14px 22px;border:0;border-radius:var(--r-sm);text-decoration:none;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--signal-hover);color:var(--ground)}
.btn:active{transform:translateY(1px)}

.media{display:block;width:100%;height:auto;border-radius:var(--r-md);background:var(--sheet)}
.tbc{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;min-height:320px;padding:24px;text-align:center;border:1px dashed var(--rule);border-radius:var(--r-md);background:var(--sheet);color:var(--muted);font-size:15px}
.tbc b{font:600 18px var(--display);color:var(--ink)}
.post .media,.post .tbc,article .media{margin:8px 0 32px}

/* tables */
table{width:100%;border-collapse:collapse;font-size:17px;margin:8px 0 24px}
th,td{text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--rule)}
thead th{font:500 15px/1.3 var(--body);color:var(--muted);border-bottom:1px solid var(--ink)}
tbody th{font:600 20px/1.2 var(--display)}
tbody th a{text-decoration:none}
table.plans thead th{font:600 22px/1.15 var(--display);color:var(--ink);background:var(--sheet);padding:16px}
table.plans thead th span{display:block;font:400 16px/1.3 var(--body);color:var(--muted);margin-top:4px}
table.plans td{padding-left:16px}
table.plans tbody th{font:400 17px/1.4 var(--body)}

/* signature: real figures from one design, set like a dimension string on a plan */
.figures{display:flex;flex-wrap:wrap;margin:28px 0 0;padding-top:18px;position:relative;border-top:1px solid var(--ink)}
.figures::before,.figures::after{content:"";position:absolute;top:-7px;width:1px;height:13px;background:var(--ink)}
.figures::before{left:0}.figures::after{right:0}
.figures div{padding:0 28px 12px 0}
.figures dt{font:600 40px/1 var(--display);white-space:nowrap}
.figures dd{margin:6px 0 0;color:var(--muted);font-size:15px}

.example{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}

/* features: alternating picture and text rows */
.features{display:flex;flex-direction:column;gap:72px}
.feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center}
.feature:nth-child(even)>div:first-child{order:2}
.feature p{color:var(--muted)}

/* term lists */
.included{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin:16px 0 0}
.included div{padding:18px 0;border-bottom:1px solid var(--rule)}
.included dt{font:600 22px/1.2 var(--display);margin-bottom:4px}
.included dd{margin:0;color:var(--muted)}
.faq{margin:8px 0 0}
.faq dt{font-weight:500;padding-top:18px;border-top:1px solid var(--rule)}
.faq dd{margin:4px 0 18px;color:var(--muted)}

/* post rows */
.rows{list-style:none;padding:0;margin:8px 0 24px}
.rows li{border-bottom:1px solid var(--rule)}
.rows a{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:18px 0;text-decoration:none;color:var(--ink)}
.rows a:hover strong{color:var(--signal)}
.rows .meta{font-size:14px;color:var(--muted);line-height:1.4}
.rows strong{display:block;font:600 22px/1.2 var(--display);margin-bottom:4px;transition:color .15s}
.rows .muted{display:block;font-size:16px}
.post .meta{font-size:15px;color:var(--muted)}
.post h2{font-size:28px;margin-top:36px}

/* contact */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:start}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact label{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:500}
.contact .wide{grid-column:1/-1}
.contact input,.contact select,.contact textarea{font:inherit;font-size:17px;font-weight:400;color:var(--ink);background:var(--ground);border:1px solid var(--muted);border-radius:var(--r-sm);padding:10px 12px}
.contact input:hover,.contact select:hover,.contact textarea:hover{border-color:var(--ink)}
.contact input:user-invalid{border-color:#a8323c}
.contact button{justify-self:start}

@media (max-width:900px){
  :root{--gutter:20px}
  h1{font-size:42px}h2{font-size:30px}
  .opener,.example,.feature,.split{grid-template-columns:1fr;gap:28px}
  .feature:nth-child(even)>div:first-child{order:0}
  .features{gap:48px}
  .included{grid-template-columns:1fr}
  .bar{flex-wrap:wrap;gap:10px 24px}
}
@media (max-width:600px){
  :root{--gutter:16px}
  body{font-size:17px}
  h1{font-size:36px}
  main>section,main>article{padding-top:44px;padding-bottom:44px}
  .opener{padding-top:36px}
  .figures dt{font-size:32px}
  .rows a{grid-template-columns:1fr;gap:6px}
  .contact{grid-template-columns:1fr}
  .bar nav{gap:6px 18px;width:100%;font-size:15px}
  .menu{position:static}
  .panel{left:var(--gutter);right:var(--gutter);width:auto;top:auto;margin-top:10px}
  table.tools thead{display:none}
  table.tools tr{display:block;padding:14px 0;border-bottom:1px solid var(--rule)}
  table.tools th,table.tools td{display:block;border:0;padding:2px 0}
  table.plans{font-size:15px}
  table.plans th,table.plans td{padding:10px 8px 10px 0}
  table.plans thead th{font-size:18px;padding:10px 6px}
  .tbc{min-height:200px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}