/* The homepage hero, Armen's final decision (2026-10-02): everything on one centered column, no animation, and many small
   inked drawings from this site scattered at random behind it in three brand colours. They are kept very faint so the words
   stay easy to read (he asked twice for them to be more transparent). The animated card that used to sit under the button is
   retired in src/retired/. */
.hero.home-hero{position:relative;overflow:hidden;isolation:isolate}
.hero.home-hero .grid{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.hero.home-hero h1{max-width:15em;margin-left:auto;margin-right:auto;text-wrap:balance}
.hero.home-hero .lede,.hero.home-hero .under{max-width:36em;margin-left:auto;margin-right:auto}
.hero.home-hero .acts{justify-content:center}
.hero-doodles{position:absolute;inset:0;z-index:-1;pointer-events:none}
.doodle-sprite{position:absolute;width:0;height:0;overflow:hidden}
.doodle{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:auto;overflow:visible;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transform:rotate(var(--r))}
.doodle.wide{stroke-width:2.4}
.doodle.c1{color:var(--c-on-dark);opacity:.07}
.doodle.c2{color:var(--saddle-light);opacity:.1}
.doodle.c3{color:#86AFD5;opacity:.1}
.doodle.dm{display:none}
@media (min-width:701px) and (max-width:1100px){.doodle.dd{width:calc(var(--w) * .8)}}
@media (max-width:700px){
  .doodle.dd{display:none}
  .doodle.dm{display:block}
}

/* Polish (Armen 2026-10-02: "what can you do to make it look more appealing"): more air, bigger type for readability, one
   focal phrase in bold warm colour (it replaced the hand-drawn squiggly underline, which "looks AI"), and the drawings thin
   out toward the middle where the words are. */
.hero .lede .key{font-weight:700;color:var(--saddle-light)}
.hero.home-hero{padding:108px 0 116px}
.hero.home-hero h1{font-size:clamp(42px,5.6vw,80px);line-height:1.06;margin-bottom:28px;max-width:14em}
.hero.home-hero .lede{font-size:25px;line-height:1.5;text-wrap:balance}
.hero.home-hero .acts{margin-top:34px}
.hero.home-hero .btn{min-height:64px;padding:16px 48px;font-size:24px}
.hero.home-hero .under{font-size:20px;margin-top:24px}
.hero-doodles{-webkit-mask-image:radial-gradient(ellipse 58% 62% at 50% 50%,rgba(0,0,0,.28),#000 82%);
  mask-image:radial-gradient(ellipse 58% 62% at 50% 50%,rgba(0,0,0,.28),#000 82%)}
@media (max-width:700px){
  .hero.home-hero{padding:56px 0 64px}
  .hero.home-hero h1{font-size:clamp(40px,11.5vw,54px);line-height:1.08}
  .hero.home-hero .lede{font-size:21px}
  .hero.home-hero .btn{width:100%;padding:14px 22px;font-size:22px}
}