/* The second design of wrapchatapp.com (the home page): the whole site is a chat with WrapChat. On the left what it is,
   on the right the conversation; the visitor asks with the buttons at the foot and WrapChat answers with lines
   and cards. It is laid over site.css, which has the ink, the type, the bubbles and the cards.
   Without JavaScript the whole conversation is simply there, in order. */
body.bare { background: var(--ink); }
.js .chatpage [data-pop] { opacity: 1; transform: none; }

.chatpage { display: grid; grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.1fr); height: 100vh; height: 100dvh; overflow: hidden; background: var(--ink); }

/* MARK: the left side */
/* The dark side runs on a little under the sheet, so its waves show behind the sheet's round corners too. */
.side { position: relative; height: 100%; margin-right: -28px; overflow: hidden; background: var(--ink); color: var(--cream); }
.side-in { margin-right: 28px; }
.side .waves { height: 70%; }
.side-in { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: clamp(24px, 3.4vw, 48px); }
/* On the dark side the bow stands by itself, without the dark circle it has as WrapChat's avatar. */
.side .wordmark { gap: 10px; }
.side .wordmark .av { width: 40px; height: 40px; border-radius: 0; background: none; }
.side .wordmark .av img { width: 100%; }
.side .hero { font-size: clamp(48px, 5.6vw, 92px); }
.side .lede { max-width: 22em; }
.side .soon { color: var(--cream); }
.side-foot { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 11px; }
.side-foot a { text-decoration: none; opacity: 0.8; }
.side-foot a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* MARK: the conversation */
/* The conversation is the layer above: a sheet of paper lying on the dark side, round where it meets it, with a
   short shadow. It scrolls inside itself, so the sheet stays where it is. */
.talk { position: relative; z-index: 6; display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; border-radius: 24px 0 0 24px; background: var(--cream); box-shadow: -3px 0 10px rgba(6, 8, 24, 0.45); }
.talk-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.talk-head { position: relative; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 14px clamp(18px, 4vw, 44px); background: rgba(var(--cream-rgb), 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.talk-head .av { width: 44px; height: 44px; }
.talk-head strong { display: block; font-weight: 900; font-size: 20px; letter-spacing: -0.03em; line-height: 1.1; }
.talk-head .mono { font-size: 10px; font-weight: 500; opacity: 0.75; }
.talk-scroll > .thread { width: 100%; max-width: 660px; margin: 0 auto; padding: 28px clamp(18px, 4vw, 44px) 40px; gap: 0; }
.turn { display: flex; flex-direction: column; gap: 12px; padding-top: 26px; scroll-margin-top: 12px; }
.turn:first-child { padding-top: 0; }
.js .turn { display: none; }
.js .turn.asked { display: flex; }
.js .turn .item { display: none; }
.js .turn .item.shown { display: var(--show, block); animation: pop 0.45s cubic-bezier(0.2, 1.3, 0.4, 1); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
.item.says, .item.cta, .item.tiles, .item.chips { --show: flex; }
.item.prods { --show: grid; }
.item.card { --show: flex; }
.turn .says { margin-top: 0; max-width: 92%; }
.turn .says .txt a { text-underline-offset: 3px; }
.turn .msg.you { margin: 8px 0 4px; }
.typing .txt { display: flex; align-items: center; }

/* MARK: a card sent into the conversation: a page of the app's colours */
.turn .card { margin-left: 52px; padding: 24px 24px 26px; border-radius: 34px; gap: 10px; background: var(--page); --ink-on: var(--ink); overflow: hidden; }
.page-coral { --page: var(--coral); }
.page-periwinkle { --page: var(--periwinkle); }
.page-lime { --page: var(--lime); }
.page-lavender { --page: var(--lavender); }
.page-amber { --page: var(--amber); }
.page-teal { --page: var(--teal); }
.page-pink { --page: var(--pink); }
.page-night { --page: var(--night); color: var(--cream); }
.turn .card .name { font-size: clamp(64px, 9vw, 104px); }
.turn .card .head { font-size: clamp(32px, 4.4vw, 46px); margin-top: 4px; }
.turn .card .sub { margin-top: 4px; font-size: clamp(20px, 2.4vw, 25px); }
.turn .card .bars { margin-top: 18px; }
.turn .card .cap { margin-top: 12px; font-size: 10.5px; opacity: 0.85; }
.js .turn .bar i { transform: none; }
.js .turn .item.shown .bar i, .js .turn .answer .bar i { animation: grow 0.9s cubic-bezier(0.2, 0.9, 0.2, 1) 0.2s backwards; }
@keyframes grow { from { transform: scaleX(0); } }
.turn .guess { margin-top: 18px; max-width: none; }
.turn .chip { margin-left: 8px; }
.turn .in-card { margin-top: 16px; gap: 10px; }
.turn .in-card .msg { font-size: 17px; }
.turn .pairs { margin-top: 18px; max-width: none; }
.turn .pairs div { padding: 16px; border-radius: 22px; }
.turn .pairs strong { font-size: 20px; }
.turn .pairs span { font-size: 14px; }
.turn .steps { margin-top: 16px; }
.turn .steps strong { font-size: 19px; }
.page-night .steps { --page: var(--night); }
.page-night .dot { display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 50%; background: var(--coral); }
.turn .tiles { margin: 0 0 0 52px; }
.turn .tile { flex: 1 0 120px; height: 160px; }
.turn .tile strong { font-size: 32px; }
.turn .prods { margin: 0 0 0 52px; gap: 10px; }
.turn .prod { width: 100%; border: 0; text-align: left; cursor: pointer; min-height: 124px; }
.turn .prod strong { font-size: 28px; }
.turn .prod span { font-size: 16px; }
.turn .chips { margin: 0 0 0 52px; gap: 8px; }
.turn .chips li { min-height: 44px; padding: 0 16px; border-radius: 16px; background: #fff; font-size: 16px; }
.turn .cta { margin: 0 0 0 52px; }
.turn .cta .btn, .turn .cta .soon { min-height: 52px; padding: 0 24px; font-size: 16px; }
.turn .cta .soon { font-size: 11.5px; }
.shot { margin: 0 0 0 52px; }
.shot img { width: min(100%, 250px); height: auto; border-radius: 34px; border: 6px solid #0A0C1E; }
.shot figcaption { margin-top: 8px; font-size: 10.5px; opacity: 0.75; }

.facts { display: grid; gap: 16px; margin-top: 12px; }
.turn .facts { grid-template-columns: 1fr; }
.facts li strong { display: block; font-weight: 900; font-size: 20px; letter-spacing: -0.025em; line-height: 1.12; }
.facts li span { display: block; margin-top: 5px; font-size: 15.5px; line-height: 1.4; }
.prices { display: grid; gap: 14px; margin-top: 12px; }
.prices li { display: grid; grid-template-columns: 124px 1fr; gap: 14px; align-items: center; }
.prices b { font-weight: 900; font-size: 54px; letter-spacing: -0.05em; line-height: 0.9; }
.prices span { font-size: 15.5px; line-height: 1.35; }
.prices i { display: block; font-style: normal; font-size: 10.5px; margin-bottom: 2px; }

/* MARK: what can be asked, at the foot */
.dock { position: relative; z-index: 5; display: none; align-items: flex-start; gap: 14px; padding: 14px clamp(18px, 4vw, 44px) calc(16px + env(safe-area-inset-bottom)); background: rgba(var(--cream-rgb), 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(var(--ink-rgb), 0.1); }
.js .dock { display: flex; }
.dock > .mono { padding-top: 13px; font-size: 10.5px; opacity: 0.7; }
.asks { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-btn { min-height: 44px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 22px 22px 7px 22px; background: transparent; font-weight: 800; font-size: 16px; letter-spacing: -0.01em; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; }
.ask-btn:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.ask-btn.was-asked { min-height: 34px; padding: 0 13px; border-width: 1.5px; border-color: rgba(var(--ink-rgb), 0.3); color: rgba(var(--ink-rgb), 0.6); font-weight: 700; font-size: 13.5px; align-self: center; }
.ask-btn.was-asked:hover { background: rgba(var(--ink-rgb), 0.08); color: var(--ink); }
.ask-btn:disabled { opacity: 0.4; cursor: default; transform: none; background: transparent; color: var(--ink); }
.talk-head > div { flex: 1; }
.over { padding: 10px 14px; border: 0; border-radius: 999px; background: rgba(var(--ink-rgb), 0.08); font-size: 10.5px; cursor: pointer; }
.over:hover { background: rgba(var(--ink-rgb), 0.16); }
.over[hidden] { display: none; }
.over:disabled { opacity: 0.4; cursor: default; }
.turn .cta button.btn { border: 0; cursor: pointer; }

@media (max-width: 900px) {
  body.bare { background: var(--cream); }
  .chatpage { display: block; height: auto; overflow: visible; }
  .side { height: auto; margin-right: 0; }
  .side-in { margin-right: 0; }
  /* On a phone the page itself scrolls: the sheet lies on the foot of the dark side and goes on below it. */
  .talk { height: auto; overflow: visible; margin-top: -24px; border-radius: 24px 24px 0 0; box-shadow: 0 -3px 10px rgba(6, 8, 24, 0.45); }
  .talk-scroll { overflow: visible; }
  .talk-head { position: sticky; top: 0; border-radius: 24px 24px 0 0; }
  .turn { scroll-margin-top: 84px; }
  .dock { position: sticky; bottom: 0; }
  .side-in { gap: 34px; padding-bottom: 78px; }
  .side .waves { height: 100%; }
  .side .hero { font-size: clamp(46px, 13vw, 72px); }
  .talk { min-height: 0; }
  .turn .card, .turn .tiles, .turn .prods, .turn .chips, .turn .cta, .shot { margin-left: 0; }
  .asks { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(clamp(18px, 4vw, 44px) * -1); padding-right: 18px; }
  .asks::-webkit-scrollbar { display: none; }
  .ask-btn { flex-shrink: 0; white-space: nowrap; }
  .dock > .mono { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .turn .item.shown, .js .turn .item.shown .bar i, .typing .txt::after { animation: none; }
}