:root {font:16px/1.6 system-ui;color:#252827;background:#fafbf5}
* {box-sizing:border-box}
body {margin:0}
header {border-bottom:2px solid #52e387;padding:1rem max(1rem,calc((100vw - 900px)/2));background:white}
header nav {display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
main {max-width:920px;padding:1rem;margin:auto}
h1,h2,h3 {line-height:1.2}
section {background:white;border:1px solid #dce6de;border-radius:14px;margin:1rem 0;padding:1.1rem}
article {padding:.6rem 0;border-bottom:1px solid #e6e8e4}
p,article {overflow-wrap:anywhere}
a {color:#32528c}
label {display:block;margin:.65rem 0}
input:not([type=checkbox]),textarea,select {display:block;width:100%;padding:.65rem;border:1px solid #a5b2a8;border-radius:7px;font:inherit}
textarea {min-height:6rem}
button,.tag {border:0;border-radius:8px;padding:.55rem .9rem;background:#52e387;color:#12251a;font:inherit;font-weight:650}
button {cursor:pointer}
:focus-visible {outline:3px solid #6954bc;outline-offset:3px}

/* The entry screen introduces the office before the account form. */
.office-entry {background:#f2f4ed}
.entry-grid {
  max-width:1220px;min-height:100svh;margin:auto;padding:clamp(16px,4vw,56px);
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(290px,.9fr);align-content:center
}
.entry-intro,.entry-access {margin:0;min-width:0;padding:clamp(24px,4vw,48px)}
.entry-intro {
  display:flex;flex-direction:column;justify-content:space-between;gap:clamp(28px,5vw,60px);
  background:#242823;color:#fafff7;border:1px solid #242823;border-radius:24px 0 0 24px
}
.entry-brands {
  display:flex;align-items:center;flex-wrap:wrap;gap:11px;color:#fafff7;align-self:flex-start
}
.entry-brands>img {display:block;width:114px;height:auto}
.entry-studio {display:inline-flex;align-items:center;gap:1px;font-weight:750;font-size:.94rem}
.entry-studio img {width:37px;height:37px;object-fit:contain;clip-path:circle(36.5%);margin-left:-4px}
.entry-copy h1 {font-size:clamp(2rem,4.55vw,4.25rem);line-height:1.02;letter-spacing:-.055em;margin:0}
.entry-product {font-size:clamp(1rem,1.65vw,1.25rem);font-weight:750;margin:1rem 0 .7rem}
.entry-description {max-width:39ch;color:#d3ddd0;margin:0}
.entry-steps {list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.55rem 1rem}
.entry-steps li {font-size:.83rem;color:#eef5eb}
.entry-steps span {color:#91f7b2;font-weight:750;margin-right:.35em}
.entry-access {
  display:flex;flex-direction:column;justify-content:center;border-radius:0 24px 24px 0;
  border:1px solid #dce6de;border-left:0;background:#fff
}
.entry-access h2 {font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.04em;margin:.65rem 0 .5rem}
.entry-lead {color:#4b5850;margin:.1rem 0 .75rem}
.entry-access label {font-weight:650}
.entry-access button {width:100%;margin-top:.55rem;min-height:46px}
.entry-notice {background:#eef4fc;color:#263d66;border-radius:8px;padding:.6rem .8rem}
@media(max-width:730px) {
  .entry-grid {grid-template-columns:minmax(0,1fr);align-content:start}
  .entry-intro {border-radius:20px 20px 0 0;gap:17px}
  .entry-access {border-radius:0 0 20px 20px;border-left:1px solid #dce6de}
}

.entry-privacy {display:flex;align-items:flex-start;gap:.55rem;font-size:.88rem;font-weight:400!important}
.entry-privacy input {width:1.15rem;height:1.15rem;margin:.16rem 0 0;flex:none;accent-color:#207640}

.password-control {position:relative}
.password-control input {padding-right:3rem!important}
.entry-access .password-toggle {
  position:absolute;top:50%;right:3px;transform:translateY(-50%);width:44px;min-height:40px;
  margin:0;padding:8px;border:0;background:transparent;color:#46534a
}
.password-toggle svg {display:block;width:23px;height:23px;margin:auto}
.password-toggle .password-slash {display:none}
.password-control input[type=text] + .password-toggle .password-slash {display:block}