/* THE ONE SURFACE A STRANGER SEES (design spec #181, canvas docs/designs/fleet-landing).
   Light on purpose — read on a phone in daylight, often held up in a meeting. The apps stay
   dark; the shared accent keeps the family visible. Tokens are the canvas's, unchanged.
   No motion anywhere: the page is read aloud over someone's shoulder. */
*{margin:0;padding:0;box-sizing:border-box}
:root{--pg:#fbfaf8;--card:#ffffff;--ink:#17201c;--ink2:#5c6b63;--line:#e2e0da;
  --accent:#2f6f57;--accent-s:#eaf3ef;--warn:#8a6a1f;--warn-s:#fbf3df;
  --r:14px}
html{-webkit-text-size-adjust:100%}
body{background:var(--pg);color:var(--ink);font:15px/1.55 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.bar{height:52px;flex:none;display:flex;align-items:center;gap:9px;padding:0 16px;
  background:var(--card);border-bottom:1px solid var(--line)}
.bd{display:flex;align-items:center;gap:7px;font-weight:700;font-size:15px;min-height:44px}
.mk{width:20px;height:20px;border-radius:6px;background:var(--accent);color:#fff;font-size:11px;
  display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.sp{flex:1}
.sin{font-size:13px;color:var(--ink2);min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:flex-end}

.bo{flex:1;width:100%;max-width:560px;margin:0 auto;padding:18px 16px;display:flex;flex-direction:column;gap:13px}
h1{font-size:25px;line-height:1.22;font-weight:700;letter-spacing:-.015em}
.who{font-size:13.5px;color:var(--ink2)}
.whose{font-size:13.5px;font-weight:600;color:var(--accent)}
.who b{color:var(--ink);font-weight:600}
.three{display:flex;flex-direction:column;gap:9px;list-style:none}
.t{display:flex;gap:9px;font-size:14px;line-height:1.45}
.t i{font-style:normal;color:var(--accent);flex:none;font-weight:700}

/* The frame reserves its height before the picture arrives, so nothing jumps on a slow
   connection. It shows the top of a real phone screen; tapping opens the whole screen. */
.shot{border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  display:flex;flex-direction:column;overflow:hidden}
.shot .im{display:block;height:190px;background:#f2f1ed;overflow:hidden}
.shot .im img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.shot .cap{font-size:10.5px;color:var(--ink2);padding:6px 10px;border-top:1px solid var(--line);
  background:var(--pg)}

.price{display:flex;align-items:baseline;gap:7px;font-size:14px}
.price b{font-size:18px;font-weight:700}
.price span{color:var(--ink2);font-size:12.5px}
.note{border-radius:11px;padding:10px 12px;font-size:12px;line-height:1.5}
.note.w{background:var(--warn-s);border:1px solid #ecd9a8;color:#6b5316}
.note.c{background:#f3f2ee;border:1px solid var(--line);color:var(--ink2)}

.btns{display:flex;flex-direction:column;gap:13px;margin-top:auto}
.btn{min-height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:8px 14px;font-size:15px;font-weight:600;border:1px solid var(--line);background:var(--card)}
.btn.p{background:var(--accent);border-color:var(--accent);color:#fff}

.ask{display:flex;flex-direction:column}
.ask summary{list-style:none;cursor:pointer}
.ask summary::-webkit-details-marker{display:none}
.ask .askp{margin-top:9px;border:1px solid #cfe3d9;border-radius:var(--r);background:var(--accent-s);
  color:#1f4c3c;padding:12px 14px 4px;font-size:14px;line-height:1.5}
.ask .mail{display:flex;align-items:center;min-height:44px;color:var(--accent);font-weight:600;
  text-decoration:underline;overflow-wrap:anywhere}

.cards{display:grid;grid-template-columns:1fr;gap:11px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;
  display:flex;flex-direction:column;gap:6px}
.card .n{font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:7px}
.card .s{font-size:13px;line-height:1.45}
.card .w{font-size:11.5px;color:var(--ink2)}
.card .go{font-size:12.5px;color:var(--accent);font-weight:600;min-height:44px;display:flex;align-items:center;margin-top:auto}

.ft{padding:6px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink2);background:var(--card);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:44px}
.ft a{color:var(--accent);font-weight:600;min-height:44px;display:flex;align-items:center}

/* Desktop is the same slots and the same cards, three across. Nothing added, nothing hidden. */
@media (min-width:900px){
  .bar{height:60px;padding:0 40px}
  .ft{padding:6px 40px}
  .bo.list{max-width:1280px;padding:34px 40px;gap:22px}
  .bo.list h1{font-size:34px;max-width:700px}
  .bo.list .who{font-size:15px;max-width:700px}
  .cards{grid-template-columns:repeat(3,1fr);gap:13px}
  .bo.page{padding-top:34px}
}