/* =========================================================================
   Puente Global · Client intake survey
   Visual source of truth: anket-demo.html. Solid parliament blue, white
   cards, manila folder, calm motion. No gradients anywhere.
   ========================================================================= */

:root{
  --pblue:#16385C;
  --pblue-2:#1f4c7a;
  /* Inter is a placeholder. Swap the final typeface here in one place. */
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--pblue);
  font-family:var(--font);
  color:#16385C;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea{font-family:inherit}

/* ---------- Landing ---------- */
.landing{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center}
.brand{color:#fff;font-size:15px;font-weight:600;letter-spacing:.24em;opacity:.92}
.langline{color:rgba(255,255,255,.72);font-size:13px;margin:14px 0 32px}
.flags{display:grid;grid-template-columns:1fr 1fr;gap:18px;width:100%;max-width:430px}
.flagcard{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:22px 14px;background:#fff;border:none;border-radius:16px;cursor:pointer;
  box-shadow:0 14px 30px rgba(0,0,0,.24);
  transition:transform .22s ease, box-shadow .22s ease;
}
.flagcard:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.3)}
.flagframe{width:66px;height:44px;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.flagframe img{width:100%;height:100%;object-fit:cover;display:block}
.flagname{color:#16385C;font-size:15px;font-weight:500}

/* ---------- Progress ---------- */
.form{position:relative}
.progress{position:fixed;top:0;left:0;right:0;padding:20px 26px;z-index:5}
.steptext{color:rgba(255,255,255,.85);font-size:12.5px;font-weight:500;margin-bottom:9px;letter-spacing:.02em}
.track{height:5px;background:rgba(255,255,255,.2);border-radius:99px;overflow:hidden}
.fill{height:100%;width:0;background:#fff;border-radius:99px;transition:width .7s cubic-bezier(.4,0,.2,1)}

/* ---------- Card ---------- */
.body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:76px 28px 48px}
@media (min-width:1024px){
  /* Extra bottom room for the folder, which only exists on desktop */
  .body{padding-bottom:140px}
}
.card{
  position:relative;width:min(470px,92%);
  background:#fff;border-radius:20px;padding:30px 28px;
  box-shadow:0 22px 50px rgba(0,0,0,.32);
  will-change:transform,opacity;
  outline:none;
}
.back{
  display:inline-flex;align-items:center;gap:5px;
  background:none;border:none;padding:0;margin:0 0 16px;
  color:#4a6b8a;font-size:13.5px;font-weight:500;cursor:pointer;
}
.back:hover{color:#16385C;text-decoration:underline}
.back svg{display:block}
.kicker{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#7a8fa6;margin:0 0 8px}
.q{font-size:22px;line-height:1.35;font-weight:600;color:#16385C;margin:0 0 20px}
.opttag{
  display:inline-block;vertical-align:3px;margin-left:6px;
  font-size:11px;font-weight:500;letter-spacing:.02em;color:#7a8fa6;
  background:#F1F5F9;border:1px solid #CBD8E4;border-radius:999px;padding:2px 9px;
}
.hint{font-size:13.5px;color:#5b7086;margin:-12px 0 18px;line-height:1.5}

/* ---------- Inputs ---------- */
.field{margin-bottom:12px}
.field:last-of-type{margin-bottom:0}
.field input,.field textarea{
  width:100%;padding:13px 15px;border:1.5px solid #CBD8E4;border-radius:11px;
  font-size:16px;color:#16385C;background:#fff;outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{min-height:110px;resize:vertical;line-height:1.5}
.field input:focus,.field textarea:focus{border-color:#16385C;box-shadow:0 0 0 3px rgba(22,56,92,.14)}
.field input::placeholder,.field textarea::placeholder{color:#9aa8b8}
.sublabel{display:block;font-size:13.5px;font-weight:600;color:#16385C;margin:14px 0 7px}
.sublabel:first-of-type{margin-top:0}

/* ---------- Option chips ---------- */
.opts{display:grid;grid-template-columns:1fr;gap:9px}
.opts.multi{grid-template-columns:1fr 1fr}
.opt{
  text-align:left;padding:13px 15px;border:1.5px solid #CBD8E4;border-radius:11px;
  background:#F1F5F9;color:#16385C;font-size:15px;cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.opt:hover{background:#E7EEF5;border-color:#A9BED2}
.opt.on{background:#16385C;color:#fff;border-color:#16385C}

/* Greyed-out chips when a multi-select cap is reached. They stay clickable
   so the app can show the "up to N" note, but they never select. */
.opt.off{opacity:.45;cursor:not-allowed}
.opt.off:hover{background:#F1F5F9;border-color:#CBD8E4}

/* "Other" free-text input revealed under the chips */
.otherwrap{margin-top:10px}

/* Subtext under a field (guidance like "just write: I don't need anything") */
.subtext{font-size:13px;color:#5b7086;margin:10px 0 0;line-height:1.5}

/* ---------- Palette picker ---------- */
/* Clearly bounded scroll box: own border, internal padding, and hard
   clipping so palette rows never bleed into the label above or the
   controls and Send button below. Only this list scrolls; the label,
   the own-choice controls and Send stay fixed outside it. The viewport
   clamp keeps the card on screen on short laptop displays. */
.pscroll{
  position:relative;
  max-height:clamp(160px, 32vh, 300px);
  overflow-y:auto;
  overscroll-behavior:contain;
  border:1.5px solid #E4EBF2;
  border-radius:12px;
  padding:12px 10px;
  margin:2px 0;
}
/* With the own-choice controls open the list is secondary: shrink it so
   the whole card still fits on short screens. */
.pscroll.shrunk{max-height:clamp(110px, 18vh, 200px)}
.ownrow{width:100%;text-align:center;margin-bottom:9px}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.pcard{
  display:flex;flex-direction:column;gap:8px;text-align:left;
  padding:11px 12px;border:1.5px solid #CBD8E4;border-radius:11px;
  background:#F1F5F9;cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.pcard:hover{background:#E7EEF5;border-color:#A9BED2}
.pcard.on{background:#16385C;border-color:#16385C}
.pname{font-size:13px;font-weight:500;color:#16385C;line-height:1.3}
.pcard.on .pname{color:#fff}
.pswatches{display:flex;gap:5px}
.pswatches i{width:16px;height:16px;border-radius:50%;border:1px solid rgba(22,56,92,.15);flex:none}
.pcard.on .pswatches i{border-color:rgba(255,255,255,.35)}

/* Color and font controls under the palette scroll area */
.ownctrl{margin-top:16px;padding-top:16px;border-top:1.5px solid #E4EBF2}
.ownctrl .sublabel{font-weight:500;color:#3d5a78}
.openbtn{
  display:block;width:100%;text-align:center;padding:11px;
  border:1.5px solid #CBD8E4;border-radius:11px;background:#F1F5F9;
  color:#16385C;font-size:14px;font-weight:500;text-decoration:none;
  margin-bottom:9px;
  transition:background .15s ease, border-color .15s ease;
}
.openbtn:hover{background:#E7EEF5;border-color:#A9BED2}

/* ---------- Review screen ---------- */
/* The review is a normally scrolling page. While .reviewing is set on the
   form, the fixed folder and Saved pill are hidden at every screen size,
   the list starts clear of the fixed progress bar and ends clear of the
   viewport edge, and nothing except the progress bar (z-index 5) sits
   above the content. */
.reviewing .folder{display:none !important}
.reviewing .body{align-items:flex-start;padding-top:96px;padding-bottom:96px}
.rsec{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#7a8fa6;margin:20px 0 4px}
.ritem{padding:11px 0;border-bottom:1px solid #EEF2F6;overflow:hidden}
.ritem:last-of-type{border-bottom:none}
.rtop{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.rlabel{flex:1;min-width:0;font-size:13px;color:#5b7086;line-height:1.4;overflow-wrap:anywhere}
.redit{
  flex:none;background:none;border:none;padding:0;cursor:pointer;
  color:#16385C;font-size:12.5px;font-weight:600;
}
.redit:hover{text-decoration:underline}
.rval{
  font-size:14.5px;color:#16385C;margin-top:4px;line-height:1.5;
  overflow-wrap:anywhere;word-break:break-word;
}
.rval.muted{color:#9aa8b8}
.rswatches{display:inline-flex;gap:4px;vertical-align:-2px}
.rswatches i{width:13px;height:13px;border-radius:50%;border:1px solid rgba(22,56,92,.15)}

/* ---------- Already-completed screen ---------- */
.alreadycard{
  background:#fff;border-radius:16px;padding:24px 28px;max-width:430px;
  color:#16385C;font-size:15px;line-height:1.55;
  box-shadow:0 14px 30px rgba(0,0,0,.24);margin-top:26px;
}

/* ---------- Website rows ---------- */
.siterow{position:relative;padding-top:4px;margin-bottom:14px}
.siterow + .siterow{border-top:1.5px solid #E4EBF2;padding-top:16px}
.siterow:last-of-type{margin-bottom:0}
.rowrm{
  position:absolute;top:16px;right:0;z-index:1;
  background:none;border:none;padding:2px 4px;cursor:pointer;
  color:#7a8fa6;font-size:12.5px;font-weight:500;
}
.rowrm:hover{color:#16385C;text-decoration:underline}
.addrow{
  margin-top:14px;width:100%;padding:11px;cursor:pointer;
  background:none;border:1.5px dashed #CBD8E4;border-radius:11px;
  color:#4a6b8a;font-size:14px;font-weight:500;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.addrow:hover{border-color:#A9BED2;color:#16385C;background:#F8FAFC}

/* ---------- Error + send ---------- */
.err{color:#B42318;font-size:13.5px;font-weight:500;margin:14px 0 0}
.send{
  margin-top:22px;width:100%;padding:14px;border:none;border-radius:11px;
  background:#16385C;color:#fff;font-size:15px;font-weight:600;cursor:pointer;
  transition:transform .14s ease, background .16s ease;
}
.send:hover{background:var(--pblue-2)}
.send:active{transform:scale(.985)}
.send:disabled{opacity:.65;cursor:default}
.send:disabled:hover{background:#16385C}

/* ---------- Folder ---------- */
/* Desktop only: on tablet and mobile the folder and its Saved pill are
   hidden entirely, and the app advances with a plain fade instead of the
   fly-into-folder motion. */
.folder{position:fixed;left:28px;bottom:28px;width:122px;z-index:4;display:none}
@media (min-width:1024px){
  .folder{display:block}
}
.folderimg{width:122px;display:block;filter:drop-shadow(0 10px 18px rgba(0,0,0,.3));transition:transform .3s ease}
.folder.recv .folderimg{transform:scale(1.06)}
.saved{
  position:absolute;left:6px;bottom:100%;margin-bottom:12px;
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;color:#16385C;font-size:12.5px;font-weight:600;
  padding:6px 11px;border-radius:999px;white-space:nowrap;
  opacity:0;transform:translateY(7px);
  transition:opacity .35s ease, transform .35s ease;
  box-shadow:0 6px 18px rgba(0,0,0,.24);pointer-events:none;
}
.saved.show{opacity:1;transform:translateY(0)}

/* ---------- Thank you ---------- */
.done{text-align:center;padding:10px 4px}
.check{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:#eaf0f6;margin-bottom:16px}
.doneT{font-size:23px;font-weight:600;color:#16385C;margin:0 0 7px}
.doneD{font-size:15px;color:#5b7086;margin:0 0 4px;line-height:1.55}

/* ---------- Focus ---------- */
:focus-visible{outline:2px solid #ffffff;outline-offset:3px;border-radius:6px}
.card :focus-visible{outline-color:#16385C}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .fill,.card,.saved,.folderimg,.opt,.pcard,.openbtn,.send,.flagcard,.addrow{transition:none !important}
  .flagcard:hover{transform:none}
}

/* ---------- Mobile ---------- */
@media (max-width:420px){
  .q{font-size:20px}
  .opts.multi{grid-template-columns:1fr}
  .card{padding:26px 22px}
  .pswatches i{width:14px;height:14px}
}