/* ============================================================
   START A PROJECT — the enquiry for established businesses.
   The same paper canvas and white cards as the rest of the site, in
   two columns: a still rail that says what happens next, and the
   card that asks. Rides on style.css tokens and demo.css field
   language; this file only sets the stage and the pieces the free
   demo does not have.
   ============================================================ */

.sb{ background:var(--bg); color:var(--ink); }
.sb [hidden]{ display:none !important; }
/* On a reload Chromium re-anchors the scroll to whatever moved during the
   first frame, and the card's entrance transform moves. The page then sits
   18px down for no reason a visitor could name. Nothing here needs anchoring. */
.sb{ overflow-anchor:none; }
.sb ::selection{ background:var(--lime); color:var(--lime-ink); }

/* ---------- header ---------- */
.sh{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px var(--pad);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.sh__brand img{ height:28px; width:auto; display:block; }
.sh__nav{ display:flex; align-items:center; gap:clamp(14px, 2.4vw, 30px); }
.sh__alt, .sh__back{ color:var(--grey-2); transition:color var(--dur) var(--ease); }
@media (hover:hover){ .sh__alt:hover, .sh__back:hover{ color:var(--ink); } }

/* ---------- two columns ---------- */
.sgrid{
  display:grid; grid-template-columns:minmax(0, .84fr) minmax(0, 1.16fr);
  gap:clamp(30px, 4.6vw, 84px);
  max-width:calc(var(--maxw) + 2 * var(--pad));
  margin-inline:auto;
  padding:clamp(30px, 5.5vh, 66px) var(--pad) clamp(60px, 9vh, 110px);
  align-items:start;
}

/* ---------- rail ---------- */
.srail{ position:sticky; top:96px; display:flex; flex-direction:column; }
.srail__h{
  font-size:clamp(34px, 3.1vw + 10px, 60px); font-weight:600;
  letter-spacing:-.024em; line-height:1.03; max-width:11ch; margin-top:16px;
}
.srail__h .pillw{ padding:.06em .32em .15em; }   /* room under the baseline for Inter's p and y */
.srail__p{ color:var(--grey-2); max-width:42ch; margin-top:18px; font-size:15.5px; }

/* the three things that happen after Send: nodes on a hairline, like a plan */
.snext{
  list-style:none; margin:clamp(26px, 4vh, 40px) 0 0; padding:0;
  display:flex; flex-direction:column;
}
.snext li{
  position:relative; padding:0 0 22px 30px;
  display:flex; flex-direction:column; gap:4px;
}
.snext li::before{                      /* the node */
  content:""; position:absolute; left:0; top:.28em;
  width:12px; height:12px; border-radius:50%;
  background:var(--lime); box-shadow:0 0 0 4px rgba(152,254,0,.22);
}
.snext li::after{                       /* the connector */
  content:""; position:absolute; left:5.5px; top:calc(.28em + 14px); bottom:2px;
  width:1px; background:rgba(16,16,16,.14);
}
.snext li:last-child{ padding-bottom:0; }
.snext li:last-child::after{ display:none; }
.snext__k{ font-size:14.5px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink); }
.snext__t{ color:var(--grey-2); font-size:14.5px; max-width:38ch; }

.stalk{ margin-top:clamp(26px, 4vh, 40px); display:flex; flex-direction:column; gap:6px; font-size:14.5px; }
.stalk__k{ color:var(--grey-aa); margin-bottom:4px; }
.stalk a{ width:fit-content; color:var(--ink); font-weight:500; border-bottom:1px solid var(--line); transition:border-color var(--dur) var(--ease); }
@media (hover:hover){ .stalk a:hover{ border-color:var(--ink); } }

.srail__meta{
  list-style:none; margin:clamp(22px, 3.4vh, 32px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px 20px; color:var(--grey-aa);
}
.srail__meta li{ display:flex; align-items:center; gap:7px; }

/* load cascade: the rail settles in top to bottom, once */
.js .srail > *{ opacity:0; transform:translateY(16px); animation:srail-in .7s var(--ease) forwards; animation-delay:calc(var(--i, 0) * 80ms + 80ms); }
@keyframes srail-in{ to{ opacity:1; transform:none; } }
.js .sh{ animation:srail-in .6s var(--ease) both; }
/* the plan draws itself: each node pops, then its line runs down to the next */
.snext li:nth-child(1){ --n:0; } .snext li:nth-child(2){ --n:1; } .snext li:nth-child(3){ --n:2; }
.js .snext li::before{ animation:node-pop .5s cubic-bezier(.3,1.4,.5,1) both; animation-delay:calc(.55s + var(--n, 0) * .26s); }
.js .snext li::after{ transform-origin:top; animation:line-draw .5s var(--ease) both; animation-delay:calc(.72s + var(--n, 0) * .26s); }
@keyframes node-pop{ from{ transform:scale(0); opacity:0; } to{ transform:scale(1); opacity:1; } }
@keyframes line-draw{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }

/* ---------- the card ---------- */
.scard{
  background:#fff; color:var(--ink);
  border-radius:var(--r-lg);
  padding:clamp(22px, 3.2vw, 42px);
  box-shadow:var(--sh);
}
.js .scard{ opacity:0; transform:translateY(18px); animation:srail-in .8s var(--ease) .18s forwards; }
/* One surface, not a card inside a card: the steps lose their own box here.
   .ddone keeps a box of its own because it replaces the whole form. */
.sb .dstep{ background:transparent; box-shadow:none; border-radius:0; padding:0; }
.sb .dstep__h{ margin-top:0; font-size:clamp(22px, 1.7vw + 9px, 32px); max-width:20ch; }
.sb .ddone{
  background:#fff; color:var(--ink); border-radius:var(--r-lg);
  padding:0; box-shadow:none; margin-top:0;
}

/* progress: label above the bar, so the card opens on a heading not a rule */
.sprog{ margin-bottom:clamp(20px, 2.8vh, 28px); }
.sprog__k{ color:var(--grey-aa); }
.sb .dprog{ margin-top:10px; background:rgba(16,16,16,.08); }

/* ---------- the four big choices on step one ---------- */
.dopts--cards{ gap:12px; grid-template-columns:repeat(2, minmax(0,1fr)); }   /* four choices, two by two */
.dopt--card{
  flex-direction:column; align-items:flex-start; gap:8px;
  padding:18px 18px 20px; min-height:148px;
  background:var(--bg); border:1px solid transparent;
}
.dopt--card::before{                    /* radio dot parks in the corner */
  position:absolute; top:16px; right:16px;
}
.dopt--card .dopt__t{ font-weight:600; font-size:15.5px; padding-right:28px; line-height:1.3; }
.dopt--card .dopt__d{ color:var(--grey-aa); font-size:13.5px; line-height:1.45; }
.dopt--card:has(input:checked){ background:var(--ink); color:#fff; border-color:var(--ink); }
.dopt--card:has(input:checked) .dopt__d{ color:rgba(255,255,255,.66); }
.dopt--card:has(input:checked)::before{ box-shadow:inset 0 0 0 3px var(--ink); }
@media (hover:hover){ .dopt--card:hover{ border-color:rgba(16,16,16,.26); background:#fff; } }

/* ---------- select, which the free demo never needed ---------- */
.dfield select{
  font:inherit; font-size:max(16px, 1em); width:100%; padding:13px 44px 13px 16px;
  background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%23101010' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
  color:var(--ink); border:1px solid transparent; border-radius:var(--r-sm);
  appearance:none; -webkit-appearance:none; outline:none; cursor:pointer;
  transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.dfield select:focus{ border-color:var(--ink); background-color:#fff; box-shadow:0 0 0 4px rgba(16,16,16,.06); }
.dfield select:invalid, .dfield select option[value=""]{ color:var(--grey-aa); }

/* ---------- footer ---------- */
.sb .dfoot{ color:var(--grey-aa); border-top-color:var(--line); max-width:calc(var(--maxw) + 2 * var(--pad)); }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .sgrid{ grid-template-columns:1fr; gap:clamp(22px, 4vh, 40px); }
  .srail{ position:static; }
  .srail__h{ max-width:14ch; }
  .snext__t{ max-width:52ch; }
}
@media (max-width:760px){
  .dopts--cards{ grid-template-columns:1fr; }
  .dopt--card{ min-height:0; }
  .sh__alt{ display:none; }
}
@media (max-width:420px){
  .srail__meta{ gap:6px 14px; }
}

@media (prefers-reduced-motion:reduce){
  .js .srail > *, .js .scard, .js .sh, .js .snext li::before, .js .snext li::after{ opacity:1; transform:none; animation:none; }
}