/* Triparchi — marketing site.
   Rewritten 8 September 2026: light only, and simpler.

   There is deliberately NO dark mode. The previous stylesheet carried a full
   second palette behind `prefers-color-scheme`, which doubled every colour
   decision and was the thing most likely to break silently — a token defined
   only inside the media query renders one theme's text on the other theme's
   ground. One palette, painted explicitly, cannot do that.

   There are also no drawn phone mockups any more. Every screen on this page is
   a real screenshot, so the CSS that used to fake app UI (~200 lines of .h-*,
   .map-s, .sw-* rules) is gone with it. */

:root {
  --ink: #111827;
  --ink-soft: #5B6472;
  --muted: #9AA3AF;
  --line: #E8EAEE;
  --bg: #FFFFFF;
  --tint: #F6F8FB;
  --primary: #2F6FED;
  --primary-soft: #EBF1FE;
  --accent: #1F6F5C;
  --gold: #E8A93B;
  --shadow: 0 2px 8px rgba(17, 24, 39, .06);
  --shadow-lg: 0 18px 50px rgba(17, 24, 39, .13);
  --maxw: 1040px;
  --radius: 16px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'Bricolage Grotesque', 'Nunito Sans', sans-serif; font-weight: 800; margin: 0; line-height: 1.15; text-wrap: balance; }
p { margin: 0; }
/* `height: auto` is load-bearing, not decoration. Every screenshot carries
   width/height attributes (they reserve layout space and stop the page
   jumping as images land), and without this the height attribute WINS inside
   a narrower column — the shots rendered 300px wide by their full 1131px
   tall, vertically stretched, and each pillar came out ~1246px high. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); }

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

/* ---- header ---- */
.site-header { padding: 22px 0; }
/* `.brand` is an <a> (it links home), so it inherits the page's link colour
   and underline by default — which read as "this is a hyperlink" rather
   than "this is the logo" on every page that uses it. A wordmark stays the
   page's ink colour and plain, the same way a real logo would, even though
   tapping it still works exactly as a link does. */
.brand { display: flex; align-items: center; gap: 10px; font-family: 'Nunito Sans', sans-serif; font-weight: 900; font-size: 21px; letter-spacing: -.03em; color: var(--ink); text-decoration: none; }
/* The app's N1 wordmark: Nunito Sans Black, -0.03em, "Trip" in ink and
   "archi" in the brand blue. */
.brand .wm-b { color: var(--primary); }
.brand img { width: 28px; height: 28px; border-radius: 8px; }

/* ---- hero ---- */
.hero { padding: 40px 0 64px; }
.hero-grid { display: grid; grid-template-columns: 1fr 268px; gap: 56px; align-items: center; }
.hero h1 { font-size: 52px; letter-spacing: -.5px; }
.lede { margin-top: 18px; font-size: 19px; color: var(--ink-soft); max-width: 30em; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: 999px;
  font-weight: 800; font-size: 15.5px; text-decoration: none;
  border: 1.5px solid transparent; transition: transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
/* Google Play, before there is a Google Play. This is a <span>, not a link, so
   it takes no hover, no focus ring and no click — it is a label wearing the
   button's shape so the pair still reads as a set. Muted enough that the App
   Store button is unambiguously the one to press. */
.btn-soon { background: var(--tint); color: var(--muted); border-color: var(--line); cursor: default; font-weight: 700; }
.btn-soon:active { transform: none; }
.btn .icon { width: 19px; height: 19px; }

/* ---- the screenshot frame ----
   A thin rounded border and a shadow, nothing else. The screenshots already
   contain their own status bar and rounded corners, so drawing a bezel, a
   notch or a Dynamic Island on top would be a second phone around the first. */
.shot {
  border-radius: 30px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  background: var(--tint);
}
.shot img { border-radius: 29px; }

/* The hero screenshot used to be cropped to 540px with `object-fit: cover`,
   to keep it from towering over the headline beside it. That crop is gone: a
   screen cut off mid-scroll reads as a fragment, not as an app, which is
   exactly the complaint it drew. The height is controlled at the source
   instead — the hero column is 268px rather than the pillars' 300px, which
   brings a full 402x874 screen down to ~580px, close enough to the headline
   block that centring the two looks deliberate. Nothing is hidden. */

/* ---- pillars ---- */
.pillar { padding: 56px 0; border-top: 1px solid var(--line); }
.pillar-grid { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: center; }
/* `flip` puts the screenshot on the right. Re-ordering alone is not enough:
   the columns are 300px and 1fr, so moving the art to slot two without
   swapping the widths dropped it into the WIDE column, where it rendered at
   its natural 520px and stretched the section to 1246px. The widths swap with
   it. */
.pillar-grid.flip { grid-template-columns: 1fr 300px; }
.pillar-grid.flip > .pillar-art { order: 2; }
.tag {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 1px;
  color: var(--primary); background: var(--primary-soft);
  padding: 5px 11px; border-radius: 999px; margin-bottom: 14px;
}
.tag.soon { color: var(--gold); background: #FCF2DF; }
.pillar h2 { font-size: 32px; }
.pillar p { margin-top: 14px; color: var(--ink-soft); max-width: 34em; }
.points { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.points li { position: relative; padding-left: 24px; color: var(--ink-soft); }
.points li::before {
  content: ""; position: absolute; left: 0; top: .66em;
  width: 7px; height: 7px; border-radius: 999px; background: var(--accent);
}

/* A caveat under a list of points — smaller and greyer than the points, so it
   reads as the footnote it is rather than as a fourth feature. */
.note { margin-top: 16px; font-size: 14.5px; color: var(--muted); max-width: 34em; }
.pillar .note { color: var(--muted); }

/* A tinted pillar, for the one section whose screenshot is an iOS home screen
   rather than a Triparchi screen. Its own top border would double with the
   next section's, so it drops it. */
.pillar.band { background: var(--tint); }
.pillar.band + .pillar { border-top: 0; }
.pillar em { font-style: normal; color: var(--ink); font-weight: 700; }

/* The "coming soon" pillar has no screenshot to show, so its art slot holds a
   plain card instead of an empty frame. */
/* The "coming soon" pillar has no screenshot to show, so its art slot holds a
   plain card instead of an empty frame. It carries the SHOT'S OWN aspect ratio
   (520x1131, and the same 30px corner) so this section stands exactly as tall
   as the four above it — the card used to size to its text, which left this
   one section 294px against their ~763px and broke the page's rhythm right
   before the closing pitch. A phone-shaped placeholder is also the honest
   shape for it: there is a screen here, it just doesn't exist yet. */
.soon-card {
  border: 1px dashed var(--line); border-radius: 30px; background: var(--tint);
  aspect-ratio: 520 / 1131;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 44px 26px; text-align: center; color: var(--muted);
}
.soon-card strong { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; color: var(--ink-soft); margin-bottom: 6px; }

/* ---- facts ---- */
/* The opening statement — the onboarding's first screen, as the page's first
   screen.

   Centred and given real vertical room rather than set as a band between two
   other sections: it is now the first thing on the site, so it has to carry
   the weight a hero carries. White ground, not the tint, for the same reason —
   a tinted opening reads as a strip above the page rather than as the page.

   min-height rather than fixed padding, so it fills a short viewport without
   stranding the argument below the fold on a tall one. */
.problem {
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding: 72px 0 64px;
  border-bottom: 1px solid var(--line);
}
.problem-wrap { max-width: 880px; margin-inline: auto; text-align: center; }
/* The app icon. Rounded to iOS's own superellipse-ish radius at this size, and
   given the page's large shadow so it sits ON the page rather than in it. */
.problem-icon {
  display: block; margin: 0 auto 18px;
  width: 112px; height: 112px; border-radius: 26px;
  box-shadow: var(--shadow-lg);
}
/* Centred, because this row now lives in a centred section. The rule in the
   hero laid them out left-aligned. */
.problem .cta-row { justify-content: center; margin-top: 34px; }
/* Each clause on its own line, as the app sets it — the three-beat rhythm IS
   the argument, and a reflowed paragraph loses it. Block spans rather than
   <br> so the line breaks survive a font or width change. */
/* TWO lines, and exactly two. Each clause is its own block AND is held on one
   line: at 54px inside a 720px measure, "Twenty tabs. One group chat." wrapped
   on its own, so the heading rendered as three lines and the deliberate break
   before the punchline stopped meaning anything. The wrap is widened to 880 to
   give the long line room, and `text-wrap` is reset because the inherited
   `balance` from the h1/h2/h3 rule actively tries to split it. */
.problem-title { font-size: 50px; line-height: 1.26; letter-spacing: -1px; margin: 0; text-wrap: normal; }
.problem-title span { display: block; white-space: nowrap; }
.problem-body {
  margin: 26px auto 0; max-width: 560px;
  font-size: 18.5px; line-height: 1.6; color: var(--ink-soft);
}
/* Centred, so it reads as a turn in the argument rather than as a margin rule. */
.problem-turn { margin: 34px auto 0; max-width: 560px; font-size: 21px; line-height: 1.45; font-weight: 700; color: var(--ink); }

/* The persistent download button.

   Bottom-right, above everything, on every screen size. The page is long and
   its only real calls to action were the very top and the very bottom; a reader
   convinced by a pillar in the middle had nothing to press.

   `max(16px, env(safe-area-inset-*))` keeps it clear of the home indicator on
   an iPhone and off the very edge everywhere else. */
.sticky-cta {
  position: fixed;
  right: max(28px, env(safe-area-inset-right) + 12px);
  bottom: max(28px, env(safe-area-inset-bottom) + 12px);
  z-index: 50;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--primary); color: #fff;
  font-weight: 800; font-size: 15.5px; text-decoration: none;
  box-shadow: 0 10px 28px rgba(17, 24, 39, .22);
}
.sticky-cta:active { transform: translateY(1px); }
.sticky-cta .icon { width: 19px; height: 19px; flex-shrink: 0; }

/* On a phone the full label would run most of the screen's width and sit over
   the content it is meant to accompany, so the pill collapses to its mark. The
   accessible name survives, because the label is clipped rather than removed. */
@media (max-width: 560px) {
  /* Tighter inset on a phone than on a desktop — 28pt off both edges of a
     375pt screen is a noticeable bite out of the content beside it — but still
     clear of the home indicator. */
  .sticky-cta {
    right: max(20px, env(safe-area-inset-right) + 10px);
    bottom: max(20px, env(safe-area-inset-bottom) + 10px);
    padding: 14px; gap: 0;
  }
  .sticky-cta-label {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .sticky-cta .icon { width: 22px; height: 22px; }
}

/* Somebody who has scrolled to the closer is looking AT a download button; a
   second one floating over it is noise. Fades out rather than vanishing. */
@media (prefers-reduced-motion: no-preference) {
  .sticky-cta { transition: opacity .25s ease, transform .25s ease; }
}

@media (max-width: 720px) {
  .problem { min-height: 0; padding: 56px 0 48px; }
  .problem-icon { width: 88px; height: 88px; border-radius: 20px; margin-bottom: 14px; }
  /* Below this width the long clause genuinely cannot fit, so it is allowed
     to wrap again — three lines on a phone beats a line running off the edge. */
  .problem-title { font-size: 31px; letter-spacing: -.5px; }
  .problem-title span { white-space: normal; }
  .problem-body { font-size: 16.5px; }
  .problem-turn { font-size: 18px; }
}

.facts { padding: 52px 0; border-top: 1px solid var(--line); background: var(--tint); }
.facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: center; }
.facts b { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 34px; color: var(--ink); }
.facts span { color: var(--ink-soft); font-size: 15.5px; }

/* ---- closer ---- */
/* At least 60vh, and centred within it. The last thing on the page was a
   72/88 sandwich that ended almost as soon as it began — on a tall screen the
   footer arrived while the closing line was still settling. Flex centring
   rather than more padding, so the block sits in the middle of whatever height
   it gets instead of being pushed down from the top. */
.closer {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 88px 0;
  text-align: center;
  border-top: 1px solid var(--line);
}
.closer h2 { font-size: 44px; line-height: 1.1; letter-spacing: -.6px; max-width: 760px; margin-inline: auto; }
@media (max-width: 720px) {
  .closer { min-height: 0; padding: 60px 0; }
  .closer h2 { font-size: 30px; }
}
.closer .cta-row { justify-content: center; }
.reassure { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: center; color: var(--ink-soft); font-size: 15.5px; }

/* ---- footer ---- */
.site-footer { border-top: 1px solid var(--line); padding: 26px 0 40px; font-size: 14.5px; color: var(--muted); }
.site-footer .row { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; }
.site-footer a { color: var(--ink-soft); text-decoration: none; margin-right: 18px; }
.site-footer a:hover { text-decoration: underline; }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .hero-grid, .pillar-grid { grid-template-columns: 1fr; gap: 34px; }
  .pillar-grid.flip > .pillar-art { order: 0; }
  .pillar-art { max-width: 300px; margin: 0 auto; }
  /* Stacked, the hero shot is no longer competing with anything for height,
     so it gets the same cap as the pillar art instead of the 268px it needs
     beside a headline. */
  .hero-grid > .shot { max-width: 300px; margin: 0 auto; }
  .hero h1 { font-size: 40px; }
  .pillar h2 { font-size: 27px; }
  .closer h2 { font-size: 30px; }
  .facts-grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}


/* ---------------------------------------------------------------------------
   Document pages — privacy.html, terms.html, contact.html.

   These share this stylesheet and use their own class names (.prose, .callout,
   .updated, .table-scroll, and .site for the header/footer). Rewriting the
   stylesheet for the home page dropped all of them and left three live legal
   pages unstyled; this is that half put back, light-only like the rest.
   --------------------------------------------------------------------------- */

header.site, footer.site { border-bottom: 1px solid var(--line); padding: 22px 0; }
footer.site { border-bottom: 0; border-top: 1px solid var(--line); margin-top: 56px; font-size: 14.5px; color: var(--muted); }
footer.site .row { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; }
footer.site a { color: var(--ink-soft); text-decoration: none; margin-right: 18px; }
footer.site a:hover { text-decoration: underline; }
.copy { color: var(--muted); }
.brand-mark { width: 26px; height: 26px; border-radius: 7px; display: block; }

/* A readable measure for long-form text — the one thing these pages need most.
   65-75 characters is the target; 34em at this size lands inside it. */
.prose { max-width: 34em; margin: 0 auto; padding: 40px 0 8px; }
.prose h1 { font-size: 38px; margin-bottom: 6px; }
.prose h2 { font-size: 23px; margin: 38px 0 10px; }
.prose h3 { font-size: 18px; margin: 26px 0 6px; font-family: 'Nunito Sans', sans-serif; font-weight: 800; }
.prose p { margin: 12px 0; color: var(--ink-soft); }
.prose ul { margin: 12px 0; padding-left: 22px; color: var(--ink-soft); }
.prose li { margin: 7px 0; }
.prose strong { color: var(--ink); }
.prose a { color: var(--primary); }

.updated { color: var(--muted) !important; font-size: 14.5px; }

.callout {
  background: var(--tint); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; margin: 22px 0;
}
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

/* The third-party table is the widest thing on any of these pages. It scrolls
   inside its own box so the PAGE never scrolls sideways on a phone. */
.table-scroll { overflow-x: auto; margin: 18px 0; -webkit-overflow-scrolling: touch; }
.table-scroll table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 15px; }
.table-scroll th, .table-scroll td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-scroll th { font-weight: 800; color: var(--ink); background: var(--tint); }
.table-scroll td { color: var(--ink-soft); }

@media (max-width: 860px) {
  .prose { padding: 28px 0 8px; }
  .prose h1 { font-size: 30px; }
  .prose h2 { font-size: 20px; }
}