/* join.css — only the components /join needs that the landing page doesn't have.
   Everything else (nav, hero grid, bento, steps-list, business-panel, principles,
   faq, final-cta, footer, reveal) comes from styles.css so the two pages stay one
   design system rather than two that merely resemble each other. */

/* ---------------------------------------------------------------- hero visual
   The consumer page shows a phone. The supply-side promise is different: the
   thing you walk away with is a public page at your own address. So the hero
   visual is that page, sitting in a browser, with the handle cycling through
   the kinds of people icooa is for. It reuses .hero-stage, so it inherits the
   purple/lime backdrop, the pointer parallax and the responsive scaling. */
.owned-wrap { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 92px; }
.owned-page {
  width: 430px;
  border-radius: 26px;
  overflow: hidden;
  background: #fffdf8;
  border: 1px solid rgba(25, 20, 38, .12);
  box-shadow: 0 40px 90px rgba(31, 18, 53, .32);
  transform: rotate(1.6deg);
  font-family: "DM Sans", system-ui, sans-serif;
}
.owned-chrome { height: 46px; padding: 0 15px; display: flex; align-items: center; gap: 7px; background: #efe9dd; border-bottom: 1px solid rgba(25, 20, 38, .08); }
.owned-chrome > i { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: rgba(25, 20, 38, .17); }
.owned-url { flex: 1; margin-left: 8px; padding: 6px 12px; display: flex; align-items: center; gap: 7px; border-radius: 9px; background: #fffdf8; color: var(--ink-soft); font-size: 12px; letter-spacing: .01em; }
.owned-url b { color: var(--ink); font-weight: 700; }
.owned-lock { width: 9px; height: 8px; flex: 0 0 auto; position: relative; border-radius: 2px; background: #2f9c4f; }
.owned-lock::before { content: ""; position: absolute; left: 2px; top: -4px; width: 5px; height: 5px; border: 1.5px solid #2f9c4f; border-bottom: 0; border-radius: 3px 3px 0 0; }

.owned-cover { height: 116px; position: relative; background: linear-gradient(122deg, var(--purple) 0%, #c07cff 52%, var(--lime) 138%); }
.owned-cover::after { content: ""; position: absolute; inset: 0; opacity: .5; background: radial-gradient(circle at 78% 22%, rgba(255,255,255,.5), transparent 46%); }
.owned-verified { position: absolute; z-index: 2; right: 14px; top: 14px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 253, 248, .93); color: var(--ink); font-size: 10.5px; font-weight: 700; }

.owned-head { padding: 14px 20px 0; display: flex; align-items: flex-end; gap: 13px; }
.owned-avatar { width: 62px; height: 62px; flex: 0 0 auto; margin-top: -44px; display: grid; place-items: center; border: 3px solid #fffdf8; border-radius: 19px; background: var(--ink); color: #fff; font: 800 17px "Manrope", sans-serif; }
.owned-head strong { display: block; font: 800 19px "Manrope", sans-serif; letter-spacing: -.02em; }
.owned-head small { display: block; color: var(--ink-soft); font-size: 12.5px; }
.owned-rating { margin-left: auto; padding-bottom: 3px; color: var(--ink); font: 800 13px "Manrope", sans-serif; white-space: nowrap; }

.owned-gallery { padding: 18px 20px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.owned-gallery i { display: block; padding-top: 100%; border-radius: 11px; background: var(--paper-deep); }
.owned-gallery i:nth-child(1) { background: linear-gradient(150deg, #d8ff9f, #9fe8c8); }
.owned-gallery i:nth-child(2) { background: linear-gradient(150deg, #ffd9bf, #ffb3d1); }
.owned-gallery i:nth-child(3) { background: linear-gradient(150deg, #cceeff, #b9c8ff); }
.owned-gallery i:nth-child(4) { background: linear-gradient(150deg, #ede0ff, #d8ff9f); }

.owned-actions { padding: 16px 20px 20px; display: flex; gap: 9px; }
.owned-msg { flex: 1; height: 42px; display: flex; align-items: center; justify-content: center; gap: 4px; border-radius: 13px; background: var(--lime); color: var(--ink); font: 800 13.5px "Manrope", sans-serif; white-space: nowrap; }
.owned-save { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 13px; color: var(--purple); font-size: 15px; }

.owned-float-a { left: 50%; top: 8px; margin-left: -318px; width: 208px; transform: rotate(-2deg); }
.owned-float-b { left: 50%; bottom: 128px; margin-left: 148px; width: 178px; transform: rotate(2.5deg); }
.owned-float-a strong, .owned-float-b strong { display: block; font: 800 13px "Manrope", sans-serif; }
.owned-float-a small, .owned-float-b small { color: var(--ink-soft); font-size: 11px; }
.owned-float-b strong { color: var(--purple-deep); font-size: 17px; }

/* ------------------------------------------------------------------ compare
   Two columns of plain sentences: what the old way costs, what happens here.
   Deliberately not a tick-vs-cross grid — the point is the sentence, and a
   tick table reads as a sales matrix. */
.compare-heading { max-width: 720px; margin-bottom: 54px; }
.compare-heading h2 { margin-bottom: 20px; font-size: clamp(42px, 5vw, 66px); }
.compare-heading p { margin: 0; color: var(--ink-soft); font-size: 18px; line-height: 1.65; }
.compare-rows { border-top: 1px solid var(--line); }
.compare-row { display: grid; grid-template-columns: 1fr 44px 1fr; gap: 26px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); }
.compare-row .them { color: var(--ink-soft); font-size: 16.5px; line-height: 1.5; }
.compare-row .arrow { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--purple); font-size: 15px; transition: background .2s ease, color .2s ease, transform .2s ease; }
.compare-row:hover .arrow { color: var(--ink); background: var(--lime); transform: translateX(4px); }
.compare-row .us { font: 800 17px/1.45 "Manrope", sans-serif; letter-spacing: -.01em; }

/* ---------------------------------------------------------------- setup card
   Sits in the purple .business-panel where the landing page puts its stats
   board. Stats there would imply traffic we haven't got yet; a plain "send us
   this" checklist is the honest equivalent and does more work. */
.setup-list { margin: 20px 0 0; padding: 0; list-style: none; }
.setup-list li { padding: 15px 0; display: flex; align-items: flex-start; gap: 13px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.setup-list li:last-child { border-bottom: 0; }
.setup-list .box { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; display: grid; place-items: center; border-radius: 7px; background: var(--lime-soft); color: var(--purple-deep); font: 800 11px "Manrope", sans-serif; }
.setup-list strong { display: block; font: 800 14.5px "Manrope", sans-serif; }
.setup-list small { color: var(--ink-soft); font-size: 13px; }
.setup-foot { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; }
.setup-foot a { color: var(--purple-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------------------- responsive */
@media (max-width: 1060px) {
  .owned-page { width: 380px; }
  .owned-float-a { margin-left: -292px; }
  .owned-float-b { margin-left: 118px; }
}
@media (max-width: 860px) {
  .compare-row { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
  .compare-row .arrow { transform: rotate(90deg); }
  .compare-row:hover .arrow { transform: rotate(90deg) translateY(-4px); }
}
@media (max-width: 600px) {
  .owned-wrap { padding-top: 30px; }
  .owned-page { width: 430px; }
  /* The stage is scaled down here, so the float's offset scales with it and the
     card slid off the left edge with its text cut. Pull it back inside. */
  .owned-float-a { margin-left: -240px; }
  .owned-float-b { margin-left: 62px; }
  .scribble-note { margin-left: 110px; }
  .compare-heading { margin-bottom: 34px; }
  .compare-row .us { font-size: 16px; }
}

/* The landing page's purple panel carries a lime blob in the bottom-left. This
   page's copy column is shorter, which lands the lime CTA button right on top
   of it and dissolves the button's edges. Push the blob down so the button
   sits on flat purple; a slice of it still turns the corner. */
#setup .business-panel::before { left: -200px; bottom: -330px; }

/* ------------------------------------------------------------------ pricing
   The page has to state the price plainly, including the part where a profile
   comes down if it isn't paid for. Burying that in the terms is exactly the
   thing this page is trying not to do, so it gets its own block on the page. */
.pricing { background: var(--paper-deep); }
.price-head { display: grid; grid-template-columns: auto 1fr; gap: 64px; align-items: start; margin-bottom: 54px; }
.price-lead { display: flex; flex-direction: column; }
.price-figure { color: var(--purple-deep); font: 800 clamp(60px, 7.5vw, 104px)/.84 "Manrope", sans-serif; letter-spacing: -.055em; }
.price-unit { margin-top: 15px; color: var(--ink-soft); font-size: 15px; line-height: 1.35; }
.price-copy h2 { margin-bottom: 20px; font-size: clamp(36px, 4.3vw, 58px); }
.price-copy p { max-width: 640px; margin: 0; color: var(--ink-soft); font-size: 18px; line-height: 1.65; }

.price-ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.price-card { padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); }
.price-card strong { display: block; margin: 7px 0 13px; font: 800 clamp(23px, 2.5vw, 31px)/1.1 "Manrope", sans-serif; letter-spacing: -.025em; }
.price-card p:not(.mini-label) { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.price-card-hero { border-color: transparent; background: var(--lime-soft); }
.price-card-hero .mini-label { color: var(--purple-deep); }

/* Body-copy links that point at the pricing block. The global `a` rule is
   inherit/no-underline (nav, buttons), so in-sentence links need to look like
   links or nobody finds the number. */
.steps-list p a, .faq-list p a { color: var(--purple-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Dashed, not shouty — it is a disclosure, not a warning label. */
.price-small { margin-top: 20px; padding: 30px 34px; border: 1px dashed rgba(25, 20, 38, .3); border-radius: var(--radius-md); }
.price-small h3 { margin-bottom: 11px; font-size: 20px; }
.price-small p { max-width: 940px; margin: 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; }

@media (max-width: 860px) {
  .price-head { grid-template-columns: 1fr; gap: 26px; margin-bottom: 34px; }
  .price-ladder { grid-template-columns: 1fr; }
  .price-small { padding: 26px; }
}