/* =============================================================
   ScaledApps LLC — site styles

   Built on the same contract as the product sites (drabblesports.com,
   homebook.io, punchlist.it, panel.homebook.io): the same token names, the
   same Inter + Material Symbols pairing, the same 1200px measure, the same
   light-default / html.dark theming. A change of accent and density is what
   separates them, not a change of system.

   What is deliberately different here: this is the parent, so it is
   achromatic. --primary is the ScaledApps navy, which is also Homebook's
   navy, and no other colour appears except inside a product's own card.
   Drabble brings its orange, Homebook its violet. Resist adding a house
   accent hue; the products are the colour on this site.
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand — straight off the ScaledApps mark (assets/scaledapps.svg) */
  --navy:    #172b4d;
  --red:     #ff5630;
  --amber:   #ffab00;
  --violet:  #6554c0;

  --white:   #ffffff;
  --gray-50:  #f8f9fa;
  --gray-100: #f1f3f5;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #adb5bd;
  --gray-500: #6c757d;
  --gray-600: #495057;
  --gray-700: #343a40;
  --gray-800: #212529;

  /* Semantic layer — the names every sibling site uses */
  --primary:        var(--navy);
  --bg:             var(--white);
  --bg-alt:         var(--gray-50);
  --text:           var(--navy);
  --text-secondary: var(--gray-500);
  --border:         var(--gray-200);
  --border-firm:    var(--gray-300);
  --card-bg:        var(--white);
  --nav-bg:         rgba(255,255,255,0.85);

  /* Product accents. Each appears only inside its own card. */
  --drabble:   #fc6703;
  --homebook:  #645aa7;
  --punchlist: #2563eb;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --max-width: 1200px;
  --prose: 680px;
  --gutter: 24px;
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

html.dark {
  --bg:             #0f1620;
  --bg-alt:         #161f2b;
  --text:           #e9edf3;
  --text-secondary: #93a1b5;
  --border:         #24303f;
  --border-firm:    #334254;
  --card-bg:        #161f2b;
  --nav-bg:         rgba(15,22,32,0.85);
  --primary:        #e9edf3;

  /* Both accents are lifted for contrast on a dark ground. */
  --drabble:   #ff8534;
  --homebook:  #9b8ede;
  --punchlist: #6ea0ff;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--transition), color var(--transition);
}

img, svg { max-width: 100%; }
a { color: inherit; }

/* ---------- Type -------------------------------------------- */

h1, h2, h3 {
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.08;
}

.display {
  font-size: clamp(2.5rem, 6.2vw, 4.25rem);
  font-weight: 600;
  text-wrap: balance;
}

h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); text-wrap: balance; }
h3 { font-size: 1.125rem; letter-spacing: -0.02em; line-height: 1.35; }

.lede {
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-secondary);
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.muted { color: var(--text-secondary); }

/* ---------- Layout ------------------------------------------ */

.wrap {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prose { max-width: var(--prose); }

.section { padding-block: clamp(72px, 11vw, 148px); }
.section--paper { background: var(--bg-alt); }
.section--open { padding-block-start: clamp(48px, 6vw, 72px); }
.section + .section:not(.section--paper) { border-top: 1px solid var(--border); }

/* ---------- Navigation -------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), background var(--transition);
}
.nav.is-scrolled { border-bottom-color: var(--border); }

.nav-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  height: 64px;              /* the family's bar height */
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* The lockup is 3.8:1. Its source file carried two thirds of its canvas as
   empty padding, so the viewBox in scaledapps.svg is trimmed to the artwork
   (the untouched original sits beside it). Height here is the real height. */
.nav-logo img { display: block; height: 40px; width: auto; }
html.dark .nav-logo img { filter: brightness(0) invert(1); }

.nav-menu {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 0.9375rem;
}

.nav-menu a {
  text-decoration: none;
  color: var(--text-secondary);
  transition: color var(--transition);
}
.nav-menu a:hover,
.nav-menu a[aria-current="page"] { color: var(--text); }

/* Theme toggle — same component as the product sites. */
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: color var(--transition), border-color var(--transition);
  font-size: 1rem;
  line-height: 1;
}
.theme-toggle:hover { color: var(--text); border-color: var(--text-secondary); }
.theme-toggle .material-symbols-outlined { font-size: 18px; }
.theme-toggle .icon-moon { display: flex; }
.theme-toggle .icon-sun  { display: none; }
html.dark .theme-toggle .icon-moon { display: none; }
html.dark .theme-toggle .icon-sun  { display: flex; }

/* If the icon font fails, a Material Symbols span shows its ligature name as
   words. In a 32px button that is a wall of text, so the wrapper clips it. */
.theme-toggle .icon-moon,
.theme-toggle .icon-sun {
  width: 18px;
  height: 18px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  margin: 5px 0;
  transition: var(--transition);
}

/* ---------- Hero -------------------------------------------- */

.hero { padding-block: clamp(80px, 13vw, 168px) clamp(64px, 9vw, 112px); }
.hero .lede { margin-top: 28px; max-width: 560px; }

/* ---------- Product cards -----------------------------------
   Each product's logo, the line that says what it is, and a way in.
   A hairline box, no fill and no shadow, so the two logos are the
   only colour on the page.                                      */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 38px 34px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color var(--transition), transform var(--transition);
}
.card:hover { border-color: var(--border-firm); }
.card:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.card .product-line { margin-top: 0; }

/* Who the product is for. The cards said what each one does and never who it
   was for, which is the question a stranger is actually asking. */
.card-for {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.card-go {
  margin-top: auto;
  padding-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--accent);
}
.card-go .material-symbols-outlined { font-size: 18px; transition: transform var(--transition); }
.card:hover .card-go .material-symbols-outlined { transform: translateX(3px); }

/* ---------- Product blocks (the Products page) --------------- */

.product {
  --accent: var(--text);
  padding-block: clamp(48px, 7vw, 88px);
  border-top: 1px solid var(--border);
}

/* Single column, but everything keeps a readable measure rather than
   running the full width of the section. */
.product > * { max-width: var(--prose); }

.product--drabble   { --accent: var(--drabble); }
.product--homebook  { --accent: var(--homebook); }
.product--punchlist { --accent: var(--punchlist); }
.card.product--drabble   { --accent: var(--drabble); }
.card.product--homebook  { --accent: var(--homebook); }
.card.product--punchlist { --accent: var(--punchlist); }

/* Each product is introduced by its own logo. Homebook ships a colour SVG;
   Drabble's logotype is set text, Comfortaa 700 with d and bb in its orange,
   exactly as drabblesports.com and the product itself set it. */
.product-logo {
  display: flex;
  align-items: center;
  min-height: 34px;
  margin-bottom: 4px;
}
.product-logo img { display: block; height: 28px; width: auto; }
html.dark .product-logo img { filter: brightness(0) invert(1); }

.wordmark {
  font-family: 'Comfortaa', system-ui, sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}
.wordmark .wm-o { color: var(--drabble); }
.wordmark .wm-sub { color: var(--text-secondary); }

.product-status {
  display: inline-block;
  margin-left: 12px;
  vertical-align: 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border: 1px solid var(--border-firm);
  border-radius: 999px;
  padding: 3px 10px;
}

.product-line {
  margin-top: 16px;
  font-size: 1.1875rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--text);
}

.product-body { margin-top: 16px; }

.facts {
  list-style: none;
  margin-top: 24px;
  display: grid;
  gap: 10px;
}
.facts li {
  padding-left: 18px;
  position: relative;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- Links & buttons --------------------------------- */

.link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 28px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity var(--transition);
}
.link:hover { opacity: 0.65; }
.link .material-symbols-outlined { font-size: 18px; transition: transform var(--transition); }
.link:hover .material-symbols-outlined { transform: translateX(3px); }

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: opacity var(--transition), background var(--transition);
}
.btn-primary { background: var(--primary); color: var(--bg); }
.btn-primary:hover { opacity: 0.85; }
.btn-ghost { border: 1px solid var(--border-firm); color: var(--text); }
.btn-ghost:hover { background: var(--bg-alt); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ---------- Columns ----------------------------------------- */

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(32px, 5vw, 64px);
  margin-top: clamp(48px, 6vw, 72px);
}
.col h3 { margin-bottom: 12px; }
.col p { font-size: 0.9375rem; }

/* ---------- Footer ------------------------------------------ */

.footer {
  border-top: 1px solid var(--border);
  padding-block: 56px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  background: var(--bg);
}
/* Four columns: the site, the products, the legal pages, and the address to
   write to. Grouping them is what lets the footer carry this many links
   without reading as a run-on line of them. */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 32px 40px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.footer a { text-decoration: none; transition: color var(--transition); }
.footer a:hover { color: var(--text); }

.footer-base {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

/* ---------- Legal pages -------------------------------------- */

.legal { max-width: var(--prose); }
.legal h2 {
  font-size: 1.25rem;
  letter-spacing: -0.022em;
  margin-top: 48px;
  margin-bottom: 12px;
}
.legal h2:first-of-type { margin-top: 0; }
.legal p { margin-bottom: 16px; }
.legal ul { margin: 0 0 16px 0; padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--text); }
.legal .meta {
  font-size: 0.875rem;
  color: var(--text-secondary);
  padding-bottom: 32px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--border);
}
.legal address { font-style: normal; color: var(--text-secondary); }

.vtable { border-top: 1px solid var(--border); margin-top: 32px; }
.vrow {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 8px 32px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.vrow dt { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.vrow dd { color: var(--text); }
@media (max-width: 640px) { .vrow { grid-template-columns: 1fr; } }

/* ---------- Motion ------------------------------------------
   There is none beyond hover and theme, deliberately. The page is
   legible the instant it paints, with or without JavaScript.     */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Narrow ------------------------------------------ */

@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .nav-menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px var(--gutter) 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  .nav-menu.open { display: flex; }
  .nav-menu a { padding: 10px 0; }
  .nav-menu .theme-toggle { margin-top: 8px; }
}

/* ---------- Surfaces ----------------------------------------
   Each product line has a marketing site and an application (or,
   for Homebook, a family of them). Listing both as a labelled
   pair states the fact without turning a login screen into a
   call to action — which is why these appear on the Products
   page and never on the home page.                            */

.surfaces {
  display: grid;
  gap: 0;
  margin-top: 28px;
  border-top: 1px solid var(--border);
  max-width: var(--prose);
}

.surface {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 4px 20px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.surface-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.surface a {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9375rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.surface a:hover { border-bottom-color: currentColor; }
.surface span.plain { font-size: 0.9375rem; color: var(--text-secondary); }

@media (max-width: 560px) {
  .surface { grid-template-columns: 1fr; }
}

/* ---------- Nested product cards ----------------------------
   Homebook ships as a family. Its members sit in a row beneath
   it, smaller than the brand cards on the home page, so they
   read as inside Homebook rather than beside it.              */

.cards--nested {
  margin-top: 28px;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 100%;
}

.cards--nested .card {
  gap: 14px;
  padding: 24px 22px;
  border-radius: 8px;
}

.cards--nested .product-logo { min-height: 26px; margin-bottom: 0; }
.cards--nested .product-logo img { height: 20px; }

.cards--nested .edition-name {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.2;
}

.cards--nested .edition-what {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ---------- Proof strip -------------------------------------
   A studio with no client logos to show needs verifiable facts
   instead. Every figure here is countable from the estate, so
   check it before changing it: applications are the live
   non-marketing surfaces, and the analytics claim is true of
   every site we run.                                          */

.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  margin-top: 48px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.proof-item {
  background: var(--bg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.proof-figure {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.proof-label {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* ---------- Product blocks (Products page) ------------------
   Each product is a full-width band, alternating ground, rather
   than another stack of text in the same narrow column. A rail
   on the left holds the logo and the surfaces and stays put
   while the detail scrolls past it; the detail sits on the
   right at a readable measure.

   The rhythm is what does the work here: three identical
   left-aligned columns read as one long page, and the same
   content in alternating bands reads as three products.       */

.pblock { padding-block: clamp(56px, 8vw, 104px); }
.pblock:nth-of-type(even) { background: var(--bg-alt); }

.pblock--drabble   { --accent: var(--drabble); }
.pblock--homebook  { --accent: var(--homebook); }
.pblock--punchlist { --accent: var(--punchlist); }

.pblock-inner {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.pblock-rail { position: sticky; top: 96px; }

.pblock-rail .product-logo { margin-bottom: 0; }

/* The one-line statement is the product's whole pitch, so it is
   set at heading scale rather than buried in body copy. */
.pstatement {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text);
  text-wrap: balance;
}

.pblock-main .product-body {
  margin-top: 20px;
  max-width: 62ch;
}

/* Facts run two-up on a wide screen; a single column of five
   short lines wastes the width the band just bought. */
.facts--two {
  margin-top: 28px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 32px;
}

.pblock .surfaces { margin-top: 28px; max-width: 100%; }
.pblock .surface { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
.pblock .surface:first-child { padding-top: 0; }

@media (max-width: 900px) {
  .pblock-inner { grid-template-columns: 1fr; gap: 28px; }
  .pblock-rail { position: static; }
}