/* style layout */
@font-face{font-family:Heebo;
  src:url('/fonts/heebo-regular.ttf');
  font-weight:400;
  font-display:swap}
@font-face{font-family:Heebo;
  src:url('/fonts/heebo-semibold.ttf');
  font-weight:600 900;
  font-display:swap}

:root{--bg:#f8f8f2;
  --surface:#fff;
  --ink:#172820;
  --muted:#66736b;
  --line:#dfe4db;
  --green:#16482e;
  --hover:#225e40;
  --soft:#e9f0e4;
  --coral:#d25431;
  --shadow:0 18px 65px #163c2010;
  --input:#fff;
  color-scheme:light}
:root[data-theme=dark]{--bg:#141c18;
  --surface:#1d2821;
  --ink:#eff3e9;
  --muted:#aab9ac;
  --line:#37473b;
  --green:#b9d9ab;
  --hover:#d3ebc8;
  --soft:#293b2e;
  --coral:#ffa180;
  --shadow:0 18px 65px #0003;
  --input:#17231b;
  color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;
  scroll-padding-top:100px}
body{margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.65 Heebo,Arial,sans-serif}
button,input,select,textarea{font:inherit}
button,a{touch-action:manipulation}
button{cursor:pointer;
  color:inherit;
  border:0;
  background:none}
button:disabled{cursor:not-allowed;
  opacity:.52}
a{color:inherit;
  text-decoration:none}
img{display:block;
  max-width:100%}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.2;
  font-weight:600}
h1{letter-spacing:-2px}
h2{font-size:32px;
  letter-spacing:-.8px}
h3{font-size:20px}
p{color:var(--muted)}
:focus-visible{outline:3px solid var(--coral);
  outline-offset:4px}
main:focus{outline:0}
.skip{position:fixed;
  top:-80px;
  right:20px;
  background:var(--surface);
  padding:15px;
  z-index:1000}
.skip:focus{top:5px}

.site-header{border-bottom:1px solid var(--line);
  background:var(--bg);
  position:sticky;
  top:0;
  z-index:30}
.header-inner{max-width:1360px;
  height:88px;
  margin:auto;
  padding:0 38px;
  display:flex;
  align-items:center;
  gap:36px}
.brand{font-family:Arial,sans-serif;
  font-size:34px;
  letter-spacing:-1.8px;
  font-weight:900;
  white-space:nowrap}
.brand span{color:var(--coral)}
nav{display:flex;
  align-items:center;
  gap:26px;
  font-size:13px}
nav a{padding:30px 0;
  white-space:nowrap}
nav a.active{color:var(--green);
  box-shadow:inset 0 -3px var(--green)}
.header-tools{display:flex;
  align-items:center;
  gap:16px;
  margin-inline-start:auto}
#account{display:flex;
  gap:13px;
  align-items:center;
  font-size:13px}
.icon-button{width:42px;
  height:42px;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:22px;
  background:var(--surface);
  flex-shrink:0}
.primary,.outline,.coral,.light-button{min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:12px 23px;
  border-radius:8px;
  font-weight:600;
  font-size:14px;
  transition:background .15s}
.primary{background:var(--green);
  color:var(--bg)}
.primary:hover{background:var(--hover)}
.outline{border:1px solid var(--line);
  background:var(--surface)}
.outline:hover{background:var(--soft)}
.coral{background:#cf522e;
  color:#fff}
.coral:hover{background:#b74424}
.light-button{background:#eef5e8;
  color:#17452e}
.compact{min-height:40px;
  padding:8px 16px}
.text-link{color:var(--green);
  font-weight:600}
.eyebrow{display:block;
  font-size:12px;
  font-weight:600;
  letter-spacing:.6px;
  color:var(--green);
  margin-bottom:15px}
.eyebrow i{display:inline-block;
  height:7px;
  width:7px;
  border-radius:50%;
  background:#6c9261;
  margin-inline-end:8px}
.caption{font-size:12px;
  color:var(--muted)}
.tag{display:inline-flex;
  border-radius:5px;
  background:var(--soft);
  font-size:11px;
  padding:5px 9px;
  color:var(--green)}
.arrow{font-size:22px}
#mobile-nav{display:none}
#main,footer{max-width:1284px;
  margin:auto;
  padding:0 24px}

.hero{display:grid;
  grid-template-columns:1.02fr 1fr;
  gap:56px;
  align-items:center;
  padding:55px 0 44px;
  min-height:620px}
.hero h1{font-size:clamp(48px,4.55vw,68px);
  line-height:1.09;
  margin-bottom:22px}
.hero h1 em{font-style:normal;
  color:var(--green);
  display:block}
.hero h1 em:after{content:'.';
  color:var(--coral)}
.hero-copy>p{font-size:17px;
  max-width:430px;
  line-height:1.9}
.hero-search{margin:30px 0 17px;
  display:flex;
  gap:8px;
  padding:6px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 5px 18px #183d2007}
.hero-search input{border:0!important;
  background:transparent!important;
  min-width:0;
  flex:1;
  padding:10px 14px!important;
  font-size:14px;
  margin:0}
.hero-search button{min-width:91px}
.popular{display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  font-size:11px;
  color:var(--muted)}
.popular a{border-bottom:1px solid var(--line)}
.hero-actions{display:flex;
  align-items:center;
  gap:23px;
  margin-top:31px;
  font-size:13px}
.hero-visual{display:grid;
  grid-template-columns:1fr 1.25fr;
  grid-template-rows:210px 245px;
  gap:12px;
  direction:ltr;
  position:relative}
.hero-portrait{grid-column:2;
  grid-row:1/3;
  position:relative;
  overflow:hidden;
  border-radius:12px}
.hero-portrait img{width:100%;
  height:100%;
  object-fit:cover;
  object-position:52% center}
.portrait-caption{position:absolute;
  bottom:17px;
  left:14px;
  right:14px;
  background:#fffffff0;
  color:#173e2b;
  padding:13px 15px;
  border-radius:8px;
  direction:rtl;
  font-size:13px;
  font-weight:600;
  box-shadow:var(--shadow)}
.portrait-caption span{font-size:10px;
  display:block;
  color:#657465;
  margin-top:3px}
.hero-desk{width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px}
.manifesto{background:#d8e7cf;
  color:#163e28;
  padding:23px 21px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-radius:12px;
  direction:rtl;
  position:relative;
  overflow:hidden}
.manifesto strong{font-size:31px;
  line-height:1.2;
  z-index:1}
.manifesto small{font:9px Arial;
  letter-spacing:1px;
  z-index:1}
.manifesto .sun{font-size:86px;
  line-height:1;
  position:absolute;
  bottom:33px;
  left:0;
  color:#a9c293;
  transform:rotate(13deg)}
.manifesto strong:after{content:'';
  display:block;
  background:#d75f3a;
  width:48px;
  height:3px;
  transform:rotate(-8deg);
  margin-top:10px}

.values{display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:24px 0;
  border-block:1px solid var(--line)}
.values>div{display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:4px 22px}
.values>div+div{border-inline-start:1px solid var(--line)}
.values svg{width:31px;
  height:31px;
  stroke:var(--green);
  flex-shrink:0}
.values strong{display:block;
  font-size:15px}
.values small{font-size:11px;
  color:var(--muted)}
.section{margin:57px 0}
.section-heading{display:flex;
  align-items:end;
  justify-content:space-between;
  gap:15px;
  margin-bottom:25px}
.section-heading .eyebrow{margin-bottom:8px}
.section-heading>a,.section-heading>button{font-size:13px;
  color:var(--green);
  white-space:nowrap}
.category-grid{display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:17px}
.category-card{min-height:185px;
  border-radius:10px;
  overflow:hidden;
  position:relative;
  background:url('/images/categories.webp') #344c40;
  background-size:200% auto;
  transition:transform .2s}
.category-card:nth-child(1){background-position:0 0}
.category-card:nth-child(2){background-position:100% 0}
.category-card:nth-child(3){background-position:0 100%}
.category-card:nth-child(4){background-position:100% 100%}
.category-card:hover{transform:translateY(-4px)}
.category-card:before{content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 15%,#09140ada)}
.category-content{position:absolute;
  bottom:17px;
  inset-inline:17px;
  color:white}
.category-card h3{font-size:20px;
  margin-bottom:5px}
.category-card p{color:white;
  font-size:11px}
.cat-arrow{position:absolute;
  top:13px;
  left:13px;
  border-radius:50%;
  width:28px;
  height:28px;
  border:1px solid #ffffff80;
  display:grid;
  place-items:center;
  color:white}
.section-intro{display:flex;
  gap:13px;
  align-items:center;
  justify-content:space-between;
  margin:-6px 0 21px;
  font-size:13px}
.jobs-grid{display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:17px}
.job-card{background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:23px;
  display:flex;
  flex-direction:column;
  min-width:0}
.job-card:hover{border-color:#96b58d;
  box-shadow:var(--shadow)}
.card-top{display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px}
.job-card h3{font-size:19px;
  line-height:1.5;
  margin-bottom:11px;
  overflow-wrap:anywhere}
.job-card>p{font-size:13px;
  margin-bottom:21px;
  line-height:1.8;
  overflow-wrap:anywhere}
.job-bottom{display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--line)}
.job-bottom strong{font-size:18px}
.job-bottom small{display:block;
  color:var(--muted);
  font-size:10px}
.round-link{width:37px;
  height:37px;
  border-radius:50%;
  border:1px solid var(--line);
  color:var(--green);
  font-size:21px}
.byline{font-size:10px;
  color:var(--muted);
  margin-top:13px}
.example-tag{color:#a43a1b;
  background:#ffeddf}
.mini-tags{display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:15px;
  font-size:11px;
  color:var(--muted)}
.empty{border:1px dashed var(--line);
  border-radius:12px;
  padding:34px;
  text-align:center;
  background:var(--surface)}
.empty-symbol{font-size:32px;
  color:var(--green)}
.empty p{margin:12px auto 20px;
  max-width:530px;
  font-size:14px}
.empty h3{font-size:23px}

.community-section{display:grid;
  grid-template-columns:.8fr 1.2fr;
  background:var(--soft);
  border-radius:16px;
  overflow:hidden;
  margin:58px 0}
.community-story{padding:43px 36px}
.community-story h2{font-size:39px;
  line-height:1.3;
  margin:10px 0 18px}
.community-story p{font-size:14px;
  margin-bottom:24px}
.forum-preview{padding:25px;
  background:var(--surface);
  margin:18px;
  border:1px solid var(--line);
  border-radius:10px}
.forum-preview>a{display:flex;
  align-items:center;
  gap:17px;
  padding:18px 4px;
  border-bottom:1px solid var(--line)}
.forum-preview>a:last-child{border:0}
.forum-preview small{display:block;
  font-size:11px;
  color:var(--muted);
  margin-top:4px}
.square-icon{width:43px;
  height:43px;
  border:1px solid var(--line);
  border-radius:8px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  color:var(--green);
  font-size:18px}
.forum-preview .arrow{margin-inline-start:auto;
  color:var(--green)}
.hosting-banner{display:flex;
  align-items:center;
  justify-content:space-between;
  padding:41px 42px;
  background:#173e2b;
  color:#f5f5ea;
  border-radius:14px;
  gap:40px;
  margin:40px 0}
.hosting-banner h2{font-size:35px;
  margin:8px 0 12px}
.hosting-banner p{color:#cbdcc7;
  font-size:14px}
.hosting-banner .eyebrow{color:#b5d2a9}
.hosting-banner .light-button{white-space:nowrap}
.real-stats{display:flex;
  gap:25px;
  font-size:12px;
  color:var(--muted);
  padding:0 0 35px}
.real-stats small{margin-inline-start:auto}

.page-heading{padding:43px 0 28px;
  display:flex;
  justify-content:space-between;
  gap:25px;
  align-items:center}
.page-heading h1{font-size:45px;
  margin-bottom:15px}
.page-heading p{max-width:720px;
  line-height:1.8}
.page-heading>.primary{flex-shrink:0}
.filter-line{display:grid;
  grid-template-columns:2fr repeat(3,1fr);
  gap:14px;
  padding:21px;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:12px;
  margin-bottom:24px}
.filter-line label{margin:0;
  font-size:12px}
.filter-more{grid-column:1/-1;
  display:flex;
  gap:14px;
  align-items:end;
  flex-wrap:wrap}
.filter-more label{flex:1;
  min-width:100px}
.result-meta{display:flex;
  justify-content:space-between;
  margin:18px 0;
  color:var(--muted);
  font-size:13px}
.pagination{display:flex;
  gap:15px;
  justify-content:center;
  align-items:center;
  margin:25px 0}
.loading{padding:70px 20px;
  text-align:center;
  color:var(--muted)}
.forum-layout{display:grid;
  grid-template-columns:235px 1fr;
  gap:30px;
  margin-bottom:50px}
.forum-sidebar>a{display:block;
  padding:13px 15px;
  border-radius:7px;
  margin-bottom:6px;
  font-size:13px}
.forum-sidebar>a.selected{background:var(--soft);
  color:var(--green);
  font-weight:600}
.sidebar-note{padding:22px 14px;
  margin-top:25px;
  font-size:13px;
  border-top:1px solid var(--line)}
.sidebar-note p{margin-top:12px}
.topic-header{display:flex;
  justify-content:space-between;
  padding:17px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:12px}
.topic-row{width:100%;
  display:flex;
  gap:17px;
  align-items:center;
  text-align:start;
  border-bottom:1px solid var(--line);
  padding:23px;
  background:var(--surface)}
.topic-row:hover{background:var(--soft)}
.topic-text{flex:1;
  min-width:0}
.topic-text strong{font-size:16px;
  overflow-wrap:anywhere}
.topic-text small{display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:7px}
.topic-symbol{color:var(--green);
  font-size:20px}
.reply-count{font-size:17px;
  text-align:center}
.reply-count small{display:block;
  font-size:10px;
  color:var(--muted)}

.hosting-layout{display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin:20px 0 45px}
.plan{padding:30px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  display:flex;
  flex-direction:column;
  min-width:0}
.plan.featured{border:2px solid var(--green);
  background:var(--soft)}
.plan h2{font-size:30px;
  margin:14px 0 10px}
.plan>p{font-size:13px}
.price{font:600 52px/1.4 Heebo;
  letter-spacing:-2px;
  margin:15px 0}
.price>span{font:400 12px Heebo;
  letter-spacing:0;
  color:var(--muted)}
.plan ul{list-style:none;
  padding:0;
  margin:5px 0 28px}
.plan li{font-size:13px;
  padding:10px 0;
  border-bottom:1px solid var(--line)}
.plan li:before{content:'✓';
  color:var(--green);
  margin-inline-end:10px}
.plan>.primary,.plan>.outline{margin-top:auto}
.plan .caption{margin-top:16px}
.plan-label{color:var(--green);
  font-size:11px;
  font-weight:600}
.pricing-note{padding:20px 24px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  font-size:13px;
  color:var(--muted);
  margin-bottom:25px}
.pricing-note strong{color:var(--ink)}
.comparison{width:100%;
  border-collapse:collapse;
  font-size:13px}
.comparison th,.comparison td{text-align:start;
  padding:16px;
  border-bottom:1px solid var(--line)}
.comparison th{background:var(--soft);
  color:var(--green)}
.comparison a{text-decoration:underline;
  text-underline-offset:3px}
.table-scroll{overflow:auto;
  border:1px solid var(--line);
  border-radius:12px}
.faq{max-width:850px;
  margin:40px auto}
.faq details{padding:19px 0;
  border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;
  font-weight:600}
.faq p{padding-top:13px;
  font-size:14px}
.dashboard-grid{display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px}
.panel{padding:27px;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:13px;
  margin-bottom:24px;
  min-width:0}
.panel h2{font-size:25px;
  margin-bottom:18px}
.panel .section-heading h2{margin:0}
.site-row{display:flex;
  gap:15px;
  align-items:center;
  justify-content:space-between;
  padding:19px 0;
  border-bottom:1px solid var(--line)}
.site-row h3{font-size:16px;
  line-height:1.6;
  overflow-wrap:anywhere}
.site-row a{font-size:12px;
  color:var(--green)}
.site-row small{display:block;
  font-size:11px;
  color:var(--muted)}
.site-row .outline{font-size:12px;
  padding:8px 13px}
.proposal{padding:22px 0;
  border-top:1px solid var(--line)}
.proposal h3{font-size:17px;
  margin-bottom:10px}
.proposal p{white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:14px}
.proposal small{font-size:11px;
  color:var(--muted)}
.membership-status{display:flex;
  flex-wrap:wrap;
  gap:25px;
  align-items:center;
  justify-content:space-between}
.usage{display:flex;
  gap:20px;
  font-size:13px}
.usage strong{display:block;
  font-size:23px}
.people-grid{display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-bottom:45px}
.person{padding:28px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px}
.avatar{width:53px;
  height:53px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--soft);
  color:var(--green);
  font-size:27px;
  margin-bottom:17px}
.person h3{margin-bottom:12px}
.person p{font-size:13px;
  overflow-wrap:anywhere}
.person small{display:block;
  margin:16px 0;
  color:var(--muted)}
.person a{color:var(--green);
  font-size:13px}
.people-grid .empty{grid-column:1/-1}
.service-photo{width:100%;
  height:210px;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:24px}

footer{border-top:1px solid var(--line);
  padding-top:38px}
.footer-main{display:flex;
  justify-content:space-between;
  gap:25px;
  padding-bottom:33px}
.footer-main>div:not(:first-child){display:flex;
  flex-direction:column;
  gap:11px;
  font-size:13px}
.footer-main p{font-size:13px;
  margin-top:8px}
.footer-main button{padding:0;
  text-align:start}
.footer-bottom{display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--line);
  padding:20px 0;
  font-size:11px;
  color:var(--muted)}
.footer-bottom small{font-size:10px}

dialog{background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:18px;
  width:min(610px,calc(100% - 28px));
  padding:34px;
  max-height:88dvh;
  overflow:auto;
  box-shadow:0 30px 100px #0004}
dialog::backdrop{background:#102a206e;
  backdrop-filter:blur(4px)}
.close{margin-inline-start:auto;
  margin-bottom:15px;
  font-size:28px}
dialog h2{font-size:28px;
  line-height:1.3;
  margin:10px 0 17px}
dialog h3{margin:25px 0 12px}
dialog p{font-size:14px;
  line-height:1.9;
  margin:10px 0 18px}
dialog .text-link{display:inline-block;
  margin:14px 0 0;
  font-size:13px}
dialog .text-link+.text-link{margin-inline-start:15px}
label{display:block;
  font-size:13px;
  margin-bottom:17px}
input,select,textarea{border:1px solid var(--line);
  border-radius:7px;
  padding:12px;
  width:100%;
  background:var(--input);
  color:var(--ink);
  display:block;
  margin-top:7px;
  min-height:45px}
input::placeholder,textarea::placeholder{color:var(--muted);
  opacity:1}
textarea{resize:vertical;
  min-height:90px}
.checkbox{display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:12px}
.checkbox input{width:18px;
  height:18px;
  min-height:0;
  flex-shrink:0;
  margin:2px 0;
  accent-color:var(--green)}
.form-error{color:#b84024!important;
  font-size:13px!important;
  min-height:20px}
:root[data-theme=dark] .form-error{color:#ffa180!important}
.user-body{white-space:pre-wrap;
  overflow-wrap:anywhere}
.reply{background:var(--soft);
  padding:18px;
  border-radius:8px;
  margin:12px 0;
  font-size:13px}
.reply p{font-size:13px;
  margin:8px 0}
.reply small{color:var(--muted)}
hr{border:0;
  border-top:1px solid var(--line);
  margin:25px 0}
.form-row{display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px}
.gate{background:var(--soft);
  padding:20px;
  border-radius:10px;
  margin:20px 0}
.gate h3{margin:0;
  font-size:18px}
.gate p{font-size:13px}
.payment-buttons{display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px}
.provider-button{border:1px solid var(--line);
  background:var(--bg);
  padding:15px;
  border-radius:8px;
  font-size:19px;
  font-weight:600}
.provider-button small{display:block;
  font-size:10px;
  font-weight:400;
  color:var(--muted)}
.toast{position:fixed;
  bottom:25px;
  left:50%;
  transform:translate(-50%,25px);
  max-width:calc(100% - 32px);
  width:max-content;
  z-index:100;
  color:#fff;
  background:#1c3928;
  padding:14px 22px;
  border-radius:9px;
  opacity:0;
  pointer-events:none;
  transition:.2s;
  font-size:13px}
.toast.visible{opacity:1;
  transform:translate(-50%,0)}

@media(max-width:1100px){.header-inner{gap:20px;
  padding:0 24px}
.brand{font-size:29px}
nav{gap:15px;
  font-size:12px}
.header-tools{gap:10px}
#account{gap:8px}
#account .primary{padding:8px 12px;
  font-size:12px}
.hero{gap:32px;
  min-height:540px}
.hero-visual{grid-template-rows:185px 210px}
.manifesto strong{font-size:27px}
.hero h1{font-size:52px}
.category-card{min-height:155px}
.values>div{padding:4px 12px}
.values strong{font-size:13px}
.jobs-grid{grid-template-columns:repeat(2,1fr)}
.hosting-layout{gap:14px}
.plan{padding:24px}
}

@media(max-width:850px){#mobile-nav{display:grid}
.header-inner{height:73px}
.site-header nav{display:none;
  position:absolute;
  top:72px;
  inset-inline:15px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 20px;
  box-shadow:var(--shadow)}
.site-header.menu-open nav{display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0}
.site-header nav a{padding:14px 4px}
.site-header nav a.active{box-shadow:none;
  background:var(--soft)}
.hero{gap:24px;
  min-height:520px}
.hero h1{font-size:45px}
.hero-copy>p{font-size:14px}
.hero-actions{gap:12px;
  font-size:12px}
.hero-visual{grid-template-rows:170px 190px;
  gap:8px}
.manifesto{padding:20px 15px}
.manifesto strong{font-size:25px}
.manifesto small{font-size:8px}
.portrait-caption{inset-inline:8px;
  font-size:12px;
  padding:11px}
.hero-search input{padding:9px!important;
  font-size:12px}
.hero-search button{min-width:70px;
  padding:10px 15px}
.values small{font-size:10px}
.values>div{gap:10px}
.values svg{width:25px}
.category-grid{gap:12px}
.category-card{min-height:135px}
.category-card h3{font-size:17px}
.category-card p{font-size:10px}
.category-content{inset-inline:12px}
.community-story{padding:30px 24px}
.community-story h2{font-size:32px}
.forum-preview{padding:15px;
  margin:13px}
.hosting-layout{grid-template-columns:1fr}
.plan{display:block}
.plan>.primary,.plan>.outline{width:100%}
.hosting-layout.pricing{grid-template-columns:repeat(3,1fr)}
.pricing .plan{padding:22px 16px}
.pricing .price{font-size:42px}
.pricing .plan li{font-size:11px}
.filter-line{grid-template-columns:1fr 1fr}
.forum-layout{grid-template-columns:200px 1fr;
  gap:20px}
}

@media(max-width:600px){#main,footer{padding-inline:19px}
.header-inner{padding:0 17px;
  height:68px;
  gap:10px}
.brand{font-size:29px}
.header-tools{gap:10px}
.header-tools .icon-button{width:35px;
  height:35px;
  font-size:20px}
#account .login-btn{display:none}
#account .primary{min-height:36px;
  padding:7px 11px;
  font-size:11px;
  max-width:125px;
  overflow:hidden;
  white-space:nowrap}
.site-header nav{top:67px}
.hero{grid-template-columns:1fr;
  gap:27px;
  padding:32px 0}
.hero h1{font-size:49px;
  letter-spacing:-1.8px;
  max-width:430px;
  margin-bottom:16px}
.hero .eyebrow{font-size:11px}
.hero-copy>p{font-size:14px;
  max-width:95%}
.hero-search{margin:22px 0 13px}
.hero-search input{font-size:13px;
  padding:12px 10px!important}
.hero-actions{margin-top:22px;
  gap:23px}
.hero-actions .coral{min-height:45px;
  font-size:13px}
.hero-visual{grid-template-columns:1fr 1.3fr;
  grid-template-rows:137px 156px;
  gap:10px}
.hero-portrait img{object-position:center 45%}
.manifesto{padding:16px}
.manifesto strong{font-size:26px}
.manifesto small{font-size:7px;
  max-width:100px}
.manifesto .sun{font-size:60px;
  left:-10px;
  bottom:13px}
.portrait-caption{bottom:10px;
  padding:9px 10px;
  font-size:11px}
.portrait-caption span{font-size:9px}
.values{padding:18px 0;
  grid-template-columns:1fr;
  gap:13px}
.values>div{justify-content:flex-start;
  padding:0;
  gap:16px}
.values>div+div{border:0}
.values strong{font-size:13px}
.values small{font-size:11px}
.values svg{width:26px;
  height:26px}
.section{margin:35px 0}
.section-heading{margin-bottom:19px;
  align-items:center;
  gap:12px}
.section-heading h2{font-size:25px}
.section-heading .eyebrow{font-size:10px;
  margin-bottom:5px}
.section-heading>a,.section-heading>button{font-size:11px}
.category-grid{grid-template-columns:repeat(2,1fr);
  gap:12px}
.category-card{min-height:160px}
.category-card h3{font-size:18px}
.category-card p{font-size:10px}
.jobs-grid{grid-template-columns:1fr}
.job-card{padding:21px}
.section-intro{display:block;
  font-size:12px}
.section-intro .tag{margin-top:9px}
.community-section{grid-template-columns:1fr;
  margin:35px 0}
.community-story{padding:28px 24px}
.community-story h2{font-size:32px;
  margin:10px 0 14px}
.community-story p{margin-bottom:19px}
.forum-preview{margin:0 14px 14px;
  padding:12px}
.forum-preview>a{padding:16px 4px}
.forum-preview strong{font-size:14px}
.hosting-banner{display:block;
  padding:28px 23px;
  margin:30px 0}
.hosting-banner h2{font-size:28px}
.hosting-banner p{font-size:13px;
  margin-bottom:23px}
.real-stats{gap:15px;
  flex-wrap:wrap;
  font-size:11px}
.real-stats small{margin:0;
  flex-basis:100%}
.page-heading{padding:30px 0 23px;
  display:block}
.page-heading h1{font-size:36px}
.page-heading p{font-size:13px}
.page-heading .primary{margin-top:20px}
.filter-line{padding:15px;
  gap:10px}
.filter-line>label:first-child,.filter-line>label:nth-child(4){grid-column:1/-1}
.filter-more{gap:10px}
.filter-more label{min-width:90px}
.filter-line input,.filter-line select{font-size:14px}
.result-meta{font-size:12px}
.forum-layout{grid-template-columns:1fr;
  gap:16px}
.forum-sidebar{display:flex;
  flex-wrap:wrap;
  gap:7px}
.forum-sidebar>a{font-size:11px;
  padding:9px 11px;
  margin:0;
  border:1px solid var(--line);
  border-radius:20px}
.sidebar-note{display:none}
.topic-row{padding:19px 12px;
  gap:12px}
.topic-text strong{font-size:14px}
.topic-text small{font-size:10px}
.hosting-layout.pricing{grid-template-columns:1fr;
  gap:20px}
.pricing .plan{padding:28px}
.pricing .price{font-size:51px}
.pricing .plan li{font-size:14px}
.comparison{min-width:570px;
  font-size:12px}
.comparison td,.comparison th{padding:13px}
.pricing-note{font-size:12px;
  padding:18px}
.faq{margin:28px 0}
.faq summary{font-size:14px}
.faq p{font-size:13px}
.dashboard-grid{grid-template-columns:1fr;
  gap:0}
.panel{padding:21px}
.panel h2{font-size:23px}
.usage{width:100%;
  justify-content:space-between;
  gap:14px}
.site-row{align-items:flex-start}
.site-row h3{font-size:14px}
.site-row .outline{min-height:36px;
  white-space:nowrap;
  font-size:11px;
  padding:8px}
.people-grid{grid-template-columns:1fr}
.empty{padding:25px 18px}
.empty h3{font-size:20px}
.empty p{font-size:13px}
.footer-main{flex-wrap:wrap;
  gap:28px;
  padding-bottom:25px}
.footer-main>div:first-child{flex-basis:100%}
.footer-main>div:not(:first-child){font-size:12px;
  min-width:42%}
.footer-bottom{flex-direction:column;
  gap:7px}
.footer-bottom small{font-size:9px}
dialog{padding:22px;
  max-height:91dvh}
dialog h2{font-size:25px}
dialog p{font-size:13px}
.form-row{grid-template-columns:1fr;
  gap:0}
.provider-button{padding:13px 8px;
  font-size:17px}
.toast{bottom:17px;
  font-size:12px;
  padding:12px 16px}
}

@media(max-width:359px){.header-inner{padding:0 12px}
.header-tools{gap:7px}
.brand{font-size:25px}
#account .primary{padding:7px 9px;
  font-size:10px}
.hero h1{font-size:41px}
.hero-visual{grid-template-rows:130px 150px}
.manifesto strong{font-size:24px}
.hero-actions{gap:13px}
.category-card{min-height:140px}
.hero-actions .text-link{font-size:11px}
.section-heading h2{font-size:23px}
}

#mobile-account{display:none}
@media(max-width:850px){#mobile-account{display:flex;
  flex-direction:column;
  border-top:1px solid var(--line);
  padding-top:8px}
#mobile-account button{text-align:start;
  padding:14px 4px;
  font-size:13px}
}

@media(max-width:359px){#account .primary{max-width:85px;
  display:block;
  text-overflow:ellipsis;
  line-height:22px}
#account{min-width:0}
.header-inner{gap:8px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{transition:none!important;
  animation:none!important}
}



/* marketplace layout */
/* FreeServ v3: a two-sided work platform inspired by the supplied reference. */
:root{--bg:#fff;
  --surface:#fff;
  --ink:#182236;
  --muted:#657085;
  --line:#e4e8f0;
  --green:#1458ec;
  --hover:#0846cb;
  --soft:#eff4ff;
  --coral:#3069ed;
  --shadow:0 16px 45px #283b6610;
  --input:#fff;
  --hero:#f2f5fc}

:root[data-theme=dark]{--bg:#101725;
  --surface:#182235;
  --ink:#f0f3fc;
  --muted:#adbbd1;
  --line:#2e3d57;
  --green:#8aafff;
  --hover:#b4ccff;
  --soft:#202f4c;
  --coral:#a5c0ff;
  --shadow:0 16px 45px #0003;
  --input:#131d2d;
  --hero:#19263c}

body{font-size:15px}
.site-header{background:var(--surface)}
.header-inner{height:84px;
  gap:30px}
.brand{display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:32px;
  letter-spacing:-1.6px}
.brand:before{content:'';
  display:block;
  width:22px;
  height:22px;
  background:var(--green);
  border-radius:5px;
  transform:rotate(-15deg);
  margin-right:6px;
  box-shadow:7px -5px 0 -1px #8db2ff}
.brand span{color:var(--green)}
nav{gap:21px}
nav a{padding-block:29px}
#main,footer{max-width:1248px;
  padding-inline:32px}
.primary,.outline,.coral,.light-button{border-radius:7px;
  min-height:46px}
.primary{color:#fff}
:root[data-theme=dark] .primary{color:#101b30}
.light-button{background:#fff;
  color:#1648b8}
.round-link{flex-shrink:0}
.sr-only{position:absolute!important;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0}

.market-hero{display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:58px;
  padding:74px 0 64px;
  position:relative;
  isolation:isolate}
.market-hero:before{content:'';
  position:absolute;
  z-index:-1;
  inset:0 calc(50% - 50vw);
  background:var(--hero)}
.market-copy{min-width:0}
.market-copy .eyebrow{font-size:12px;
  letter-spacing:.1px;
  margin-bottom:22px}
.market-copy h1{font-size:clamp(42px,4.6vw,64px);
  font-weight:600;
  line-height:1.16;
  letter-spacing:-1.8px}
.market-copy h1 em{font-style:normal;
  color:var(--green)}
.market-copy>p{font-size:16px;
  line-height:1.95;
  margin-top:23px;
  max-width:490px}
.market-actions{display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:27px}
.market-actions .primary,.market-actions .outline{padding:13px 24px}
.market-search-box{margin-top:33px}
.search-modes{display:flex;
  padding:0;
  border:0;
  gap:22px;
  margin:0}
.search-modes label{position:relative;
  margin:0;
  cursor:pointer;
  font-size:12px;
  font-weight:600;
  color:var(--muted)}
.search-modes label>input{position:absolute;
  opacity:0;
  width:1px;
  min-height:0;
  height:1px;
  margin:0}
.search-modes label>span{display:block;
  padding:0 0 8px;
  border-bottom:2px solid transparent}
.search-modes input:checked+span{color:var(--green);
  border-color:var(--green)}
.search-modes input:focus-visible+span{outline:3px solid var(--green);
  outline-offset:3px}
.market-search-box .hero-search{margin:10px 0 11px;
  box-shadow:0 5px 14px #172c5b06;
  border-radius:7px;
  gap:5px;
  align-items:center;
  padding:5px}
.search-icon{font-size:25px;
  margin-inline-start:12px;
  color:var(--green);
  line-height:1}
.market-search-box .hero-search input{padding:10px 4px!important;
  font-size:13px}
.market-search-box .hero-search button{min-height:43px;
  min-width:82px}
.market-search-box .popular{font-size:10px;
  gap:11px}
.market-search-box .popular a{border:0}

.market-visual{position:relative;
  min-width:0;
  min-height:500px;
  display:flex;
  align-items:center;
  justify-content:center;
  direction:ltr}
.portrait-backdrop{position:absolute;
  width:82%;
  height:91%;
  background:#dce7ff;
  border-radius:45% 45% 20% 20%;
  transform:rotate(-9deg)}
.portrait-window{position:relative;
  width:79%;
  height:461px;
  border-radius:160px 160px 18px 18px;
  overflow:hidden;
  border:7px solid var(--surface);
  box-shadow:0 18px 50px #223c6b14}
.portrait-window img{width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 38%}
.floating-project{position:absolute;
  left:-12px;
  bottom:56px;
  display:flex;
  gap:12px;
  align-items:center;
  background:var(--surface);
  padding:17px;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 14px 35px #1c3b6320;
  direction:rtl;
  max-width:340px}
.floating-project strong{font-size:15px;
  display:block}
.floating-project small{font-size:10px;
  color:var(--muted)}
.floating-project .mini-tags{font-size:9px;
  margin:6px 0 0;
  gap:4px}
.project-mark{display:grid;
  place-items:center;
  width:40px;
  height:44px;
  background:var(--soft);
  color:var(--green);
  border-radius:7px;
  font:bold 25px Arial;
  flex-shrink:0}
.connection-dot{width:30px;
  height:30px;
  display:grid;
  place-items:center;
  color:var(--green);
  font-size:21px;
  margin-inline-start:5px}
.floating-skill{position:absolute;
  right:-11px;
  top:58px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:15px 17px;
  background:var(--surface);
  direction:rtl;
  box-shadow:0 10px 30px #28407313;
  border:1px solid var(--line);
  border-radius:10px}
.floating-skill strong{font-size:12px;
  display:block}
.floating-skill small{font-size:9px;
  color:var(--muted)}
.skill-check{border-radius:50%;
  width:28px;
  height:28px;
  background:#e4f5ee;
  color:#147551;
  display:grid;
  place-items:center}
.image-disclosure{position:absolute;
  bottom:-6px;
  font-size:9px;
  color:var(--muted);
  text-align:center;
  direction:rtl}
.visual-cross{position:absolute;
  bottom:35px;
  right:10px;
  font-size:44px;
  line-height:1;
  color:var(--green)}

.platform-promise{padding:36px 0;
  display:flex;
  align-items:center;
  flex-direction:column;
  border-bottom:1px solid var(--line);
  gap:14px}
.platform-promise>span{font-size:12px;
  color:var(--muted)}
.platform-promise>div{display:flex;
  gap:33px;
  align-items:center;
  font-size:19px}
.platform-promise i{font-style:normal;
  color:var(--green);
  font-size:27px}
.platform-promise small{font-size:10px;
  color:var(--muted)}
.section{margin:70px 0}
.section-heading{margin-bottom:29px}
.section-heading h2{font-size:33px}
.section-heading>a.outline{padding:8px 16px;
  min-height:39px}
.discovery-grid{display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px}
.discovery-card{border:1px solid var(--line);
  border-radius:11px;
  overflow:hidden;
  background:var(--surface)}
.category-illustration{position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  height:166px;
  overflow:hidden;
  background:#66a4f2;
  color:#fff}
.tone-1 .category-illustration{background:#185bea}
.tone-2 .category-illustration{background:#7354e6}
.art-paper{width:103px;
  height:107px;
  position:relative;
  z-index:1;
  border-radius:9px;
  background:#fffffff4;
  box-shadow:9px 9px 0 #ffffff40;
  color:#4084db;
  transform:rotate(-5deg);
  padding:12px}
.tone-1 .art-paper{transform:rotate(4deg);
  color:#1556d0}
.tone-2 .art-paper{transform:rotate(-5deg);
  color:#7454cc}
.art-paper svg{width:100%;
  height:100%}
.art-orbit{position:absolute;
  width:146px;
  height:69px;
  border:1px solid #ffffff8f;
  border-radius:50%;
  transform:rotate(-28deg);
  z-index:2;
  pointer-events:none}
.discovery-copy{padding:26px}
.discovery-copy h3{font-size:21px;
  margin-bottom:11px}
.discovery-copy p{font-size:13px;
  min-height:43px;
  line-height:1.75}
.discovery-copy>div{display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:20px;
  font-size:12px}
.discovery-copy a:first-child{color:var(--green);
  font-weight:600}
.discovery-copy a:last-child{font-size:11px;
  color:var(--muted)}
.extra-categories{display:flex;
  justify-content:center;
  gap:30px;
  font-size:12px;
  color:var(--muted);
  margin-top:22px}
.extra-categories a:hover{color:var(--green)}

.two-sides{display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px}
.two-sides article{background:var(--hero);
  padding:38px;
  border-radius:10px;
  border:1px solid var(--line)}
.two-sides article+article{background:var(--surface)}
.path-number{color:var(--green);
  font-size:12px}
.two-sides h2{font-size:31px;
  line-height:1.4;
  letter-spacing:-.4px;
  margin:15px 0}
.two-sides p{font-size:14px;
  line-height:1.9;
  max-width:435px}
.two-sides article>div{display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:21px;
  margin-top:24px;
  font-size:13px}
.opportunity-tabs{display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:-7px 0 25px;
  font-size:12px}
.opportunity-tabs a{padding:8px 14px;
  background:var(--soft);
  color:var(--green);
  border-radius:5px}
.first-opportunity{display:flex;
  align-items:center;
  gap:26px;
  padding:34px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--hero)}
.first-opportunity h3{font-size:23px;
  margin-bottom:9px}
.first-opportunity p{font-size:13px;
  max-width:590px}
.first-opportunity .eyebrow{font-size:10px;
  margin-bottom:7px}
.first-opportunity>.outline{margin-inline-start:auto;
  flex-shrink:0}
.opportunity-art{width:77px;
  flex-shrink:0;
  color:var(--green)}
.job-card:hover{border-color:var(--green)}
.how-section{display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:70px;
  border-block:1px solid var(--line);
  padding-block:46px}
.how-section h2{font-size:36px;
  line-height:1.35;
  margin:17px 0 25px}
.how-section a{font-size:12px}
.how-section ol{list-style:none;
  counter-reset:steps;
  margin:0;
  padding:0;
  display:grid;
  gap:22px}
.how-section li{position:relative;
  padding-inline-start:56px;
  counter-increment:steps}
.how-section li:before{content:'0' counter(steps);
  position:absolute;
  inset-inline-start:0;
  top:0;
  width:34px;
  height:34px;
  border:1px solid var(--line);
  color:var(--green);
  font:600 12px Arial;
  border-radius:7px;
  display:grid;
  place-items:center}
.how-section li strong{font-size:16px;
  display:block;
  margin-bottom:6px}
.how-section li p{font-size:13px;
  max-width:460px;
  line-height:1.8}
.community-v3{display:grid;
  grid-template-columns:1fr 1fr;
  gap:55px;
  align-items:center;
  margin-bottom:55px}
.community-v3 img{border-radius:12px;
  width:100%;
  height:305px;
  object-fit:cover}
.community-v3 h2{font-size:35px;
  line-height:1.35;
  margin-bottom:17px}
.community-v3 p{font-size:14px;
  line-height:1.9;
  max-width:445px}
.community-v3 .eyebrow{font-size:11px}
.real-stats{padding-top:18px;
  border-top:1px solid var(--line)}

.page-heading h1{font-size:43px;
  letter-spacing:-1.2px}
.page-heading .eyebrow{font-size:11px}
.filter-line{background:var(--hero)}
.availability-check{display:flex!important;
  flex-direction:row;
  align-items:center;
  margin:0;
  flex:1!important}
.availability-check input{width:17px;
  min-height:0}
.talent-card{display:flex;
  flex-direction:column;
  padding:24px;
  min-width:0}
.talent-top{display:flex;
  align-items:start;
  justify-content:space-between;
  gap:10px}
.talent-top .avatar{background:#e4ecff;
  color:#2057c9;
  font-size:24px}
.availability{font-size:10px;
  padding:5px 8px;
  border-radius:5px;
  background:var(--soft);
  color:var(--muted)}
.availability.available{background:#e9f6ee;
  color:#27653f}
.talent-card h3{font-size:20px;
  overflow-wrap:anywhere;
  margin:1px 0 6px}
.person-headline{font-size:12px;
  font-weight:600;
  color:var(--green);
  margin-bottom:14px;
  overflow-wrap:anywhere}
.talent-card>p{display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  margin-bottom:14px;
  line-height:1.8}
.skill-tags{display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 15px}
.skill-tags span{font-size:10px;
  padding:5px 9px;
  border:1px solid var(--line);
  border-radius:5px;
  color:var(--muted);
  max-width:100%;
  overflow-wrap:anywhere}
.talent-meta{font-size:11px;
  color:var(--muted);
  margin-top:auto;
  margin-bottom:19px;
  line-height:1.9}
.talent-card>.outline{width:100%;
  min-height:40px;
  font-size:12px}
.profile-work-types{border:1px solid var(--line);
  border-radius:8px;
  padding:17px 16px 0;
  margin:0 0 20px}
.profile-work-types legend{font-size:13px;
  padding:0 6px}
.profile-work-types .checkbox{display:inline-flex;
  margin-inline-end:18px}
.profile-intro{display:flex;
  gap:17px;
  align-items:center}
.profile-intro h2{margin:0 0 8px;
  font-size:27px}
.profile-intro .avatar{margin:0;
  flex-shrink:0}
.profile-intro strong{font-size:13px;
  color:var(--green)}
.quiet-empty{font-size:13px;
  color:var(--muted);
  padding-top:20px}
.proposal>.tag{margin-bottom:12px}
.proposal .text-link{margin-top:12px;
  font-size:12px}
.footer-main p{color:var(--muted)}
footer{padding-top:40px}
.toast{background:#163565}
dialog::backdrop{background:#12203b66}
.plan.featured{background:var(--soft)}

.market-hero:before{inset:0;
  box-shadow:0 0 0 100vmax var(--hero);
  clip-path:inset(0 -100vmax)}

@media(max-width:1100px){.header-inner{gap:24px;
  padding-inline:25px}
nav{gap:15px}
.market-hero{gap:36px;
  padding-block:56px}
.market-visual{min-height:450px}
.portrait-window{height:407px}
.floating-project{left:-5px;
  bottom:40px;
  padding:13px;
  max-width:290px}
.floating-project strong{font-size:13px}
.floating-skill{right:-9px;
  top:40px;
  padding:12px}
.market-copy h1{font-size:51px}
.market-copy>p{font-size:14px}
.market-actions .primary,.market-actions .outline{padding:12px 17px;
  font-size:13px}
.two-sides article{padding:30px}
.two-sides h2{font-size:28px}
.discovery-copy{padding:22px}
.discovery-copy>div{gap:9px;
  font-size:11px}
.discovery-copy a:last-child{font-size:10px}
.community-v3{gap:35px}
}

@media(max-width:850px){.header-inner{height:73px}
#main,footer{padding-inline:25px}
.brand{font-size:28px}
.brand:before{width:19px;
  height:19px}
.market-hero{gap:24px;
  padding-block:44px}
.market-copy h1{font-size:41px;
  letter-spacing:-1.2px}
.market-copy .eyebrow{font-size:10px;
  margin-bottom:16px}
.market-copy>p{font-size:13px;
  margin-top:18px}
.market-actions{gap:9px}
.market-actions .primary,.market-actions .outline{padding:11px 13px;
  font-size:12px}
.market-visual{min-height:392px}
.portrait-window{height:365px;
  width:90%}
.floating-skill{top:36px;
  right:-8px;
  font-size:11px;
  gap:7px;
  padding:11px}
.floating-skill small{font-size:8px}
.floating-project{left:-7px;
  bottom:28px;
  gap:7px;
  padding:12px 10px}
.floating-project .project-mark{width:32px;
  height:35px;
  font-size:22px}
.floating-project strong{font-size:12px}
.floating-project .connection-dot{display:none}
.visual-cross{right:-10px;
  bottom:-4px;
  font-size:35px}
.image-disclosure{bottom:-22px;
  font-size:8px}
.market-search-box .hero-search input{font-size:11px}
.market-search-box .hero-search button{min-width:61px;
  font-size:12px}
.search-icon{margin-inline-start:6px}
.search-modes{gap:17px}
.search-modes label{font-size:11px}
.market-search-box .popular{font-size:9px;
  gap:8px}
.platform-promise{padding:31px 0}
.platform-promise>div{font-size:17px;
  gap:23px}
.discovery-grid{gap:15px}
.category-illustration{height:140px}
.art-paper{width:84px;
  height:92px;
  padding:7px}
.discovery-copy{padding:20px 16px}
.discovery-copy h3{font-size:19px}
.discovery-copy p{font-size:11px;
  min-height:39px}
.discovery-copy>div{flex-wrap:wrap;
  gap:10px}
.section{margin:48px 0}
.two-sides{gap:17px}
.two-sides article{padding:25px}
.two-sides h2{font-size:25px}
.two-sides p{font-size:13px}
.two-sides article>div{gap:14px}
.two-sides .primary,.two-sides .outline{padding:10px 12px;
  font-size:12px}
.first-opportunity{flex-wrap:wrap;
  padding:25px;
  gap:17px}
.opportunity-art{width:58px}
.first-opportunity>div:nth-child(2){flex:1}
.first-opportunity>.outline{margin-inline-start:75px;
  min-height:40px}
.how-section{gap:34px;
  padding-block:35px}
.how-section h2{font-size:29px}
.how-section li{padding-inline-start:46px}
.how-section li p{font-size:12px}
.community-v3{gap:28px}
.community-v3 img{height:280px}
.community-v3 h2{font-size:30px}
.community-v3 p{font-size:13px}
.people-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:600px){.header-inner{height:68px;
  padding-inline:18px;
  gap:16px}
.brand{font-size:27px}
.brand:before{width:18px;
  height:18px;
  margin-right:4px;
  box-shadow:6px -4px 0 -1px #8db2ff}
.header-tools{gap:8px}
#main,footer{padding-inline:21px}
.market-hero{grid-template-columns:1fr;
  gap:18px;
  padding:35px 0 44px}
.market-copy h1{font-size:45px;
  letter-spacing:-1.4px;
  line-height:1.2}
.market-copy>p{font-size:14px;
  line-height:1.9;
  margin-top:18px}
.market-copy .eyebrow{font-size:10px;
  margin-bottom:16px}
.market-actions{margin-top:24px;
  gap:10px}
.market-actions .primary,.market-actions .outline{font-size:13px;
  padding:12px 18px;
  min-height:47px}
.market-search-box{margin-top:27px}
.search-modes{gap:22px}
.search-modes label{font-size:11px}
.market-search-box .hero-search input{font-size:13px}
.market-search-box .hero-search button{min-width:70px;
  font-size:12px}
.market-search-box .popular{font-size:10px;
  gap:10px}
.market-visual{margin:13px auto 0;
  width:100%;
  max-width:380px;
  min-height:340px;
  padding:0 10px}
.portrait-window{width:76%;
  height:326px;
  border-width:5px;
  border-radius:115px 115px 13px 13px}
.portrait-backdrop{width:76%;
  height:94%}
.floating-skill{top:32px;
  right:0;
  padding:10px 13px}
.floating-skill strong{font-size:11px}
.floating-skill small{font-size:8px}
.floating-project{left:0;
  bottom:31px;
  padding:12px;
  max-width:275px}
.floating-project strong{font-size:13px}
.floating-project .project-mark{height:35px;
  width:31px}
.floating-project .mini-tags{font-size:8px}
.visual-cross{font-size:31px;
  right:0;
  bottom:0}
.image-disclosure{font-size:8px;
  bottom:-13px}
.platform-promise{padding:26px 0;
  gap:10px}
.platform-promise>span{font-size:11px}
.platform-promise>div{font-size:14px;
  gap:14px}
.platform-promise i{font-size:23px}
.platform-promise small{font-size:9px}
.section{margin:37px 0}
.section-heading h2{font-size:27px}
.section-heading{gap:12px;
  margin-bottom:20px}
.section-heading .eyebrow{font-size:10px}
.section-heading>a.outline{border:0;
  padding:0;
  min-height:30px;
  font-size:10px;
  gap:4px;
  background:transparent}
.discovery-grid{grid-template-columns:1fr;
  gap:18px}
.category-illustration{height:166px}
.art-paper{width:100px;
  height:109px;
  padding:12px}
.discovery-copy{padding:23px}
.discovery-copy h3{font-size:23px}
.discovery-copy p{font-size:13px;
  min-height:0}
.discovery-copy>div{font-size:12px;
  margin-top:17px}
.discovery-copy a:last-child{font-size:11px}
.extra-categories{justify-content:start;
  gap:13px;
  flex-wrap:wrap;
  font-size:10px;
  margin-top:19px}
.two-sides{grid-template-columns:1fr;
  gap:17px}
.two-sides article{padding:27px 24px}
.two-sides h2{font-size:27px}
.two-sides article>div{gap:18px}
.two-sides .primary,.two-sides .outline{font-size:12px}
.opportunity-tabs{font-size:11px;
  gap:8px;
  margin-bottom:20px}
.opportunity-tabs a{padding:7px 11px}
.first-opportunity{display:block;
  padding:24px}
.opportunity-art{display:none}
.first-opportunity h3{font-size:22px;
  line-height:1.45}
.first-opportunity>.outline{margin:19px 0 0;
  font-size:12px}
.first-opportunity p{font-size:12px;
  line-height:1.9}
.how-section{grid-template-columns:1fr;
  gap:28px}
.how-section h2{font-size:31px;
  line-height:1.35;
  margin:10px 0 17px}
.how-section ol{gap:22px}
.how-section li{padding-inline-start:48px}
.how-section li strong{font-size:15px}
.how-section li p{font-size:12px}
.community-v3{grid-template-columns:1fr;
  gap:25px;
  margin-bottom:35px}
.community-v3 img{height:235px}
.community-v3 h2{font-size:32px}
.community-v3 .market-actions{margin-top:21px}
.real-stats{font-size:10px;
  gap:13px;
  padding-bottom:25px}
.people-grid{grid-template-columns:1fr}
.page-heading h1{font-size:34px}
.people-filters .availability-check{font-size:11px;
  width:100%;
  flex-basis:100%!important}
.people-filters .filter-more .primary{font-size:12px}
.filter-line{padding:15px}
.people-filters>label:first-child,.people-filters>label:nth-child(4){grid-column:1/-1}
.result-meta{font-size:11px}
.pagination{gap:10px;
  font-size:12px}
.pagination .outline{padding:8px 13px;
  min-height:40px}
.profile-work-types .checkbox{display:flex;
  margin-bottom:13px}
.profile-intro h2{font-size:24px}
.profile-intro{gap:13px}
.talent-top .avatar{height:52px;
  width:52px}
.footer-main{gap:22px}
.footer-main .brand{font-size:30px}
.footer-bottom{font-size:10px}
.site-header nav a{padding:14px 4px}
}

@media(max-width:600px){.header-inner>.brand{flex-shrink:0}
.header-tools{flex:1;
  min-width:0;
  justify-content:flex-end}
#account{min-width:0;
  flex:1;
  max-width:125px}
#account .primary{display:block;
  max-width:100%;
  min-width:0;
  text-overflow:ellipsis;
  overflow:hidden;
  line-height:22px}
}

@media(max-width:359px){.header-inner{gap:10px;
  padding-inline:13px}
.brand{font-size:25px}
.brand:before{width:16px;
  height:16px;
  box-shadow:5px -4px 0 -1px #8db2ff;
  margin-right:2px}
.header-tools{gap:6px}
#account .primary{max-width:82px;
  font-size:10px;
  padding-inline:7px}
.header-tools .icon-button{width:31px;
  height:31px}
.market-copy h1{font-size:39px}
.market-actions{gap:9px}
.market-actions .primary,.market-actions .outline{font-size:11px;
  padding:11px 14px}
.market-search-box .hero-search input{font-size:11px}
.market-search-box .hero-search button{min-width:58px}
.platform-promise>div{font-size:12px;
  gap:11px}
.market-visual{min-height:315px}
.portrait-window{height:303px}
.floating-skill{padding:9px;
  font-size:10px}
.floating-project{padding:10px;
  gap:7px}
.floating-project strong{font-size:12px}
.floating-project .mini-tags{font-size:7px}
.first-opportunity{padding:22px}
.two-sides h2{font-size:25px}
}


/* Editorial revision: ordinary photography, no floating badges or decoration. */
.brand:before{display:none}
.brand{font-weight:700;
  letter-spacing:-1.6px}
.market-hero{gap:48px;
  padding:65px 0 55px}
.market-hero:before{display:none}
.market-copy h1{font-size:clamp(41px,4.5vw,61px);
  line-height:1.19;
  letter-spacing:-1.9px}
.market-copy .eyebrow{color:var(--muted);
  font-weight:400;
  letter-spacing:0}
.market-copy>p{font-size:15px;
  line-height:1.9}
.market-copy .market-actions{margin-top:25px}
.market-search-box{margin-top:32px}
.market-search-box .hero-search{box-shadow:none;
  border-color:var(--line)}
.editorial-photos{display:grid;
  grid-template-columns:1.3fr .85fr;
  gap:12px;
  min-height:0;
  align-items:stretch;
  direction:ltr;
  padding:0}
.work-portrait{width:100%;
  height:426px;
  object-fit:cover;
  object-position:50% center;
  border-radius:5px}
.work-detail{display:grid;
  grid-template-rows:1fr 1fr;
  gap:12px;
  min-width:0}
.work-detail>img{width:100%;
  height:207px;
  object-fit:cover;
  object-position:65% center;
  border-radius:5px}
.photo-tile{background-image:url('/images/categories.webp');
  background-repeat:no-repeat;
  background-size:200% auto;
  display:block;
  background-color:var(--soft)}
.photo-web{background-position:0 16%}
.photo-design{background-position:100% 16%}
.photo-marketing{background-position:0 84%}
.work-detail>.photo-tile{height:207px;
  border-radius:5px;
  background-size:auto 200%;
  background-position:0 0}
.platform-links{display:grid;
  grid-template-columns:repeat(3,1fr);
  border-block:1px solid var(--line);
  padding:25px 0;
  gap:25px}
.platform-links a{display:block;
  text-align:center}
.platform-links a+a{border-inline-start:1px solid var(--line)}
.platform-links strong{display:block;
  font-size:17px;
  font-weight:600}
.platform-links span{display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:5px}
.platform-links a:hover strong{color:var(--green)}
.category-photo{height:190px}
.discovery-card{border-radius:6px;
  box-shadow:none}
.discovery-copy{padding:23px}
.discovery-copy h3{font-size:21px}
.discovery-copy p{font-size:13px}
.two-sides article{border-radius:6px;
  background:var(--hero)}
.two-sides article+article{background:var(--bg)}
.two-sides h2{font-size:30px}
.path-number{color:var(--muted);
  font-size:12px}
.first-opportunity{background:var(--bg);
  border-radius:6px;
  padding:30px}
.first-opportunity h3{font-size:22px}
.first-opportunity p{max-width:640px}
.how-section li:before{background:none;
  border:0;
  justify-content:start;
  border-radius:0;
  font-size:20px;
  color:var(--muted)}
.community-v3 img{border-radius:6px}
.section-heading .eyebrow{font-weight:400;
  color:var(--muted)}
.job-card,.person,.panel,.plan{border-radius:7px;
  box-shadow:none}
.empty-symbol{display:none}
.empty{border-style:solid;
  border-radius:6px}
.footer-bottom>a{font-family:Arial,sans-serif}

@media(max-width:1100px){.market-hero{gap:34px;
  padding-block:48px}
.market-copy h1{font-size:48px}
.work-portrait{height:401px}
.work-detail>img,.work-detail>.photo-tile{height:194px}
.editorial-photos{gap:10px}
.work-detail{gap:10px}
.market-copy>p{font-size:14px}
.category-photo{height:165px}
}

@media(max-width:850px){.market-hero{gap:28px}
.market-copy h1{font-size:38px;
  letter-spacing:-1.3px}
.market-copy>p{font-size:13px}
.editorial-photos{grid-template-columns:1fr}
.work-portrait{height:375px}
.work-detail{display:none}
.market-copy .market-actions{gap:9px}
.category-photo{height:146px}
.platform-links{gap:12px;
  padding:22px 0}
.platform-links strong{font-size:14px}
.platform-links span{font-size:10px}
.two-sides h2{font-size:25px}
}

@media(max-width:600px){.market-hero{padding:32px 0;
  gap:25px}
.market-copy h1{font-size:41px;
  letter-spacing:-1.4px}
.market-copy .eyebrow{font-size:11px;
  margin-bottom:14px}
.market-copy>p{font-size:14px}
.market-copy .market-actions{margin-top:21px;
  gap:11px}
.market-search-box{margin-top:24px}
.editorial-photos{grid-template-columns:1.2fr 1fr;
  max-width:none;
  width:100%;
  margin:0;
  gap:9px}
.work-portrait{height:270px;
  border-radius:4px}
.work-detail{display:grid;
  gap:9px}
.work-detail>img,.work-detail>.photo-tile{height:130.5px;
  border-radius:4px}
.platform-links{gap:0;
  padding:20px 0}
.platform-links a{padding:0 8px}
.platform-links strong{font-size:12px;
  line-height:1.65}
.platform-links span{font-size:10px;
  line-height:1.6;
  max-width:85px;
  margin:5px auto 0}
.category-photo{height:180px}
.discovery-copy{padding:23px}
.discovery-card{border-radius:5px}
.discovery-copy h3{font-size:22px}
.two-sides h2{font-size:27px}
.first-opportunity{padding:25px}
.first-opportunity>.outline{margin-inline-start:0}
.community-v3 .eyebrow{font-weight:400;
  color:var(--muted)}
}

@media(max-width:359px){.market-copy h1{font-size:35px}
.work-portrait{height:235px}
.work-detail>img,.work-detail>.photo-tile{height:113px}
.platform-links a{padding-inline:6px}
.platform-links strong{font-size:11px}
.platform-links span{font-size:9px}
.category-photo{height:158px}
.two-sides h2{font-size:25px}
}



/* connection layout */
/* FreeServ: light, local-font, CSS 3D marketplace. No rendering library. */
body{overflow-x:clip}
.connection-copy{min-width:0}
.connection-scene{overflow:clip}

:root{--bg:#fff;
  --surface:#fff;
  --ink:#15243d;
  --muted:#62718a;
  --line:#e4eaf3;
  --green:#2563eb;
  --hover:#1d4ed8;
  --soft:#eff5ff;
  --hero:#f6f9ff;
  --coral:#2563eb}

:root[data-theme=dark]{--bg:#101725;
  --surface:#182235;
  --ink:#f0f3fc;
  --muted:#adbbd1;
  --line:#2e3d57;
  --green:#90b5ff;
  --hover:#b4ccff;
  --soft:#202f4c;
  --hero:#19263c;
  --coral:#90b5ff}

.brand{font-size:29px;
  letter-spacing:-1.2px;
  gap:0}
.brand:before{width:21px;
  height:21px;
  border-radius:6px;
  box-shadow:6px -5px 0 -1px #aac9ff;
  margin-right:12px}
.header-inner{max-width:1320px;
  height:80px;
  gap:34px}
nav{gap:23px}
nav a{font-size:12px}
#main{max-width:1248px}
.primary,.outline,.light-button{border-radius:99px;
  gap:10px}
.primary svg,.outline svg,.light-button svg{width:19px;
  height:19px;
  flex-shrink:0}
.primary{box-shadow:0 5px 12px #2563eb18}
.primary:hover{transform:translateY(-1px)}
.section-heading h2{font-size:32px}
.section-heading .eyebrow,.eyebrow{color:var(--green);
  font-weight:600;
  letter-spacing:0}
.section-heading>a{font-size:13px}
.section{margin:72px 0}

.connection-hero{display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:center;
  position:relative;
  padding:58px 0 76px;
  min-height:560px}
.connection-hero:before{content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(ellipse at 20% 40%,#e8f0ff 0,transparent 50%),linear-gradient(#f9fbff,#f4f8ff);
  box-shadow:0 0 0 100vmax #f6f9ff;
  clip-path:inset(0 -100vmax)}
.connection-copy{padding-bottom:14px}
.hero-pill{display:inline-flex;
  align-items:center;
  gap:9px;
  border:1px solid #dce8ff;
  border-radius:30px;
  padding:6px 13px;
  background:#edf4ff;
  color:#2c61bb;
  font-size:12px;
  font-weight:600;
  margin-bottom:23px}
.hero-pill>span{width:6px;
  height:6px;
  background:#3678ee;
  border-radius:50%}
.hero-pill svg{width:17px;
  height:17px}
.connection-copy h1{font-size:clamp(42px,4.25vw,60px);
  line-height:1.23;
  letter-spacing:-1.8px;
  font-weight:800}
.connection-copy h1 em{display:inline-block;
  color:var(--green);
  font-style:normal;
  position:relative}
.connection-copy h1 em:after{content:'';
  position:absolute;
  bottom:-7px;
  left:3%;
  width:95%;
  height:8px;
  border-top:3px solid #a8c7ff;
  border-radius:50%}
.connection-copy>p{font-size:17px;
  line-height:1.9;
  max-width:460px;
  margin-top:27px}
.connection-actions{display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:29px}
.connection-actions .primary,.connection-actions .outline{padding:13px 21px;
  font-size:13px}
.hero-footnote{display:flex;
  gap:18px;
  font-size:11px;
  color:var(--muted);
  margin-top:23px}

.connection-scene{height:430px;
  position:relative;
  direction:ltr;
  perspective:1000px;
  isolation:isolate;
  min-width:0}
.scene-grid{position:absolute;
  inset:18% -2% 1%;
  background-image:linear-gradient(#a9c4f52b 1px,transparent 1px),linear-gradient(90deg,#a9c4f52b 1px,transparent 1px);
  background-size:35px 35px;
  transform:rotateX(58deg) rotateZ(-30deg);
  mask-image:radial-gradient(ellipse,#000,transparent 70%)}
.scene-stage{position:absolute;
  width:330px;
  height:235px;
  top:178px;
  left:95px;
  border-radius:50%;
  background:linear-gradient(140deg,#a9c9ff,#709ef3 60%,#d5e4ff);
  transform:rotateX(63deg) rotateZ(-22deg);
  box-shadow:0 17px 0 #c2d5f9,0 30px 0 #dce7fc,15px 70px 40px -20px #638be452;
  border:2px solid #dbe7ff}
.stage-top{position:absolute;
  inset:18px;
  border:1px solid #e9f1ff;
  border-radius:50%;
  background:linear-gradient(135deg,#e5efff,#bad2fb)}
.scene-orbit{position:absolute;
  border:1px dashed #acc9f7;
  border-radius:50%;
  width:480px;
  height:290px;
  left:20px;
  top:132px;
  transform:rotate(-20deg);
  z-index:-1}
.orbit-two{width:400px;
  height:390px;
  left:64px;
  top:30px;
  transform:rotate(-34deg);
  border-style:solid;
  border-color:#bdd2f542}
.scene-link{position:absolute;
  left:207px;
  top:175px;
  width:105px;
  height:105px;
  background:linear-gradient(145deg,#6fafff,#2768ef 55%,#114bbd);
  border:1px solid #90bdff;
  border-radius:29px;
  transform:rotate(-15deg) skewY(6deg);
  box-shadow:5px 8px 0 #174aaa,8px 11px 0 #103c91,12px 25px 28px #356ed85e;
  z-index:4;
  display:grid;
  place-items:center}
.scene-link span{width:59px;
  color:#fff;
  filter:drop-shadow(0 2px 0 #0f51c5)}
.scene-link svg{width:100%;
  height:100%}
.scene-card{position:absolute;
  width:224px;
  border:1px solid #fff;
  background:linear-gradient(125deg,#fffffffa,#f3f7ffed);
  box-shadow:-4px 5px 0 #d5e0f4,-7px 8px 0 #b8cdec,0 30px 45px #3e65a626;
  border-radius:17px;
  padding:20px;
  color:#203b67;
  z-index:3;
  animation:card-drift 7s ease-in-out infinite}
.talent-scene{left:9px;
  top:60px;
  transform:rotateY(15deg) rotateZ(-9deg)}
.project-scene{right:-3px;
  top:116px;
  transform:rotateY(-17deg) rotateZ(9deg);
  animation-delay:-3.5s;
  z-index:5}
.scene-card-top{display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px}
.scene-avatar,.scene-project-icon{width:47px;
  height:47px;
  display:grid;
  place-items:center;
  background:#e5efff;
  color:#3679ee;
  border-radius:14px}
.scene-avatar svg,.scene-project-icon svg{width:28px;
  height:28px}
.scene-project-icon{background:#ebe7ff;
  color:#8967df;
  margin-bottom:13px}
.live-dot{display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#29b790;
  box-shadow:0 0 0 4px #2bbc8914;
  flex-shrink:0}
.scene-card small{font-size:10px;
  color:#7588a4;
  display:block}
.scene-card strong{display:block;
  font-size:16px;
  margin:4px 0 11px}
.scene-tags{display:flex;
  gap:5px;
  flex-wrap:wrap}
.scene-tags span{font-size:8px;
  background:#eaf1fb;
  padding:3px 6px;
  border-radius:5px;
  color:#5c769e}
.scene-line{height:5px;
  border-radius:6px;
  background:#e4ecf8;
  margin-top:15px;
  width:87%}
.scene-line.short{width:58%;
  margin-top:7px}
.scene-progress{height:5px;
  background:#e3eafa;
  border-radius:5px;
  margin:18px 0 13px}
.scene-progress span{display:block;
  width:65%;
  height:100%;
  background:#8caff6;
  border-radius:5px}
.scene-footer{display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:8px;
  color:#6e82a3}
.scene-footer svg{width:15px;
  height:15px}
.scene-float{position:absolute;
  display:grid;
  place-items:center;
  z-index:5;
  box-shadow:3px 4px 0 #cbdcf9,0 15px 30px #5c86c62b;
  border-radius:13px;
  background:#fff;
  color:#3979e7;
  width:48px;
  height:48px}
.float-code{top:15px;
  left:245px;
  transform:rotate(14deg);
  font:bold 19px monospace}
.float-spark{bottom:40px;
  left:57px;
  transform:rotate(-12deg);
  width:44px;
  height:44px;
  color:#906be1}
.float-spark svg{width:25px;
  height:25px}
.connection-label{position:absolute;
  bottom:22px;
  left:145px;
  z-index:6;
  border:1px solid #e1eaff;
  background:#ffffffed;
  border-radius:99px;
  padding:9px 17px;
  box-shadow:0 10px 24px #2c548518;
  color:#3e669b;
  font-size:10px;
  direction:rtl;
  display:flex;
  gap:8px;
  align-items:center}
.connection-label span{width:6px;
  height:6px;
  background:#34b78d;
  border-radius:50%}
.scene-caption{position:absolute;
  bottom:-9px;
  width:100%;
  text-align:center;
  font-size:9px;
  color:#7188a7}

@keyframes card-drift{0%,100%{translate:0 0}
50%{translate:0 -9px}
}

.landing-search{position:relative;
  margin-top:-28px;
  z-index:7;
  border:1px solid var(--line);
  border-radius:19px;
  background:var(--surface);
  padding:23px 29px 18px;
  box-shadow:0 14px 36px #1e467708}
.landing-search form{display:flex;
  align-items:center;
  gap:28px}
.landing-search .search-modes{flex-shrink:0;
  gap:19px}
.landing-search .search-modes label{font-size:12px}
.landing-search .search-modes label>span{display:flex;
  gap:7px;
  align-items:center;
  padding:13px 0}
.search-modes svg{width:17px;
  height:17px}
.search-entry{display:flex;
  align-items:center;
  flex:1;
  gap:10px;
  background:var(--hero);
  border:1px solid var(--line);
  border-radius:99px;
  padding:5px}
.search-entry input{background:none;
  border:0;
  margin:0;
  min-width:0;
  font-size:13px;
  padding:10px 0}
.search-entry button{white-space:nowrap;
  padding:10px 21px;
  min-height:43px;
  font-size:12px}
.search-glass{font-size:28px;
  color:var(--muted);
  margin-inline-start:13px}
.search-popular{display:flex;
  align-items:center;
  gap:17px;
  flex-wrap:wrap;
  font-size:10px;
  color:var(--muted);
  margin-top:16px}
.search-popular a{background:var(--hero);
  border-radius:6px;
  padding:3px 8px}
.connection-categories{display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:13px}
.connection-categories>a{padding:23px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  transition:transform .2s,border-color .2s}
.connection-categories>a:hover{transform:translateY(-5px);
  border-color:var(--green)}
.category-glyph{display:grid;
  place-items:center;
  width:44px;
  height:44px;
  background:#edf3ff;
  color:#397de9;
  border-radius:12px;
  margin-bottom:20px}
.category-glyph svg{height:26px;
  width:26px}
.glyph-design{color:#9a67df;
  background:#f4edff}
.glyph-marketing{color:#de9452;
  background:#fff3e8}
.glyph-security{color:#25a189;
  background:#e9f8f3}
.glyph-hosting{color:#6682cc;
  background:#eef1fc}
.connection-categories h3{font-size:15px;
  line-height:1.5;
  margin-bottom:8px}
.connection-categories>a>span:last-child{font-size:9px;
  color:var(--muted)}
.launch-opportunity{display:flex;
  gap:22px;
  align-items:center;
  border:1px solid var(--line);
  background:var(--hero);
  border-radius:18px;
  padding:32px}
.launch-icon{width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:var(--surface);
  color:var(--green);
  flex-shrink:0}
.launch-icon svg{width:30px;
  height:30px}
.launch-opportunity h3{font-size:21px;
  margin-bottom:10px}
.launch-opportunity p{font-size:13px;
  max-width:615px}
.launch-opportunity button{flex-shrink:0;
  margin-inline-start:auto;
  font-size:12px}
.opportunity-tabs a{border-radius:99px;
  padding:7px 15px}
.job-card,.person,.panel,.plan,.empty{border-radius:16px}

.connection-steps{border-block:1px solid var(--line);
  padding-block:44px;
  margin:70px 0}
.steps-note{font-size:12px;
  color:var(--muted)}
.steps-grid{display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:45px}
.steps-grid article>span{display:block;
  color:var(--green);
  font:600 28px/1 Arial;
  margin:10px 0 23px}
.steps-grid article>span svg{width:30px;
  height:30px}
.steps-grid h3{font-size:19px;
  margin-bottom:12px}
.steps-grid p{font-size:13px;
  line-height:1.9;
  max-width:310px}
.connection-community{display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
  padding:48px;
  border:1px solid var(--line);
  background:var(--hero);
  border-radius:24px;
  margin:65px 0}
.connection-community h2{font-size:39px;
  line-height:1.3;
  margin-bottom:20px}
.connection-community h2 em{font-style:normal;
  color:var(--green)}
.connection-community p{font-size:14px;
  line-height:1.9;
  margin-bottom:25px}
.connection-community .primary{font-size:13px}
.community-free{display:inline-block;
  font-size:10px;
  color:var(--muted);
  margin-inline-start:12px}
.community-boards>a{display:flex;
  align-items:center;
  gap:14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:21px 17px;
  margin:12px 0;
  box-shadow:0 7px 14px #24477304;
  transition:transform .2s}
.community-boards>a:hover{transform:translateX(4px)}
.board-icon{color:var(--green);
  width:41px;
  height:41px;
  background:var(--soft);
  display:grid;
  place-items:center;
  border-radius:11px;
  flex-shrink:0}
.board-icon svg{width:23px;
  height:23px}
.community-boards strong{font-size:14px}
.community-boards small{display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:5px}
.community-boards>a>svg{width:17px;
  height:17px;
  margin-inline-start:auto;
  flex-shrink:0;
  color:var(--muted)}
.community-caption{display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:10px;
  color:var(--muted);
  margin-top:21px}
.center-heading{text-align:center;
  margin-bottom:39px}
.center-heading h2{font-size:35px}
.center-heading p{font-size:14px;
  line-height:1.9;
  margin-top:17px}
.landing-plans{display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  padding-top:13px}
.landing-plan{position:relative;
  border:1px solid var(--line);
  border-radius:18px;
  padding:30px;
  background:var(--surface)}
.landing-plan h3{text-align:start;
  font:600 25px Arial;
  margin:12px 0}
.landing-plan>p{font-size:12px}
.landing-plan .price{margin:20px 0}
.landing-plan .price>span{font-size:12px}
.landing-plan button{width:100%;
  font-size:12px}
.landing-plan ul{list-style:none;
  padding:0;
  margin:23px 0 0}
.landing-plan li{font-size:12px;
  margin:13px 0}
.landing-plan li:before{content:'✓';
  color:var(--green);
  margin-inline-end:9px}
.landing-plan.is-pro{border:2px solid var(--green);
  box-shadow:0 12px 32px #2563eb10}
.pro-ribbon{position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  background:var(--green);
  color:var(--surface);
  padding:4px 18px;
  font-size:10px;
  border-radius:99px;
  white-space:nowrap}
.plan-disclosure{text-align:center;
  font-size:11px;
  margin:23px 0;
  line-height:2}
.plan-disclosure a{color:var(--green);
  white-space:nowrap}

.app-banner{display:grid;
  grid-template-columns:1fr .7fr;
  align-items:center;
  gap:40px;
  background:linear-gradient(115deg,#1748b9,#2467e9);
  color:white;
  border-radius:24px;
  padding:45px 58px 0;
  overflow:hidden;
  position:relative;
  margin:65px 0}
.app-banner:before{content:'';
  position:absolute;
  width:440px;
  height:440px;
  left:-40px;
  top:20px;
  border-radius:50%;
  border:1px solid #ffffff18;
  box-shadow:0 0 0 50px #ffffff03,0 0 0 100px #ffffff03;
  pointer-events:none}
.app-banner>div:first-child{padding-bottom:42px;
  position:relative;
  z-index:1}
.app-kicker{font:11px Arial;
  letter-spacing:2px;
  color:#c0d5ff;
  display:block;
  margin-bottom:17px}
.app-banner h2{font-size:35px;
  line-height:1.35;
  margin-bottom:17px}
.app-banner p{color:#d6e5ff;
  font-size:13px;
  max-width:410px;
  line-height:1.9;
  margin-bottom:23px}
.app-banner a{font-size:12px;
  margin-inline-start:16px}
.app-banner small{display:block;
  font-size:10px;
  color:#c0d5ff;
  margin-top:16px}
.app-banner .light-button{font-size:12px}
.app-phone{position:relative;
  width:232px;
  height:348px;
  border:7px solid #162947;
  border-bottom:0;
  background:#f7faff;
  color:#193459;
  border-radius:32px 32px 0 0;
  padding:27px 15px 0;
  transform:rotate(-8deg) translateY(24px);
  margin:auto;
  box-shadow:15px 18px 0 #163d95,0 30px 70px #0b296488;
  direction:rtl}
.phone-camera{position:absolute;
  left:50%;
  top:9px;
  transform:translateX(-50%);
  width:52px;
  height:10px;
  border-radius:10px;
  background:#162947}
.phone-brand{font:bold 20px Arial;
  text-align:right;
  margin:9px 0 19px}
.phone-brand span{color:#2869e8}
.phone-welcome{font-size:12px;
  font-weight:600}
.phone-search{display:flex;
  justify-content:space-between;
  font-size:9px;
  color:#7388a5;
  background:#edf2fb;
  border-radius:10px;
  padding:10px;
  margin:12px 0}
.phone-card{background:white;
  border:1px solid #e4ebf7;
  border-radius:12px;
  padding:13px}
.phone-card>span{display:grid;
  place-items:center;
  width:29px;
  height:29px;
  background:#eaf1ff;
  border-radius:8px;
  color:#3676e4;
  margin-bottom:8px}
.phone-card svg{width:20px;
  height:20px}
.phone-card strong{font-size:11px;
  display:block}
.phone-card small{font-size:8px;
  color:#8b9bb2;
  margin-top:4px}
.phone-tags{color:#3e71c4;
  font-size:8px;
  padding-top:9px}
.phone-community{font-size:9px;
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:13px;
  padding:10px;
  border-radius:8px;
  background:#eaf0ff;
  color:#4976c2}
.phone-community svg{width:15px;
  height:15px}
.phone-nav{text-align:center;
  margin-top:9px;
  font-size:18px;
  color:#5479b9}
.landing-bottom{text-align:center;
  padding:10px 0 65px}
.landing-bottom h2{font-size:33px;
  margin-bottom:25px}
.landing-bottom>a{display:block;
  font-size:11px;
  color:var(--muted);
  margin-top:18px}
.install-instructions .pricing-note{margin-top:32px}
.mobile-dock{display:none}
footer{max-width:none;
  background:#12203a;
  color:#dce7fc;
  padding:45px max(28px,calc((100vw - 1184px)/2)) 0}
.footer-main{max-width:1184px;
  margin:auto}
.footer-main p,.footer-bottom{color:#9eafca}
.footer-main p{max-width:300px}
.footer-bottom{max-width:1184px;
  margin:auto;
  border-color:#ffffff18}
.footer-main .brand{color:#fff}

:root[data-theme=dark] .connection-hero:before{background:radial-gradient(ellipse at 20% 40%,#213c66,transparent 60%),#151f30;
  box-shadow:0 0 0 100vmax #151f30}
:root[data-theme=dark] .hero-pill{background:#233657;
  border-color:#344f7a;
  color:#afccff}
:root[data-theme=dark] .scene-grid{opacity:.5}
:root[data-theme=dark] .scene-caption{color:#adc4e5}
:root[data-theme=dark] .pro-ribbon{color:#11213b}

@media(min-width:1500px){.connection-hero{padding-block:70px 90px}
}

@media(max-width:1100px){.connection-hero{gap:0}
.connection-copy h1{font-size:47px}
.connection-scene{scale:.87;
  transform-origin:center}
.connection-actions{gap:8px}
.connection-actions .primary,.connection-actions .outline{padding:12px 14px;
  font-size:12px}
.connection-copy>p{font-size:15px}
.header-inner{gap:23px}
.landing-search form{gap:18px}
.connection-categories{grid-template-columns:repeat(3,1fr)}
.connection-categories>a{display:grid;
  grid-template-columns:48px 1fr;
  column-gap:15px;
  align-items:center}
.category-glyph{grid-row:1/3;
  margin:0}
.connection-categories h3{margin:0}
.connection-categories>a>span:last-child{grid-column:2}
.connection-community{gap:30px;
  padding:35px}
}

@media(max-width:850px){.connection-hero{grid-template-columns:1fr;
  min-height:0;
  padding:40px 0 60px}
.connection-copy{max-width:600px;
  margin:auto;
  text-align:center}
.connection-copy h1{font-size:53px}
.connection-copy>p{margin:24px auto 0}
.connection-actions,.hero-footnote{justify-content:center}
.connection-scene{width:530px;
  max-width:100%;
  margin:15px auto 0;
  scale:1}
.landing-search form{flex-direction:column;
  gap:10px;
  align-items:stretch}
.landing-search .search-modes{justify-content:center}
.search-entry{width:100%}
.connection-community h2{font-size:31px}
.community-free{display:block;
  margin:12px 0 0}
.steps-grid{gap:24px}
.steps-note{display:none}
.launch-opportunity{flex-wrap:wrap}
.launch-opportunity button{margin-inline-start:86px}
.landing-plan{padding:23px 18px}
.landing-plans{gap:13px}
.app-banner{padding:35px 32px 0;
  gap:10px}
.app-banner h2{font-size:29px}
.header-inner{height:72px}
}

@media(max-width:600px){#main{padding-inline:20px}
.header-inner{height:68px;
  padding-inline:19px}
.header-inner .brand{font-size:25px}
.header-inner .brand:before{width:17px;
  height:17px;
  margin-right:8px}
.header-tools{gap:8px}
.icon-button{width:35px;
  height:35px}
#account .primary{font-size:10px;
  padding:8px 12px;
  min-height:35px}
.connection-hero{padding:32px 0 46px}
.hero-pill{font-size:10px;
  margin-bottom:21px}
.connection-copy h1{font-size:40px;
  letter-spacing:-1.2px}
.connection-copy>p{font-size:14px;
  line-height:1.9;
  margin-top:23px}
.connection-actions{gap:10px;
  margin-top:25px}
.connection-actions .primary,.connection-actions .outline{font-size:11px;
  padding:11px 15px;
  min-height:44px}
.hero-footnote{font-size:9px;
  gap:14px;
  margin-top:19px}
.connection-scene{height:320px;
  width:360px;
  margin-top:15px;
  perspective:800px}
.scene-stage{width:240px;
  height:180px;
  top:130px;
  left:65px}
.scene-orbit{width:330px;
  height:210px;
  left:10px;
  top:95px}
.orbit-two{width:295px;
  height:270px;
  left:28px;
  top:32px}
.scene-card{width:165px;
  padding:13px;
  border-radius:13px}
.talent-scene{left:3px;
  top:45px}
.project-scene{right:0;
  top:100px}
.scene-card strong{font-size:11px;
  margin-bottom:8px}
.scene-card small{font-size:8px}
.scene-card-top{margin-bottom:8px}
.scene-avatar,.scene-project-icon{width:33px;
  height:33px;
  border-radius:10px}
.scene-avatar svg,.scene-project-icon svg{width:21px;
  height:21px}
.scene-tags{gap:3px}
.scene-tags span{font-size:6px;
  padding:3px 4px}
.scene-footer{font-size:6px}
.scene-progress{margin:13px 0 9px}
.scene-line{height:4px;
  margin-top:12px}
.scene-link{width:73px;
  height:73px;
  left:136px;
  top:145px;
  border-radius:22px}
.scene-link span{width:43px}
.float-code{top:15px;
  left:181px;
  width:34px;
  height:34px;
  font-size:14px;
  border-radius:10px}
.float-spark{bottom:33px;
  left:35px;
  width:32px;
  height:32px;
  border-radius:9px}
.float-spark svg{width:21px;
  height:21px}
.connection-label{font-size:8px;
  left:92px;
  bottom:17px;
  padding:7px 12px}
.scene-caption{font-size:8px;
  bottom:-9px}
.landing-search{padding:15px 16px;
  margin-top:-19px;
  border-radius:16px}
.landing-search .search-modes{gap:24px}
.landing-search .search-modes label{font-size:11px}
.search-entry{gap:6px}
.search-entry input{font-size:11px}
.search-entry button{padding:9px 12px;
  min-height:39px;
  font-size:10px}
.search-entry button svg{display:none}
.search-glass{margin-inline-start:8px;
  font-size:23px}
.search-popular{font-size:9px;
  gap:8px}
.search-popular>span{width:100%}
.search-popular a{padding:3px 5px}
.section{margin:44px 0}
.section-heading{gap:16px;
  align-items:end;
  margin-bottom:23px}
.section-heading h2{font-size:25px;
  line-height:1.35}
.section-heading .eyebrow{font-size:10px;
  margin-bottom:9px}
.section-heading>a{font-size:10px;
  max-width:95px;
  text-align:end;
  flex-shrink:0}
.connection-categories{grid-template-columns:repeat(2,1fr);
  gap:10px}
.connection-categories>a{display:block;
  padding:19px 14px;
  border-radius:13px}
.category-glyph{margin-bottom:14px;
  width:37px;
  height:37px}
.category-glyph svg{width:22px;
  height:22px}
.connection-categories h3{font-size:14px;
  margin-bottom:7px}
.connection-categories>a>span:last-child{font-size:9px}
.launch-opportunity{padding:24px;
  gap:16px;
  border-radius:16px}
.launch-icon{width:48px;
  height:48px}
.launch-opportunity h3{font-size:19px;
  line-height:1.5}
.launch-opportunity p{font-size:12px}
.launch-opportunity button{margin:0}
.opportunity-tabs{gap:6px}
.opportunity-tabs a{font-size:10px;
  padding:6px 10px}
.connection-steps{margin:44px 0;
  padding:30px 0}
.steps-grid{grid-template-columns:1fr;
  gap:24px}
.steps-grid article{position:relative;
  padding-inline-start:51px}
.steps-grid article>span{position:absolute;
  inset-inline-start:0;
  top:0;
  font-size:24px;
  margin:0}
.steps-grid h3{font-size:17px;
  margin-bottom:8px}
.steps-grid p{font-size:12px;
  max-width:none}
.connection-community{grid-template-columns:1fr;
  gap:22px;
  margin:44px 0;
  padding:25px 22px;
  border-radius:19px}
.connection-community h2{font-size:32px}
.connection-community p{font-size:13px}
.community-free{display:inline-block;
  margin-inline-start:8px;
  font-size:9px}
.community-boards>a{padding:16px 12px;
  margin:9px 0}
.community-boards strong{font-size:13px}
.community-boards small{font-size:9px}
.community-caption{font-size:9px}
.center-heading h2{font-size:28px;
  line-height:1.35}
.center-heading p{font-size:12px}
.landing-plans{grid-template-columns:1fr;
  gap:28px}
.landing-plan{padding:26px}
.landing-plan h3{font-size:27px}
.landing-plan .price{font-size:43px}
.landing-plan li{font-size:13px}
.plan-disclosure{font-size:10px}
.app-banner{grid-template-columns:1fr;
  padding:30px 25px 0;
  margin:44px 0;
  border-radius:19px;
  gap:0}
.app-banner>div:first-child{padding-bottom:0}
.app-banner h2{font-size:32px}
.app-banner p{font-size:12px}
.app-phone{height:320px;
  margin-top:10px}
.app-banner:before{top:220px;
  left:-90px}
.landing-bottom{padding-bottom:43px}
.landing-bottom h2{font-size:27px}
.mobile-dock{display:flex;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:25;
  justify-content:space-around;
  background:var(--surface);
  border-top:1px solid var(--line);
  padding:8px 8px max(8px,env(safe-area-inset-bottom));
  box-shadow:0 -4px 22px #0b255108}
.mobile-dock a{display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  font-size:9px;
  color:var(--muted);
  min-width:49px;
  min-height:42px}
.mobile-dock a>span{font-size:21px;
  line-height:1.2}
.mobile-dock a.active{color:var(--green)}
body{padding-bottom:65px}
footer{padding:30px 23px 0}
.footer-main{gap:25px}
.footer-main .brand{font-size:27px}
.footer-main p{font-size:11px}
.toast{bottom:82px}
.page-heading h1{font-size:33px}
.app-banner+.section{margin-bottom:40px}
}

@media(max-width:359px){.connection-copy h1{font-size:35px}
.connection-scene{scale:.86;
  transform-origin:top center;
  margin-bottom:-40px}
.hero-footnote{font-size:8px;
  gap:10px}
.connection-actions .primary,.connection-actions .outline{padding:10px 12px}
.search-entry input{font-size:10px}
.search-entry button{padding-inline:9px}
#account .primary{max-width:none}
.header-tools{gap:5px}
.header-inner{gap:8px}
.section-heading h2{font-size:23px}
}

@media(prefers-reduced-motion:reduce){.scene-card{animation:none}
.primary:hover,.connection-categories>a:hover,.community-boards>a:hover{transform:none}
}

@media(max-width:850px){.connection-hero{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:600px){.connection-scene{width:100%}
.mobile-dock a{padding:3px 0}
.connection-copy{width:100%}
}

.scene-caption{bottom:0}
.connection-label{bottom:25px}

.business-intro{position:relative;
  margin:0;
  min-width:0;
  border-radius:24px;
  background:#dbe6ef;
  box-shadow:0 25px 55px #284c791c;
  isolation:isolate;
  overflow:hidden;
  border:1px solid #e5edf8}

.business-intro video{display:block;
  width:100%;
  height:auto;
  aspect-ratio:1100/920;
  object-fit:cover}

.business-intro figcaption{position:absolute;
  left:17px;
  right:17px;
  bottom:32px;
  padding:8px 10px 8px 15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:1px solid #ffffffba;
  background:#fffffff0;
  border-radius:99px;
  color:#234167;
  backdrop-filter:blur(10px);
  font-size:11px;
  box-shadow:0 7px 22px #15385613}

.business-intro figcaption>span{display:flex;
  gap:8px;
  align-items:center}
.business-intro figcaption i{width:6px;
  height:6px;
  background:#3677e8;
  border-radius:50%}
.business-intro button{width:33px;
  height:33px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e9f1ff;
  color:#2355ab;
  font-size:19px;
  line-height:1;
  padding:0}
.business-intro>small{position:absolute;
  bottom:10px;
  width:100%;
  text-align:center;
  font-size:8px;
  color:#334d6e;
  text-shadow:0 1px 5px #fff}

@media(min-width:851px){.connection-hero{grid-template-columns:1fr 1.05fr;
  gap:43px}
.connection-copy h1{font-size:clamp(42px,4vw,57px)}
}

@media(max-width:850px){.business-intro{width:min(100%,600px);
  margin:24px auto 0}
}

@media(max-width:600px){.business-intro{margin-top:28px;
  border-radius:18px}
.business-intro figcaption{left:12px;
  right:12px;
  bottom:27px;
  font-size:10px}
.business-intro>small{bottom:8px}
.business-intro button{width:32px;
  height:32px}
.business-intro video{min-height:270px}
}



/* professional layout */
.professional-fields{margin:24px 0;
  padding:20px;
  border:1px solid var(--line,#dce4ef);
  border-radius:18px}
.professional-fields legend{font-weight:800;
  padding:0 8px}
.professional-fields details{padding:12px 0;
  border-bottom:1px solid var(--line,#dce4ef)}
.professional-fields summary{cursor:pointer;
  font-weight:700}
.profile-facts,.account-shortcuts{display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:20px 0}
.profile-facts span{padding:7px 12px;
  border-radius:9px;
  background:#edf3ff;
  color:#2455a0;
  font-size:13px}
.company-panel{padding:22px;
  background:var(--soft,#f1f5fb);
  border:1px solid var(--line,#dce4ef);
  border-radius:18px;
  margin:20px 0}
.portfolio-grid{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px}
.portfolio-grid article{padding:22px;
  border:1px solid var(--line,#dce4ef);
  border-radius:18px}
.portfolio-number{font-size:24px;
  color:#2563eb;
  font-weight:800}
.application-card,.admin-record{display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:start;
  padding:24px 0;
  border-bottom:1px solid var(--line,#dce4ef)}
.application-card>div,.admin-record>div{min-width:0;
  flex:1}
.application-card p,.admin-record p{overflow-wrap:anywhere}
.application-card>label{min-width:150px}
.admin-stats{display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin:24px 0}
.admin-stats>div{padding:24px;
  border-radius:18px;
  border:1px solid var(--line,#dce4ef);
  background:var(--surface,#fff)}
.admin-stats strong{display:block;
  font-size:34px;
  color:#2563eb}
.admin-stats span{font-size:14px}
.admin-tabs{display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:24px 0}
.admin-tabs a{padding:10px 16px;
  border-radius:12px;
  border:1px solid var(--line,#dce4ef)}
.admin-tabs a.active{background:#2563eb;
  color:white}
.notification-layout{display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);
  gap:24px;
  align-items:start}
.notification-item{padding:22px 12px;
  border-bottom:1px solid var(--line,#dce4ef)}
.notification-item.unread{border-right:3px solid #2563eb}
.notification-item>span{font-size:12px;
  color:#64748b}
.record-details{display:grid;
  grid-template-columns:100px 1fr;
  gap:10px}
.record-details dd{margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere}
.account-shortcuts{padding:16px 22px;
  background:var(--soft,#eef4ff);
  border-radius:14px;
  align-items:center}
.account-shortcuts a{font-weight:700;
  color:#2563eb}
[data-theme=dark] .professional-fields,[data-theme=dark] .company-panel,[data-theme=dark] .portfolio-grid article,[data-theme=dark] .admin-tabs a,[data-theme=dark] .application-card,[data-theme=dark] .admin-record{border-color:#334155}
[data-theme=dark] .company-panel,[data-theme=dark] .admin-stats>div,[data-theme=dark] .account-shortcuts{background:#172235}
[data-theme=dark] .profile-facts span{background:#1d3557;
  color:#bcd6ff}

@media(max-width:700px){.notification-layout,.portfolio-grid{grid-template-columns:1fr}
.admin-stats{grid-template-columns:repeat(2,1fr)}
.admin-stats>div{padding:16px}
.application-card{flex-direction:column}
.admin-record{gap:10px}
.professional-fields{padding:14px}
.admin-tabs a{font-size:12px;
  padding:8px 10px}
.account-shortcuts{font-size:13px}
.record-details{grid-template-columns:1fr}
}



/* hero-panorama layout */
/* FreeServ studio: editorial composition and an interactive model on demand. */
:root{--bg:#fbfaf7;
  --ink:#172c48;
  --muted:#657286;
  --green:#255ad7;
  --hover:#1945aa;
  --soft:#edf1fb;
  --coral:#c56d43;
  --line:#e4e6e9}

:root[data-theme=dark]{--bg:#111b2a;
  --surface:#18263a;
  --ink:#edf3ff;
  --muted:#b2bfd2;
  --line:#32435a;
  --green:#a5c1ff;
  --hover:#c3d5ff;
  --soft:#243855}

.site-header{background:var(--bg)}
.brand span{color:#255ad7}
.header-inner{height:82px;
  max-width:1440px;
  padding-inline:42px}

#main:has(>.connection-hero){max-width:none;
  padding:0}
.landing-body{max-width:1284px;
  margin:auto;
  padding:0 30px}

.connection-hero{display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);
  gap:24px;
  align-items:center;
  max-width:1440px;
  min-height:0;
  margin:0 auto;
  padding:66px 42px 32px;
  position:relative;
  isolation:isolate;
  background:var(--bg);
  overflow:hidden}
.connection-hero:before{display:none}

.hero-content{position:relative;
  padding:14px 0 32px;
  min-width:0;
  z-index:2}
.connection-hero .connection-copy{text-align:right;
  max-width:560px;
  padding:0;
  margin:0}

.connection-hero .hero-pill{display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:24px;
  padding:0;
  background:none;
  border:0;
  box-shadow:none;
  color:var(--muted);
  font-size:13px;
  font-weight:400}
.hero-pill svg{width:19px;
  height:19px;
  color:#c56d43}

.connection-hero .connection-copy h1{font-size:clamp(42px,4.2vw,65px);
  font-weight:800;
  line-height:1.16;
  letter-spacing:-2.6px;
  color:var(--ink);
  text-wrap:balance;
  margin:0}
.connection-hero .connection-copy h1 em{font-style:normal;
  color:#255ad7;
  white-space:normal;
  position:relative}
.connection-hero .connection-copy h1 em:after{display:none}

.connection-hero .connection-copy>p{font-size:17px;
  line-height:1.85;
  max-width:430px;
  margin-top:23px;
  color:var(--muted);
  text-wrap:pretty}

.connection-hero .landing-search{max-width:520px;
  width:100%;
  margin:28px 0 0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:17px;
  padding:7px;
  box-shadow:0 12px 32px #1b365c09;
  text-align:right}
.landing-search form{display:flex;
  flex-direction:column;
  gap:7px}

.search-modes{display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  padding:0;
  margin:0;
  min-width:0;
  border:0}
.search-modes label{position:relative;
  cursor:pointer;
  font-size:13px;
  color:var(--muted);
  min-width:0}
.search-modes input{position:absolute;
  width:1px;
  height:1px;
  opacity:0}
.search-modes label>span{min-height:43px;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid transparent}
.search-modes input:checked+span{background:var(--soft);
  color:var(--green);
  border-color:var(--line)}
.search-modes input:focus-visible+span{outline:3px solid var(--coral);
  outline-offset:-3px}

.connection-hero .search-entry{display:flex;
  align-items:center;
  gap:7px;
  min-height:58px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--bg)}
.connection-hero .search-entry input{font-size:15px;
  min-width:0;
  width:100%;
  flex:1;
  color:var(--ink);
  padding:8px 0;
  background:transparent}
.connection-hero .search-entry .primary{background:#255ad7;
  color:#fff;
  border-radius:8px;
  min-height:46px;
  padding:10px 17px;
  font-size:14px;
  flex-shrink:0}
.search-entry .primary svg{width:17px}
.search-glass{margin-inline-start:6px;
  color:var(--muted)}

.hero-specialties{display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px}
.hero-specialties a{padding:5px 14px;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:20px;
  font-size:11px;
  color:var(--muted)}
.hero-specialties a:hover{background:var(--soft);
  color:var(--ink)}

.studio-hero-note{display:flex;
  gap:20px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:11px;
  margin-top:25px}
.studio-hero-note span:before{content:'✓';
  color:#53826a;
  margin-inline-end:6px}

.studio-visual{position:relative;
  min-width:0;
  margin:0;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:15px 0 0}
.studio-label{display:flex;
  justify-content:space-between;
  padding:0 18px;
  font-family:Arial,sans-serif;
  letter-spacing:1.7px;
  font-size:9px;
  color:#78828c}

.studio-art{position:relative;
  aspect-ratio:1.35;
  display:grid;
  align-items:center;
  min-width:0;
  background:radial-gradient(ellipse,#f4eee2 0,transparent 72%);
  border-radius:30px;
  overflow:hidden}
.studio-poster{width:100%;
  height:100%;
  object-fit:contain;
  mix-blend-mode:multiply;
  transition:opacity .3s}

.studio-visual figcaption{display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 18px;
  padding:18px 0;
  border-top:1px solid var(--line);
  font-size:12px}
.studio-caption{display:flex;
  align-items:center;
  gap:9px;
  color:var(--muted)}
.studio-caption i{width:7px;
  height:7px;
  border-radius:50%;
  background:#c56d43}

#studio-open{display:inline-flex;
  align-items:center;
  gap:15px;
  color:var(--ink);
  font-size:12px;
  font-weight:600;
  min-height:44px;
  padding:0}
#studio-open span{display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid var(--line);
  font-size:19px;
  transition:background .2s}
#studio-open:hover span{background:var(--soft)}

#studio-canvas{position:absolute;
  inset:0;
  outline-offset:-3px}
#studio-canvas canvas{display:block;
  width:100%;
  height:100%;
  touch-action:pan-y}
#studio-controls{display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin:0 18px;
  font-size:11px;
  color:var(--muted)}
#studio-controls button{min-height:40px;
  border:1px solid var(--line);
  border-radius:9px;
  padding:6px 12px}
[hidden]{display:none!important}

.hero-glass-dock{grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;
  gap:0;
  margin:28px 0 0;
  padding-top:24px;
  border-top:1px solid var(--line)}
.hero-glass-dock>a,.hero-glass-dock>button{position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  min-width:0;
  min-height:96px;
  padding:15px 20px;
  border:0;
  border-inline-start:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
  white-space:normal;
  text-align:right;
  background:none;
  color:var(--ink)}
.hero-glass-dock>:first-child{border-inline-start:0;
  padding-inline-start:0}
.hero-glass-dock>:hover .dock-icon{transform:translateY(-3px);
  background:var(--soft)}

.dock-icon{display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex-shrink:0;
  color:#255ad7;
  border:1px solid var(--line);
  border-radius:13px;
  transition:transform .2s,background .2s}
.dock-icon svg{width:22px;
  height:22px}
.dock-copy{display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0}
.dock-copy strong{font-size:14px;
  font-weight:600;
  line-height:1.4}
.dock-copy small{font-size:10px;
  color:var(--muted);
  font-weight:400}
.dock-arrow{font-size:17px;
  color:var(--muted);
  margin-inline-start:auto}
.categories-section{padding-top:40px}

:root[data-theme=dark] .brand span,:root[data-theme=dark] .connection-hero .connection-copy h1 em{color:#a5c1ff}
:root[data-theme=dark] .studio-art{background:#ece7de}
:root[data-theme=dark] .studio-poster{mix-blend-mode:normal}
:root[data-theme=dark] .dock-icon{color:#a5c1ff}

@media(min-width:1500px){.connection-hero{padding-top:88px;
  padding-bottom:38px}
.studio-art{aspect-ratio:1.2}
}

@media(max-width:1100px){.header-inner{padding-inline:24px}
.connection-hero{padding:45px 26px 25px;
  gap:22px}
.connection-hero .connection-copy h1{font-size:48px}
.connection-hero .connection-copy>p{font-size:15px}
.hero-glass-dock>a,.hero-glass-dock>button{padding-inline:12px;
  gap:9px}
.dock-copy strong{font-size:12px}
.dock-copy small{font-size:9px}
.dock-arrow{display:none}
}

@media(max-width:800px){.connection-hero{grid-template-columns:minmax(0,1fr);
  padding:35px 22px 24px;
  gap:14px}
.hero-content{padding:0}
.connection-hero .connection-copy{margin:auto;
  text-align:center;
  max-width:550px}
.connection-hero .hero-pill{margin-bottom:18px}
.connection-hero .connection-copy h1{font-size:clamp(42px,7vw,58px)}
.connection-hero .connection-copy>p{margin:17px auto 0;
  max-width:390px}
.connection-hero .landing-search{margin:24px auto 0}
.hero-specialties,.studio-hero-note{justify-content:center}
.studio-hero-note{margin-top:17px;
  gap:17px}
.studio-visual{width:min(100%,600px);
  margin:10px auto 0;
  padding:12px 0 0}
.studio-art{aspect-ratio:1.5}
.studio-label{font-size:8px;
  padding-inline:8px}
.studio-visual figcaption{margin-inline:8px;
  padding-block:9px}
.hero-glass-dock{margin:8px 0 0;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding-top:20px}
.hero-glass-dock>a,.hero-glass-dock>button,.hero-glass-dock>:first-child{border:1px solid var(--line);
  border-radius:13px;
  padding:14px;
  min-height:89px;
  background:var(--surface)}
.dock-copy strong{font-size:12px}
.dock-copy small{font-size:9px}
.dock-icon{width:33px;
  height:33px;
  border:0;
  background:var(--soft);
  border-radius:10px}
.dock-icon svg{width:20px;
  height:20px}
.landing-body{padding-inline:22px}
.categories-section{padding-top:26px}
}

@media(max-width:400px){.connection-hero{padding-inline:17px}
.connection-hero .connection-copy h1{font-size:40px;
  letter-spacing:-1.8px}
.connection-hero .hero-pill{font-size:11px}
.connection-hero .connection-copy>p{font-size:14px}
.search-modes label{font-size:11px}
.connection-hero .search-entry .primary{font-size:12px;
  padding-inline:12px}
.studio-caption,#studio-open{font-size:10px}
.hero-glass-dock{gap:9px}
.hero-glass-dock>a,.hero-glass-dock>button,.hero-glass-dock>:first-child{padding:10px;
  gap:7px}
.dock-copy strong{font-size:11px}
.dock-copy small{font-size:8px}
.studio-hero-note{font-size:10px}
}

@media(prefers-reduced-motion:reduce){.studio-poster,.dock-icon,#studio-open span{transition:none}
}

.connection-hero .landing-search form{align-items:stretch;
  width:100%}
.connection-hero .search-modes,.connection-hero .search-entry{width:100%}
.studio-poster{border-radius:24px}
.studio-status{font-size:12px}

@media(max-width:800px){.mobile-dock{gap:0}
.mobile-dock a{min-width:0;
  flex:1}
.connection-hero .hero-pill{background:none}
.connection-hero .search-modes label>span{gap:5px}
}

@media(max-width:400px){.header-inner{padding-inline:16px;
  gap:8px}
.header-tools{gap:5px}
#account .primary{max-width:none;
  font-size:10px;
  padding:8px 10px;
  min-height:38px}
}


/* Business hero: a single shared scene, visual left and Hebrew copy right. */
body:has(.connection-hero) .site-header{background:#242052;
  border-bottom-color:#ffffff13;
  color:#fff}

body:has(.connection-hero) .site-header .brand{color:#fff}

body:has(.connection-hero) .site-header .brand span{color:#b5baff}

body:has(.connection-hero) .site-header #main-nav>a{color:#e6e3fa}

body:has(.connection-hero) .site-header .icon-button{color:#eeedff;
  background:#ffffff09;
  border-color:#ffffff24}

body:has(.connection-hero) #account>button:not(.primary){color:#eeedff}

body:has(.connection-hero) #account .primary{background:#eeedff;
  color:#292555;
  box-shadow:none}

.connection-hero{--ink:#fff;
  --muted:#cfcee9;
  --line:#ffffff25;
  --soft:#ffffff12;
  --green:#c4c6ff;
  --surface:#ffffff0b;
  direction:rtl;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.12fr);
  gap:24px;
  max-width:none;
  padding:38px max(42px,calc((100vw - 1356px)/2)) 46px;
  background:radial-gradient(ellipse at 25% 47%,#5e56bb70,transparent 55%),linear-gradient(115deg,#373075 0%,#302965 47%,#242052 100%);
  overflow:hidden}

.connection-hero:before{display:block;
  position:absolute;
  content:'';
  width:520px;
  height:520px;
  left:9%;
  top:2%;
  border-radius:50%;
  background:#8e8bfa0a;
  filter:blur(20px);
  pointer-events:none;
  z-index:-1}

.connection-hero .hero-content{grid-column:1;
  grid-row:1;
  padding:0;
  align-self:center}

.connection-hero .connection-copy{max-width:550px;
  text-align:right}

.connection-hero .hero-pill{color:#cecaed;
  font-size:12px;
  letter-spacing:.1px;
  margin-bottom:24px}

.connection-hero .hero-pill svg{color:#b9b4ff}

.connection-hero .connection-copy h1{font-size:clamp(44px,4.65vw,68px);
  line-height:1.2;
  letter-spacing:-2px;
  color:#fff;
  text-wrap:balance}

.connection-hero .connection-copy h1 em,:root[data-theme=dark] .connection-hero .connection-copy h1 em{color:#bbb8ff}

.connection-hero .connection-copy>p{color:#d4d1e9;
  font-size:16px;
  line-height:1.9;
  max-width:420px;
  margin-top:22px}

.connection-hero .landing-search{margin-top:28px;
  background:#ffffff0c;
  border:1px solid #ffffff2b;
  box-shadow:0 16px 40px #0b082720;
  border-radius:15px;
  backdrop-filter:blur(8px)}

.connection-hero .search-modes label{color:#d4d1ed}
.connection-hero .search-modes input:checked+span{background:#ffffff17;
  color:#fff;
  border-color:#ffffff24}

.connection-hero .search-entry{background:#faf9ff;
  border-color:transparent;
  color:#242052;
  border-radius:9px}
.connection-hero .search-entry input{color:#242052}
.connection-hero .search-entry input::placeholder{color:#77748a}
.connection-hero .search-glass{color:#77748a}
.connection-hero .search-entry .primary{background:#6457db;
  color:#fff;
  box-shadow:none}

.connection-hero .hero-specialties a{color:#d4d1ed;
  border-color:#ffffff24;
  background:transparent}
.connection-hero .hero-specialties a:hover{background:#ffffff16;
  color:#fff}

.connection-hero .hero-specialties{display:none}

.connection-hero .studio-hero-note{color:#b6b2d2;
  margin-top:21px;
  font-size:10px}
.connection-hero .studio-hero-note span:before{color:#b5c6ff}

.business-visual{grid-column:2;
  grid-row:1;
  align-self:center;
  display:block;
  padding:0;
  width:100%;
  margin:0}

.business-visual .studio-art,:root[data-theme=dark] .business-visual .studio-art{height:clamp(420px,38vw,570px);
  aspect-ratio:auto;
  background:none;
  border-radius:0;
  overflow:visible}

.business-visual .studio-poster,:root[data-theme=dark] .business-visual .studio-poster{object-fit:cover;
  mix-blend-mode:normal;
  border-radius:0;
  width:100%;
  height:100%;
  filter:drop-shadow(0 25px 30px #0e092340)}

.business-visual figcaption{border:0;
  margin:3px 0 0;
  padding:0 15px;
  min-height:42px;
  font-size:10px;
  color:#c7c2e9}

.business-visual .studio-caption{color:#c7c2e9;
  gap:7px}
.business-visual .studio-caption i{width:5px;
  height:5px;
  background:#bdb4ff}

.business-visual #studio-open{font-size:10px;
  color:#eeebff;
  gap:9px}
.business-visual #studio-open span{width:27px;
  height:27px;
  border-color:#ffffff35;
  font-size:16px}

.business-visual #studio-controls{justify-content:center;
  margin-top:6px;
  color:#cdc8ec;
  font-size:10px}
.business-visual #studio-controls button{color:#f4f1ff;
  border-color:#ffffff2a;
  background:#ffffff0a;
  min-height:32px;
  font-size:10px}

.business-visual #studio-status:not(.sr-only){color:#e6e1ff;
  font-size:12px;
  text-align:center}

.landing-body>.hero-glass-dock{margin-top:0;
  padding:24px 0;
  border-top:0;
  border-bottom:1px solid var(--line)}

@media(min-width:1500px){.connection-hero{padding-top:46px;
  padding-bottom:54px}
}

@media(max-width:1100px) and (min-width:801px){.connection-hero{padding:32px 28px 38px;
  gap:14px}
.connection-hero .connection-copy h1{font-size:47px}
.connection-hero .connection-copy>p{font-size:14px}
.business-visual .studio-art{height:420px}
}

@media(max-width:800px){body:has(.connection-hero) #main-nav{background:#242052}
body:has(.connection-hero) #main-nav a{color:#fff}
.connection-hero{grid-template-columns:minmax(0,1fr);
  padding:32px 22px 22px;
  gap:13px;
  background:radial-gradient(ellipse at 45% 78%,#665cc46b,transparent 50%),linear-gradient(150deg,#242052,#3b327a)}
.connection-hero .hero-content{grid-column:1;
  grid-row:1}
.connection-hero .connection-copy{text-align:right;
  margin:0 auto}
.connection-hero .hero-pill{margin-bottom:17px}
.connection-hero .connection-copy h1{font-size:clamp(42px,8vw,58px)}
.connection-hero .connection-copy>p{margin:17px 0 0;
  max-width:480px;
  font-size:15px}
.connection-hero .landing-search{margin-top:23px}
.connection-hero .hero-specialties,.connection-hero .studio-hero-note{justify-content:flex-start}
.business-visual{grid-column:1;
  grid-row:2;
  width:100%;
  max-width:570px;
  margin:6px auto 0}
.business-visual .studio-art{height:clamp(300px,88vw,430px)}
.business-visual figcaption{padding-inline:3px}
.business-visual .studio-caption{font-size:9px}
.landing-body>.hero-glass-dock{padding:23px 0;
  margin:0}
}

@media(max-width:400px){.connection-hero{padding-inline:18px}
.connection-hero .connection-copy h1{font-size:40px}
.connection-hero .connection-copy>p{font-size:14px}
.connection-hero .studio-hero-note{font-size:9px;
  gap:14px}
.business-visual #studio-open{font-size:9px;
  gap:5px}
}



/* hero-blue-full layout */
/* One continuous blue panel. Disable the legacy oversized white backdrop. */
body:has(.connection-hero){background:#090f22}

body:has(.connection-hero) .site-header{width:100%;
  max-width:none;
  margin:0;
  border:0;
  border-radius:0;
  background:linear-gradient(90deg,#326ed5,#2352b4 42%,#142e78);
  box-shadow:none}

body:has(.connection-hero) .header-inner{height:88px;
  padding-inline:48px;
  max-width:none}

body:has(.connection-hero) #account .primary{background:#0c1b45;
  color:#fff;
  border:1px solid #ffffff16;
  border-radius:999px;
  padding-inline:22px}

body:has(.connection-hero) .site-header .brand span{color:#fff}

body:has(.connection-hero) .site-header #main-nav>a{color:#deebff}

body:has(.connection-hero) .site-header .icon-button{border-color:#ffffff20;
  background:transparent}

#main>.connection-hero{width:100%;
  max-width:none;
  margin:0;
  padding:24px 48px 42px;
  min-height:540px;
  display:grid;
  direction:rtl;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:30px;
  border:0;
  border-radius:0;
  background-color:#2352b4;
  background-image:linear-gradient(90deg,#326ed5,#2352b4 42%,#142e78);
  box-shadow:none;
  isolation:isolate;
  overflow:hidden;
  color:#fff}

#main>.connection-hero::before,#main>.connection-hero::after{content:none;
  display:none;
  background:none;
  box-shadow:none;
  clip-path:none;
  filter:none}

#main>.connection-hero .hero-content{grid-column:1;
  grid-row:1;
  padding:0 0 0 14px;
  align-self:center}

#main>.connection-hero .connection-copy{padding:0;
  margin:0;
  text-align:right;
  max-width:500px}

#main>.connection-hero .hero-pill{color:#c2dcff;
  font-size:12px;
  margin:0 0 23px;
  letter-spacing:.2px;
  background:none;
  border:0;
  box-shadow:none;
  padding:0}

#main>.connection-hero .hero-pill svg{color:#9ac8ff}

#main>.connection-hero .connection-copy h1{color:#fff;
  font-size:clamp(44px,4.6vw,66px);
  line-height:1.15;
  font-weight:800;
  letter-spacing:-1.7px;
  text-wrap:balance;
  margin:0}

#main>.connection-hero .connection-copy h1 em{color:#fff;
  font-style:normal}

#main>.connection-hero .connection-copy>p{color:#d3e5ff;
  font-size:16px;
  line-height:1.9;
  max-width:390px;
  margin:24px 0 0}

.hero-primary-actions{display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:24px;
  margin-top:40px}

.hero-primary-button,.hero-secondary-button{display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:48px;
  font-size:13px;
  font-weight:600;
  border-radius:999px;
  color:#fff}

.hero-primary-button{padding:13px 23px;
  background:#0c1b45;
  box-shadow:0 7px 18px #06133132;
  border:1px solid #ffffff10}

.hero-primary-button:hover{background:#07132f}

.hero-secondary-button{padding:10px 0;
  background:none;
  color:#e8f2ff}

.hero-primary-actions svg{width:17px;
  height:17px}

.hero-secondary-button:hover{color:#fff;
  text-decoration:underline;
  text-underline-offset:5px}

#main>.connection-hero .studio-hero-note{font-size:10px;
  color:#bad4fa;
  margin-top:25px;
  gap:22px}

#main>.connection-hero .studio-hero-note span:before{color:#c4dfff}

#main>.connection-hero .business-visual{grid-column:2;
  grid-row:1;
  width:100%;
  margin:0;
  padding:0;
  align-self:center}

#main>.connection-hero .studio-art{height:clamp(400px,38vw,520px);
  min-width:0;
  aspect-ratio:auto;
  background:none;
  border:0;
  border-radius:0;
  overflow:hidden;
  box-shadow:none}

#main>.connection-hero .studio-poster{width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  mix-blend-mode:normal;
  border-radius:0;
  filter:drop-shadow(0 18px 25px #061b4933)}

#main>.connection-hero .business-visual figcaption{margin:0;
  padding:7px 10px 0;
  border:0;
  color:#d5e7ff;
  min-height:38px}

#main>.connection-hero .studio-caption{font-size:10px;
  color:#b7d4ff}

#main>.connection-hero #studio-open{font-size:11px;
  color:#edf5ff;
  gap:10px}

#main>.connection-hero #studio-open span{border-color:#badbff70}

#main>.connection-hero #studio-controls{color:#d6eaff}

#main>.connection-hero #studio-controls button{background:#102752;
  color:#fff;
  border-color:#ffffff25}

body:has(.connection-hero) .landing-body{max-width:none;
  margin:0;
  padding:32px max(30px,calc((100vw - 1284px)/2)) 0;
  background:var(--bg);
  color:var(--ink)}

.landing-body>.landing-search{max-width:1284px;
  margin:0 auto;
  padding:14px 18px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface);
  box-shadow:none;
  text-align:right}

.landing-body>.landing-search form{display:flex;
  flex-direction:row;
  align-items:center;
  gap:24px}

.landing-body>.landing-search .search-modes{width:290px;
  flex-shrink:0}

.landing-body>.landing-search .search-modes label{margin:0}

.landing-body>.landing-search .search-entry{flex:1;
  min-width:0;
  background:var(--bg);
  border-radius:9px;
  border:1px solid var(--line)}

.landing-body>.landing-search .search-entry .primary{background:#2563eb;
  color:#fff;
  border-radius:7px}

.landing-body>.hero-glass-dock{margin:0 auto;
  max-width:1284px;
  padding-block:24px}

body:has(.connection-hero) footer{background:var(--bg);
  max-width:none;
  padding-inline:max(30px,calc((100vw - 1284px)/2))}

@media(min-width:1500px){#main>.connection-hero{padding-top:32px;
  padding-bottom:52px}
}

@media(max-width:1100px) and (min-width:801px){body:has(.connection-hero) .header-inner{padding-inline:32px}
#main>.connection-hero{padding:24px 32px 36px;
  gap:20px;
  min-height:480px}
#main>.connection-hero .connection-copy h1{font-size:46px}
#main>.connection-hero .connection-copy>p{font-size:14px}
#main>.connection-hero .studio-art{height:410px}
.hero-primary-actions{gap:17px;
  margin-top:30px}
.hero-primary-button,.hero-secondary-button{font-size:12px}
.hero-primary-button{padding-inline:18px}
}

@media(max-width:800px){body:has(.connection-hero) .site-header{width:100%;
  margin-top:0;
  border-radius:0}
body:has(.connection-hero) .header-inner{height:70px;
  padding-inline:19px}
body:has(.connection-hero) #main-nav{background:#143477;
  border-color:#ffffff24}
#main>.connection-hero{width:100%;
  margin-bottom:0;
  min-height:0;
  grid-template-columns:minmax(0,1fr);
  padding:30px 24px 24px;
  gap:18px;
  border-radius:0;
  background-image:linear-gradient(90deg,#326ed5,#2352b4 42%,#142e78)}
#main>.connection-hero .hero-content{grid-column:1;
  grid-row:1;
  padding:0}
#main>.connection-hero .connection-copy{max-width:550px;
  margin:auto}
#main>.connection-hero .hero-pill{font-size:10px;
  margin-bottom:19px}
#main>.connection-hero .connection-copy h1{font-size:clamp(39px,7vw,54px)}
#main>.connection-hero .connection-copy>p{font-size:14px;
  margin-top:20px;
  max-width:440px}
.hero-primary-actions{margin-top:27px;
  gap:18px}
.hero-primary-button,.hero-secondary-button{font-size:12px}
.hero-primary-button{padding-inline:18px}
#main>.connection-hero .studio-hero-note{font-size:9px;
  gap:15px;
  margin-top:20px}
#main>.connection-hero .business-visual{grid-column:1;
  grid-row:2;
  max-width:580px;
  margin:0 auto}
#main>.connection-hero .studio-art{height:clamp(310px,89vw,480px)}
#main>.connection-hero .business-visual figcaption{padding-inline:0}
#main>.connection-hero .studio-caption{font-size:9px}
#main>.connection-hero #studio-open{font-size:10px}
.landing-body>.landing-search form{flex-direction:column;
  align-items:stretch;
  gap:8px}
.landing-body>.landing-search .search-modes{width:100%}
.landing-body>.landing-search .search-entry{width:100%}
body:has(.connection-hero) .landing-body{padding:22px 20px 0}
}

@media(max-width:380px){body:has(.connection-hero) .header-inner{padding-inline:12px}
body:has(.connection-hero) #account .primary{padding-inline:10px;
  font-size:10px}
#main>.connection-hero{padding-inline:18px}
#main>.connection-hero .connection-copy h1{font-size:36px}
.hero-primary-actions{gap:12px}
.hero-primary-button{padding-inline:14px}
.hero-primary-button,.hero-secondary-button{font-size:11px}
#main>.connection-hero .studio-art{height:300px}
#main>.connection-hero .studio-caption{font-size:8px}
}


/* Blue tone throughout the existing marketplace screens. */
:root{--bg:#f4f7fd;
  --surface:#fff;
  --ink:#14284c;
  --muted:#586c8d;
  --line:#dce6f5;
  --green:#2563eb;
  --hover:#194fc4;
  --soft:#e8f0ff;
  --coral:#2563eb;
  --hero:#2352b4;
  --input:#fff}

:root[data-theme=dark]{--bg:#0c1830;
  --surface:#142442;
  --ink:#edf4ff;
  --muted:#aec5e8;
  --line:#2b4267;
  --green:#8ebcff;
  --hover:#bbd6ff;
  --soft:#1d3459;
  --coral:#8ebcff;
  --input:#11203b}

.brand span{color:#2563eb}
.hosting-banner{background:#153b82}
.hosting-banner p,.hosting-banner .eyebrow{color:#d2e4ff}
.light-button{background:#e2edff;
  color:#19478a}
.job-card:hover{border-color:#88b1ef}
.eyebrow i{background:#4384e9}
:focus-visible{outline-color:#488cff}

.connection-categories .category-glyph{color:#2563eb;
  background:#e3edff}
.connection-hero .hero-specialties a{color:#cde2ff}



/* Authoritative color pairs. Backgrounds and their text travel together. */
:root{--bg:#f4f7fd;
  --surface:#fff;
  --ink:#14284c;
  --muted:#516584;
  --line:#d4e0f2;
  --green:#245cda;
  --hover:#1849b1;
  --soft:#e7efff;
  --coral:#245cda;
  --hero:#eaf1fc;
  --input:#fff;
  --banner:#204b9f;
  --on-banner:#fff;
  --on-banner-muted:#e0ecff}

:root[data-theme=dark]{--bg:#0c1830;
  --surface:#142442;
  --ink:#edf4ff;
  --muted:#b5cae9;
  --line:#36517b;
  --green:#9ac4ff;
  --hover:#bddaff;
  --soft:#1d3459;
  --coral:#9ac4ff;
  --hero:#192f51;
  --input:#11203b;
  --banner:#163e89;
  --on-banner:#fff;
  --on-banner-muted:#e0ecff}

.launch-opportunity{background:var(--banner);
  border-color:var(--banner);
  color:var(--on-banner)}

.launch-opportunity h3{color:var(--on-banner)}

.launch-opportunity p{color:var(--on-banner-muted)}

.launch-opportunity .primary{background:#fff;
  color:#16418f;
  box-shadow:none}

.launch-opportunity .primary:hover{background:#dceaff;
  color:#123674}

.launch-icon{background:#fff;
  color:#245cda}

.app-banner,.hosting-banner{color:#fff}

.app-banner h2,.hosting-banner h2{color:#fff}

.app-banner p,.app-banner small,.hosting-banner p,.hosting-banner .eyebrow{color:#e0ecff}

input::placeholder,textarea::placeholder{color:var(--muted);
  opacity:1}

:root[data-theme=dark] .brand span{color:#9ac4ff}

.category-glyph,.dock-icon{color:var(--green)}

/* Small copy also stays legible at the lightest gradient stop. */
#main>.connection-hero .hero-pill,
#main>.connection-hero .connection-copy>p,
#main>.connection-hero .hero-secondary-button,
#main>.connection-hero .studio-hero-note,
#main>.connection-hero .studio-caption,
#main>.connection-hero #studio-open,
body:has(.connection-hero) .site-header #main-nav>a {color:#fff}
#main>.connection-hero .hero-pill,
#main>.connection-hero .studio-hero-note,
#main>.connection-hero .studio-caption,
#main>.connection-hero #studio-open {font-size:12px}
.app-banner .app-kicker,.app-banner p,.app-banner small {color:#fff}
.app-banner .phone-card,.app-banner .phone-card strong {color:#14284c}
.app-banner .phone-card small,.phone-search {color:#516584}
.phone-community {color:#315c9a}
.app-banner .android-download {display:inline-flex;align-items:center;gap:10px;margin-inline-start:0;background:#fff;color:#16418f;font-size:14px}
.app-banner .android-download:hover {background:#dceaff;color:#123674}
.app-banner .web-install-link {display:block;min-height:44px;margin-top:12px;padding:6px 0;border:0;background:transparent;color:#fff;font-size:12px;text-align:start;text-decoration:underline;text-underline-offset:4px}
.app-banner small {font-size:12px}

/* The footer and the mobile navigation each paint an opaque background. */
footer,body:has(.connection-hero) footer {
  background:#10244a;
  color:#edf4ff;
  border-color:#2c4268;
}
.footer-main p,.footer-bottom {color:#c2d4f0}
.footer-main .brand,.footer-main a,.footer-main button,.footer-bottom a {color:#edf4ff}
.footer-main .brand span {color:#9dc8ff}
.footer-bottom {border-top-color:#3b5279}
body:has(.connection-hero) .site-header #main-nav>a.active {
  color:#fff;
  box-shadow:inset 0 -3px #d3e8ff;
}
@media(max-width:800px) {
  body {padding-bottom:calc(65px + env(safe-area-inset-bottom,0px))}
  .mobile-dock {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:stretch;
    gap:0;
    inset-inline:0;
    bottom:0;
    padding:0 0 env(safe-area-inset-bottom,0px);
    background:#fff;
    color:#526480;
    border-top:1px solid #ccd9ee;
    box-shadow:0 -4px 18px #10244a12;
    isolation:isolate;
  }
  .mobile-dock a {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:64px;
    min-width:0;
    margin:0;
    padding:9px 3px 10px;
    gap:4px;
    background:transparent;
    color:#526480;
    border:0;
    border-radius:0;
    box-shadow:none;
    font-size:12px;
    line-height:1.25;
  }
  .mobile-dock a.active {
    background:#edf3ff;
    color:#1c54cf;
    box-shadow:none;
  }
  .mobile-dock a.active::after {
    content:'';
    position:absolute;
    inset-inline:0;
    bottom:0;
    height:3px;
    background:#1c54cf;
  }
  :root[data-theme=dark] .mobile-dock {background:#122442;color:#c2d4f0;border-color:#36517b}
  :root[data-theme=dark] .mobile-dock a {color:#c2d4f0}
  :root[data-theme=dark] .mobile-dock a.active {background:#1c3862;color:#a7ceff}
  :root[data-theme=dark] .mobile-dock a.active::after {background:#a7ceff}
}


/* Shared, lightweight illustrations: one image per scene, reused across cards. */
.card-art {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:640 / 426;
  object-fit:cover;
  background:#eaf2ff;
  border-radius:12px;
}
.landing-body>.hero-glass-dock {
  gap:18px;
  border:0;
  padding-block:24px;
}
.hero-glass-dock>a,.hero-glass-dock>button,.hero-glass-dock>:first-child {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  padding:0;
  gap:0;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  color:var(--ink);
  overflow:hidden;
  text-align:start;
}
.hero-glass-dock .card-art {border-radius:0}
.hero-glass-dock .dock-copy {padding:20px;gap:8px}
.hero-glass-dock .dock-copy strong {font-size:20px;line-height:1.4}
.hero-glass-dock .dock-copy small {font-size:16px;line-height:1.6}
.hero-glass-dock>a:hover,.hero-glass-dock>button:hover {border-color:var(--green)}
.connection-categories {grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.connection-categories>a {
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:0;
  padding:0;
  overflow:hidden;
  white-space:normal;
}
.connection-categories .card-art {border-radius:0}
.connection-categories>a>.category-copy {
  display:block;
  padding:20px;
  color:var(--ink);
}
.connection-categories h3 {font-size:20px;line-height:1.4;margin:0 0 8px}
.category-copy>span {font-size:16px;color:var(--muted)}
.launch-opportunity>.card-art {width:180px;flex-shrink:0}
.launch-opportunity h3 {font-size:23px}
.launch-opportunity p {font-size:16px;line-height:1.7}
.launch-opportunity .primary {font-size:16px}
.illustrated-steps {gap:22px}
.illustrated-steps article {
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
}
.illustrated-steps article>span {position:static;margin:20px 0 12px;font-size:26px}
.illustrated-steps h3 {font-size:21px;line-height:1.4}
.illustrated-steps p {font-size:16px;line-height:1.7;max-width:none}
.community-boards>a {gap:16px}
.community-boards .card-art {width:108px;flex-shrink:0}
.community-boards>a>span {min-width:0}
.community-boards strong {font-size:18px;line-height:1.4}
.community-boards small {font-size:15px;line-height:1.6}
.job-card>.card-art,.talent-card>.card-art,.landing-plan>.card-art,.plan>.card-art {
  margin-bottom:22px;
  flex-shrink:0;
}
.job-card>p,.talent-card>p,.landing-plan>p {font-size:16px;line-height:1.7}
.landing-plan li {font-size:16px}
.landing-plan button {font-size:16px}
.topic-row>.card-art {width:84px;flex-shrink:0}

/* Phone reading sizes and room for Hebrew text. Keep the blue hero edge-to-edge. */
@media(max-width:800px) {
  body {font-size:16px;line-height:1.7}
  #main :is(p,li,label,input,select,textarea,summary) {font-size:16px}
  #main :is(button,.primary,.outline,.light-button,.text-link) {font-size:16px;min-height:48px}
  #main :is(input,select) {min-height:48px}
  #main :is(h3,.dock-copy strong,.community-boards strong,.topic-text strong) {font-size:20px;line-height:1.4}
  #main :is(h2,.section-heading h2,.center-heading h2) {font-size:29px;line-height:1.35;letter-spacing:-.5px}
  #main .page-heading h1 {font-size:34px;line-height:1.3}
  #main :is(small,.eyebrow,.caption,.tag,.byline,.mini-tags,.talent-meta,.skill-tags span,.availability,.steps-note,.plan-label,.pro-ribbon,.plan-disclosure,.pricing-note,.community-free,.community-caption,.hero-pill) {font-size:14px;line-height:1.65}
  #main .section-heading .eyebrow {font-size:14px}
  #main :is(.dock-copy small,.category-copy>span,.community-boards small,.person-headline) {font-size:16px;line-height:1.6}
  #main :is(.landing-plan .price>span,.plan .price>span,.profile-work-types legend) {font-size:14px}
  #main .landing-plan h3 {font-size:27px}
  #main .round-link {font-size:24px;min-width:48px}
  #main .section-heading {flex-wrap:wrap;align-items:flex-start;gap:12px}
  #main .section-heading>div {min-width:0}
  #main .section-heading>a {font-size:16px;max-width:none;text-align:start}
  #main .opportunity-tabs {flex-wrap:wrap;gap:8px}
  #main .opportunity-tabs a {font-size:14px;padding:10px 14px;min-height:44px}
  #main>.connection-hero .connection-copy>p {font-size:18px;line-height:1.8}
  #main>.connection-hero .hero-pill {font-size:14px;line-height:1.7}
  #main>.connection-hero .studio-hero-note {font-size:14px;line-height:1.7;flex-wrap:wrap;gap:8px 16px}
  #main>.connection-hero :is(.studio-caption,#studio-open) {font-size:14px;line-height:1.6}
  #main>.connection-hero .business-visual figcaption {flex-wrap:wrap;gap:12px}
  #main>.connection-hero .hero-primary-actions {flex-wrap:wrap;gap:16px}
  #main>.connection-hero :is(.hero-primary-button,.hero-secondary-button) {font-size:16px;min-height:50px}
  #main .landing-search {padding:16px}
  #main .landing-search .search-modes {gap:8px}
  #main .landing-search .search-modes label {flex:1;min-width:0}
  #main .landing-search .search-modes span {font-size:16px;line-height:1.5;min-height:54px;padding:12px 8px;white-space:normal}
  #main .landing-search .search-modes svg {width:22px;height:22px;flex-shrink:0}
  #main .landing-search .search-entry {gap:4px}
  #main .landing-search .search-entry input {font-size:16px;min-width:0}
  #main .landing-search .search-entry button {font-size:16px;min-height:48px;padding:10px 14px}
  .landing-body>.hero-glass-dock {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .connection-categories {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .launch-opportunity {display:grid;grid-template-columns:1fr;padding:20px;gap:20px}
  .launch-opportunity>.card-art {width:100%;max-width:440px}
  .launch-opportunity>.primary {width:100%;margin:0}
  .illustrated-steps article {padding:18px}
  .illustrated-steps article>span {position:static;margin:18px 0 10px}
  .connection-community {padding:24px 18px}
  .community-boards>a {padding:12px;gap:12px;flex-wrap:wrap}
  .community-boards .card-art {width:100%;max-width:360px}
  .community-boards>a>span {flex:1}
  .community-boards>a>svg {margin-inline-start:0}
  #main .community-free {display:block;margin:12px 0 0}
  #main .app-banner :is(.app-kicker,small,.web-install-link) {font-size:14px}
  #main .app-banner .android-download {font-size:16px}
  .topic-row {flex-wrap:wrap;gap:12px}
  .topic-row>.card-art {width:80px}
  .topic-text {min-width:0;flex:1}
  #main .topic-header {font-size:14px;gap:12px;flex-wrap:wrap}
  #main :is(.forum-sidebar>a,.app-banner a,.landing-bottom>a) {font-size:16px;line-height:1.65}
  #main :is(.form-error,.comparison th,.comparison td,.usage span,.profile-intro strong) {font-size:14px;line-height:1.65}
  footer .footer-main p {font-size:16px}
  body:has(.connection-hero) #account .primary,.site-header #account .primary {font-size:14px;min-height:44px;padding-inline:10px}
  .site-header .header-inner {gap:10px}
  .site-header .header-tools {gap:6px}
  .site-header .brand {font-size:27px}

  footer :is(p,a,button) {font-size:16px;line-height:1.7}
  footer .brand {font-size:30px}
  .footer-bottom {font-size:14px}
  .mobile-dock a {font-size:13px;min-height:68px}
  body {padding-bottom:calc(69px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:600px) {
  body:has(.connection-hero) .landing-body {padding-inline:16px}
  .landing-body>.hero-glass-dock,.connection-categories {grid-template-columns:minmax(0,1fr);gap:14px}
  .hero-glass-dock>a,.hero-glass-dock>button,.hero-glass-dock>:first-child,.connection-categories>a {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(100px,34%);
    align-items:center;
    min-height:136px;
    gap:14px;
    padding:12px;
    border-radius:16px;
  }
  .hero-glass-dock .card-art,.connection-categories .card-art {grid-column:2;grid-row:1;border-radius:10px}
  .hero-glass-dock .dock-copy,.connection-categories>a>span.category-copy {grid-column:1;grid-row:1;padding:0}
  #main .hero-glass-dock .dock-copy strong,#main .connection-categories h3 {font-size:19px}
  .connection-categories h3 {margin-bottom:7px}
  #main .landing-search .search-modes span {gap:7px;font-size:16px}
  #main .landing-search .search-entry {padding:6px}
  #main .landing-search .search-entry .search-glass {display:none}
}

@media(max-width:380px) {
  body:has(.connection-hero) .header-inner,.site-header .header-inner {padding-inline:12px;gap:8px}
  .site-header .brand {font-size:24px}
  .site-header .icon-button {width:32px;height:44px;min-width:32px;border-radius:12px}
  .site-header #account .primary,body:has(.connection-hero) #account .primary {font-size:14px;padding-inline:8px}
}

/* A lighter landing rhythm: keep photography for editorial moments, not navigation. */
.landing-body>.hero-glass-dock {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  padding:18px 0;
  border-block:1px solid var(--line);
}
.hero-glass-dock>a,.hero-glass-dock>button,.hero-glass-dock>:first-child {
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:82px;
  padding:12px 20px;
  border:0;
  border-inline-start:1px solid var(--line);
  border-radius:0;
  background:transparent;
  overflow:visible;
}
.hero-glass-dock>:first-child {border-inline-start:0}
.hero-glass-dock .dock-copy {padding:0;gap:3px}
.hero-glass-dock .dock-copy strong {font-size:17px;line-height:1.35}
.hero-glass-dock .dock-copy small {font-size:14px;line-height:1.5}
.hero-glass-dock .dock-arrow {font-size:20px;transition:translate .2s}
.hero-glass-dock>a:hover,.hero-glass-dock>button:hover {border-color:var(--line);background:var(--soft)}
.hero-glass-dock>a:hover .dock-arrow,.hero-glass-dock>button:hover .dock-arrow {translate:-3px 0}

.connection-categories {grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-block:1px solid var(--line)}
.connection-categories>a {
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  min-height:94px;
  padding:14px 18px;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
  overflow:visible;
}
.connection-categories>a:nth-last-child(-n+3) {border-bottom:0}
.connection-categories>a:hover {transform:none;background:var(--soft);border-color:var(--line)}
.connection-categories .category-glyph {margin:0;width:42px;height:42px;border-radius:12px}
.connection-categories>a>span.category-copy {display:block;padding:0;grid-column:auto;grid-row:auto}
.connection-categories h3 {font-size:18px;line-height:1.35;margin:0 0 2px}
.category-copy>span {font-size:14px;line-height:1.45}
.category-arrow {font-size:20px;color:var(--green)}

.illustrated-steps article {border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;padding:22px 0}
.illustrated-steps article>span {margin:0 0 12px;color:var(--green)}
.community-boards .board-icon {display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:12px;background:#e7efff;color:#245cda}
.community-boards .board-icon svg {width:23px;height:23px}
:root[data-theme=dark] .community-boards .board-icon {background:#1d3459;color:#9ac4ff}

@media(max-width:800px) {
  .landing-body>.hero-glass-dock {grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-glass-dock>a,.hero-glass-dock>button,.hero-glass-dock>:first-child {min-height:92px;padding:14px;border-bottom:1px solid var(--line)}
  .hero-glass-dock>:nth-child(odd) {border-inline-start:0}
  .hero-glass-dock>:nth-last-child(-n+2) {border-bottom:0}
  .connection-categories {grid-template-columns:repeat(2,minmax(0,1fr))}
  .connection-categories>a {min-height:88px;padding:14px 10px;gap:10px}
  .connection-categories>a:nth-last-child(-n+3) {border-bottom:1px solid var(--line)}
  .connection-categories>a:nth-last-child(-n+2) {border-bottom:0}
  .community-boards>a {flex-wrap:nowrap}
}
@media(max-width:600px) {
  .landing-body>.hero-glass-dock {grid-template-columns:minmax(0,1fr)}
  .hero-glass-dock>a,.hero-glass-dock>button,.hero-glass-dock>:first-child {
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    min-height:80px;
    padding:12px 4px;
    border-inline-start:0;
    border-bottom:1px solid var(--line);
    border-radius:0;
  }
  .hero-glass-dock .dock-icon {grid-column:1;grid-row:1}
  .hero-glass-dock .dock-copy {grid-column:2;grid-row:1;padding:0}
  .hero-glass-dock .dock-arrow {grid-column:3;grid-row:1}
  .hero-glass-dock>:nth-last-child(-n+2) {border-bottom:1px solid var(--line)}
  .hero-glass-dock>:last-child {border-bottom:0}
  .connection-categories {grid-template-columns:minmax(0,1fr)}
  .connection-categories>a {
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    min-height:78px;
    padding:11px 4px;
    border-bottom:1px solid var(--line);
    border-radius:0;
  }
  .connection-categories>a:nth-last-child(-n+2) {border-bottom:1px solid var(--line)}
  .connection-categories>a:last-child {border-bottom:0}
  #main .hero-glass-dock .dock-copy strong,#main .connection-categories h3 {font-size:18px}
  #main :is(.hero-glass-dock .dock-copy small,.category-copy>span) {font-size:14px;line-height:1.45}
}

/* Static business photo: complete figures on desktop and phones. */
#main>.connection-hero .studio-art {
  height:clamp(420px,40vw,560px);
  overflow:hidden;
  border-radius:0;
  background:radial-gradient(ellipse at 52% 58%,#89b9f025 0,transparent 70%);
}
#main>.connection-hero .studio-poster {
  position:absolute;
  inset:0;
  z-index:2;
  object-fit:contain;
  filter:none;
}
#main>.connection-hero .business-visual figcaption {
  padding:11px 0 8px;
  gap:12px 20px;
  min-height:46px;
  flex-wrap:wrap;
}
#main>.connection-hero .studio-caption {
  font-size:14px;
  line-height:1.6;
  color:#fff;
  opacity:1;
}
#main>.connection-hero .studio-caption i {background:#b0ddcf;width:7px;height:7px}
@media(max-width:800px) {
  #main>.connection-hero .studio-art {height:clamp(340px,94vw,520px)}
  #main>.connection-hero .business-visual {max-width:600px}
  #main>.connection-hero .business-visual figcaption {gap:10px 14px}
  #main>.connection-hero .connection-copy>p {font-size:16px}
}
@media(max-width:420px) {
  #main>.connection-hero .studio-art {height:350px}
}