/* Home Crafters United - layouts for the individual pages.
   Shared pieces (colors, header, footer, buttons) live in site.css. */

/* ---------- shared across pages ---------- */
header nav a[aria-current="page"]{color:var(--honey)}
[id]{scroll-margin-top:84px}

.foot-nav{position:static;display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-size:14px}
.foot-nav a{color:var(--hero-ink);text-decoration:none}
.foot-nav a:hover{color:var(--honey)}

.social{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.social-link{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--hero-ink);text-decoration:none;font-size:14px;
  border:1px solid var(--hero-rule);border-radius:999px;padding:7px 14px 7px 11px;
}
.social-link svg{display:block;flex:0 0 auto}
.social-link:hover{color:var(--honey);border-color:var(--honey)}
.social-link:focus-visible{outline:2px solid var(--honey);outline-offset:2px}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 28px;flex-wrap:wrap}
.more-link{
  font-weight:600;font-size:15px;color:var(--ink);text-decoration:none;
  border-bottom:2px solid var(--honey);padding-bottom:1px;white-space:nowrap;
}
.more-link:hover{color:var(--honey-ink)}

/* dark page header used by the inner pages */
.pagehead{background:var(--hero-ground);color:var(--hero-ink);position:relative;overflow:hidden}
.pagehead .wrap{position:relative;padding-block:54px 46px}
.pagehead h1{font-size:clamp(30px,5.2vw,50px);max-width:18ch}
.pagehead .lede{max-width:60ch}

/* Mascot in the dark page headers. The headline is capped at 18ch and the lede
   at 60ch, so the right-hand side is free on a wide screen - that is where the
   bee goes. Below 1000px the text wants the whole width, so it steps out. */
.head-bee{
  position:absolute;right:20px;bottom:0;height:200px;width:auto;
  pointer-events:none;user-select:none;
}
.head-bee-wide{height:178px}

/* The crew bee is a wide panorama (~505px across) rather than one tall bee, so
   on Our Work it reaches back under the lede. Give that header extra room at the
   bottom: the bee is pinned to the bottom, so it drops clear of the text instead
   of being shrunk. It then sits beside the stats row, which ends well to its left. */
@media (min-width:1001px){
  .pg-work .pagehead .wrap{padding-bottom:96px}
}

/* On a narrower screen the headline takes the full width, so there is no free
   space beside it any more. Rather than hide the bee, the header reserves a
   band at the bottom and the bee shrinks into it - visible at every size. */
@media (max-width:1000px){
  .pagehead .wrap{padding-bottom:180px}
  .head-bee{height:148px;right:20px;bottom:16px}
  .head-bee-wide{height:134px}
}
@media (max-width:560px){
  .pagehead .wrap{padding-bottom:148px}
  .head-bee{height:120px;bottom:14px}
  .head-bee-wide{height:104px}
}

/* Same idea on the contact page, which uses its own dark block. Here the wrap
   also holds the "ways to reach us" row, so the bee is pinned up beside the
   heading instead of at the bottom, where it would sit on top of those boxes. */
.pg-contact .contact section > .wrap{position:relative}
.pg-contact .head-bee{top:34px;bottom:auto;height:178px}
@media (max-width:1000px){
  .pg-contact .contact section > .wrap{padding-bottom:172px}
  .pg-contact .head-bee{top:auto;bottom:16px;height:140px}
}
@media (max-width:560px){
  .pg-contact .contact section > .wrap{padding-bottom:144px}
  .pg-contact .head-bee{height:116px}
}

.stats{display:flex;flex-wrap:wrap;gap:14px 36px;margin-top:26px;padding-top:20px;border-top:1px solid var(--hero-rule)}
.stats div{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--hero-ink-2);letter-spacing:.04em}
.stats b{
  display:block;font-family:"Archivo Black",Archivo,sans-serif;font-size:30px;line-height:1.1;
  color:var(--honey);letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}

/* closing call-to-action band, bottom of every page */
.cta-band{background:var(--hero-ground);color:var(--hero-ink);border-top:3px solid var(--honey)}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px 32px;flex-wrap:wrap;padding-block:44px}
.cta-band h2{color:var(--hero-ink)}
.cta-band p{color:var(--hero-ink-2);margin:8px 0 0;max-width:52ch}
.cta-band .cta{margin-top:0}
/* bee on the phone, sitting between the message and the call button */
.cta-bee{
  height:150px;width:auto;flex:0 0 auto;display:block;
  margin-block:-22px;order:0;
}
@media (max-width:860px){ .cta-bee{height:118px;margin-block:-14px} }
@media (max-width:560px){ .cta-bee{height:96px;margin-block:-8px} }

/* ---------- HOME ---------- */
.overview{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px;margin-top:30px}
@media (max-width:820px){ .overview{grid-template-columns:1fr} }
.ov-card{
  background:var(--surface);border:1px solid var(--rule);border-radius:2px;
  padding:26px 26px 24px;display:block;
}
.ov-card.main{border-top:4px solid var(--honey)}
.ov-card .ov-top{display:flex;align-items:baseline;gap:8px 12px;flex-wrap:wrap}
.ov-card h3{font-family:Archivo,sans-serif;font-weight:800;font-size:22px;letter-spacing:-.015em;margin:0}
.ov-list{list-style:none;margin:18px 0 22px;padding:0;display:block}
.ov-list li + li{margin-top:11px}
.ov-list li{display:grid;grid-template-columns:9px 1fr;gap:12px;align-items:baseline;font-size:15.5px}
.ov-list li::before{
  content:"";width:9px;height:10px;background:var(--honey);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.ov-list li b{font-weight:650;color:var(--ink)}
.ov-card .more-link{display:inline-block;margin-top:4px;clear:right}
/* The bee sits in a clear band at the bottom of the card. The card reserves
   that height so the list above can never run underneath it, and the link
   keeps the left side of the band to itself. */
/* The bee sits in a reserved band at the bottom of the card, lined up with
   the same 26px/24px inner margin as the text so it never hugs the border. */
/* The bee floats into the corner and the service list flows around it.
   shape-outside follows the cutout's own transparent edge, so the text keeps
   its distance from the bee itself rather than from a rectangle around him. */
.ov-card{position:relative;overflow:hidden}
.ov-bee{
  float:right;width:208px;height:auto;
  margin:6px -6px 6px 20px;
  shape-margin:16px;shape-image-threshold:.5;
  pointer-events:none;user-select:none;
}
.ov-bee-plumbing{shape-outside:url(../images/bees/plumbing.webp)}
.ov-bee-excavator{shape-outside:url(../images/bees/excavator.webp)}
@media (max-width:860px){ .ov-bee{width:176px} }
@media (max-width:560px){ .ov-bee{width:140px;margin-left:14px} }

.teaser{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:28px}
@media (max-width:900px){ .teaser{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:520px){ .teaser{grid-template-columns:repeat(2,minmax(0,1fr))} }
.teaser a{
  position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:2px;
  background:var(--surface-2);text-decoration:none;
}
.teaser img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.teaser a:hover img{transform:scale(1.05)}
.teaser span{
  position:absolute;left:0;right:0;bottom:0;padding:28px 10px 9px;
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.78));
  color:#fff;font-size:12.5px;font-weight:600;line-height:1.3;
}

.strip{background:var(--honey);color:#0D0E10}
.strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px 30px;flex-wrap:wrap;padding-block:30px}
.strip .big{font-family:"Archivo Black",Archivo,sans-serif;font-size:clamp(34px,5vw,48px);line-height:1;letter-spacing:-.02em}
.strip h2{font-size:clamp(20px,2.6vw,26px);color:#0D0E10}
.strip p{margin:6px 0 0;font-size:15px;max-width:52ch;color:#2A2410}
.strip .strip-text{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.strip-bee{height:132px;width:auto;flex:0 0 auto;display:block;margin-block:-14px}
@media (max-width:700px){ .strip-bee{height:104px} }
@media (max-width:460px){ .strip-bee{height:88px} }
.strip .btn{background:#0D0E10;color:#F4F4F2}
.strip .btn:hover{background:#26292E}

/* ---------- WORK ---------- */
/* ---------- "jump to a job": a menu you open, closed by default ---------- */
.jobmenu{position:relative;max-width:420px}
.jobmenu summary{
  display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  padding:13px 15px;font-size:15px;color:var(--ink);
  background:var(--surface);border:1px solid var(--rule);border-radius:2px;
}
.jobmenu summary::-webkit-details-marker{display:none}
.jobmenu summary:hover{border-color:var(--honey)}
.jobmenu summary:focus-visible{outline:2px solid var(--honey);outline-offset:2px}
.jm-label{font-weight:600}
.jm-count{
  font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-3);margin-left:auto;
}
.jm-chev{color:var(--honey);flex:none;transition:transform .15s ease}
.jobmenu[open] summary{border-color:var(--honey)}
.jobmenu[open] .jm-chev{transform:rotate(180deg)}

/* An absolutely-positioned panel escapes the browser's own closed-details
   hiding, so say it outright: closed means gone. */
.jobmenu:not([open]) .jobindex{display:none}
.jobindex{
  position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);
  max-height:min(60vh,420px);overflow-y:auto;
  display:flex;flex-direction:column;
  background:var(--ground);border:1px solid var(--honey);border-radius:2px;
  box-shadow:0 14px 34px rgba(0,0,0,.5);
}
.jobindex a{
  display:flex;align-items:baseline;gap:10px;
  font-size:14.5px;color:var(--ink);text-decoration:none;
  padding:11px 15px;border-bottom:1px solid var(--rule);
}
.jobindex a:last-child{border-bottom:0}
.jobindex a b{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;
  color:var(--ink-3);margin-left:auto;
}
.jobindex a:hover,.jobindex a:focus-visible{background:var(--surface);color:var(--honey);outline:none}

@media (max-width:700px){
  .jobmenu{max-width:none}
  .jobmenu summary{font-size:16px;padding:14px 15px}
  .jobindex a{padding:14px 15px;font-size:15.5px}
}

.pg-work #jobs{margin-top:44px}

/* ---------- ABOUT ---------- */
.story-page{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(240px,.9fr);gap:56px;align-items:start}
@media (max-width:860px){ .story-page{grid-template-columns:1fr;gap:40px} }
.prose p{font-size:18px;line-height:1.72;color:var(--ink-2);margin:0 0 22px;max-width:62ch}
.prose p:first-child{font-size:21px;line-height:1.6;color:var(--ink)}
.prose strong{color:var(--ink)}
.prose .pull{
  font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(22px,2.8vw,28px);line-height:1.3;
  letter-spacing:-.015em;color:var(--ink);border-left:4px solid var(--honey);padding-left:18px;margin:30px 0;
}
.prose .sign{font-family:"IBM Plex Mono",monospace;font-size:13.5px;letter-spacing:.06em;color:var(--honey-ink)}
.timeline{position:sticky;top:96px}
.timeline .idx-label{margin-bottom:6px}
.timeline .miles li{border-bottom:1px solid var(--rule)}
.timeline .miles .when{color:var(--honey-ink)}
.timeline .miles .what{color:var(--ink-2)}
.truck-band{margin:0;background:var(--hero-ground)}
.truck-band img{display:block;width:100%;max-height:560px;object-fit:cover}
.truck-band figcaption{
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.06em;color:var(--hero-ink-2);
  text-align:center;padding:14px 20px;
}

/* ---------- CONTACT ---------- */
.pg-contact .contact h1{color:var(--hero-ink);font-size:clamp(30px,5.2vw,50px);max-width:18ch}

/* ---------- sponsor band (home page) ---------- */
.sponsor{background:var(--surface);border-top:1px solid var(--rule)}
.sponsor .wrap{padding-block:44px}
.sponsor-grid{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);gap:28px 36px;align-items:center;margin-top:14px}
@media (max-width:760px){ .sponsor-grid{grid-template-columns:1fr} }
.sponsor-logo{display:block;border-radius:2px;overflow:hidden;background:#0D0E10;line-height:0}
.sponsor-logo img{width:100%;height:auto;display:block}
.sponsor h2{font-size:clamp(21px,2.8vw,27px)}
.sponsor p{margin:10px 0 0;color:var(--ink-2);font-size:15.5px;max-width:56ch}
/* the entire block is one click target */
.sponsor-card{
  display:block;color:inherit;text-decoration:none;cursor:pointer;
  border:1px solid transparent;border-radius:3px;padding:18px;margin:-18px;
  transition:border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.sponsor-card:hover{
  border-color:var(--rule);background:var(--surface);transform:translateY(-2px);
}
.sponsor-card:focus-visible{outline:2px solid var(--honey);outline-offset:3px}
.sponsor-card:hover h2{color:var(--honey)}
.sponsor-card h2{transition:color .15s ease}
.sponsor-visit{
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.06em;
  color:var(--honey)!important;margin-top:16px!important;
}
.sponsor-card:hover .sponsor-visit{text-decoration:underline}


/* ---------- bees beside a section ----------
   Two patterns, because the layouts differ.

   .row-bee is a child of a heading row that already wraps. On a wide screen it
   sits on the end of that row; when the row wraps on a phone it drops onto its
   own line by itself, which is what you want - a bee alongside "What customers
   say" reads fine on a desktop and would crowd it on a phone.

   .sec-bee floats, so the words flow around it using the cutout's own edge. */
.row-bee{
  height:104px;width:auto;flex:0 0 auto;display:block;
  margin-block:-18px;margin-left:auto;
}
@media (max-width:860px){ .row-bee{height:84px;margin-block:-10px} }
@media (max-width:620px){ .row-bee{height:104px;margin:6px auto 0 0} }

.sec-bee{
  float:right;width:150px;height:auto;
  margin:0 0 8px 22px;shape-margin:16px;shape-image-threshold:.5;
  pointer-events:none;user-select:none;
}
.sec-bee-excavator{shape-outside:url(../images/bees/excavator.webp)}
.sec-bee-clipboard{shape-outside:url(../images/bees/clipboard.webp)}
.sec-bee-pointing{shape-outside:url(../images/bees/pointing.webp)}
@media (max-width:860px){ .sec-bee{width:118px;margin-left:16px} }
@media (max-width:560px){ .sec-bee{width:92px;margin-left:14px} }

/* grids next to a floated bee would be squeezed, so they start below it */
.cats, .area-grid{clear:right}

/* a bee at the head of each category column - the list flows around it */
.cat{position:relative}
.cat-bee{
  float:right;width:84px;height:auto;margin:0 0 6px 12px;
  shape-margin:10px;shape-image-threshold:.5;
  pointer-events:none;user-select:none;
}
.sec-bee-plunger{shape-outside:url(../images/bees/plunger.webp)}
.sec-bee-handshake{shape-outside:url(../images/bees/handshake.webp)}

/* ---------- service plans ---------- */
#plans{background:var(--surface);border-block:1px solid var(--rule)}
.plans-lede{max-width:62ch}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:20px;margin-top:32px}
.plan-why{margin:12px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.plan{
  background:var(--ground);border:1px solid var(--rule);border-radius:2px;
  border-top:3px solid var(--rule);padding:26px 26px 24px;
}
.plan-main{border-top-color:var(--honey)}
.plan{position:relative;overflow:hidden}
.plan-bee{
  float:right;width:104px;height:auto;margin:0 0 6px 14px;
  shape-margin:10px;shape-image-threshold:.5;
  pointer-events:none;user-select:none;
}
@media (max-width:420px){ .plan-bee{width:84px} }
.plan-top{display:flex;align-items:baseline;gap:8px 12px;flex-wrap:wrap}
.plan-top h3{font-family:Archivo,sans-serif;font-weight:800;font-size:22px;letter-spacing:-.015em;margin:0}
.plan-when{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);width:100%;
}
.plan-list{list-style:none;margin:16px 0 0;padding:0;display:block}
/* deliberately not a grid: loose text beside a <strong> would each become
   their own grid cell and stack one word per line */
.plan-list li{
  position:relative;padding-left:21px;
  font-size:15.5px;line-height:1.55;
}
.plan-list li + li{margin-top:10px}
.plan-list li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:9px;height:10px;background:var(--honey);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.plan-list strong{color:var(--ink)}
.plans-cta{margin-top:32px}

/* home page band pointing at the service plans */
.plan-band{background:var(--surface);border-block:1px solid var(--rule)}
.plan-band .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px 30px;flex-wrap:wrap;padding-block:34px;
}
.plan-band-text{flex:1 1 420px;min-width:0}
.plan-band h2{font-size:clamp(21px,2.8vw,28px)}
.plan-band p{margin:8px 0 0;color:var(--ink-2);font-size:15.5px;max-width:58ch}
.plan-band .btn{background:var(--honey);color:#0D0E10;flex:0 0 auto}
.plan-band .btn:hover{background:#FFC62E}
.plan-band-bee{height:124px;width:auto;flex:0 0 auto;display:block;margin-block:-16px}
@media (max-width:760px){ .plan-band-bee{height:92px} }

/* ---------- seasonal reminder signup ---------- */
#reminders{background:var(--surface);border-block:1px solid var(--rule)}
.remind-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:40px;align-items:start}
@media (max-width:820px){ .remind-grid{grid-template-columns:1fr;gap:28px} }
.remind-list{list-style:none;margin:20px 0 0;padding:0}
.remind-list li{position:relative;padding-left:21px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.remind-list li + li{margin-top:10px}
.remind-list li::before{
  content:"";position:absolute;left:0;top:.5em;width:9px;height:10px;background:var(--honey);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.remind-list strong{color:var(--ink)}
.remind-form{
  background:var(--ground);border:1px solid var(--rule);border-top:3px solid var(--honey);
  border-radius:2px;padding:24px;
}
.remind-form label{
  display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin:0 0 6px;
}
.remind-form label + input{margin-bottom:16px}
.remind-form .opt{font-weight:400;color:var(--ink-3)}
.remind-form input[type=text],.remind-form input[type=email]{
  width:100%;padding:11px 13px;font:inherit;font-size:15px;
  color:var(--ink);background:var(--surface);
  border:1px solid var(--rule);border-radius:2px;
}
.remind-form input:focus-visible{outline:2px solid var(--honey);outline-offset:1px;border-color:var(--honey)}
.remind-form button{width:100%;margin-top:4px;cursor:pointer;font:inherit}
.remind-small{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- plan pricing ---------- */
.plan-price{
  margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;
}
.plan-price .amt{font-size:34px;font-weight:700;line-height:1;color:var(--ink);letter-spacing:-.02em}
.plan-price .per{font-size:14px;color:var(--ink-2)}
.plan-price .mo{flex-basis:100%;margin-top:5px;font-size:13px;color:var(--ink-3)}
.plan-main .plan-price .amt{color:var(--honey)}
.plans-billing{
  margin-top:26px;max-width:62ch;font-size:14px;line-height:1.6;color:var(--ink-3);
}

/* ---------- "also built by us" panel ---------- */
#alsobuilt{border-top:1px solid var(--rule)}
.also{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,280px);
  gap:32px;align-items:center;
}
.also-body{max-width:62ch}
.also-body h2{margin:6px 0 12px}
.also-body p{color:var(--ink-2);line-height:1.65}
.also-cta{margin-top:22px}
.also-bee{width:100%;height:auto;justify-self:center}
@media (max-width:760px){
  .also{grid-template-columns:1fr;gap:18px}
  .also-bee{order:-1;width:150px}
}
.also-foot{margin:14px 0 0;font-size:13px;color:var(--hero-ink-2)}
.also-foot a{color:var(--honey);text-decoration:none}
.also-foot a:hover{text-decoration:underline}

/* ---------- phone: tighten the gap under the header ----------
   On a phone the first words sat about 3/4 of an inch below the menu bar,
   which wastes the one screen of space you actually have. Bring it to roughly
   a quarter inch. Desktop keeps its breathing room. */
@media (max-width:700px){
  /* the hero's first div is the honeycomb layer, so target the wrap directly */
  .hero > .wrap:not(:last-child){padding-top:14px}
  .pagehead .wrap{padding-top:14px}
  .pg-contact .contact > section:first-child{padding-top:26px}
  .pg-contact .contact > section:first-child .wrap > :first-child{margin-top:0}
}

/* ---------- FAQ page ---------- */
.faq-wrap{padding-block:34px 70px}
.faq-jump{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.faq-jump a{
  font-size:13.5px;color:var(--ink);text-decoration:none;
  background:var(--surface);border:1px solid var(--rule);border-radius:999px;padding:7px 13px;
}
.faq-jump a:hover{border-color:var(--honey);color:var(--honey)}
.faq-group{margin-bottom:38px;scroll-margin-top:90px}
.faq-group h2{font-size:clamp(19px,2.6vw,24px);margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.faq-sub{margin:-4px 0 14px;font-size:13.5px;color:var(--ink-3)}
.faq-item{border-bottom:1px solid var(--rule);scroll-margin-top:90px}
.faq-item summary{
  display:flex;align-items:center;gap:14px;cursor:pointer;list-style:none;
  padding:15px 2px;font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.4;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--honey)}
.faq-item summary:focus-visible{outline:2px solid var(--honey);outline-offset:2px;border-radius:2px}
.faq-item summary span{flex:1}
.faq-chev{flex:none;color:var(--honey);transition:transform .15s ease}
.faq-item[open] .faq-chev{transform:rotate(180deg)}
.faq-item[open] summary{color:var(--honey)}
.faq-a{padding:0 2px 18px;max-width:68ch}
.faq-a p{margin:0;font-size:16px;line-height:1.7;color:var(--ink-2)}

.faq-ask{
  position:relative;display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);
  gap:28px;align-items:center;margin-top:48px;padding:28px;
  background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--honey);border-radius:2px;
}
.faq-ask h2{font-size:clamp(20px,2.8vw,26px);margin:6px 0 10px}
.faq-ask p{color:var(--ink-2);line-height:1.65;margin:0}
.faq-ask .cta{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.faq-ask .btn{cursor:pointer;font:inherit}
.faq-bee{width:100%;height:auto;justify-self:center}
@media (max-width:700px){
  .faq-ask{grid-template-columns:1fr;gap:14px;padding:20px}
  .faq-bee{width:120px;order:-1}
  .faq-item summary{font-size:15.5px;padding:14px 0}
}

/* ---------- Bee Runner game ---------- */
.game-page{padding-block:22px 60px}
.game-head{display:flex;align-items:flex-end;justify-content:space-between;gap:6px 20px;flex-wrap:wrap;margin-bottom:14px}
.game-head .eyebrow{margin:0}
.game-head h1{margin:2px 0 0;font-size:clamp(28px,4.2vw,40px)}
.game-sub{margin:0;color:var(--ink-2);font-size:15px}
.bee-stage{
  position:relative;width:100%;aspect-ratio:16/9;max-height:72vh;overflow:hidden;
  background:#0A0B0E;border:1px solid var(--rule);border-top:3px solid var(--honey);border-radius:3px;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  overscroll-behavior:contain;outline:none;cursor:pointer;
}
.bee-stage:focus-visible{box-shadow:0 0 0 2px var(--honey)}
.bee-stage canvas{display:block;width:100%;height:100%}
.bee-hud{
  position:absolute;top:10px;right:12px;display:flex;gap:16px;pointer-events:none;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
}
.bee-hud b{margin-left:6px;font-size:16px;color:var(--honey);font-variant-numeric:tabular-nums}
.bee-card{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:16px;background:rgba(10,11,14,.74);cursor:default;
}
.bee-card[hidden]{display:none}
.bee-card img{width:88px;height:auto;margin-bottom:4px}
.bee-card h2{margin:0 0 6px;font-size:clamp(22px,3.4vw,32px)}
.bee-card p{margin:0 0 14px;max-width:46ch;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.bee-card .cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.bee-card .btn{cursor:pointer;font:inherit}
.bee-final b{color:var(--honey);font-size:18px}
.bee-newbest{margin-top:-6px!important;color:var(--honey)!important;font-weight:700}
.bee-help{margin:10px 0 0;font-size:13px;color:var(--ink-3)}
.game-plug{
  display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:26px;align-items:center;
  margin-top:40px;padding:24px;background:var(--surface);border:1px solid var(--rule);border-radius:2px;
}
.game-plug img{width:100%;height:auto}
.game-plug h2{margin:4px 0 8px;font-size:clamp(20px,2.8vw,26px)}
.game-plug p{margin:0;color:var(--ink-2);line-height:1.6}
.game-plug .cta{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:700px){
  .bee-stage{aspect-ratio:4/3}
  .bee-card img{display:none}
  .bee-card p{font-size:13px;margin-bottom:10px}
  .game-plug{grid-template-columns:1fr;gap:12px;padding:18px}
  .game-plug img{width:110px}
}