/* Realistic homepage mock-ups · Volume 2
   One file holds the whole restyle: a real street map behind "01 Found",
   a real-looking phone in the hero, a browser window around the "02 Trusted"
   site, an app-style inbox for "03 Booked", calendar-app events, and real
   browser bars on the portfolio frames.

   TO TURN IT OFF: delete the <link> to this file in index.html. Nothing else
   depends on it; no markup or script was changed for it. */

/* ------------------------------------------------ 01 Found: a street map */
/* the street map itself lives in css/realistic-map.css, loaded by the homepage only */
.sec--ink .pmap .pmap__ground { display: none; }
.pmap__ring { border-color: rgba(143, 183, 198, .85); }
/* the clinic marker as a map place pin: white rim, drop shadow, no sketch line */
.pmap__you i { border: 3px solid #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, .45), 0 0 0 6px rgba(143, 183, 198, .18); }
.pmap__you .rough, .pmap__you .rough * { filter: none; stroke: none; }
.pmap__you small { background: #fff; color: #16323c; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.pm-j__lab { border: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .2); }
.pm-j__pin { box-shadow: 0 3px 8px rgba(0, 0, 0, .5); }
.pmap__tally { box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }

/* ------------------------------------------------ hero: the phone itself */
.phone {
  background: linear-gradient(145deg, #5a5e64 0%, #26282c 18%, #17181b 50%, #2b2e32 82%, #4a4e54 100%);
  padding: 12px;
  box-shadow:
    inset 0 0 0 1.5px #7b8087, inset 0 0 0 4px #101113,
    0 60px 90px -36px rgba(16, 24, 28, .6), 0 24px 34px -22px rgba(16, 24, 28, .55);
}
.phone::before, .phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #2a2c30, #5b5f65); }
.phone::before { left: -3px; top: 118px; height: 26px; box-shadow: 0 40px 0 0 #3a3d42, 0 80px 0 0 #3a3d42; }
.phone::after { right: -3px; top: 160px; height: 58px; background: linear-gradient(270deg, #2a2c30, #5b5f65); }
.phone__screen { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6); }
.phone__screen::after {
  content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 22%, rgba(255, 255, 255, 0) 34%);
}
.phone__notch { width: 92px; margin-left: -46px; height: 26px; top: 10px; box-shadow: inset 0 0 0 1px #151515; }
.phone__notch::after { content: ""; position: absolute; right: 11px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3d4a66 0 2px, #111522 3px, #05060a 5px); }
/* dark search screen: a real keyboard tray and raised keys */
.kb { margin: auto -16px -18px; padding: 10px 5px 26px; background: #1c1b19; border-top: 1px solid #2a2926; }
.kb span { height: 32px; border-radius: 6px; background: linear-gradient(#5a5853, #4b4945); box-shadow: 0 1px 0 #0c0b0a; }
.kb div:last-child span:first-child, .kb div:last-child span:last-child { background: linear-gradient(#3b3a37, #33322f); }
.sbar { background: #2a2825; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 6px rgba(0, 0, 0, .4); }
.rcard { box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 6px 14px rgba(0, 0, 0, .35); }
.rcard--you { box-shadow: 0 10px 22px rgba(0, 0, 0, .45); }
/* light clinic screens: depth on the cards and the button */
.cs-call { box-shadow: 0 1px 2px rgba(22, 50, 60, .12); }
.cs-book, .fsite__cta { box-shadow: 0 6px 14px -6px rgba(22, 50, 60, .7), inset 0 1px 0 rgba(255, 255, 255, .18); }
.cs-photo { box-shadow: 0 6px 16px -8px rgba(22, 21, 19, .5); }
.note { border: 0; box-shadow: 0 14px 30px -12px rgba(22, 21, 19, .45), 0 0 0 1px rgba(22, 21, 19, .12); }

/* ------------------------------------------------ 02 Trusted: a browser window */
.fsite { position: relative; padding-top: 52px; background: linear-gradient(#ece8e0, #e4dfd5) top / 100% 38px no-repeat, #fbf9f4; }
.fsite::before {
  content: "yourclinic.com"; position: absolute; top: 8px; left: 78px; right: 14px; height: 22px;
  display: grid; place-items: center; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px rgba(22, 21, 19, .08);
  font: 500 10.5px/1 var(--f-mono); color: #5c6a70; letter-spacing: .02em;
}
.fsite::after {
  content: ""; position: absolute; top: 15px; left: 16px; width: 8px; height: 8px; border-radius: 50%;
  background: #ff5f57; box-shadow: 13px 0 0 #febc2e, 26px 0 0 #28c840;
}
.fsite__top { background: #fff; box-shadow: 0 1px 3px rgba(22, 50, 60, .1); }
.fsite__photo { box-shadow: 0 8px 18px -10px rgba(22, 21, 19, .55); }
.fsite__rest div { background: #fff; box-shadow: 0 1px 3px rgba(22, 50, 60, .1); }
.fivesec { box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .6); }

/* ------------------------------------------------ 03 Booked: an app inbox */
.inbox { background: #f6f4ef; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .6); }
.inbox__hd b::before { content: ""; display: inline-block; width: 18px; height: 18px; margin: -3px 9px 0 0; vertical-align: middle; border-radius: 5px; background: linear-gradient(145deg, #3a7f96, #1f5466); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .0), 0 1px 2px rgba(0, 0, 0, .2); }
.req { border: 0; border-radius: 14px; box-shadow: 0 1px 2px rgba(22, 50, 60, .1), 0 6px 16px -10px rgba(22, 50, 60, .35); }
.req b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; vertical-align: 2px; border-radius: 50%; background: #2f7bd8; }

/* ------------------------------------------------ the week: calendar-app events */
.bw__card { box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 40px 70px -40px rgba(0, 0, 0, .7); }
.bw__ev { border-radius: 6px; }
.bw__ev--fill { box-shadow: inset 3px 0 0 #b4c3c9; }
.bw__ev--new { border: 0; box-shadow: inset 3px 0 0 #1c5f4a, 0 2px 6px -2px rgba(20, 70, 54, .6); }

/* ------------------------------------------------ portfolio: real browser bars */
.frame { box-shadow: 0 16px 30px -22px rgba(22, 21, 19, .5); }
.frame__bar { background: linear-gradient(#efece6, #e5e1d9); }
.frame__bar i:nth-child(1) { background: #ff5f57; }
.frame__bar i:nth-child(2) { background: #febc2e; }
.frame__bar i:nth-child(3) { background: #28c840; }
.frame__bar span { flex: 1; min-width: 0; margin: 0 0 0 8px; padding: 4px 10px; text-align: center; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px rgba(22, 21, 19, .07); }

/* ================================================ other pages */

/* services: the week-by-week plan as a project tool would draw it */
.gantt { border: 0; background: #fffdf9; box-shadow: 0 1px 2px rgba(22, 50, 60, .14), 0 34px 60px -38px rgba(22, 50, 60, .5); }
.g-bar { border-radius: 7px; background: linear-gradient(#336f85, #24576a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 3px 6px -3px rgba(22, 50, 60, .6); }
.g-bar--soft { background: linear-gradient(#c3d5dd, #a9c0ca); }
.g-bar--you { background: repeating-linear-gradient(135deg, #efeae0 0 6px, #e4ded2 6px 12px); box-shadow: inset 0 0 0 1px rgba(22, 50, 60, .1); }
.g-bar--line { box-shadow: none; }
.g-now { background: #d0483a; }
.g-now::before { background: #d0483a; color: #fff; padding: 4px 7px; border-radius: 4px; }
.g-legend i { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }

/* services: the discovery-call branch as cards on a desk */
.fit__call { border: 0; box-shadow: 0 1px 2px rgba(22, 50, 60, .14), 0 26px 50px -30px rgba(22, 50, 60, .5); }
.fit__out { border: 0; box-shadow: 0 1px 2px rgba(22, 50, 60, .12), 0 12px 24px -18px rgba(22, 50, 60, .45); }
.fit__out--yes { background: linear-gradient(160deg, #3a6b80, #24576a); }
.fit__wires path { stroke: #7f97a2; stroke-width: 2; }

/* about: the bullseye as a real archery target */
.target svg > g > circle:nth-child(1) { fill: #f4efe4; stroke: #d9cfbc; stroke-width: 3; }
.target svg > g > circle:nth-child(2) { fill: #2c3438; stroke: #1d2427; }
.target svg > g > circle:nth-child(3) { fill: #4b7fa6; stroke: #3c6a8c; }
.target svg > g > circle:nth-child(4) { fill: #c4523f; stroke: #a8402f; }
.target svg > g > circle.spin { fill: none; stroke: #fff; opacity: .85; }
.target svg > circle { fill: #e2b33c; }
.target { box-shadow: inset 0 0 60px rgba(22, 21, 19, .12); }

/* checklist: the score as a real gauge */
.ring { border-radius: 50%; box-shadow: 0 0 0 6px #0d232b, 0 14px 30px rgba(0, 0, 0, .45); }
.ring::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #1f4754, #0f2a33 70%); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .55); }
.ring .bg { stroke: #0b1d24; }
.ring .fg { filter: drop-shadow(0 0 4px rgba(143, 208, 182, .35)); }