/* Shared by the home page and the tools: colours, page width, the page heading, buttons and option tiles. */
:root{--navy:#0b2545;--green:#007a4d;--green-dark:#00603c;--gold:#ffc107;--coral:#f36b5c;--canvas:#f5f7fa;--ink:#334155;--muted:#5b6b80;--line:#d8e0ea;--white:#fff;--page-width:1180px;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--canvas);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0}
h1,h2,h3,p,ol{margin:0}
a{color:inherit}
a:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:4px}
main{max-width:var(--page-width);margin:0 auto;padding-left:32px;padding-right:32px}

/* The heading at the top of each tool. */
.tool-intro{padding:34px 0 26px;max-width:680px}
.tool-intro h1{font-size:clamp(25px,3vw,34px);font-weight:750;letter-spacing:-.025em;line-height:1.15;color:var(--navy);text-wrap:balance}
.tool-intro p{font-size:16px;line-height:1.6;color:var(--muted);margin-top:10px;max-width:62ch}

.hub-button,.tool-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:13px;font-weight:650;line-height:1.2;min-height:42px;padding:9px 16px;border:1px solid transparent;border-radius:9px;cursor:pointer;text-decoration:none;white-space:nowrap;background:var(--green);color:var(--white);box-shadow:0 2px 3px #007a4d14;transition:background .15s}
.hub-button:hover,.tool-button:hover{background:#00663f}
.hub-button{font-size:14px;min-height:46px;padding:10px 20px}
.tool-button.secondary{background:var(--white);border-color:#cdd7e4;color:var(--navy);box-shadow:none}
.tool-button.secondary:hover{background:#f2f7f4}
.tool-button:disabled{opacity:.55;cursor:progress}
.tool-button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.hub-text-link{font-size:14.5px;font-weight:650;color:var(--green)}

/* Picture tiles for choosing between a few options, the same as the name generator's style tiles. */
.tool-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.tool-tile{position:relative;display:block;margin:0;cursor:pointer;min-width:0}
.tool-tile input{position:absolute;opacity:0;width:1px;height:1px}
.tool-tile>span{position:relative;min-height:84px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px solid #dce3ed;border-radius:10px;box-shadow:0 2px 4px #0b254505;padding:13px 7px 10px;text-align:center;font-size:12px;font-weight:550;line-height:1.35;color:var(--ink);background:var(--white);transition:background .15s,border-color .15s}
.tool-tile svg{width:23px;height:23px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.tool-tile:hover>span{border-color:#8fbaa6;background:#f8fcfa}
.tool-tile input:checked+span{border-color:var(--green);background:#eef9f1;box-shadow:0 0 0 1px var(--green)}
.tool-tile input:checked+span::after{content:"\2713";position:absolute;right:6px;top:5px;display:flex;align-items:center;justify-content:center;width:17px;height:17px;background:var(--green);border-radius:50%;font-size:10px;color:#fff}
.tool-tile input:focus-visible+span{outline:3px solid var(--gold);outline-offset:3px}

/* The home page. */
.home-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:26px 48px;padding:40px 0 34px}
.home-hero-text{max-width:640px}
.home-hero h1{font-size:clamp(28px,3.8vw,42px);font-weight:780;letter-spacing:-.03em;line-height:1.12;color:var(--navy);text-wrap:balance}
.home-hero-text>p{font-size:17px;line-height:1.6;color:var(--muted);margin-top:14px;max-width:58ch}

/* The picture beside the heading: what the tools hand you, for a made-up bakery, in the order of the five jobs.
   It is drawn at 480 by 400 and shrunk as one piece with --s. The sun rises and the papers are dealt once when the page opens; after that they drift. */
.hero-art{--s:1;width:calc(480px*var(--s));height:calc(400px*var(--s))}
.hero-stage{position:relative;width:480px;height:400px;transform:scale(var(--s));transform-origin:0 0;color:var(--navy);line-height:1.3}
.hero-defs{position:absolute}
.hero-sun{position:absolute;left:-2px;top:-44px;width:488px;height:488px;animation:hero-rise .9s cubic-bezier(.2,.8,.2,1) both}
.hero-sun circle{fill:var(--gold)}
.hero-rays{fill:none;stroke:var(--gold);stroke-width:9;stroke-linecap:round;transform-box:view-box;transform-origin:center;animation:hero-turn 120s linear infinite}
.hero-paper{position:absolute;background:var(--white);border-radius:12px;box-shadow:0 12px 28px #0b254524,0 0 0 1px #0b25450f}
.hero-paper,.hero-tag{animation:hero-deal .6s cubic-bezier(.2,.8,.2,1) both,hero-float 7s ease-in-out infinite alternate}
.hero-name{left:0;top:26px;width:274px;padding:16px;display:flex;gap:13px;rotate:-3deg;animation-delay:.35s,1.6s}
.hero-card{left:26px;top:170px;width:216px;padding:15px 17px 17px;rotate:2deg;animation-delay:.5s,2.3s;animation-duration:.6s,8s}
.hero-qr{left:340px;top:0;width:130px;padding:12px 12px 10px;border-radius:16px;text-align:center;rotate:4deg;animation-delay:.65s,1.9s;animation-duration:.6s,6.5s}
.hero-tag{position:absolute;left:70px;top:290px;width:190px;height:94px;rotate:-6deg;filter:drop-shadow(0 10px 14px #0b254533);animation-delay:.8s,2.6s;animation-duration:.6s,7.5s}
.hero-invoice{left:268px;top:176px;width:206px;padding:14px 15px 15px;rotate:3deg;animation-delay:.95s,2.1s;animation-duration:.6s,8.5s}
.hero-tile{flex:none;width:54px;height:54px;border-radius:13px;background:#fff4cf;display:flex;align-items:center;justify-content:center}
.hero-tile svg{width:40px;height:40px}
.hero-name strong{display:block;font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.hero-name p{font-size:13px;line-height:1.4;color:var(--muted);margin-top:4px}
.hero-chip{display:inline-block;font-size:11.5px;font-weight:650;color:var(--green-dark);background:#e3f3ea;border-radius:6px;padding:3px 8px;margin-top:7px}
.hero-row{display:flex;align-items:center;gap:8px}
.hero-row svg{flex:none;width:30px;height:30px}
.hero-row strong{font-size:17px;font-weight:800;letter-spacing:-.02em}
.hero-row span{margin-left:auto;font-size:11px;color:var(--muted)}
.hero-who{font-size:12.5px;font-weight:650;margin-top:13px}
.hero-role{font-size:11.5px;color:var(--muted)}
.hero-bar{display:block;width:58%;height:6px;border-radius:3px;background:#d5ddea;margin-top:8px}
.hero-bar.short{width:40%}
.hero-qr svg{display:block;width:106px;height:106px}
.hero-qr p{font-size:11px;font-weight:700;line-height:1.25;margin-top:8px}
.hero-tag>div{position:relative;height:100%;padding:11px 14px 0 50px;background:var(--navy);color:var(--white);clip-path:polygon(17% 0,100% 0,100% 100%,17% 100%,0 50%)}
.hero-tag>div::before{content:"";position:absolute;left:18px;top:40px;width:14px;height:14px;border-radius:50%;background:var(--gold)}
.hero-tag small{display:block;font-size:12.5px;font-weight:600;color:var(--gold)}
.hero-tag strong{display:block;font-size:46px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.hero-invoice .hero-row{margin-bottom:6px}
.hero-line{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;padding:6px 0;border-bottom:1px solid #e3e8f0;white-space:nowrap}
.hero-due{display:flex;justify-content:space-between;align-items:center;margin-top:10px!important;padding:8px 10px;border-radius:8px;background:#e3f3ea;color:var(--green-dark);font-size:12px;font-weight:700}
.hero-due strong{font-size:15px;font-weight:800}
@keyframes hero-rise{from{opacity:0;translate:0 44px;scale:.9}}
@keyframes hero-turn{to{transform:rotate(360deg)}}
@keyframes hero-deal{from{opacity:0;translate:0 26px;scale:.94}}
@keyframes hero-float{to{translate:0 -7px}}
.home-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:24px!important}
.home-tools-title{font-size:15px;font-weight:650;color:var(--muted);margin-bottom:14px}
.home-tools{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.home-tools a{display:flex;flex-direction:column;height:100%;text-decoration:none;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 2px 6px #0b254508;transition:border-color .15s,box-shadow .15s,transform .15s}
.home-tools a:hover{border-color:#8fbaa6;box-shadow:0 10px 26px #0b254514;transform:translateY(-2px)}
.home-tools a:focus-visible{outline-offset:3px;border-radius:16px}
.home-tools svg{width:44px;height:44px;padding:10px;border-radius:12px;background:#eaf4ee;color:var(--green-dark);fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.home-step{font-size:13px;font-weight:650;color:var(--green);margin-top:16px}
.home-tools h3{font-size:18px;font-weight:720;letter-spacing:-.015em;line-height:1.25;color:var(--navy);margin-top:3px}
.home-tools p{font-size:14.5px;line-height:1.55;color:var(--muted);margin-top:7px;flex:1}
.home-go{font-size:14px;font-weight:650;color:var(--green);margin-top:16px}
.home-tools a:hover .home-go{text-decoration:underline;text-underline-offset:3px}
.home-why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 32px;margin-top:44px;padding-top:32px;border-top:1px solid var(--line)}
/* The band under the tools that leads to the start-up links page. */
.home-next{display:flex;align-items:center;gap:18px;margin-top:16px;padding:20px 22px;background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:0 2px 6px #0b254508}
.home-next svg{flex:none;width:44px;height:44px;padding:10px;border-radius:12px;background:var(--navy);color:var(--white);fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.home-next div{flex:1;min-width:0}
.home-next h2{font-size:18px;font-weight:720;letter-spacing:-.015em;line-height:1.25;color:var(--navy)}
.home-next p{font-size:14.5px;line-height:1.55;color:var(--muted);margin-top:4px;max-width:72ch}
@media(max-width:700px){.home-next{flex-direction:column;align-items:flex-start;gap:14px}}
.home-why h3{font-size:15.5px;font-weight:700;color:var(--navy)}
.home-why p{font-size:14.5px;line-height:1.6;color:var(--muted);margin-top:5px}

/* The page shown for an address that does not exist. */
.lost{padding:72px 0 40px;max-width:560px}
.lost h1{font-size:clamp(25px,3vw,34px);font-weight:750;letter-spacing:-.025em;color:var(--navy)}
.lost p{font-size:16px;line-height:1.6;color:var(--muted);margin:10px 0 22px}

@media (prefers-reduced-motion:reduce){
  .home-tools a{transition:none}
  .home-tools a:hover{transform:none}
  .hero-sun,.hero-rays,.hero-paper,.hero-tag{animation:none}
}
@media (max-width:1100px){
  .hero-art{--s:.84}
}
@media (max-width:900px){
  .home-hero{grid-template-columns:minmax(0,1fr)}
  .hero-art{--s:.8;justify-self:center}
  .home-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-why{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  main{padding-left:16px;padding-right:16px}
  .tool-intro{padding:24px 0 20px}
  .home-hero{padding:32px 0 30px}
  .home-hero-text>p{font-size:16px}
  .hero-art{--s:.68}
  .home-tools{grid-template-columns:minmax(0,1fr);gap:12px}
  .home-tools a{padding:18px}
}
@media (max-width:359px){
  .hero-art{--s:.58}
}