/* plain3.css (2026-10-15): the plain front door. Additive layer for the business path.
   Scroll engine, scene videos, ink canvas and music are not touched here. */

.pf {
  position: relative;
  background: #000;
  color: var(--gmp-white, #F4F4F4);
  padding: 72px 0;
  font-family: var(--sw-font-body, "Familjen Grotesk", sans-serif);
  box-sizing: border-box;
  overflow: hidden;
}
.pf *, .pf *::before, .pf *::after { box-sizing: border-box; }
.pf-shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.pf-kicker {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gmp-cyan, #00FFFF);
}
.pf-title {
  margin: 0 0 14px;
  font-family: var(--sw-font-display, "Bricolage Grotesque", sans-serif);
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -.01em;
}
.pf-dek {
  margin: 0 0 36px;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--gmp-soft, #B8B3C7);
}

/* buttons: 46px tall, thumb-sized */
.pf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--gmp-cyan, #00FFFF);
  background: var(--gmp-cyan, #00FFFF);
  color: #000;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  text-align: center;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.pf-btn:hover, .pf-btn:focus-visible { transform: translateY(-2px); }
.pf-btn--ghost { background: transparent; color: var(--gmp-white, #F4F4F4); border-color: var(--gmp-rule, rgba(255,255,255,.18)); }
.pf-btn--ghost:hover, .pf-btn--ghost:focus-visible { border-color: var(--gmp-cyan, #00FFFF); color: var(--gmp-cyan, #00FFFF); }

/* what do you need: four tiles */
.pf-need { padding-top: 56px; padding-bottom: 56px; }
.pf-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pf-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 170px;
  padding: 22px;
  border: 1px solid var(--gmp-rule, rgba(255,255,255,.18));
  border-radius: 16px;
  background: var(--gmp-panel, rgba(0,0,0,.82));
  color: inherit;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.pf-tile:hover, .pf-tile:focus-visible { border-color: var(--gmp-cyan, #00FFFF); transform: translateY(-3px); }
.pf-tile__n { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--gmp-green, #00FF00); }
.pf-tile strong { font-family: var(--sw-font-display, sans-serif); font-size: 21px; line-height: 1.15; }
.pf-tile span:last-child { font-size: 15px; line-height: 1.5; color: var(--gmp-soft, #B8B3C7); }

/* prices: three tracks */
.pf-prices { background: linear-gradient(180deg, #000 0%, #07040f 100%); }
.pf-track { margin: 0 0 48px; scroll-margin-top: 90px; }
.pf-track__head { margin: 0 0 18px; }
.pf-track__head h3 { margin: 0 0 6px; font-family: var(--sw-font-display, sans-serif); font-size: 26px; }
.pf-track__head p { margin: 0; max-width: 64ch; font-size: 16px; line-height: 1.5; color: var(--gmp-soft, #B8B3C7); }
.pf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.pf-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--gmp-rule, rgba(255,255,255,.18));
  border-radius: 16px;
  background: var(--gmp-panel, rgba(0,0,0,.82));
  min-width: 0;
}
.pf-card__price { margin: 0; display: flex; flex-direction: column; }
.pf-card__price span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gmp-soft, #B8B3C7); }
.pf-card__price b { font-family: var(--sw-font-display, sans-serif); font-size: 34px; line-height: 1.1; color: var(--gmp-cyan, #00FFFF); }
.pf-card__name { margin: 4px 0 0; font-family: var(--sw-font-display, sans-serif); font-size: 20px; line-height: 1.2; }
.pf-card__blurb { margin: 0; font-size: 15px; line-height: 1.5; color: var(--gmp-soft, #B8B3C7); }
.pf-card__inc { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.55; }
.pf-card__inc li + li { margin-top: 2px; }
.pf-card__step { margin: 0; font-size: 14px; line-height: 1.45; color: var(--gmp-green, #00FF00); }
.pf-card .pf-btn { margin-top: auto; width: 100%; }
.pf-after {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.pf-after p {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 22px;
  border-radius: 16px;
  border: 1px dashed var(--gmp-rule, rgba(255,255,255,.18));
  font-size: 16px;
  line-height: 1.5;
}
.pf-after b { font-family: var(--sw-font-display, sans-serif); font-size: 19px; }

/* how it works + faq */
.pf-how { border-top: 1px solid var(--gmp-rule, rgba(255,255,255,.18)); }
.pf-steps { list-style: none; margin: 0 0 56px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: none; }
.pf-steps li { padding: 22px; border-radius: 16px; border: 1px solid var(--gmp-rule, rgba(255,255,255,.18)); background: var(--gmp-panel, rgba(0,0,0,.82)); }
.pf-steps__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gmp-green, #00FF00);
  color: #000;
  font-weight: 700;
}
.pf-steps h3 { margin: 14px 0 8px; font-family: var(--sw-font-display, sans-serif); font-size: 21px; line-height: 1.2; }
.pf-steps p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--gmp-soft, #B8B3C7); }
.pf-faq-title { margin: 0 0 14px; font-family: var(--sw-font-display, sans-serif); font-size: 24px; }
.pf-faq { display: grid; gap: 10px; }
.pf-faq details { border: 1px solid var(--gmp-rule, rgba(255,255,255,.18)); border-radius: 12px; padding: 0 18px; background: var(--gmp-panel, rgba(0,0,0,.82)); }
.pf-faq summary { min-height: 52px; display: flex; align-items: center; cursor: pointer; font-weight: 700; font-size: 17px; list-style: none; }
.pf-faq summary::-webkit-details-marker { display: none; }
.pf-faq summary::after { content: "+"; margin-left: auto; padding-left: 16px; color: var(--gmp-cyan, #00FFFF); font-size: 22px; }
.pf-faq details[open] summary::after { content: "–"; }
.pf-faq details p { margin: 0 0 16px; font-size: 16px; line-height: 1.55; color: var(--gmp-soft, #B8B3C7); }
.pf-local { margin: 28px 0 0; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--gmp-soft, #B8B3C7); }

/* tablet */
@media (max-width: 1080px) {
  .pf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* phone: single column everywhere, nothing wider than 390px */
@media (max-width: 720px) {
  .pf { padding: 52px 0; }
  .pf-shell { width: calc(100% - 32px); }
  .pf-dek { font-size: 16px; margin-bottom: 26px; }
  .pf-tiles { grid-template-columns: 1fr; gap: 10px; }
  .pf-tile { min-height: 0; padding: 18px; }
  .pf-cards { grid-template-columns: 1fr; }
  .pf-after { grid-template-columns: 1fr; }
  .pf-steps { grid-template-columns: 1fr; }
  .pf-card .pf-btn, .pf-after .pf-btn { width: 100%; }
}

/* ---- store: business services first (uses the store's own card classes) ---- */
.st-track { margin-bottom: 40px; }
.st-sub { margin: 0 0 14px; font-family: var(--sw-font-display, sans-serif); font-size: 26px; }
.st-sub__dek { display: block; margin-top: 4px; font-family: var(--sw-font-body, sans-serif); font-size: 16px; color: var(--gmp-soft, #B8B3C7); }
.st-step { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--gmp-green, #00FF00); }
.st-tracks-note { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.st-tracks-note p { margin: 0; padding: 20px; border: 1px dashed var(--gmp-rule, rgba(255,255,255,.18)); border-radius: 14px; font-size: 16px; line-height: 1.5; }
.st-tracks-note .pf-btn { margin-top: 12px; }
.st-guides-dek { max-width: 62ch; }
@media (max-width: 720px) {
  .st-tracks-note { grid-template-columns: 1fr; }
  .st-sub { font-size: 23px; }
}

/* ---- contact: plain intake; the ink gimmick is hidden, the form is untouched ---- */
.p3-contact .ct-ink canvas { display: none !important; }
.p3-contact .ct-ink .g3-close__hint { display: none !important; }
.ct-field-note { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--gmp-soft, #B8B3C7); }
.ct-note-call { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--gmp-cyan, #00FFFF); font-size: 15px; line-height: 1.45; }
[hidden].ct-note-call { display: none; }

/* ---- home hero fit (additive, desktop only): the engine title is 5 lines at 1440, which pushed the buttons below the fold.
   The engine keeps its layout; only the size of the first scene title changes. ---- */
@media (min-width: 861px) {
  #world .sw-copy__title { font-size: clamp(2.2rem, 3.9vw, 4.1rem) !important; line-height: .92 !important; }
  #world .sw-copy__body { font-size: 1.1rem !important; }
  /* the small brand line sat under a pop-out card; the logo already carries the name */
  #world .sw-copy__eyebrow { display: none !important; }
  /* the engine's top nav carries Home, What we make, Prices, Contact and Store on desktop; the bottom bar sat on top of the hero copy */
  .gmp-utility { display: none !important; }
}

/* once the scroll world has scrolled past (plain3.mjs sets html.pf-past), its fixed scene layers step aside so the
   sections below are readable. The top bar, the progress line and the music player stay. */
html.pf-past .sw-stage,
html.pf-past .sw-copylayer,
html.pf-past .sw-particles,
html.pf-past .gmp-pointer-layer,
html.pf-past .po-layer,
html.pf-past #gmp-react-fx,
html.pf-past .sw-route { opacity: 0 !important; pointer-events: none !important; }
html.pf-past .d3-gravity { display: none !important; }
html.pf-past .sw-stage *, html.pf-past .sw-copylayer *, html.pf-past .sw-particles *, html.pf-past .po-layer * { pointer-events: none !important; }

/* the Store item in the engine top nav is a plain link, not an underlined special item */
.sw-nav__item[href="store.html"] { text-decoration: none !important; }