/* Shared pieces for round 2: white and dot-grid grounds, three header
   treatments, and the palette-forward card looks. Loaded after base.css. */

/* ---------- grounds ---------- */
.dots{
  background-color:#fff;
  background-image:radial-gradient(rgba(77,150,255,.22) 1.5px, transparent 1.6px);
  background-size:22px 22px}
.dots--tight{background-size:16px 16px}
.dots--blue{background-color:#F4F8FF}
.dots--green{background-color:#F3FBF4;background-image:radial-gradient(rgba(107,203,119,.30) 1.5px, transparent 1.6px)}
.dots--yellow{background-color:#FFFCF0;background-image:radial-gradient(rgba(245,180,30,.28) 1.5px, transparent 1.6px)}
.dots--purple{background-color:#F9F5FF;background-image:radial-gradient(rgba(167,139,250,.34) 1.5px, transparent 1.6px)}
.dots--coral{background-color:#FFF6F6;background-image:radial-gradient(rgba(255,107,107,.28) 1.5px, transparent 1.6px)}

.graph{
  background-color:#fff;
  background-image:
    linear-gradient(rgba(77,150,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,150,255,.10) 1px, transparent 1px),
    radial-gradient(rgba(77,150,255,.26) 1.6px, transparent 1.7px);
  background-size:24px 24px, 24px 24px, 96px 96px}

/* ---------- wordmark from the old site ---------- */
.wordmark{font-family:var(--font-display);font-weight:800;font-size:1.35rem;
  letter-spacing:-.01em;text-decoration:none;color:var(--text);display:inline-flex;
  align-items:baseline}
.brand-dot{display:inline-block;width:.42em;height:.42em;border-radius:50%;
  background:var(--coral);margin-left:.18em}

/* ---------- nav pills, straight from the design system ---------- */
.pill{font-family:var(--font-display);font-weight:600;font-size:.85rem;
  padding:7px 16px;border-radius:var(--r-pill);box-shadow:2px 3px 5px var(--shadow);
  transition:transform .2s, box-shadow .2s;color:var(--text);position:relative;
  text-decoration:none;display:inline-block;white-space:nowrap}
.pill::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg, rgba(255,255,255,.4) 0%, transparent 50%);
  pointer-events:none}
.pill:hover{transform:rotate(0deg) scale(1.08) !important;box-shadow:3px 4px 8px var(--shadow-deep)}
.pill--green{background:var(--green);transform:rotate(-2deg)}
.pill--yellow{background:var(--yellow);transform:rotate(1deg)}
.pill--blue{background:var(--blue);color:#fff;transform:rotate(-1deg)}
.pill--coral{background:var(--coral);color:#fff;transform:rotate(2deg)}
.pill--purple{background:var(--purple);color:#fff;transform:rotate(-1deg)}

/* ---------- yellow signup note, on a white page ---------- */
.signup{background:var(--yellow);padding:1.4rem 1.35rem 1.5rem;border-radius:4px;
  box-shadow:5px 7px 0 rgba(45,42,38,.16);max-width:31rem}
.signup--tilt{transform:rotate(-1.6deg)}
.signup h3{font-size:1.2rem}
.signup .capture{margin-top:.9rem}
.signup .fineprint{color:#6b5a20}

/* ---------- palette-forward "what is inside" card ---------- */
.icards{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:1.4rem}
.ic{background:#fff;border-radius:var(--r-lg);overflow:hidden;border:2.5px solid var(--text);
  box-shadow:5px 6px 0 var(--ic-color);transition:transform .14s ease, box-shadow .14s ease}
.ic:hover{transform:translate(-2px,-3px);box-shadow:7px 9px 0 var(--ic-color)}
.ic__art{aspect-ratio:5/3;display:grid;place-items:center;background:var(--ic-tint)}
.ic__art img{width:44%}
.ic__body{padding:.85rem 1rem 1.1rem;border-top:2.5px solid var(--text)}
.ic__name{display:flex;align-items:center;gap:.45rem;font-family:var(--font-display);
  font-weight:700;font-size:1.08rem}
.ic__name span{width:10px;height:10px;border-radius:50%;background:var(--ic-color)}
.ic p{font-size:.88rem;color:var(--text-muted);margin-top:.3rem;line-height:1.45}

/* ---------- palette-forward find card ---------- */
.findgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:1.5rem}
.fc{background:#fff;border-radius:var(--r-md);overflow:hidden;text-decoration:none;display:block;
  border:2px solid var(--text);box-shadow:4px 5px 0 var(--fc-color);
  transition:transform .14s ease, box-shadow .14s ease}
.fc:hover{transform:translate(-2px,-3px);box-shadow:6px 8px 0 var(--fc-color)}
.fc img{aspect-ratio:16/10;object-fit:cover;width:100%;background:var(--photo-paper);
  border-bottom:2px solid var(--text)}
.fc__body{padding:.8rem .9rem 1.05rem}
.fc h3{font-family:var(--font-display);font-size:.98rem;line-height:1.3;margin:.45rem 0 .3rem}
.fc p{font-size:.84rem;color:var(--text-muted);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- project card ---------- */
.projgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:1.6rem}
.pj{background:#fff;border-radius:var(--r-lg);overflow:hidden;border:2.5px solid var(--text);
  box-shadow:5px 6px 0 var(--pj-color);transition:transform .14s ease, box-shadow .14s ease}
.pj:hover{transform:translate(-2px,-3px);box-shadow:7px 9px 0 var(--pj-color)}
.pj__photo{aspect-ratio:4/3;display:grid;place-items:center;background:var(--pj-tint);
  border-bottom:2.5px solid var(--text)}
.pj__photo img{width:44%}
.pj__photo.has-photo img{width:100%;height:100%;object-fit:cover}
.pj__body{padding:.9rem 1rem 1.2rem}
.pj h3{font-size:1.12rem;margin-top:.45rem}
.pj p{font-size:.89rem;color:var(--text-muted);margin-top:.3rem}

/* ---------- device ---------- */
.device{position:relative;background:#20242b;border-radius:26px;padding:13px;
  box-shadow:0 20px 44px rgba(30,45,80,.28), 0 2px 0 rgba(255,255,255,.18) inset}
.device__screen{border-radius:14px;overflow:hidden;background:#000;aspect-ratio:4/3}
.device__screen img{width:100%;height:100%;object-fit:cover}
.device--zoom .device__screen img{transform:scale(1.36) translateY(-3%)}
.device::after{content:'';position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:3px;height:46px;background:#3a3f47;border-radius:2px}
.float{position:absolute;filter:drop-shadow(3px 5px 7px rgba(0,0,0,.20));pointer-events:none}

/* ---------- dashed section rule from the old site ---------- */
.rule{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem}
.rule::before,.rule::after{content:'';height:0;flex:1;border-top:3px dashed var(--yellow)}
.rule h2{font-size:clamp(1.6rem,3.4vw,2.3rem);white-space:nowrap}
.rule--left::before{display:none}