/* Path website. Loads after tokens.css; every colour, size and space is a token.
   The homepage follows the "Home · Direction A" artboard in design/canvas/Home.dc.html. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--pp-canvas); color: var(--pp-text-2);
  font-family: var(--pp-font-body); font-size: var(--pp-body); line-height: var(--pp-body-lh);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--pp-font-display); color: var(--pp-text-1); margin: 0; letter-spacing: var(--pp-tracking-tight); font-weight: 600; line-height: 1.1; }
h1 { font-size: clamp(38px, 5.4vw, 60px); line-height: 1.04; font-weight: 700; }
h2 { font-size: clamp(28px, 3.4vw, 40px); }
h3 { font-size: var(--pp-h3); line-height: 1.2; }
p { margin: 0; }
a { color: var(--pp-teal-deep); text-decoration: none; }
a:hover { color: var(--pp-teal-hover); }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }
:focus-visible { outline: none; box-shadow: var(--pp-focus); border-radius: var(--pp-r-sm); }

.wrap { max-width: var(--pp-maxw); margin-inline: auto; padding-inline: var(--pp-gutter); }
.stack { display: flex; flex-direction: column; gap: var(--pp-s5); }
.lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; max-width: 640px; }
.muted { color: var(--pp-text-3); }
.small { font-size: var(--pp-small); }
.tabular { font-variant-numeric: tabular-nums; }

/* Section label: sentence case with a short pink bar. Never spaced capitals. */
.micro { font-family: var(--pp-font-display); font-size: var(--pp-small); font-weight: 500; color: var(--pp-text-2); display: flex; align-items: center; gap: 10px; }
.micro::before { content: ''; display: inline-block; width: 18px; height: 3px; background: var(--pp-pink); flex: none; }
.micro.on-dark { color: rgba(255,255,255,.8); }

/* Buttons: 48px, 6px corners, Poppins. Teal is the one "Start free" per page. */
.btn {
  font-family: var(--pp-font-display); font-weight: 600; font-size: var(--pp-body);
  height: var(--pp-control-h); padding: 0 22px; border-radius: var(--pp-r-md); border: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  cursor: pointer; text-decoration: none; transition: background var(--pp-fast) var(--pp-ease), color var(--pp-fast) var(--pp-ease), transform var(--pp-fast) var(--pp-ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--pp-teal); color: var(--pp-ink); }
.btn-primary:hover { filter: brightness(1.06); color: var(--pp-ink); }
.btn-ink { background: var(--pp-ink); color: var(--pp-white); }
.btn-ink:hover { filter: brightness(1.25); color: var(--pp-white); }
.btn-white { background: var(--pp-white); color: var(--pp-ink); }
.btn-white:hover { background: var(--pp-sunken); color: var(--pp-ink); }
.btn-outline { background: transparent; color: var(--pp-ink); border: 1.5px solid var(--pp-ink); }
.btn-outline:hover { background: var(--pp-hover); color: var(--pp-ink); }
.btn-lg { height: 56px; padding: 0 28px; font-size: var(--pp-body-lg); }
.btn-sm { height: 44px; padding: 0 18px; font-size: 15px; }

/* Header */
.site-header { background: var(--pp-surface); border-bottom: 1px solid var(--pp-line); position: sticky; top: 0; z-index: 20; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--pp-s5); height: 72px; }
.brand img { height: 30px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; margin: 0; padding: 0; list-style: none; }
.nav-links a:not(.btn) { color: var(--pp-text-2); }
.nav-links a:not(.btn):hover { color: var(--pp-text-1); }
.nav-links a.strong { color: var(--pp-text-1); }
.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; border-radius: var(--pp-r-md); cursor: pointer; color: var(--pp-ink); align-items: center; justify-content: center; }
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav-links { display: none; position: absolute; left: 0; right: 0; top: 72px; background: var(--pp-surface); border-bottom: 1px solid var(--pp-line); flex-direction: column; align-items: stretch; gap: 0; padding: var(--pp-s3) var(--pp-gutter) var(--pp-s5); box-shadow: var(--pp-shadow-md); }
  .nav-links.open { display: flex; }
  .nav-links li a:not(.btn) { display: block; padding: 14px 0; border-bottom: 1px solid var(--pp-line); font-size: var(--pp-body); }
  .nav-links li:last-child { padding-top: var(--pp-s4); }
  .nav-links .btn { width: 100%; }
}

/* Hero: a photograph across the full width, with the offer and the call to action set straight on it. The owner stands in
   the right half; the left third of the picture is a white pillar, and that is where the words go. The picture is scaled to
   the page's width, so the pillar ends at 33.5% of it: the paragraph and the small print are held inside that (--hero-text),
   because past it they run over the customers at the table and cannot be read. On screens wider than about 1,450 px the
   page's column starts too far right for that, so the words move left with the picture (--hero-left).
   On a narrow screen the picture sits above the words. */
.hero { position: relative; display: flex; align-items: center; min-height: clamp(560px, 50vw, 860px); padding-block: var(--pp-s7) var(--pp-s9); overflow: hidden;   /* the deeper foot keeps the small print off the table in the corner of the picture */
  --hero-col: max(var(--pp-gutter), calc((100vw - var(--pp-maxw)) / 2 + var(--pp-gutter)));   /* where the page's column starts */
  --hero-left: min(var(--hero-col), 11vw);
  --hero-text: calc(32.5vw - var(--hero-left)); }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.hero .wrap { position: relative; width: 100%; }
.hero-copy { max-width: 560px; margin-left: calc(var(--hero-left) - var(--hero-col)); gap: var(--pp-s5); }
.hero h1 { font-size: clamp(36px, 4.2vw, 52px); max-width: 9.6em; }   /* breaks after "gets", as on the ideas page David chose from */
.hero-copy .lede { font-size: clamp(16px, 1.25vw, 19px); max-width: var(--hero-text); }
.hero-copy .hero-note { max-width: var(--hero-text); }
@media (max-width: 1100px) {   /* below this the words no longer fit on the pillar */
  .hero { display: block; min-height: 0; padding-block: 0 var(--pp-s7); }
  .hero-photo { position: static; height: auto; aspect-ratio: 21 / 9; object-position: 50% 25%; }
  .hero-copy { max-width: 640px; margin-left: 0; padding-top: var(--pp-s6); }
  .hero h1 { max-width: 640px; }
  .hero-copy .lede { font-size: clamp(17px, 1.6vw, 20px); max-width: 640px; }
  .hero-copy .hero-note { max-width: none; }
}
@media (max-width: 700px) { .hero-photo { aspect-ratio: 16 / 10; object-position: 80% 30%; } }
.hero h1 em { font-style: normal; color: var(--pp-pink); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-note { font-size: var(--pp-small); color: var(--pp-text-3); }
@media (max-width: 560px) { .hero-actions .btn { width: 100%; } }

/* A dashed tag on anything David must clear before going live: a placeholder or held wording. tools/deploy.sh refuses live while one is left. */
.review-tag { display: inline-block; border: 1px dashed currentColor; border-radius: var(--pp-r-sm); padding: 2px 8px; font-size: var(--pp-micro); line-height: 1.5; white-space: normal; }

/* Sections */
.section { padding-block: clamp(56px, 8vw, 96px); }
.section.tight { padding-top: 0; }
.section-head { display: flex; flex-direction: column; gap: var(--pp-s2); max-width: 720px; margin-bottom: var(--pp-s6); }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pp-s5); }
.card { border: 1px solid var(--pp-line); border-radius: var(--pp-r-lg); padding: var(--pp-s6); background: var(--pp-surface); display: flex; flex-direction: column; gap: var(--pp-s3); }
.card p { color: var(--pp-text-2); }
.card .more { font-weight: 600; margin-top: auto; }
.icon-tile { width: 48px; height: 48px; border-radius: var(--pp-r-md); background: var(--pp-teal-soft); display: grid; place-items: center; color: var(--pp-teal-deep); }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }

/* A sector broken out: the copy on one side, the product at work on the other (floor.css draws the Food and drink one) */
.sector { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: var(--pp-s8); align-items: center; }
.sector-copy { display: flex; flex-direction: column; gap: var(--pp-s5); }
.sector-title { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; }
.sector-title em { font-style: normal; color: var(--pp-pink); }
.sector-lede { font-size: var(--pp-body-lg); line-height: 1.5; }
.sector-copy .more { font-weight: 600; }
.sector-film { display: flex; flex-direction: column; gap: var(--pp-s5); min-width: 0; }
.sector-caption { font-size: var(--pp-small); color: var(--pp-text-3); }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.ticks li { display: flex; gap: 14px; align-items: flex-start; }
.ticks svg { flex: none; width: 28px; height: 28px; padding: 6px; box-sizing: border-box; border-radius: var(--pp-r-md); background: var(--pp-teal-soft); color: var(--pp-teal-deep); margin-top: 2px; }
.ticks b { display: block; font-family: var(--pp-font-display); font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--pp-text-1); }
.ticks span { display: block; font-size: 15px; line-height: 1.5; }
.sector + .sector { margin-top: var(--pp-s9); }
.sector.flip { grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); }
.sector.flip .sector-film { order: -1; }
@media (max-width: 960px) { .sector, .sector.flip { grid-template-columns: 1fr; gap: var(--pp-s6); } .sector.flip .sector-film { order: 0; } }

/* Prices */
.prices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pp-s5); }
.price-card { border-radius: var(--pp-r-lg); padding: 36px; display: flex; flex-direction: column; gap: var(--pp-s3); background: var(--pp-surface); border: 1.5px solid var(--pp-ink); }
.price-card.ink { background: var(--pp-ink); color: rgba(255,255,255,.82); border-color: var(--pp-ink); }
.price-card.ink h3 { color: var(--pp-white); }
.price { font-family: var(--pp-font-display); font-weight: 700; font-size: clamp(40px, 4.2vw, 48px); line-height: 1; color: var(--pp-text-1); font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.price small { font-size: var(--pp-body-lg); font-weight: 500; color: var(--pp-text-3); line-height: 1.3; }
.price-card.ink .price { color: var(--pp-white); }
.price-card.ink .price small { color: rgba(255,255,255,.7); }
.price-card .btn { align-self: flex-start; margin-top: var(--pp-s2); }
@media (max-width: 800px) { .prices { grid-template-columns: 1fr; } .price-card { padding: 28px; } }

/* Hardware split */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.split .copy { display: flex; flex-direction: column; gap: var(--pp-s3); }
.split .copy p { font-size: 17px; }
.split .copy a.more { font-weight: 600; }
.desk { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.desk-film { position: relative; aspect-ratio: 5 / 3; border-radius: var(--pp-r-xl); overflow: hidden; background: var(--pp-sunken); }
.desk-film img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: var(--pp-s5); } }

/* Pink band */
.band { background: var(--pp-pink-soft); border-radius: var(--pp-r-xl); padding: clamp(32px, 5vw, 56px); display: flex; justify-content: space-between; align-items: center; gap: var(--pp-s6); flex-wrap: wrap; }
.band h2 { font-size: clamp(28px, 3vw, 36px); }
.band .copy { display: flex; flex-direction: column; gap: var(--pp-s2); }
.band .copy p { font-size: 17px; }

/* Footer */
.site-footer { border-top: 1px solid var(--pp-line); background: var(--pp-canvas); padding-block: var(--pp-s6) var(--pp-s7); font-size: var(--pp-small); color: var(--pp-text-3); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--pp-s6); }
.footer-grid h4 { font-family: var(--pp-font-body); font-size: var(--pp-small); font-weight: 600; color: var(--pp-text-1); margin-bottom: 4px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.footer-grid a { color: var(--pp-text-3); }
.footer-grid a:hover { color: var(--pp-text-1); }
.footer-brand { display: flex; flex-direction: column; gap: 6px; }
.footer-brand img { height: 26px; width: auto; align-self: flex-start; }   /* a column flex box stretches an image to its full width, and the logo then floats in the middle of it */
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: span 2; } }

/* Cookie notice: two choices, no dark patterns. Non-essential cookies are off until "Accept all". */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 600px; margin-inline: auto; background: var(--pp-surface); border: 1px solid var(--pp-line-field); border-radius: var(--pp-r-lg); padding: 20px; box-shadow: var(--pp-shadow-md); z-index: 30; display: flex; flex-direction: column; gap: 14px; font-size: var(--pp-small); color: var(--pp-text-2); }
.consent[hidden] { display: none; }
.consent p { margin: 0; }
.consent .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.consent .actions .btn { height: 40px; font-size: var(--pp-small); padding: 0 16px; }
@media (min-width: 640px) { .consent { left: auto; right: 24px; bottom: 24px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* The legal and help pages: one readable column */
.doc { max-width: 760px; padding-block: var(--pp-s7) var(--pp-s8); display: flex; flex-direction: column; gap: var(--pp-s3); }
.doc h1 { font-size: var(--pp-h1); line-height: var(--pp-h1-lh); }
.doc h2 { font-size: var(--pp-h3); line-height: var(--pp-h3-lh); margin-top: var(--pp-s5); }
.doc p, .doc li { font-size: 17px; line-height: 1.6; }
.doc ul, .doc ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--pp-s2); }
.doc table { border-collapse: collapse; width: 100%; font-size: 15px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--pp-line); }
.doc th { font-weight: 500; }
.doc .table-wrap { overflow-x: auto; }
@media (max-width: 560px) { .doc h1 { font-size: var(--pp-h2); line-height: var(--pp-h2-lh); } }