/*
 * The /free/ hub, "On the House" (patterns/page-free.php, inc/free-hub.php).
 * Lifted from cofounder's mock (Templacity-cofounder/.audit/free-hub-2026-09-25.html),
 * every selector scoped under .fh. The page's one colour is the tag string.
 * The band above the hero reads --page-top from theme.css, never a number.
 * Small grey lines use --ink-muted, not the mock's --ink-faint, which fails
 * contrast on paper (Lighthouse, 2026-09-25); pair titles are h3, not h4.
 */
.fh {
  --sheet: #FDFCFA;
  --rule-soft: rgba(188, 185, 175, 0.45);
  --tagline: #9C4A38;
  --manila: #E9DFC8;
  --manila-edge: #D5C7A6;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --wrap-max: 1320px;
  --wrap-pad: 48px;
  --wrap-pad-sm: 24px;
  --section-gap: 108px;
  --ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  padding-bottom: var(--section-gap);
  overflow-x: clip;
}
@media (max-width: 720px) { .fh { --section-gap: 72px; } }
.fh .wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-pad); }
@media (max-width: 720px) { .fh .wrap { padding: 0 var(--wrap-pad-sm); } }
.fh a { text-decoration: none; color: inherit; }
.fh .eyebrow {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted);
}
.fh .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ink); color: var(--paper-soft);
  border: 0; border-radius: var(--radius);
  padding: 15px 26px; font-family: var(--ui);
  font-size: 14.5px; font-weight: 500; letter-spacing: 0.01em;
  transition: transform .18s ease, background .18s ease;
}
.fh .btn:hover { background: var(--ink-hover); transform: translateY(-2px); }
.fh .btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; color: var(--ink);
  border: 1px solid rgba(39, 38, 34, 0.4); border-radius: var(--radius);
  padding: 12px 22px; font-family: var(--ui);
  font-size: 14px; font-weight: 500;
  transition: border-color .18s ease, transform .18s ease;
}
.fh .btn-ghost:hover { border-color: rgba(39, 38, 34, 1); transform: translateY(-1px); }
.fh .hairline { max-width: var(--wrap-max); margin: var(--section-gap) auto 0; padding: 0 var(--wrap-pad); }
.fh .hairline .line { border-top: 1px solid var(--rule-soft); }
@media (max-width: 720px) {
  .fh .hairline { padding: 0 var(--wrap-pad-sm); }
}
.fh .tag {
  position: absolute; z-index: 8; pointer-events: none;
  font-family: var(--ui); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tagline);
  background: var(--manila); border: 1px solid var(--manila-edge);
  border-radius: 3px; padding: 7px 12px 7px 20px;
  box-shadow: 0 6px 14px rgba(39,38,34,0.14);
  transform: rotate(6deg);
}
.fh .tag::before { 
  content: ""; position: absolute; left: 7px; top: 50%;
  width: 6px; height: 6px; transform: translateY(-50%);
  border-radius: 50%; background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--manila-edge);
}
.fh .tag-string { 
  position: absolute; z-index: 7; pointer-events: none; color: var(--tagline);
}
.fh .hero { padding: var(--page-top) 0 0; }
.fh .hero-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 56px; align-items: center; min-height: 520px;
}
.fh .hero .kicker {
  font-family: var(--serif); font-style: italic; font-size: 19px;
  color: var(--ink-muted); margin: 0 0 10px;
}
.fh .hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 4.4vw, 66px);
  letter-spacing: -0.02em; line-height: 1.02; margin: 0;
}
.fh .hero .sub {
  margin: 22px 0 0; color: var(--ink-muted); font-size: 16.5px; max-width: 46ch;
}
.fh .hero-cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.fh .hero-note { margin-top: 18px; font-size: 13px; color: var(--ink-muted); }
.fh .table-scene { position: relative; padding: 30px 6px 44px; }
.fh .table-row { display: flex; align-items: flex-end; justify-content: center; }
.fh .piece {
  position: relative; background: var(--sheet);
  border: 1px solid var(--rule-soft); border-radius: 4px;
  box-shadow: 0 18px 36px rgba(39,38,34,0.13);
  transition: transform .22s ease;
}
.fh .piece svg { width: 100%; height: auto; border-radius: 4px; }
.fh .piece:hover { transform: translateY(-12px) rotate(0deg) !important; z-index: 9; }
.fh .p-cal { width: 30%; transform: rotate(-5deg) translateY(10px); z-index: 1; }
.fh .p-print { width: 27%; transform: rotate(2deg) translateY(-8px); margin-left: -6%; z-index: 3; }
.fh .p-guide { width: 27%; transform: rotate(-1.5deg) translateY(6px); margin-left: -5%; z-index: 2; }
.fh .p-device { width: 26%; transform: rotate(5deg) translateY(14px); margin-left: -5%; z-index: 4; }
.fh .table-line { border-top: 1.5px solid var(--rule); margin: -8px 8% 0; }
.fh .table-caption {
  margin: 22px auto 0; text-align: center;
  font-family: var(--serif); font-style: italic;
  font-size: 15.5px; color: var(--ink-muted);
}
@media (max-width: 900px) {
  .fh .hero-grid { grid-template-columns: 1fr; gap: 28px; min-height: 0; }
  .fh .table-scene { padding-top: 8px; }
}
.fh .section-head { max-width: 62ch; }
.fh .section-head h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 3vw, 42px); letter-spacing: -0.015em;
  line-height: 1.08; margin: 0 0 14px;
}
.fh .section-head p { color: var(--ink-muted); margin: 0; }
.fh .cards { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 1040px) {
  .fh .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .fh .cards { grid-template-columns: 1fr; }
}
.fh .card {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper-soft); border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg); padding: 22px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.fh .card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(39,38,34,0.10); }
.fh .card .art {
  background: var(--sheet); border: 1px solid var(--rule-soft);
  border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 18px;
}
.fh .card .art svg { width: 100%; height: auto; }
.fh .card h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 0 0 6px; letter-spacing: -0.01em; }
.fh .card .what { color: var(--ink-muted); font-size: 14.5px; margin: 0 0 14px; }
.fh .card .count { font-family: var(--ui); font-size: 12.5px; color: var(--ink-muted); letter-spacing: 0.04em; margin-bottom: 16px; }
.fh .card .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fh .card .go { font-family: var(--ui); font-size: 13.5px; font-weight: 500; border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.fh .card:hover .go { border-color: var(--ink); }
.fh .chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ui); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 999px; padding: 5px 11px;
}
.fh .chip.instant { color: var(--ink); background: rgba(39,38,34,0.06); }
.fh .chip.email { color: var(--tagline); background: rgba(156,74,56,0.08); }
.fh .chip svg { width: 11px; height: 11px; }
.fh .card .tag { top: -11px; right: 14px; }
.fh .card.hall { background: transparent; border: 1.5px dashed var(--rule); justify-content: center; text-align: center; padding: 40px 26px; }
.fh .card.hall h3 { font-size: 22px; }
.fh .card.hall .what { margin-bottom: 18px; }
.fh .card.hall .go { align-self: center; margin: 0 auto; }
.fh .pairs { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) {
  .fh .pairs { grid-template-columns: 1fr; }
}
.fh .pair {
  background: var(--paper-soft); border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg); padding: 24px;
}
.fh .pair .duo { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-bottom: 18px; }
.fh .pair .mini {
  position: relative; background: var(--sheet); border: 1px solid var(--rule-soft);
  border-radius: 4px; overflow: visible;
}
.fh .pair .mini svg { width: 100%; height: auto; border-radius: 4px; }
.fh .pair .mini .tag { transform: rotate(6deg) scale(0.82); top: -10px; right: -8px; padding: 6px 10px 6px 18px; }
.fh .pair .arrow { color: var(--ink-faint); }
.fh .pair .arrow svg { width: 22px; height: 22px; }
.fh .pair h3 { font-family: var(--serif); font-weight: 400; font-size: 19px; margin: 0 0 4px; }
.fh .pair p { font-size: 13.5px; color: var(--ink-muted); margin: 0; }
.fh .pair .price { font-family: var(--ui); font-size: 12.5px; color: var(--ink-muted); margin-top: 10px; letter-spacing: 0.04em; }
.fh .order {
  margin-top: var(--section-gap);
  background: var(--paper-soft); border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
}
.fh .order .inner {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 48px; align-items: center; padding: 56px;
}
@media (max-width: 900px) {
  .fh .order .inner { grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; }
}
.fh .order h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.6vw, 38px); margin: 0 0 12px; letter-spacing: -0.015em; }
.fh .order p { color: var(--ink-muted); margin: 0; max-width: 52ch; }
.fh .order form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.fh .order input {
  flex: 1 1 240px; font-family: var(--ui); font-size: 14.5px;
  padding: 14px 18px; border: 1px solid var(--rule);
  border-radius: var(--radius); background: var(--sheet); color: var(--ink);
}
.fh .order input:focus { outline: none; border-color: var(--ink); }
.fh .order .small { font-size: 12.5px; color: var(--ink-muted); margin-top: 12px; }
.fh .order .slot-art { position: relative; display: grid; place-items: center; }
.fh .order .slot-art svg { width: min(100%, 380px); height: auto; }

/* Not in the mock: the Daybook card claims in place (a button, not a link), and
   names the two device pages that give the same planner away. */
.fh button.go { background: none; border: 0; border-bottom: 1px solid var(--rule); padding: 0 0 2px; color: var(--ink); cursor: pointer; font-family: var(--ui); font-size: 13.5px; font-weight: 500; }
.fh .card:hover button.go { border-color: var(--ink); }
.fh .card .also { font-size: 13px; color: var(--ink-muted); margin: -6px 0 16px; }
.fh .card .also a { border-bottom: 1px solid var(--rule); }
.fh .card .also a:hover { border-color: var(--ink); }
.fh .order form { flex-wrap: wrap; }
.fh .order .tpl-nl-msg { flex-basis: 100%; margin: 4px 0 0; }

/* Resets against theme-wide rules on the same class names (theme.css): the
   home page's .section-head grid, .hero h1's 11ch cap and .chip's filter-button
   border. And the mock's own .hero shorthand zeroed .wrap's side padding. */
.fh .hero { padding: var(--page-top) var(--wrap-pad) 0; }
@media (max-width: 720px) { .fh .hero { padding-left: var(--wrap-pad-sm); padding-right: var(--wrap-pad-sm); } }
.fh .hero h1 { max-width: none; }
.fh .section-head { display: block; margin-bottom: 0; }
.fh .section-head h2 { max-width: none; margin: 0 0 14px; font-size: clamp(30px, 3vw, 42px); }
.fh .chip { border: 0; cursor: default; }
.fh .tag { white-space: nowrap; }
@media (max-width: 720px) { .fh .table-scene .tag { font-size: 9px; padding: 5px 9px 5px 16px; } }