/* Carreh — the products page.
 *
 * ⛔ FEATURES ARE NOT PRODUCTS. The site's menu already lists every feature and
 *    the founder likes it as it is. This page is the other axis: the three apps
 *    a person can install, each with its own identity, its own price and its own
 *    store row. Everything here is prefixed .pr- so it cannot collide with the
 *    shared .rd- system or with any feature page's own extras.
 *
 * ⛔ THE PHONES ARE DRAWN, NOT PHOTOGRAPHED. A screenshot is out of date the day
 *    after a release and there are three products to keep in step; a drawn frame
 *    shows the shape of each product without ever going stale or shipping a
 *    3 MB image to a phone on airport wifi.
 */

.pr-kind { display:inline-block; font-family:'Space Grotesk',ui-monospace,monospace; font-size:11px;
           letter-spacing:.14em; text-transform:uppercase; opacity:.62; margin-bottom:12px }

.pr-product { padding:clamp(76px,9vw,120px) 5vw; position:relative; overflow:hidden }
.pr-product--travel { background:#FFFFFF; color:#0B2318 }
.pr-product--board  { background:#0B0C09; color:#F7F5F1 }
.pr-product--mail   { background:#FBF7F0; color:#1A1005 }

.pr-split { display:grid; gap:clamp(34px,5vw,72px); align-items:center;
            grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) }
@media (max-width:900px) { .pr-split { grid-template-columns:1fr } }
/* The flip is a desktop rhythm only: on a phone every product keeps the same
   order, copy first, so the page reads the same way all the way down. */
@media (min-width:901px) { .pr-split--flip .pr-copy { order:2 } .pr-split--flip .pr-phone-wrap { order:1 } }

.pr-title { font-family:'Plus Jakarta Sans','Bricolage Grotesque',Georgia,serif; font-weight:800;
            font-size:clamp(38px,5vw,72px); line-height:.98; letter-spacing:-.03em; margin:0 }
.pr-tagline { font-family:'Outfit','Instrument Serif',Georgia,serif; font-style:italic; font-weight:400;
              font-size:clamp(20px,2.4vw,30px); margin:10px 0 0; opacity:.92 }
.pr-product--travel .pr-tagline { color:#0E4A28 }
.pr-product--board  .pr-tagline { color:#F0C64A }
.pr-product--mail   .pr-tagline { color:#B4430F }
.pr-body { font-size:16.5px; line-height:1.62; max-width:60ch; margin:20px 0 0; opacity:.88 }

.pr-points { list-style:none; margin:24px 0 0; padding:0; display:grid; gap:9px }
.pr-points li { position:relative; padding-inline-start:22px; font-size:15px; opacity:.88 }
.pr-points li::before { content:''; position:absolute; inset-inline-start:0; top:.55em; width:8px; height:8px;
                        border-radius:50%; background:currentColor; opacity:.4 }

/* Stores. A product that has not shipped shows the same two badges, dimmed and
   inert, because the founder wants the shape of the row to be the same for every
   product; what it must never do is take a tap somewhere that does not exist. */
.pr-stores { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:28px }
.pr-badge img { height:46px; width:auto; display:block }
.pr-badge { display:inline-flex; border-radius:9px; transition:transform .15s }
a.pr-badge:hover { transform:translateY(-2px) }
.pr-badge--soon { filter:grayscale(1); opacity:.42; cursor:default; pointer-events:none }
.pr-soon { font-family:'Space Grotesk',ui-monospace,monospace; font-size:11px; letter-spacing:.12em;
           text-transform:uppercase; padding:6px 11px; border-radius:100px; border:1px solid currentColor;
           opacity:.55 }
.pr-more { margin-top:20px; font-size:15px }
.pr-more a { font-weight:600; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px }
.pr-product--travel .pr-more a { color:#1F6B3D }
.pr-product--board  .pr-more a { color:#F0C64A }
.pr-product--mail   .pr-more a { color:#B4430F }

/* ── The phone ─────────────────────────────────────────────────────────────── */
.pr-phone-wrap { display:flex; justify-content:center }
.pr-phone { width:min(300px,78vw); aspect-ratio:9/19.2; border-radius:44px; padding:11px; position:relative;
            background:linear-gradient(160deg,#2b2b2b,#0d0d0d); box-shadow:0 40px 80px -40px rgba(0,0,0,.65),
            0 0 0 1px rgba(255,255,255,.06) inset }
.pr-notch { position:absolute; top:15px; left:50%; transform:translateX(-50%); width:88px; height:23px;
            border-radius:100px; background:#000; z-index:2 }
.pr-screen { height:100%; border-radius:34px; padding:38px 14px 16px; overflow:hidden;
             background:#F6F4EF; color:#0B2318; display:flex; flex-direction:column; gap:9px }
.pr-screen--dark { background:#0B0C09; color:#F7F5F1 }
.pr-status { display:flex; justify-content:space-between; font-size:10.5px; font-weight:700; opacity:.6;
             margin-bottom:2px }
.pr-eyebrow { font-family:'Space Grotesk',ui-monospace,monospace; font-size:9.5px; letter-spacing:.16em;
              text-transform:uppercase; opacity:.55; margin:0 2px 2px }
.pr-eyebrow--board { color:#F0C64A; opacity:.9 }

.pr-card { background:#FFFFFF; border-radius:16px; padding:12px 13px; box-shadow:0 1px 0 rgba(11,35,24,.06) }
.pr-card--soft { background:rgba(11,35,24,.05); box-shadow:none }
.pr-row { display:flex; align-items:center; justify-content:space-between; gap:8px }
.pr-row b { font-size:14px; font-weight:800; letter-spacing:-.01em }
.pr-pill { font-family:'Space Grotesk',ui-monospace,monospace; font-size:8.5px; font-weight:700;
           letter-spacing:.1em; padding:3px 7px; border-radius:100px }
.pr-pill--good { background:#DFF2E7; color:#1B7A47 }
.pr-route { display:flex; align-items:center; gap:9px; margin-top:9px; font-family:'Space Grotesk',ui-monospace,monospace;
            font-size:19px; font-weight:700; letter-spacing:-.01em }
.pr-route i { flex:1; height:1px; background:currentColor; opacity:.25 }
.pr-times { display:flex; justify-content:space-between; margin-top:5px; font-size:11.5px; opacity:.6;
            font-family:'Space Grotesk',ui-monospace,monospace }
.pr-times small { font-size:8.5px; vertical-align:super }
.pr-bar { height:5px; border-radius:100px; background:rgba(11,35,24,.12); margin-top:9px; overflow:hidden }
.pr-bar i { display:block; height:100%; background:#1F6B3D; border-radius:100px }
.pr-mini { font-size:11px; opacity:.62; margin:7px 0 0 }

/* The board keeps the product's own rules: monospaced, no rounded corners, and
   the reader's own flight marked without the row becoming a card. */
.pr-board { margin-top:4px; font-family:'Space Grotesk',ui-monospace,monospace }
.pr-brow { display:grid; grid-template-columns:1fr 1.35fr .5fr; gap:6px; padding:8px 4px; font-size:11px;
           font-weight:700; letter-spacing:.02em; border-bottom:1px solid rgba(255,255,255,.07) }
.pr-brow--head { font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; opacity:.42; font-weight:700 }
.pr-brow--mine { background:rgba(240,198,74,.14); box-shadow:inset 3px 0 0 #F0C64A }
.pr-brow span:last-child { text-align:end }
.pr-late { color:#F0A93A }

.pr-mail { background:#FFFFFF; border-radius:14px; padding:11px 12px }
.pr-mail--tagged { box-shadow:inset 3px 0 0 #B4430F }
.pr-tag { font-family:'Space Grotesk',ui-monospace,monospace; font-size:8.5px; font-weight:700;
          letter-spacing:.1em; text-transform:uppercase; padding:3px 7px; border-radius:100px;
          background:#FBE7DC; color:#B4430F }

@media (prefers-reduced-motion:reduce) { .pr-badge, a.pr-badge:hover { transition:none; transform:none } }