/* Shared by every page on pipit.co.nz. Extracted from index.html once there
   was more than one page: three copies of a stylesheet is three chances for
   the pages to stop looking like the same site. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
}

:root {
  --ink: #20201e;
  --red: #df0411;
  --paper: #ffffff;
  --canvas: #f6f7f9;
  --muted: #5b6472;
  --line: rgba(17, 24, 39, 0.1);
  --radius: 16px;
  --wrap: 1120px;
}

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

body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 700; }
p { margin: 0 0 1em; }
.lede { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--muted); max-width: 34em; }
.muted { color: var(--muted); }

/* Header */
header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.bar { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 16px; }
.bar img { height: 42px; width: auto; display: block; }

.btn {
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  font-weight: 600; text-decoration: none; border: 1px solid transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { box-shadow: 0 8px 22px rgba(32, 32, 30, 0.25); }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-lg { padding: 15px 30px; font-size: 1.05rem; }

/* The rotating word in the headline.
   inline-block with a min-width measured from the longest option, so the
   word that follows does not jump left and right as it cycles. The width
   is set from JS rather than guessed in ch, because the headline is a
   clamp() size and a guess would be wrong at most viewports. */
.cycle {
  display: inline-block;
  position: relative;
  color: var(--red);
  text-align: left;
  vertical-align: bottom;
}
.cycle-word {
  display: inline-block;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.cycle-word.out { opacity: 0; transform: translateY(-0.22em); }

/* Screen readers get the whole list once, in the flow of the sentence,
   instead of a word that silently changes underneath them. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Hero */
.hero { padding: clamp(56px, 9vw, 108px) 0 clamp(40px, 6vw, 72px); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero .note { margin-top: 20px; font-size: 0.92rem; }

/* Screenshot frames */
.shot {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--canvas); box-shadow: 0 18px 50px rgba(17, 24, 39, 0.12);
}
.shot img { display: block; width: 100%; height: auto; }
/* The phone capture is portrait, so its frame is narrower and centred
   rather than filling the column the landscape shots do. */
.shot-phone { max-width: 320px; margin-inline: auto; }

/* Sections */
section { padding: clamp(52px, 8vw, 88px) 0; }
.alt { background: var(--canvas); border-block: 1px solid var(--line); }
.head { max-width: 40em; margin-bottom: 40px; }

.grid { display: grid; gap: 24px; }
@media (min-width: 720px) { .cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .cols-3 { grid-template-columns: repeat(3, 1fr); } }

.feature {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
}
.feature h3 { padding-top: 14px; border-top: 3px solid var(--red); display: inline-block; }
.feature p { margin: 0; color: var(--muted); font-size: 0.97rem; }

.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1.15fr; } }
.split.flip > :first-child { order: 2; }

/* Pricing */
.price-grid { display: grid; gap: 24px; }
@media (min-width: 820px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
.price {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column;
}
.price.lead { border-color: var(--ink); box-shadow: 0 14px 40px rgba(17, 24, 39, 0.1); }
.price .amount { font-size: clamp(2.1rem, 5vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; }
.price .per { font-size: 1rem; font-weight: 500; color: var(--muted); }
.price ul { list-style: none; padding: 0; margin: 20px 0 26px; }
.price li { padding-left: 26px; position: relative; margin-bottom: 10px; color: var(--muted); }
.price li::before {
  content: ''; position: absolute; left: 4px; top: 0.62em;
  width: 9px; height: 5px; border-left: 2px solid var(--red);
  border-bottom: 2px solid var(--red); transform: rotate(-45deg);
}
.price .btn { margin-top: auto; text-align: center; }

table.hw { width: 100%; border-collapse: collapse; margin: 8px 0 20px; }
table.hw td { padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
table.hw td:first-child { color: var(--muted); padding-right: 14px; font-size: 0.95rem; }
.hw-price { text-align: right; font-weight: 700; white-space: nowrap; }
.byod {
  margin-top: 32px; padding: 28px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--paper);
}
.byod h3 { margin-bottom: 8px; }
.byod p { max-width: 46em; }

table.compare { width: 100%; border-collapse: collapse; margin-top: 12px; }
table.compare th, table.compare td { text-align: left; padding: 13px 10px; border-bottom: 1px solid var(--line); }
table.compare th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
table.compare td:last-child, table.compare th:last-child { text-align: right; }

/* Hero composite: the desktop screen with a phone overlapping in front.
   The phone is absolutely positioned so it can break the frame edge, which
   is what makes the pair read as one product rather than two screenshots
   sitting side by side. */
.hero-shots { position: relative; padding-right: 12%; }
.shot-desk { border-radius: var(--radius); }
.device {
  position: absolute; right: 0; bottom: -6%; width: 30%;
  border-radius: 18px; overflow: hidden;
  /* A dark rim reads as a device edge without drawing a whole handset. */
  border: 4px solid #16171a;
  box-shadow: 0 26px 60px rgba(17, 24, 39, 0.3);
}
.device img { display: block; width: 100%; height: auto; }
.shots-note { font-size: 0.86rem; margin-top: 34px; max-width: 30em; }

/* Below the split breakpoint the hero stacks, and an overlapping phone
   has nothing to overlap - it becomes a thumbnail floating on a corner.
   Drop it and let the desktop screen carry the section. */
@media (max-width: 899px) {
  .hero-shots { padding-right: 0; }
  .device { display: none; }
  .shots-note { margin-top: 18px; }
}

/* Real aerial band */
.band {
  padding: 0;
  background-image: linear-gradient(rgba(20, 22, 20, 0.55), rgba(20, 22, 20, 0.7)),
    url('/assets/aerial-northland-2.jpg');
  background-size: cover; background-position: center;
}
.band-copy { padding: clamp(64px, 10vw, 128px) 0; color: #fff; }
.band-copy h2 { color: #fff; }
.band-port {
  background-image: linear-gradient(rgba(18, 20, 24, 0.62), rgba(18, 20, 24, 0.78)),
    url('/assets/aerial-port.jpg');
}
.band-list { list-style: none; padding: 0; margin: 28px 0 0; color: #e7e9ec; }
.band-list li { padding-left: 26px; position: relative; margin-bottom: 14px; max-width: 40em; }
.band-list li::before {
  content: ''; position: absolute; left: 2px; top: 0.62em;
  width: 10px; height: 6px; border-left: 2px solid var(--red);
  border-bottom: 2px solid var(--red); transform: rotate(-45deg);
}
.band-list strong { color: #fff; }

/* The drawn boundary. Sits between the aerial and the copy, at low
   opacity, so it reads as a mark made on the map rather than a graphic
   competing with the words. */
.band-port { position: relative; overflow: hidden; }
.fence {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0.85; pointer-events: none;
}
.band-port .band-copy { position: relative; }
/* On a phone the copy fills the band and a boundary behind it is noise. */
@media (max-width: 899px) { .fence { display: none; } }

/* Footer */
footer { background: var(--ink); color: #d9dbdd; padding: 56px 0 40px; }
footer a { color: #fff; }
footer img { height: 34px; width: auto; }
.foot { display: grid; gap: 28px; }
@media (min-width: 760px) { .foot { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot h4 { color: #fff; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 12px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 8px; }
.rule { border-top: 1px solid rgba(255, 255, 255, 0.14); margin-top: 40px; padding-top: 22px; font-size: 0.88rem; }

a:focus-visible, .btn:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

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

/* ---- Legal and long-form document pages ---- */
.doc { padding: clamp(40px, 7vw, 72px) 0 clamp(56px, 8vw, 96px); }
.doc-wrap { max-width: 44rem; margin: 0 auto; padding: 0 24px; }
.doc h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 8px; }
.doc h2 {
  font-size: 1.2rem; margin-top: 40px; padding-top: 20px;
  border-top: 1px solid var(--line);
}
.doc h3 { font-size: 1rem; margin-top: 24px; }
.doc p, .doc li { color: var(--muted); }
.doc li { margin-bottom: 8px; }
.doc ul { padding-left: 22px; }
.doc .updated { font-size: 0.9rem; margin-bottom: 0; }
.doc dl { margin: 0; }
.doc dt { font-weight: 600; color: var(--ink); margin-top: 18px; }
.doc dd { margin: 4px 0 0; color: var(--muted); }
/* A document that opens by telling you it is not final is more use than one
   that quietly is not. */
.doc .notice {
  border: 1px solid var(--line); border-left: 3px solid var(--red);
  border-radius: 10px; padding: 18px 20px; margin: 26px 0 0; background: var(--canvas);
}
.doc .notice p { margin: 0; font-size: 0.94rem; }
.doc table { width: 100%; border-collapse: collapse; margin: 14px 0 4px; }
.doc th, .doc td {
  text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--line);
  font-size: 0.95rem; vertical-align: top;
}
.doc th { color: var(--ink); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.doc td { color: var(--muted); }